jfs-components 0.0.73 → 0.0.74

package/lib/commonjs/components/LottieIntroBlock/LottieIntroBlock.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+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); }
+const DEFAULT_MEDIA_SIZE = 117;
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+function LottieIntroBlock({
+  title = "Let's get to know how your financial health is doing",
+  showSupportText = true,
+  supportText = 'From assets to taxes, stay on top of everything in one simple view.',
+  showButton = true,
+  buttonLabel = 'Button',
+  onButtonPress,
+  media,
+  buttonSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // Container
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/gap', modes)) || 36;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/horizontal', modes)) || 0;
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/padding/vertical', modes)) || 16;
+
+  // Text wrap
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/textWrap/gap', modes)) || 16;
+
+  // Title
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontSize', modes)) || 23;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/lineHeight', modes)) || 23;
+  const titleFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/title/fontWeight', modes) || 900;
+
+  // Support text
+  const supportColor = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/foreground', modes) || '#0d0d0f';
+  const supportFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontSize', modes)) || 14;
+  const supportFontFamily = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontFamily', modes) || 'System';
+  const supportLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
+  const supportFontWeight = (0, _figmaVariablesResolver.getVariableByName)('lottieIntroBlock/supportText/fontWeight', modes) || 400;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const supportTextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    fontFamily: supportFontFamily,
+    lineHeight: supportLineHeight,
+    fontWeight: String(supportFontWeight),
+    textAlign: 'center'
+  };
+  const mediaContent = (0, _react.useMemo)(() => {
+    if (media === undefined || media === null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: DEFAULT_MEDIA_SIZE,
+          height: DEFAULT_MEDIA_SIZE
+        },
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants"
+      });
+    }
+    return (0, _reactUtils.cloneChildrenWithModes)(media, modes);
+  }, [media, modes]);
+  const buttonContent = (0, _react.useMemo)(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes
+    });
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textWrapStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        children: title
+      }), showSupportText && supportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: supportTextStyle,
+        children: supportText
+      }) : null, buttonContent]
+    })]
+  });
+}
+var _default = exports.default = LottieIntroBlock;

