jfs-components 0.1.18 → 0.1.23

package/lib/module/components/Card/Card.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
@@ -32,7 +32,10 @@ export function Card({
   children,
   modes = EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Resolve Card Container Tokens
   const backgroundColor = getVariableByName('card/background/color', modes);
@@ -96,22 +99,36 @@ export function Card({
     paddingHorizontal: contentPaddingHorizontal,
     paddingVertical: contentPaddingVertical
   };
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header && /*#__PURE__*/_jsx(View, {
+      style: headerWrapperStyle,
+      children: headerWithModes
+    }), media && /*#__PURE__*/_jsx(View, {
+      style: mediaWrapperStyle,
+      children: mediaWithModes
+    }), /*#__PURE__*/_jsx(View, {
+      style: contentWrapperStyle,
+      children: children
+    })]
+  });
   return /*#__PURE__*/_jsx(CardContext.Provider, {
     value: {
       modes
     },
-    children: /*#__PURE__*/_jsxs(View, {
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    }) : /*#__PURE__*/_jsx(View, {
       style: [containerStyle, style],
-      children: [header && /*#__PURE__*/_jsx(View, {
-        style: headerWrapperStyle,
-        children: headerWithModes
-      }), media && /*#__PURE__*/_jsx(View, {
-        style: mediaWrapperStyle,
-        children: mediaWithModes
-      }), /*#__PURE__*/_jsx(View, {
-        style: contentWrapperStyle,
-        children: children
-      })]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/module/components/CardFeedback/CardFeedback.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +17,10 @@ const CardFeedbackContext = /*#__PURE__*/createContext({});
 export function CardFeedback({
   children,
   modes: propModes,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const modes = {
     'Appearance.System': 'positive',
@@ -46,8 +49,19 @@ export function CardFeedback({
     value: {
       modes
     },
-    children: /*#__PURE__*/_jsx(View, {
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: children
+    }) : /*#__PURE__*/_jsx(View, {
       style: [containerStyle, style],
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

package/lib/module/components/CardInsight/CardInsight.js

@@ -1,14 +1,14 @@
 "use strict";
 
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Badge from '../Badge/Badge';
 import Divider from '../Divider/Divider';
 import Nudge from '../Nudge/Nudge';
 import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * `CardInsight` renders a single insight card composed of:
  *
@@ -28,7 +28,10 @@ function CardInsight({
   footer,
   divider,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
   const radius = getVariableByName('cardInsight/radius', modes) ?? 12;
@@ -101,18 +104,18 @@ function CardInsight({
   };
   const footerNode = renderFooter();
   const showDivider = footerNode !== null && divider !== false && divider !== null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      backgroundColor: background,
-      borderRadius: radius,
-      borderWidth,
-      borderColor,
-      paddingHorizontal,
-      paddingVertical,
-      gap,
-      overflow: 'hidden',
-      alignItems: 'stretch'
-    }, style],
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    borderWidth,
+    borderColor,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    overflow: 'hidden',
+    alignItems: 'stretch'
+  };
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: {
         flexDirection: 'row',
@@ -160,5 +163,23 @@ function CardInsight({
       children: renderSlot()
     }), showDivider ? renderDivider() : null, footerNode]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default CardInsight;

package/lib/module/components/CardProviderInfo/CardProviderInfo.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View } from 'react-native';
+import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import ProductLabel from '../ProductLabel/ProductLabel';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CardProviderInfo displays a product header (ProductLabel) followed by a
  * 2-column grid of children (typically StatItem instances).
@@ -18,7 +18,10 @@ function CardProviderInfo({
   imageSource,
   children,
   modes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5';
   const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5';
@@ -43,8 +46,7 @@ function CardProviderInfo({
   for (let i = 0; i < childArray.length; i += 2) {
     rows.push(childArray.slice(i, i + 2));
   }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ProductLabel, {
       label: label,
       imageSource: imageSource,
@@ -67,5 +69,23 @@ function CardProviderInfo({
       }, i))
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default CardProviderInfo;

package/lib/module/components/CheckboxItem/CheckboxItem.js

@@ -24,13 +24,18 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * ```tsx
  * const [checked, setChecked] = useState(false)
  *
+ * // Recommended: pass the label via the children slot.
  * <CheckboxItem
- *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
  *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
- * />
+ * >
+ *   Fixed deposit • 0245
+ * </CheckboxItem>
+ *
+ * // Still supported (deprecated): the `label` prop.
+ * <CheckboxItem label="Fixed deposit • 0245" />
  * ```
  */
 const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
@@ -38,7 +43,8 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  label = 'Fixed deposit • 0245',
+  children,
+  label,
   control = 'leading',
   endSlot,
   endSlotWidth = 80,
@@ -47,6 +53,16 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
   labelStyle,
   accessibilityLabel
 }, ref) {
+  // Label slot resolution — the `children` slot is the primary API; the legacy
+  // `label` prop is a backward-compatible fallback. Precedence:
+  //   1. `children`, when provided (non-null / non-false).
+  //   2. otherwise the legacy `label` prop, whenever it was passed at all —
+  //      including an explicit `null`/`false`, which (as before) hides the
+  //      label entirely.
+  //   3. otherwise the Figma placeholder, so the default story still renders
+  //      something meaningful.
+  const hasChildren = children != null && children !== false;
+  const slotContent = hasChildren ? children : label !== undefined ? label : 'Fixed deposit • 0245';
   const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
@@ -85,7 +101,7 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight
   };
-  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  const a11yLabel = accessibilityLabel ?? (typeof slotContent === 'string' ? slotContent : undefined);
   const checkboxNode = /*#__PURE__*/_jsx(Checkbox, {
     checked: isChecked,
     disabled: disabled,
@@ -95,17 +111,24 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
       accessibilityLabel: a11yLabel
     } : {})
   });
-  const labelNode = label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/_jsx(Text, {
+
+  // A plain string/number renders with the token-driven label style. Any other
+  // node is treated as custom slot content: it fills the label region and
+  // receives the parent `modes` (so nested design-system components theme
+  // correctly). An explicit null/false hides the label entirely (legacy
+  // behaviour of the `label` prop).
+  const isTextSlot = typeof slotContent === 'string' || typeof slotContent === 'number';
+  const labelNode = slotContent == null || slotContent === false ? null : isTextSlot ? /*#__PURE__*/_jsx(Text, {
     style: [resolvedLabelStyle, labelStyle],
     selectable: false,
-    children: label
+    children: slotContent
   }) : /*#__PURE__*/_jsx(View, {
     style: {
       flex: 1,
       minWidth: 0
     },
-    children: label
-  }) : null;
+    children: cloneChildrenWithModes(slotContent, modes)
+  });
   const endSlotNode = endSlot ? /*#__PURE__*/_jsx(View, {
     style: {
       width: endSlotWidth,

package/lib/module/components/ContentSheet/ContentSheet.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import React, { useContext, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+function resolveContentSheetStyle(modes) {
+  const backgroundColor = getVariableByName('contentSheet/bg', modes);
+  const gap = getVariableByName('contentSheet/gap', modes);
+  const paddingHorizontal = getVariableByName('contentSheet/padding/horizontal', modes);
+  const paddingTop = getVariableByName('contentSheet/padding/top', modes);
+  const paddingBottom = getVariableByName('contentSheet/padding/bottom', modes);
+  const radiusTop = getVariableByName('contentSheet/padding/radius/top', modes);
+  const radiusBottom = getVariableByName('contentSheet/padding/radius/bottom', modes);
+  return {
+    container: {
+      backgroundColor,
+      gap,
+      paddingHorizontal,
+      paddingTop,
+      // paddingBottom is applied separately so the safe-area inset can be added.
+      borderTopLeftRadius: radiusTop,
+      borderTopRightRadius: radiusTop,
+      borderBottomLeftRadius: radiusBottom,
+      borderBottomRightRadius: radiusBottom,
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      overflow: 'hidden'
+    },
+    paddingBottom
+  };
+}
+const pinnedStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+
+/**
+ * ContentSheet — a bottom-anchored surface that is essentially one big slot
+ * with padding and rounded top corners, mirroring the Figma "Content Sheet".
+ *
+ * Behaviour highlights:
+ *  - **Auto height (free & automatic).** The sheet never sets an explicit
+ *    height. React Native's layout engine (Yoga) sizes it to its children on
+ *    the native thread, so when the slot content grows or shrinks the sheet
+ *    follows with zero JS measurement and zero extra re-renders — the most
+ *    performant option possible.
+ *  - **Keyboard avoidance** on iOS and Android via `avoidKeyboard` (UI-thread
+ *    `useAnimatedKeyboard`, no re-renders).
+ *  - **Bottom pinned** by default; opt out with `pinToBottom={false}`.
+ *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
+ *    cascaded to all slot children.
+ */
+function ContentSheet({
+  children,
+  modes = EMPTY_MODES,
+  avoidKeyboard = true,
+  keyboardSpacing = 0,
+  safeAreaBottom = true,
+  pinToBottom = true,
+  style,
+  ...rest
+}) {
+  // Read the safe-area inset directly from context (rather than
+  // `useSafeAreaInsets`, which throws when no provider is mounted). This keeps
+  // the sheet usable without a `SafeAreaProvider` — it simply falls back to 0.
+  const safeAreaInsets = useContext(SafeAreaInsetsContext);
+  const bottomInset = safeAreaInsets?.bottom ?? 0;
+  const resolved = useMemo(() => resolveContentSheetStyle(modes), [modes]);
+  const processedChildren = useMemo(() => cloneChildrenWithModes(flattenChildren(children), modes), [children, modes]);
+  const paddingBottom = resolved.paddingBottom + (safeAreaBottom ? bottomInset : 0);
+  const containerStyle = useMemo(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
+    paddingBottom
+  }, style], [pinToBottom, resolved.container, paddingBottom, style]);
+
+  // Switching between the keyboard-aware and plain implementation is keyed off
+  // `avoidKeyboard` (and platform). Because they are distinct component types,
+  // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
+  // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  if (avoidKeyboard && !IS_WEB) {
+    return /*#__PURE__*/_jsx(KeyboardAwareSheet, {
+      style: containerStyle,
+      spacing: keyboardSpacing,
+      ...rest,
+      children: processedChildren
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyle,
+    ...rest,
+    children: processedChildren
+  });
+}
+/**
+ * Native-only wrapper that lifts the sheet by the live keyboard height. The
+ * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
+ * sheet tracks the keyboard frame-for-frame without any JS work.
+ */
+function KeyboardAwareSheet({
+  style,
+  spacing,
+  children,
+  ...rest
+}) {
+  const keyboard = useAnimatedKeyboard();
+  const keyboardStyle = useAnimatedStyle(() => {
+    const height = keyboard.height.value;
+    return {
+      transform: [{
+        translateY: height > 0 ? -(height + spacing) : 0
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, keyboardStyle],
+    ...rest,
+    children: children
+  });
+}
+export default ContentSheet;

package/lib/module/components/DebitCard/DebitCard.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React from 'react';
-import { View, Text, Image } from 'react-native';
+import { View, Text, Image, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png');
 function DebitCard({
   cardholderName = 'Shruti Shukla',
@@ -17,7 +17,10 @@ function DebitCard({
   bankLogoSlot,
   providerLogoSlot,
   modes: propModes = EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const {
     modes: globalModes
@@ -116,8 +119,7 @@ function DebitCard({
     };
     return cardArtSource;
   }, [cardArtSource]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: headerStyle,
       children: [/*#__PURE__*/_jsxs(View, {
@@ -157,5 +159,23 @@ function DebitCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? `${bankName} ${cardType} ${cardNumber}`,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 export default DebitCard;

package/lib/module/components/HeroSection/HeroSection.js

@@ -0,0 +1,159 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Title from '../Title/Title';
+import InputSearch from '../InputSearch/InputSearch';
+import IconButton from '../IconButton/IconButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The filter button in the design is a tonal "secondary" variant (light-purple
+// fill, purple icon). These modes reproduce `iconButton/background = #dbcfff`
+// and `iconButton/icon/color = #5d00b5`. Applied as defaults so the button
+// matches the Figma design out of the box; consumer-provided `modes` still win.
+const FILTER_BUTTON_MODES = {
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Medium'
+};
+
+// Inside a Hero Section the Title is flush with the section padding — the
+// `title/padding/*` tokens default to 16 but resolve to 0 in the `Page Hero`
+// context (matching the Figma design). Cascaded so the title lines up with the
+// search row instead of getting a double 16px inset.
+const TITLE_MODES = {
+  context7: 'Page Hero'
+};
+/**
+ * HeroSection is a page-level header block: a title (with optional subtitle),
+ * an optional search row (a flexible search input plus a trailing filter
+ * button), and a free-form content slot below.
+ *
+ * All spacing/background values resolve from the `HeroSection / Output` design
+ * token collection via `getVariableByName`. `modes` cascade to every slot and
+ * child component so downstream tokens stay in sync.
+ *
+ * @example
+ * ```tsx
+ * <HeroSection
+ *   title="Transactions"
+ *   subtitle="Last 30 days"
+ *   searchValue={query}
+ *   onSearchChange={setQuery}
+ *   onFilterPress={openFilters}
+ * >
+ *   <TransactionList data={items} />
+ * </HeroSection>
+ * ```
+ */
+function HeroSection({
+  title = 'Page Title',
+  subtitle = 'Subtitle',
+  titleTextAlign = 'Left',
+  showTitle = true,
+  titleSlot,
+  showSearch = true,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Search',
+  searchSlot,
+  showFilter = true,
+  filterIcon = 'ic_filter',
+  onFilterPress,
+  filterAccessibilityLabel = 'Filter',
+  filterSlot,
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const gap = Number(getVariableByName('heroSection/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('heroSection/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('heroSection/padding/vertical', modes));
+  const containerStyle = {
+    backgroundColor: '#ffffff',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%'
+  };
+  const titleContent = useMemo(() => {
+    if (titleSlot !== undefined && titleSlot !== null) {
+      return cloneChildrenWithModes(titleSlot, modes);
+    }
+    if (!showTitle) return null;
+    return /*#__PURE__*/_jsx(Title, {
+      title: title,
+      subtitle: subtitle,
+      textAlign: titleTextAlign,
+      modes: {
+        ...TITLE_MODES,
+        ...modes
+      }
+    });
+  }, [titleSlot, showTitle, title, subtitle, titleTextAlign, modes]);
+  const searchInput = useMemo(() => {
+    if (searchSlot !== undefined && searchSlot !== null) {
+      return cloneChildrenWithModes(searchSlot, modes);
+    }
+    return /*#__PURE__*/_jsx(InputSearch, {
+      supportText: false,
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChangeText: onSearchChange,
+      containerStyle: {
+        flex: 1
+      },
+      modes: modes
+    });
+  }, [searchSlot, searchPlaceholder, searchValue, onSearchChange, modes]);
+  const filterControl = useMemo(() => {
+    if (filterSlot !== undefined && filterSlot !== null) {
+      return cloneChildrenWithModes(filterSlot, modes);
+    }
+    if (!showFilter) return null;
+    return /*#__PURE__*/_jsx(IconButton, {
+      iconName: filterIcon,
+      onPress: onFilterPress,
+      accessibilityLabel: filterAccessibilityLabel,
+      modes: {
+        ...FILTER_BUTTON_MODES,
+        ...modes
+      }
+    });
+  }, [filterSlot, showFilter, filterIcon, onFilterPress, filterAccessibilityLabel, modes]);
+  const searchRow = searchSlot !== undefined && searchSlot !== null ? true : showSearch;
+  const bodyContent = useMemo(() => {
+    if (children === undefined || children === null) return null;
+    return cloneChildrenWithModes(children, modes);
+  }, [children, modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [titleContent, searchRow ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        width: '100%'
+      },
+      children: [searchInput, filterControl]
+    }) : null, bodyContent != null ? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%'
+      },
+      children: bodyContent
+    }) : null]
+  });
+}
+export default HeroSection;