jfs-components 0.1.19 → 0.1.25

package/lib/module/components/CardCTA/CardCTA.js

@@ -225,22 +225,39 @@ function CardCTA({
     zIndex: 1
   };
 
-  // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
-  // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
-  // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
-  // its own padding+IconCapsule width when leftWrap's text is long. Once that
-  // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
-  // the IconCapsule against the inner edge, and the icon ends up visually
-  // touching the body text (the wrapper "appears not to exist"). Web hides
-  // this because browsers honor `min-width: auto` on flex items. Use
-  // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
-  // is sized to its content as a floor and only grows for the design's
-  // 3:2 ratio when extra space is available. leftWrap already absorbs tight
-  // space via `flexShrink: 1` + `minWidth: 0`.
+  // NOTE: rightWrap must implement the design's TRUE `2fr` column.
+  //
+  // History of this style — two Yoga pitfalls pull in opposite directions:
+  //
+  //  1. `flex: 2` (=> flexBasis: 0, flexShrink: 1): on Android, Yoga could
+  //     shrink the wrapper below its padding+IconCapsule width when the left
+  //     text was long, collapsing the padding and gluing the icon to the
+  //     text. Browsers hide this because they honor `min-width: auto`; Yoga
+  //     always treats min-width as 0 unless told otherwise.
+  //  2. The previous workaround, `flexBasis: 'auto'` + `flexGrow: 2`, fixed
+  //     #1 but broke the column ratio: Yoga then sizes the wrapper to its
+  //     content FIRST (icon + padding) and distributes only the leftover
+  //     space 3:2. The icon width gets baked in on top of the 2fr share, so
+  //     the right column ends up much wider than the design's 2fr and the
+  //     body text wraps early with dead space to its right.
+  //
+  // Fundamental fix: keep the genuine fr-unit geometry (`flexBasis: 0`,
+  // grow 3:2, no shrink) and replace Yoga's missing `min-width: auto` with
+  // an explicit computed floor — the resolved IconCapsule size plus the
+  // wrapper's own horizontal padding. The column is exactly 2fr whenever
+  // space allows and can never collapse below its content.
+  const iconCapsuleModes = {
+    ...modes,
+    'IconCapsule / Size': 'M',
+    Emphasis: 'Medium',
+    AppearanceBrand: 'Secondary'
+  };
+  const rightWrapMinWidth = (getVariableByName('iconCapsule/size', iconCapsuleModes) || 0) + (rightPaddingH || 0) * 2;
   const rightWrapStyle = {
     flexGrow: 2,
     flexShrink: 0,
-    flexBasis: 'auto',
+    flexBasis: 0,
+    minWidth: rightWrapMinWidth,
     paddingHorizontal: rightPaddingH,
     paddingVertical: rightPaddingV,
     alignItems: 'flex-end',
@@ -494,19 +511,9 @@ function CardCTA({
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: rightWrapStyle,
-      children: iconSlot ? cloneChildrenWithModes(iconSlot, {
-        ...modes,
-        'IconCapsule / Size': 'M',
-        Emphasis: 'Medium',
-        AppearanceBrand: 'Secondary'
-      }) : /*#__PURE__*/_jsx(IconCapsule, {
+      children: iconSlot ? cloneChildrenWithModes(iconSlot, iconCapsuleModes) : /*#__PURE__*/_jsx(IconCapsule, {
         iconName: iconName,
-        modes: {
-          ...modes,
-          'IconCapsule / Size': 'M',
-          Emphasis: 'Medium',
-          AppearanceBrand: 'Secondary'
-        }
+        modes: iconCapsuleModes
       })
     })]
   });

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/ChipSelect/ChipSelect.js

@@ -14,6 +14,7 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
+  showCloseIcon = true,
   modes = EMPTY_MODES,
   style,
   labelSlot,
@@ -87,7 +88,7 @@ function ChipSelect({
       name: icon,
       size: iconSize,
       color: textColor
-    }), renderLabel(), active && /*#__PURE__*/_jsx(Icon, {
+    }), renderLabel(), active && showCloseIcon && /*#__PURE__*/_jsx(Icon, {
       name: "ic_close",
       size: iconSize,
       color: textColor

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/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;

package/lib/module/components/Image/Image.js

@@ -2,14 +2,36 @@
 
 import React, { useMemo } from 'react';
 import { Image as RNImage, View } from 'react-native';
+
+/**
+ * iOS URL cache control (maps to RN's `source.cache`, no-op on Android/web):
+ *  - `'default'`        — use the native platform's default caching.
+ *  - `'reload'`         — ignore any cache, always fetch from the network.
+ *  - `'force-cache'`    — use the cached response regardless of age; fetch
+ *                          only if absent.
+ *  - `'only-if-cached'` — use the cache only; never hit the network.
+ */
+
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
-function normalizeSource(imageSource) {
+function normalizeSource(imageSource, cache) {
   if (imageSource == null) return undefined;
-  if (typeof imageSource === 'string') return {
-    uri: imageSource
-  };
+  if (typeof imageSource === 'string') {
+    return cache ? {
+      uri: imageSource,
+      cache
+    } : {
+      uri: imageSource
+    };
+  }
+  // Only remote sources (single object with a `uri`) can carry a cache policy.
+  if (cache && !Array.isArray(imageSource) && typeof imageSource === 'object' && 'uri' in imageSource) {
+    return {
+      ...imageSource,
+      cache
+    };
+  }
   return imageSource;
 }
 
@@ -45,9 +67,12 @@ function Image({
   accessibilityLabel,
   accessibilityElementsHidden,
   importantForAccessibility,
-  loading
+  loading,
+  cache,
+  onLoad,
+  onError
 }) {
-  const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
+  const source = useMemo(() => normalizeSource(imageSource, cache), [imageSource, cache]);
 
   // Explicit { width, height } means a "fill an exact box" layout — typically a
   // full-bleed hero/background where the asset is high-res and sharpness
@@ -104,7 +129,9 @@ function Image({
     resizeMethod: effectiveResizeMethod,
     accessibilityLabel: accessibilityLabel,
     accessibilityElementsHidden: accessibilityElementsHidden,
-    importantForAccessibility: importantForAccessibility
+    importantForAccessibility: importantForAccessibility,
+    onLoad: onLoad,
+    onError: onError
   });
 }
 export default /*#__PURE__*/React.memo(Image);

package/lib/module/components/Link/Link.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import React, { useCallback } from 'react';
+import { Text as RNText } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, resolveTextLayout } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
+const DISABLED_OPACITY = 0.4;
+
+/**
+ * Link — an underlined, pressable text primitive.
+ *
+ * It renders a single React Native `<Text>` (not a `Pressable`), so it flows
+ * inline and can be nested inside {@link TextSegment} exactly like a `Text`
+ * run — the React Native equivalent of an `<a>` inside a `<p>`. Font family,
+ * size, weight, line-height and letter-spacing come from the dedicated `link/*`
+ * tokens, while the colour resolves from `text/foreground` (so a link sits on
+ * the same colour as the surrounding copy). The label is always underlined.
+ *
+ * @example Standalone
+ * ```tsx
+ * <Link text="Forgot PIN?" onPress={() => navigation.navigate('ResetPin')} />
+ * ```
+ *
+ * @example Inline inside TextSegment
+ * ```tsx
+ * <TextSegment>
+ *   <Text>By continuing you agree to our </Text>
+ *   <Link onPress={openTerms}>Terms</Link>
+ *   <Text>.</Text>
+ * </TextSegment>
+ * ```
+ */
+function Link({
+  text,
+  children,
+  onPress,
+  disabled = false,
+  autolayout = 'Fill',
+  textAlign = 'Left',
+  modes = EMPTY_MODES,
+  style,
+  numberOfLines,
+  disableTruncation,
+  singleLine,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  // Bindings mirror the Figma `Link` node exactly: colour from `text/foreground`
+  // (so the link matches the surrounding copy), everything else from the
+  // dedicated `link/*` tokens.
+  const foreground = getVariableByName('text/foreground', modes) ?? '#000000';
+  const fontFamily = getVariableByName('link/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = getVariableByName('link/fontSize', modes) ?? 12;
+  const fontWeight = getVariableByName('link/fontWeight', modes) ?? 400;
+  const lineHeight = getVariableByName('link/lineHeight', modes) ?? 16;
+  const letterSpacing = getVariableByName('link/letterSpacing', modes) ?? -0.5;
+  const linkStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight,
+    letterSpacing: letterSpacing,
+    textAlign: TEXT_ALIGN_MAP[textAlign],
+    textDecorationLine: 'underline',
+    alignSelf: autolayout === 'Fill' ? 'stretch' : 'flex-start',
+    ...(disabled ? {
+      opacity: DISABLED_OPACITY
+    } : null)
+  };
+  const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Link';
+  const handlePress = useCallback(event => {
+    if (disabled) return;
+    onPress?.(event);
+  }, [disabled, onPress]);
+  const {
+    style: layoutStyle,
+    ...truncation
+  } = resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
+  const resolvedLabel = accessibilityLabel ?? (typeof content === 'string' ? content : undefined);
+  return /*#__PURE__*/_jsx(RNText, {
+    accessibilityRole: "link",
+    accessibilityState: {
+      disabled
+    },
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : null),
+    ...(onPress !== undefined ? {
+      onPress: handlePress
+    } : null),
+    disabled: disabled,
+    style: [linkStyle, style, layoutStyle],
+    ...truncation,
+    children: content
+  });
+}
+export default /*#__PURE__*/React.memo(Link);