jfs-components 0.0.45 → 0.0.48

package/lib/module/index.js

@@ -3,4 +3,5 @@
 export * from './components';
 export * as Icons from './icons';
 export * from './design-tokens';
-export * from './Containers';
+export * from './Containers';
+export * from './utils';

package/lib/module/utils/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { cloneChildrenWithModes, flattenChildren } from './react-utils';

package/lib/typescript/src/components/ChipSelect/ChipSelect.d.ts

@@ -16,11 +16,6 @@ export type ChipSelectProps = {
      * @default "ic_calendar_week"
      */
     icon?: string;
-    /**
-     * Whether to show the close icon in Active state (when active is true).
-     * @default true
-     */
-    close?: boolean;
     /**
      * Modes for design token resolution.
      */
@@ -42,6 +37,6 @@ export type ChipSelectProps = {
  * ChipSelect component for selecting options (e.g. Date selection).
  * Based on Figma Node 1901-4727.
  */
-declare function ChipSelect({ label, active, icon, close, modes, style, labelSlot, onPress, }: ChipSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function ChipSelect({ label, active, icon, modes, style, labelSlot, onPress, }: ChipSelectProps): import("react/jsx-runtime").JSX.Element;
 export default ChipSelect;
 //# sourceMappingURL=ChipSelect.d.ts.map

package/lib/typescript/src/components/LinearMeter/LinearMeter.d.ts

@@ -5,7 +5,7 @@ type LinearMeterLabelProps = {
     modes?: Record<string, any>;
     style?: StyleProp<TextStyle>;
 } & React.ComponentProps<typeof Text>;
-type LinearMeterProps = {
+export type LinearMeterProps = {
     value?: number;
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/src/components/Nudge/Nudge.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type NudgeProps = {
+    /**
+     * Controls the layout variant.
+     * - "Default": horizontal layout with optional start icon and content (title/body/button or children slot)
+     * - "Variant2": vertical layout with header (icon + title) and children slot below
+     */
+    variant?: 'Default' | 'Variant2';
+    /** Title text displayed in the nudge */
+    title?: string;
+    /** Body text displayed below the title (Default variant only, when no children are provided) */
+    body?: string;
+    /** Label for the default button (Default variant only, when no children are provided) */
+    buttonLabel?: string;
+    /** Callback for the default button press */
+    onPressButton?: () => void;
+    /** Custom button slot (Default variant only, overrides buttonLabel/onPressButton) */
+    buttonSlot?: React.ReactNode;
+    /** Optional leading slot for an icon/element. Pass null or omit to hide. */
+    startSlot?: React.ReactNode;
+    /** Content slot — overrides the default title/body/button content */
+    children?: React.ReactNode;
+    /** Mode configuration for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+};
+declare function Nudge({ variant, title, body, buttonLabel, onPressButton, buttonSlot, startSlot, children, modes: propModes, style, }: NudgeProps): import("react/jsx-runtime").JSX.Element;
+export default Nudge;
+//# sourceMappingURL=Nudge.d.ts.map

package/lib/typescript/src/components/PaymentFeedback/PaymentFeedback.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+export type PaymentFeedbackProps = {
+    /** Large heading text, typically a monetary value (e.g. "₹50,000") */
+    title?: string;
+    /** Status line below the title (e.g. "Payment successful") */
+    subtitle?: string;
+    /** Descriptive body text below the subtitle */
+    body?: string;
+    /** Transaction metadata shown at the bottom (e.g. date, transaction ID). Supports newlines. */
+    details?: string;
+    /** Whether to render the details section */
+    showDetails?: boolean;
+    /** Icon name used in the default IconCapsule media slot */
+    iconName?: string;
+    /** Optional custom media slot that replaces the default IconCapsule */
+    renderMedia?: ReactNode;
+    /** Mode configuration for design tokens */
+    modes?: Record<string, any>;
+    style?: ViewStyle;
+};
+export default function PaymentFeedback({ title, subtitle, body, details, showDetails, iconName, renderMedia, modes: propModes, style, }: PaymentFeedbackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaymentFeedback.d.ts.map

package/lib/typescript/src/components/RechargeCard/RechargeCard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
-type RechargeCardProps = {
+export type RechargeCardProps = {
     /**
      * Title of the card.
      * Default: "Unlimited 5G"
@@ -47,5 +47,4 @@ type RechargeCardProps = {
  * Displays a recharge plan with price, validity, data, and subscription details.
  */
 export default function RechargeCard({ title, price, validity, data, disclaimer, subscriptionContent, actions, modes, style, }: RechargeCardProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=RechargeCard.d.ts.map

package/lib/typescript/src/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type SegmentedControlItem = {
+    key: React.Key;
+    label: string;
+};
+export type SegmentedControlProps = {
+    /** The items to display as segments */
+    items: SegmentedControlItem[];
+    /** The currently selected key (controlled) */
+    selectedKey?: React.Key;
+    /** The initially selected key (uncontrolled). Defaults to the first item's key. */
+    defaultSelectedKey?: React.Key;
+    /** Callback fired when the selected segment changes */
+    onSelectionChange?: (key: React.Key) => void;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * SegmentedControl component backed by Figma design tokens.
+ *
+ * Provides a horizontal row of mutually exclusive segments.
+ * Supports controlled (`selectedKey` + `onSelectionChange`) and
+ * uncontrolled (`defaultSelectedKey`) usage patterns.
+ *
+ * @component
+ * @param {SegmentedControlProps} props
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<React.Key>('daily');
+ *
+ * <SegmentedControl
+ *   items={[
+ *     { key: 'daily', label: 'Daily' },
+ *     { key: 'weekly', label: 'Weekly' },
+ *     { key: 'monthly', label: 'Monthly' },
+ *   ]}
+ *   selectedKey={selected}
+ *   onSelectionChange={setSelected}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+declare function SegmentedControl({ items, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, modes, style, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/lib/typescript/src/components/SupportText/SupportText.d.ts

@@ -7,7 +7,7 @@ export type SupportTextProps = {
      */
     label?: string;
     /**
-     * Status of the support text (Neutral, Warning, Error, Success)
+     * Status of the support text (Neutral, Warning, Error, Success, Loading)
      */
     status?: SupportTextStatus;
     /**

package/lib/typescript/src/components/SupportText/SupportTextIcon.d.ts

@@ -1,5 +1,5 @@
 import { type ViewStyle } from 'react-native';
-export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success';
+export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 export type SupportTextIconProps = {
     status?: SupportTextStatus;
     modes?: Record<string, any>;

package/lib/typescript/src/components/Text/Text.d.ts

@@ -2,6 +2,8 @@ import { type TextStyle, type StyleProp } from 'react-native';
 export type TextProps = {
     /** The text content to display. */
     text?: string;
+    /** Horizontal alignment of the text. */
+    textAlign?: 'Left' | 'Center';
     /** Modes configuration for design token resolution. */
     modes?: Record<string, any>;
     /** Style override for the text. */
@@ -9,6 +11,6 @@ export type TextProps = {
     /** Number of lines to limit the text to. */
     numberOfLines?: number;
 };
-declare function Text({ text, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ text, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

package/lib/typescript/src/components/Title/Title.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type TitleProps = {
+    title?: string;
+    /** Optional subtitle displayed below the title. */
+    subtitle?: string;
+    /** Horizontal alignment of the title text. */
+    textAlign?: 'Left' | 'Center';
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    /** Optional style overrides for the subtitle text. */
+    subtitleStyle?: StyleProp<TextStyle>;
+    numberOfLines?: number;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export default Title;
+//# sourceMappingURL=Title.d.ts.map

package/lib/typescript/src/components/UpiHandle/UpiHandle.d.ts

@@ -9,6 +9,7 @@ type UpiHandleProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
     onPress?: () => void;
+    onClick?: () => void;
     disabled?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 /**
@@ -29,9 +30,10 @@ type UpiHandleProps = {
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
  * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
+ * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, disabled, accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, onClick, disabled, accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
 export default UpiHandle;
 //# sourceMappingURL=UpiHandle.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -7,8 +7,10 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
+export { default as Carousel } from './Carousel/Carousel';
+export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
-export { default as CardFeedback } from './CardFeedback/CardFeedback';
+export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
@@ -16,20 +18,22 @@ export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
-export { default as FormField, type FormFieldProps } from './FormField/FormField';
+export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as LazyList } from './LazyList/LazyList';
+export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
-export { default as NoteInput } from './NoteInput/NoteInput';
+export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';
+export { default as Nudge, type NudgeProps } from './Nudge/Nudge';
 export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Numpad/Numpad';
-export { default as PageTitle } from './PageTitle/PageTitle';
+export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Stepper } from './Stepper/Stepper';
@@ -53,8 +57,9 @@ export { default as CardProviderInfo, type CardProviderInfoProps } from './CardP
 export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect';
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
-export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
+export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
+export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 export { default as Tabs, type TabsProps } from './Tabs/Tabs';
 export { default as TabItem, type TabItemProps } from './Tabs/TabItem';
 export { default as Toast, type ToastProps } from './Toast/Toast';
@@ -63,9 +68,12 @@ export { useToast, addToast, closeToast, closeAll, type ToastOptions, type Toast
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
 export { default as OTP, type OTPProps } from './OTP/OTP';
+export { default as PaymentFeedback, type PaymentFeedbackProps } from './PaymentFeedback/PaymentFeedback';
 export { default as StatItem, type StatItemProps } from './StatItem/StatItem';
 export { default as Text, type TextProps } from './Text/Text';
+export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-03-16T08:36:20.904Z
+ * Generated: 2026-04-01T09:15:07.349Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/index.d.ts

@@ -2,4 +2,5 @@ export * from './components';
 export * as Icons from './icons';
 export * from './design-tokens';
 export * from './Containers';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { cloneChildrenWithModes, flattenChildren } from './react-utils';
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jfs-components",
-  "version": "0.0.45",
+  "version": "0.0.48",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
   "sideEffects": false,

package/src/components/ChipSelect/ChipSelect.tsx

@@ -19,11 +19,6 @@ export type ChipSelectProps = {
      * @default "ic_calendar_week"
      */
     icon?: string;
-    /**
-     * Whether to show the close icon in Active state (when active is true).
-     * @default true
-     */
-    close?: boolean;
     /**
      * Modes for design token resolution.
      */
@@ -50,7 +45,6 @@ function ChipSelect({
     label = 'Date',
     active = false,
     icon = 'ic_calendar_week',
-    close = true,
     modes = {},
     style,
     labelSlot,
@@ -127,8 +121,7 @@ function ChipSelect({
 
             {renderLabel()}
 
-            {/* End/Close Icon (Only when active AND close is true) */}
-            {active && close && (
+            {active && (
                 <Icon name="ic_close" size={iconSize} color={textColor} />
             )}
         </TouchableOpacity>

package/src/components/Drawer/demo.xml

@@ -0,0 +1,18 @@
+<design>
+    <ListItem layout="Horizontal" leadingType="Avatar" navArrow="false" showSupportText="true" start="true" supportText="Support Text" title="Aasa Singh" trailing="true">
+        <Avatar monogram="MS" style="Image"></Avatar>
+        <frame horizontalSizing="FILL" name="text wrap" verticalSizing="HUG">
+            <slot name="supportText">
+                <text name="support text">₹10,000</text>
+            </slot>
+            <text name="Title">Aasa Singh</text>
+        </frame>
+        <frame horizontalSizing="HUG" modes='{"Context":"ListItem"}' name="end wrap" verticalSizing="HUG">
+            <slot name="slot">
+                <Button label="Button">
+                    <text name="Label">Button</text>
+                </Button>
+            </slot>
+        </frame>
+    </ListItem>
+</design>

package/src/components/FormField/FormField.tsx

@@ -115,6 +115,7 @@ function useFormField(props: FormFieldProps) {
     borderWidth: inputBorderSize,
     borderRadius: inputRadius,
     paddingHorizontal: inputPaddingH,
+    paddingVertical: 0,
     gap: inputGap,
   }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap])
 

package/src/components/LinearMeter/LinearMeter.tsx

@@ -37,7 +37,7 @@ const LinearMeterLabel = ({
     )
 }
 
-type LinearMeterProps = {
+export type LinearMeterProps = {
     value?: number // 0 to 1
     modes?: Record<string, any>
     style?: StyleProp<ViewStyle>

package/src/components/NoteInput/NoteInput.tsx

@@ -76,7 +76,7 @@ export default function NoteInput({
         borderColor: borderColor,
         gap: gap as number,
         // Add specific width when editing if requested by Figma design logic, though flex fits content generically
-        alignSelf: 'flex-start',
+
     }
 
     const baseTextStyle: TextStyle = {

package/src/components/Nudge/Nudge.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+import Button from '../Button/Button'
+
+export type NudgeProps = {
+  /**
+   * Controls the layout variant.
+   * - "Default": horizontal layout with optional start icon and content (title/body/button or children slot)
+   * - "Variant2": vertical layout with header (icon + title) and children slot below
+   */
+  variant?: 'Default' | 'Variant2';
+  /** Title text displayed in the nudge */
+  title?: string;
+  /** Body text displayed below the title (Default variant only, when no children are provided) */
+  body?: string;
+  /** Label for the default button (Default variant only, when no children are provided) */
+  buttonLabel?: string;
+  /** Callback for the default button press */
+  onPressButton?: () => void;
+  /** Custom button slot (Default variant only, overrides buttonLabel/onPressButton) */
+  buttonSlot?: React.ReactNode;
+  /** Optional leading slot for an icon/element. Pass null or omit to hide. */
+  startSlot?: React.ReactNode;
+  /** Content slot — overrides the default title/body/button content */
+  children?: React.ReactNode;
+  /** Mode configuration for design token resolution */
+  modes?: Record<string, any>;
+  /** Optional container style overrides */
+  style?: StyleProp<ViewStyle>;
+};
+
+function Nudge({
+  variant = 'Default',
+  title = 'Split payment',
+  body = 'Split this transaction into installments',
+  buttonLabel = 'Button',
+  onPressButton,
+  buttonSlot,
+  startSlot,
+  children,
+  modes: propModes = {},
+  style,
+}: NudgeProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  const background = getVariableByName('nudge/background', modes) || '#f5f5f5'
+  const radius = getVariableByName('nudge/radius', modes) || 12
+  const paddingH = getVariableByName('nudge/padding/horizontal', modes) || 12
+  const paddingV = getVariableByName('nudge/padding/vertical', modes) || 12
+  const gap = getVariableByName('nudge/gap', modes) || 6
+
+  const titleColor = getVariableByName('nudge/title/color', modes) || '#0d0d0f'
+  const titleFontSize = getVariableByName('nudge/title/fontSize', modes) || 14
+  const titleFontFamily = getVariableByName('nudge/title/fontFamily', modes) || 'JioType Var'
+  const titleLineHeight = getVariableByName('nudge/title/lineHeight', modes) || 15
+  const titleFontWeightRaw = getVariableByName('nudge/title/fontWeight', modes) || 700
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  const bodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f'
+  const bodyFontSize = getVariableByName('nudge/body/fontSize', modes) || 12
+  const bodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'JioType Var'
+  const bodyLineHeight = getVariableByName('nudge/body/lineHeight', modes) || 16
+  const bodyFontWeightRaw = getVariableByName('nudge/body/fontWeight', modes) || 500
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
+
+  const textGap = getVariableByName('nudge/text/gap', modes) || 4
+  const contentGap = getVariableByName('nudge/content/gap', modes) || 8
+  const contentMinHeight = getVariableByName('nudge/content/minHeight', modes) || 20
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    paddingHorizontal: paddingH,
+    paddingVertical: paddingV,
+    gap,
+    overflow: 'hidden',
+    ...(variant === 'Variant2'
+      ? { flexDirection: 'column', alignItems: 'flex-start' }
+      : { flexDirection: 'row', alignItems: 'flex-start' }),
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight,
+  }
+
+  const bodyStyle: TextStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: bodyFontWeight,
+  }
+
+  const processedStartSlot = startSlot
+    ? cloneChildrenWithModes(React.Children.toArray(startSlot), modes)
+    : null
+
+  const startSlotElement = processedStartSlot && processedStartSlot.length > 0
+    ? (processedStartSlot.length === 1 ? processedStartSlot[0] : processedStartSlot)
+    : null
+
+  if (variant === 'Variant2') {
+    return (
+      <View style={[containerStyle, style]}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, width: '100%' }}>
+          {startSlotElement}
+          <Text style={[titleStyle, { flex: 1 }]}>{title}</Text>
+        </View>
+
+        {children ? (
+          cloneChildrenWithModes(React.Children.toArray(children), modes)
+        ) : null}
+      </View>
+    )
+  }
+
+  const defaultContent = (
+    <View style={{ gap: contentGap, alignItems: 'flex-start', width: '100%' }}>
+      <View style={{ gap: textGap, alignItems: 'flex-start', width: '100%' }}>
+        <Text style={titleStyle}>{title}</Text>
+        <Text style={bodyStyle}>{body}</Text>
+      </View>
+      {buttonSlot
+        ? cloneChildrenWithModes(React.Children.toArray(buttonSlot), modes)
+        : <Button label={buttonLabel} onPress={onPressButton} modes={modes} />}
+    </View>
+  )
+
+  return (
+    <View style={[containerStyle, style]}>
+      {startSlotElement}
+
+      <View style={{ flex: 1, minWidth: 1, minHeight: contentMinHeight, justifyContent: 'center', overflow: 'hidden' }}>
+        {children
+          ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+          : defaultContent}
+      </View>
+    </View>
+  )
+}
+
+export default Nudge