package/lib/commonjs/components/PageHero/PageHero.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+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); }
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an eyebrow line, a large headline, an optional
+ * supporting line (e.g. price/timeline), and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. The button slot cascades the active `modes` to its
+ * children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ * />
+ * ```
+ */
+function PageHero({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Resume earning cashback, extra points, and 1% gold',
+  supportingText = '₹999/year · ₹0 until 2027',
+  showSupportingText = true,
+  buttonLabel = 'Renew for free',
+  onButtonPress,
+  showButton = true,
+  buttonSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes)) || 16;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes)) || 0;
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes)) || 8;
+  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes) || '#ffffff';
+  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes) || 'System';
+  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)) || 18;
+  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes) || 700;
+  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)) || 20;
+  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes) || '#ffffff';
+  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes) || 'System';
+  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)) || 29;
+  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes) || 900;
+  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)) || 29;
+
+  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
+  // Color, font size and weight are inline literals in the design (12px medium
+  // white) — we mirror that here so the visual stays faithful when no token
+  // exists.
+  const supportingTextLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)) || 16;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+    width: '100%'
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const eyebrowStyle = {
+    color: eyebrowColor,
+    fontFamily: eyebrowFontFamily,
+    fontSize: eyebrowFontSize,
+    fontWeight: String(eyebrowFontWeight),
+    lineHeight: eyebrowLineHeight,
+    textAlign: 'center'
+  };
+  const headlineStyle = {
+    color: headlineColor,
+    fontFamily: headlineFontFamily,
+    fontSize: headlineFontSize,
+    fontWeight: String(headlineFontWeight),
+    lineHeight: headlineLineHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const supportingTextStyle = {
+    color: '#ffffff',
+    fontFamily: 'System',
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: supportingTextLineHeight,
+    textAlign: 'center'
+  };
+  const buttonWrapStyle = {
+    width: '100%'
+  };
+  const buttonContent = (0, _react.useMemo)(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes,
+      style: buttonWrapStyle
+    });
+    // buttonWrapStyle is a literal object created above; it is intentionally
+    // omitted from deps because its identity changes on every render but its
+    // shape never does.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textWrapStyle,
+      children: [eyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: headlineStyle,
+        children: headline
+      }) : null]
+    }), showSupportingText && supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: supportingTextStyle,
+      children: supportingText
+    }) : null, buttonContent]
+  });
+}
+var _default = exports.default = PageHero;

package/lib/commonjs/components/PoweredByLabel/PoweredByLabel.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MediaSource = _interopRequireDefault(require("../../utils/MediaSource"));
+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); }
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+const DEFAULT_LOGO = require('./finvu.png');
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator';
+const DEFAULT_IMAGE_WIDTH = 33;
+const DEFAULT_IMAGE_HEIGHT = 12;
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+  label = DEFAULT_LABEL,
+  imageSource,
+  imageWidth = DEFAULT_IMAGE_WIDTH,
+  imageHeight = DEFAULT_IMAGE_HEIGHT,
+  imageSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  textStyle,
+  imageStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/background', modes) ?? '#f5f5f5';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/foreground', modes) ?? '#191b1e';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/fontSize', modes), 10);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/lineHeight', modes), 12);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/fontWeight', modes), '400');
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/gap', modes), 10);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/padding/horizontal', modes), 16);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('poweredByLabel/padding/vertical', modes), 6);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: background,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    // Hug content horizontally so the pill does not stretch to fill the
+    // parent (matches Badge, BrandChip, etc.). Override via `style` if
+    // you want it full-width (e.g. inside a card footer).
+    alignSelf: 'flex-start'
+  };
+  const labelTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center',
+    flexShrink: 1
+  };
+  const renderImage = () => {
+    if (imageSlot !== undefined && imageSlot !== null) {
+      const processed = (0, _reactUtils.cloneChildrenWithModes)(imageSlot, modes);
+      if (processed.length === 0) return null;
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    const resolvedSource = imageSource ?? DEFAULT_LOGO;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+      source: resolvedSource,
+      width: imageWidth,
+      height: imageHeight,
+      resizeMode: "contain",
+      style: imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [labelTextStyle, textStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      numberOfLines: 1,
+      children: label
+    }), renderImage()]
+  });
+}
+var _default = exports.default = PoweredByLabel;

package/lib/commonjs/components/Text/Text.js

@@ -15,7 +15,8 @@ const TEXT_ALIGN_MAP = {
   Center: 'center'
 };
 function Text({
-  text = 'Korem ipsum ',
+  text,
+  children,
   textAlign = 'Left',
   modes = _reactUtils.EMPTY_MODES,
   style,
@@ -36,10 +37,16 @@ function Text({
     letterSpacing: letterSpacing,
     textAlign: TEXT_ALIGN_MAP[textAlign]
   };
+
+  // Prefer JSX children when present, otherwise fall back to the `text` prop.
+  // Keep the storybook placeholder as a last resort so the Default story
+  // still renders something visible when no content is supplied via either
+  // route.
+  const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [textStyle, style],
     numberOfLines: numberOfLines,
-    children: text
+    children: content
   });
 }
 var _default = exports.default = Text;

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -172,7 +172,9 @@ function TooltipTrigger({
 }
 function TooltipContent({
   children,
-  sideOffset = 4
+  sideOffset = 4,
+  gap = 4,
+  alignItems = 'flex-start'
 }) {
   const {
     isVisible,
@@ -397,6 +399,35 @@ function TooltipContent({
     paddingHorizontal: paddingH,
     paddingVertical: paddingV
   };
+
+  // Vertical slot wrapper: stack arbitrary children top-to-bottom with a gap.
+  // Raw <Text> children still get auto-styled with the tooltip label tokens
+  // so the simple <TooltipContent><Text>label</Text></TooltipContent> usage
+  // keeps working without any changes.
+  const slotStyle = {
+    flexDirection: 'column',
+    alignItems,
+    gap
+  };
+  const renderSlotChildren = () => {
+    if (typeof children === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: textStyle,
+        children: children
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: slotStyle,
+      children: _react.default.Children.map(children, child => {
+        if (/*#__PURE__*/_react.default.isValidElement(child) && (child.type === _reactNative.Text || child.type.displayName === 'Text')) {
+          return /*#__PURE__*/_react.default.cloneElement(child, {
+            style: [textStyle, child.props.style]
+          });
+        }
+        return child;
+      })
+    });
+  };
   if (!hasMeasured) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
       transparent: true,
@@ -408,19 +439,7 @@ function TooltipContent({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: measureStyle,
           onLayout: e => setContentSize(e.nativeEvent.layout),
-          children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: textStyle,
-            children: children
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            children: _react.default.Children.map(children, child => {
-              if (/*#__PURE__*/_react.default.isValidElement(child) && (child.type === _reactNative.Text || child.type.displayName === 'Text')) {
-                return /*#__PURE__*/_react.default.cloneElement(child, {
-                  style: [textStyle, child.props.style]
-                });
-              }
-              return child;
-            })
-          })
+          children: renderSlotChildren()
         })
       })
     });
@@ -451,19 +470,7 @@ function TooltipContent({
             shadowRadius: 3.84,
             elevation: 5
           }],
-          children: [typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: textStyle,
-            children: children
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            children: _react.default.Children.map(children, child => {
-              if (/*#__PURE__*/_react.default.isValidElement(child) && (child.type === _reactNative.Text || child.type.displayName === 'Text')) {
-                return /*#__PURE__*/_react.default.cloneElement(child, {
-                  style: [textStyle, child.props.style]
-                });
-              }
-              return child;
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: [renderSlotChildren(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: {
               position: 'absolute',
               left: arrowX,