jfs-components 0.0.44 → 0.0.45

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export type AmountInputProps = {
+    /**
+     * Slot for the MoneyValue component.
+     */
+    moneyValueSlot?: React.ReactNode;
+    /**
+     * Slot for the NoteInput component.
+     */
+    noteInputSlot?: React.ReactNode;
+    /** Modes for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style */
+    style?: ViewStyle;
+};
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+export default function AmountInput({ moneyValueSlot, noteInputSlot, modes: propModes, style, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AmountInput.d.ts.map

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

@@ -0,0 +1,3 @@
+export { default } from './AmountInput';
+export type { AmountInputProps } from './AmountInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+export type CardProviderInfoProps = {
+    /** Product name shown in the ProductLabel header. */
+    label?: string;
+    /** Image source for the product avatar. */
+    imageSource?: ImageSourcePropType | string;
+    /** Slot content — typically StatItem components arranged in a 2-column grid. */
+    children?: React.ReactNode;
+    /** Design token modes for theming. */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * CardProviderInfo displays a product header (ProductLabel) followed by a
+ * 2-column grid of children (typically StatItem instances).
+ *
+ * @component
+ * @param {CardProviderInfoProps} props
+ */
+declare function CardProviderInfo({ label, imageSource, children, modes, style, }: CardProviderInfoProps): import("react/jsx-runtime").JSX.Element;
+export default CardProviderInfo;
+//# sourceMappingURL=CardProviderInfo.d.ts.map

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

@@ -11,6 +11,11 @@ export type EmptyStateProps = {
      * @default "Start by paying bills, recharge or your friends"
      */
     description?: string;
+    /**
+     * Whether to show the description text
+     * @default true
+     */
+    showDescription?: boolean;
     /**
      * Custom slot for the icon area. Defaults to IconCapsule.
      * If providing a custom component, ensure it accepts `modes` if needed.
@@ -33,6 +38,6 @@ export type EmptyStateProps = {
  *
  * @component
  */
-declare function EmptyState({ title, description, iconSlot, buttonSlot, modes: propModes, style, testID, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyState({ title, description, showDescription, iconSlot, buttonSlot, modes: propModes, style, testID, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export default EmptyState;
 //# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import { type SupportTextProps } from '../SupportText/SupportText';
+export type OTPProps = {
+    /** Number of OTP digits. Defaults to 6. */
+    length?: number;
+    /** Controlled value of the OTP input. */
+    value?: string;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called when the OTP value changes. Receives the current string of entered digits. */
+    onChange?: (value: string) => void;
+    /** Alias for onChange — called when the OTP value changes. */
+    onValueChange?: (value: string) => void;
+    /** Called when all digits have been entered. Receives the complete OTP string. */
+    onComplete?: (value: string) => void;
+    /** Whether the OTP input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the OTP input is in an invalid/error state. */
+    isInvalid?: boolean;
+    /** Regex pattern to filter allowed characters. Defaults to digits only. */
+    allowedPattern?: RegExp;
+    /** Auto-focus the input on mount. */
+    autoFocus?: boolean;
+    /** Design token modes for Figma token resolution. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Optional SupportText rendered below the slots. Pass a string for the label or a ReactNode for full control. */
+    supportText?: React.ReactNode;
+    /** SupportText status when using the string shorthand. */
+    supportTextStatus?: SupportTextProps['status'];
+};
+declare function OTP({ length, value: controlledValue, defaultValue, onChange, onValueChange, onComplete, isDisabled, isInvalid, allowedPattern, autoFocus, modes: propModes, style, supportText, supportTextStatus, }: OTPProps): import("react/jsx-runtime").JSX.Element;
+export default OTP;
+//# sourceMappingURL=OTP.d.ts.map

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+export type PortfolioHeroProps = {
+    /** Product label text displayed next to the avatar. */
+    label?: string;
+    /** Image source for the product avatar. */
+    imageSource?: ImageSourcePropType | string;
+    /** Monetary value to display. */
+    value?: string;
+    /** Currency symbol or ISO code. */
+    currency?: string;
+    /** Modes configuration mapped to Figma tokens. */
+    modes?: Record<string, any>;
+    /** Slot content rendered below the money value (e.g. Badge, subtitle). */
+    children?: React.ReactNode;
+    /** Container style override. */
+    style?: ViewStyle;
+};
+declare function PortfolioHero({ label, imageSource, value, currency, modes, children, style, }: PortfolioHeroProps): import("react/jsx-runtime").JSX.Element;
+export default PortfolioHero;
+//# sourceMappingURL=PortfolioHero.d.ts.map

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

@@ -0,0 +1,14 @@
+import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+export type ProductLabelProps = {
+    /** The product name label text. */
+    label?: string;
+    /** Image source for the product avatar. */
+    imageSource?: ImageSourcePropType | string;
+    /** Modes configuration for design token resolution. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: ViewStyle;
+};
+declare function ProductLabel({ label, imageSource, modes, style, }: ProductLabelProps): import("react/jsx-runtime").JSX.Element;
+export default ProductLabel;
+//# sourceMappingURL=ProductLabel.d.ts.map

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type ProgressBadgeProps = {
+    /** The text displayed in the badge (e.g. "Live price...") */
+    taskName?: string;
+    /** The icon name to display to the left of the text */
+    iconName?: string;
+    /** The progress value between 0 and 100 */
+    value?: number;
+    /** Modes object passed to `getVariableByName` for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Optional text style overrides */
+    textStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+declare function ProgressBadge({ taskName, iconName, value, modes, style, textStyle: textStyleOverride, accessibilityLabel, ...rest }: ProgressBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default ProgressBadge;
+//# sourceMappingURL=ProgressBadge.d.ts.map

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

@@ -0,0 +1,3 @@
+export { default } from './ProgressBadge';
+export * from './ProgressBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,21 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type StatItemProps = {
+    /** The small descriptive label above the value. */
+    label?: string;
+    /** The large prominent value to display. */
+    value?: string;
+    /** Design token modes for theming. */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+declare function StatItem({ label, value, modes, style, }: StatItemProps): import("react/jsx-runtime").JSX.Element;
+export default StatItem;
+//# sourceMappingURL=StatItem.d.ts.map

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

@@ -0,0 +1,22 @@
+import { type ViewStyle } from 'react-native';
+export type SwappableAmountProps = {
+    /** Large display value (e.g. "49g"). */
+    value?: string;
+    /** Whether to show the schedule button above the value. */
+    schedule?: boolean;
+    /** Label text for the schedule button (e.g. "Weekly on Mondays"). */
+    scheduleLabel?: string;
+    /** Label text for the amount/swap button (e.g. "₹5100"). */
+    amountLabel?: string;
+    /** Callback when the schedule button is pressed. */
+    onSchedulePress?: () => void;
+    /** Callback when the amount/swap button is pressed. */
+    onAmountPress?: () => void;
+    /** Modes configuration for design token resolution. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: ViewStyle;
+};
+declare function SwappableAmount({ value, schedule, scheduleLabel, amountLabel, onSchedulePress, onAmountPress, modes, style, }: SwappableAmountProps): import("react/jsx-runtime").JSX.Element;
+export default SwappableAmount;
+//# sourceMappingURL=SwappableAmount.d.ts.map

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

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

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

@@ -0,0 +1,29 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface ToggleProps {
+    /** Whether the toggle is on (controlled) */
+    value?: boolean;
+    /** Initial value (uncontrolled) */
+    defaultValue?: boolean;
+    /** Callback when the toggle state changes */
+    onValueChange?: (value: boolean) => void;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+}
+/**
+ * Toggle (switch) component that maps directly to the Figma design using design tokens.
+ *
+ * Supports controlled and uncontrolled usage, on/off states, and disabled state.
+ * All styling is driven by design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {ToggleProps} props
+ */
+declare function Toggle({ value: controlledValue, defaultValue, onValueChange, disabled, modes, style, accessibilityLabel, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export default Toggle;
+//# sourceMappingURL=Toggle.d.ts.map

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

@@ -49,6 +49,7 @@ export { default as Accordion, type AccordionProps } from './Accordion/Accordion
 export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
 export { default as Balance, type BalanceProps } from './Balance/Balance';
 export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/ButtonGroup';
+export { default as CardProviderInfo, type CardProviderInfoProps } from './CardProviderInfo/CardProviderInfo';
 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';
@@ -59,4 +60,12 @@ export { default as TabItem, type TabItemProps } from './Tabs/TabItem';
 export { default as Toast, type ToastProps } from './Toast/Toast';
 export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
+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 SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
+export { default as OTP, type OTPProps } from './OTP/OTP';
+export { default as StatItem, type StatItemProps } from './StatItem/StatItem';
+export { default as Text, type TextProps } from './Text/Text';
+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-02-25T22:30:05.664Z
+ * Generated: 2026-03-16T08:36:20.904Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import MoneyValue from '../MoneyValue/MoneyValue'
+import NoteInput from '../NoteInput/NoteInput'
+
+export type AmountInputProps = {
+    /**
+     * Slot for the MoneyValue component.
+     */
+    moneyValueSlot?: React.ReactNode
+    /**
+     * Slot for the NoteInput component.
+     */
+    noteInputSlot?: React.ReactNode
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+}
+
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+export default function AmountInput({
+    moneyValueSlot,
+    noteInputSlot,
+    modes: propModes = {},
+    style,
+}: AmountInputProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    // Resolve tokens
+    const gap = Number(getVariableByName('amountInput/gap', modes)) || 16
+    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0
+    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        ...style,
+    }
+
+    // Handle MoneyValue Slot
+    const renderMoneyValueSlot = () => {
+        if (React.isValidElement(moneyValueSlot)) {
+            return React.cloneElement(moneyValueSlot as React.ReactElement<any>, { modes })
+        }
+        // Default fallback if no slot prop is provided
+        if (!moneyValueSlot) {
+            return <MoneyValue modes={modes} />
+        }
+        return moneyValueSlot
+    }
+
+    // Handle NoteInput Slot
+    const renderNoteInputSlot = () => {
+        if (React.isValidElement(noteInputSlot)) {
+            return React.cloneElement(noteInputSlot as React.ReactElement<any>, { modes })
+        }
+        // Default fallback if no slot prop is provided
+        if (!noteInputSlot) {
+            return <NoteInput modes={modes} />
+        }
+        return noteInputSlot
+    }
+
+    return (
+        <View style={containerStyle}>
+            {renderMoneyValueSlot()}
+            {renderNoteInputSlot()}
+        </View>
+    )
+}

package/src/components/AmountInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AmountInput'
+export type { AmountInputProps } from './AmountInput'

package/src/components/Button/Button.tsx

@@ -100,8 +100,26 @@ function Button({
   const iconColor = getVariableByName('button/icon/color', modes) ?? textColor
   const iconSize = getVariableByName('button/icon/size', modes) ?? 18
 
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
+
+  const hoverModes = { ...modes, "Button / State": "Hover" }
+  const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor
+  const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor
+  const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor
+  const hoverIconColor = getVariableByName('button/icon/color', hoverModes) ?? hoverTextColor
+
+  const pressedModes = { ...modes, "Button / State": "Pressed" }
+  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor
+  const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor
+  const pressedIconColor = getVariableByName('button/icon/color', pressedModes) ?? pressedTextColor
+
+  const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor
+  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor
+
   const baseLabelTextStyle: TextStyle = {
-    color: textColor,
+    color: activeTextColor,
     fontFamily,
     fontWeight,
     fontSize,
@@ -168,12 +186,8 @@ function Button({
     webAccessibilityProps,
   })
 
-  // Interaction states (placeholders for visuals; tweak later)
-  const [isFocused, setIsFocused] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
-  const pressedStyle = { transform: [{ scale: 0.995 }], backgroundColor: '#b88940' }
-  const focusStyle = { borderWidth: 1, borderColor: '#222' }
-  const hoverStyle = { opacity: 0.95 }
+  const hoverStyle = { backgroundColor: hoverBg, borderColor: hoverBorderColor }
+  const pressedStyle = { backgroundColor: pressedBg, borderColor: pressedBorderColor }
 
   if (__DEV__) {
     if (children && labelStyle) {
@@ -203,18 +217,12 @@ function Button({
       disabled={disabled}
       {...(onPress !== undefined ? { onPress } : {})}
       onPressIn={(e: any) => {
-        ; (rest as any)?.onPressIn?.(e)
+        setIsPressed(true)
+        ;(rest as any)?.onPressIn?.(e)
       }}
       onPressOut={(e: any) => {
-        ; (rest as any)?.onPressOut?.(e)
-      }}
-      onFocus={(e: any) => {
-        setIsFocused(true)
-          ; (rest as any)?.onFocus?.(e)
-      }}
-      onBlur={(e: any) => {
-        setIsFocused(false)
-          ; (rest as any)?.onBlur?.(e)
+        setIsPressed(false)
+        ;(rest as any)?.onPressOut?.(e)
       }}
       onHoverIn={(e: any) => {
         setIsHovered(true)
@@ -226,9 +234,8 @@ function Button({
       }}
       style={({ pressed }) => [
         containerBaseStyle,
-        pressed && !disabled ? pressedStyle : null,
         isHovered && !disabled ? hoverStyle : null,
-        isFocused && !disabled ? focusStyle : null,
+        (pressed || isPressed) && !disabled ? pressedStyle : null,
         style,
       ] as StyleProp<ViewStyle>}
       {...webProps}
@@ -241,7 +248,7 @@ function Button({
       {content}
       {icon ? (
         <View style={trailingAccessoryStyle}>
-          <Icon name={icon} size={iconSize as number} color={iconColor as string} accessibilityElementsHidden={true} importantForAccessibility="no" />
+          <Icon name={icon} size={iconSize as number} color={activeIconColor as string} accessibilityElementsHidden={true} importantForAccessibility="no" />
         </View>
       ) : trailing ? (
         <View style={trailingAccessoryStyle}>

package/src/components/CardProviderInfo/CardProviderInfo.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import ProductLabel from '../ProductLabel/ProductLabel'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type CardProviderInfoProps = {
+  /** Product name shown in the ProductLabel header. */
+  label?: string
+  /** Image source for the product avatar. */
+  imageSource?: ImageSourcePropType | string
+  /** Slot content — typically StatItem components arranged in a 2-column grid. */
+  children?: React.ReactNode
+  /** Design token modes for theming. */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * CardProviderInfo displays a product header (ProductLabel) followed by a
+ * 2-column grid of children (typically StatItem instances).
+ *
+ * @component
+ * @param {CardProviderInfoProps} props
+ */
+function CardProviderInfo({
+  label = 'Gold',
+  imageSource,
+  children,
+  modes = {},
+  style,
+}: CardProviderInfoProps) {
+  const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5'
+  const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5'
+  const borderWidthVal = getVariableByName('card/providerInfo/borderWidth', modes) ?? 1
+  const padding = getVariableByName('card/providerInfo/padding', modes) ?? 20
+  const gap = getVariableByName('card/providerInfo/gap', modes) ?? 20
+  const radius = getVariableByName('card/providerInfo/radius', modes) ?? 16
+  const gridGap = getVariableByName('card/providerInfo/grid/gap', modes) ?? 8
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: background as string,
+    borderColor: border as string,
+    borderWidth: borderWidthVal as number,
+    borderStyle: 'solid',
+    padding: padding as number,
+    gap: gap as number,
+    borderRadius: radius as number,
+  }
+
+  const gridGapNum = gridGap as number
+  const clonedChildren = children ? cloneChildrenWithModes(children, modes) : []
+  const childArray = React.Children.toArray(clonedChildren)
+
+  const rows: React.ReactNode[][] = []
+  for (let i = 0; i < childArray.length; i += 2) {
+    rows.push(childArray.slice(i, i + 2))
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      <ProductLabel label={label} imageSource={imageSource} modes={modes} />
+      {childArray.length > 0 && (
+        <View style={{ rowGap: gridGapNum }}>
+          {rows.map((row, i) => (
+            <View key={i} style={{ flexDirection: 'row', columnGap: gridGapNum }}>
+              {row.map((child, j) => (
+                <View key={j} style={{ flex: 1 }}>
+                  {child}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default CardProviderInfo

package/src/components/EmptyState/EmptyState.tsx

@@ -16,6 +16,11 @@ export type EmptyStateProps = {
      * @default "Start by paying bills, recharge or your friends"
      */
     description?: string;
+    /**
+     * Whether to show the description text
+     * @default true
+     */
+    showDescription?: boolean;
     /**
      * Custom slot for the icon area. Defaults to IconCapsule.
      * If providing a custom component, ensure it accepts `modes` if needed.
@@ -42,6 +47,7 @@ export type EmptyStateProps = {
 function EmptyState({
     title = "No payments to show",
     description = "Start by paying bills, recharge or your friends",
+    showDescription = true,
     iconSlot,
     buttonSlot,
     modes: propModes = {},
@@ -140,7 +146,7 @@ function EmptyState({
 
                 {/* Texts */}
                 <Text style={titleStyle}>{title}</Text>
-                {description ? <Text style={bodyStyle}>{description}</Text> : null}
+                {showDescription && description ? <Text style={bodyStyle}>{description}</Text> : null}
             </View>
 
             {/* Button Slot */}