@primer-io/react-native 2.46.0 → 3.0.0-beta.0

package/src/Components/inputs/PrimerCVVInput.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { PrimerTextInput } from './PrimerTextInput';
+import { TRAILING_ICON_MARGIN, TRAILING_ICON_SIZE } from './dimensions';
+import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
+import type { PrimerCVVInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
+
+const cvvSource = require('../../assets/images/ic-cvv-hint.png');
+
+export const PrimerCVVInput = forwardRef<PrimerTextInputRef, PrimerCVVInputProps>(function PrimerCVVInput(
+  { placeholder, label, ...rest },
+  ref
+) {
+  const cardForm = usePrimerCardForm();
+  const { t } = usePrimerLocalization();
+  const resolvedLabel = label ?? t('primer_card_form_label_cvv');
+  const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_cvv');
+
+  return (
+    <PrimerTextInput
+      ref={ref}
+      value={cardForm.cvv}
+      onChangeText={cardForm.updateCVV}
+      onFocus={() => cardForm.markFieldFocused('cvv')}
+      onBlur={() => cardForm.markFieldBlurred('cvv')}
+      keyboardType="number-pad"
+      maxLength={cardForm.descriptor.cvvLength}
+      secureTextEntry
+      autoComplete="cc-csc"
+      label={resolvedLabel}
+      placeholder={resolvedPlaceholder}
+      error={cardForm.errors.cvv}
+      trailingContent={
+        <Image
+          source={cvvSource}
+          style={styles.icon}
+          resizeMode="contain"
+          testID={rest.testID ? `${rest.testID}-hint-icon` : undefined}
+        />
+      }
+      {...rest}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  icon: {
+    height: TRAILING_ICON_SIZE,
+    marginLeft: TRAILING_ICON_MARGIN,
+    width: TRAILING_ICON_SIZE,
+  },
+});

package/src/Components/inputs/PrimerCardNumberInput.tsx

@@ -0,0 +1,146 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { Image, StyleSheet, Text, View, type TextInputProps } from 'react-native';
+import { PrimerTextInput } from './PrimerTextInput';
+import { caretFromDigitIndex, countDigits, countDigitsBefore, targetDigitIndex } from './caret';
+import { PLACEHOLDER_ICON_HEIGHT, PLACEHOLDER_ICON_WIDTH, TRAILING_ICON_MARGIN } from './dimensions';
+import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerTheme } from '../internal/theme';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
+import { usePrimerCardNetwork } from '../hooks/usePrimerCardNetwork';
+import { usePrimerCardNetworkSelection } from '../hooks/usePrimerCardNetworkSelection';
+import { PrimerCardNetworkSelector } from '../PrimerCardNetworkSelector';
+import { getNetworkAbbreviation } from '../internal/cardNetwork';
+import type { PrimerCardNumberInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
+
+type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
+
+const placeholderSource = require('../../assets/images/ic-card-placeholder.png');
+
+export const PrimerCardNumberInput = forwardRef<PrimerTextInputRef, PrimerCardNumberInputProps>(
+  function PrimerCardNumberInput({ placeholder, label, ...rest }, ref) {
+    const cardForm = usePrimerCardForm();
+    const { t } = usePrimerLocalization();
+    const resolvedLabel = label ?? t('primer_card_form_label_number');
+    const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_number');
+    const { network, iconSource } = usePrimerCardNetwork();
+    const { isSelectorVisible, isDualBadge } = usePrimerCardNetworkSelection();
+    const showSelector = isSelectorVisible || isDualBadge;
+    const tokens = usePrimerTheme();
+    const abbreviation = iconSource == null && network ? getNetworkAbbreviation(network) : '';
+
+    const innerRef = useRef<PrimerTextInputRef>(null);
+    const lastSelectionRef = useRef({ start: 0, end: 0 });
+    const pendingDigitIndexRef = useRef<number | null>(null);
+
+    // Proxy focus/blur/setCaret to parent while keeping caret logic using innerRef.
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => innerRef.current?.focus(),
+        blur: () => innerRef.current?.blur(),
+        setCaret: (start: number, end?: number) => innerRef.current?.setCaret(start, end),
+      }),
+      []
+    );
+
+    useEffect(() => {
+      if (pendingDigitIndexRef.current == null) return;
+      const pos = caretFromDigitIndex(cardForm.cardNumber, pendingDigitIndexRef.current);
+      innerRef.current?.setCaret(pos);
+      pendingDigitIndexRef.current = null;
+    }, [cardForm.cardNumber]);
+
+    const handleChangeText = (text: string) => {
+      const prev = cardForm.cardNumber;
+      const prevCaret = lastSelectionRef.current.start;
+      const prevDigits = countDigits(prev);
+      const nextDigits = countDigits(text);
+
+      // Smart separator-delete: backspacing a space deletes the digit before it.
+      if (prevDigits === nextDigits && text.length < prev.length) {
+        const digitsBefore = countDigitsBefore(prev, prevCaret);
+        if (digitsBefore > 0) {
+          const raw = text.replace(/\D/g, '');
+          const adjusted = raw.slice(0, digitsBefore - 1) + raw.slice(digitsBefore);
+          pendingDigitIndexRef.current = digitsBefore - 1;
+          cardForm.updateCardNumber(adjusted);
+          return;
+        }
+      }
+
+      pendingDigitIndexRef.current = targetDigitIndex(prev, prevCaret, text);
+      cardForm.updateCardNumber(text);
+    };
+
+    const handleSelectionChange: SelectionChangeHandler = (e) => {
+      lastSelectionRef.current = e.nativeEvent.selection;
+    };
+
+    return (
+      <PrimerTextInput
+        ref={innerRef}
+        value={cardForm.cardNumber}
+        onChangeText={handleChangeText}
+        onFocus={() => cardForm.markFieldFocused('cardNumber')}
+        onBlur={() => cardForm.markFieldBlurred('cardNumber')}
+        keyboardType="number-pad"
+        maxLength={cardForm.cardNumberMaxLength}
+        autoComplete="cc-number"
+        label={resolvedLabel}
+        placeholder={resolvedPlaceholder}
+        error={cardForm.errors.cardNumber}
+        onSelectionChange={handleSelectionChange}
+        trailingContent={
+          showSelector ? (
+            <PrimerCardNetworkSelector testID={rest.testID ? `${rest.testID}-network-selector` : undefined} />
+          ) : abbreviation ? (
+            <View
+              style={[
+                styles.abbreviationChip,
+                {
+                  borderColor: tokens.colors.border,
+                  borderRadius: tokens.radii.small,
+                  borderWidth: tokens.borders.input,
+                },
+              ]}
+              testID={rest.testID ? `${rest.testID}-network-abbreviation` : undefined}
+            >
+              <Text
+                style={{
+                  color: tokens.colors.textPrimary,
+                  fontFamily: tokens.typography.fontFamily,
+                  fontSize: tokens.typography.bodySmall.fontSize,
+                }}
+              >
+                {abbreviation}
+              </Text>
+            </View>
+          ) : (
+            <Image
+              source={iconSource ?? placeholderSource}
+              style={styles.placeholder}
+              resizeMode="contain"
+              testID={rest.testID ? `${rest.testID}-network-icon` : undefined}
+            />
+          )
+        }
+        {...rest}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  abbreviationChip: {
+    alignItems: 'center',
+    height: PLACEHOLDER_ICON_HEIGHT,
+    justifyContent: 'center',
+    marginLeft: TRAILING_ICON_MARGIN,
+    width: PLACEHOLDER_ICON_WIDTH,
+  },
+  placeholder: {
+    height: PLACEHOLDER_ICON_HEIGHT,
+    marginLeft: TRAILING_ICON_MARGIN,
+    width: PLACEHOLDER_ICON_WIDTH,
+  },
+});

package/src/Components/inputs/PrimerCardholderNameInput.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { PrimerTextInput } from './PrimerTextInput';
+import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
+import type { PrimerCardholderNameInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
+
+export const PrimerCardholderNameInput = forwardRef<PrimerTextInputRef, PrimerCardholderNameInputProps>(
+  function PrimerCardholderNameInput({ placeholder, label, ...rest }, ref) {
+    const cardForm = usePrimerCardForm();
+    const { t } = usePrimerLocalization();
+    const resolvedLabel = label ?? t('primer_card_form_label_name');
+    const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_name');
+
+    return (
+      <PrimerTextInput
+        ref={ref}
+        value={cardForm.cardholderName}
+        onChangeText={cardForm.updateCardholderName}
+        onFocus={() => cardForm.markFieldFocused('cardholderName')}
+        onBlur={() => cardForm.markFieldBlurred('cardholderName')}
+        autoComplete="name"
+        autoCapitalize="words"
+        label={resolvedLabel}
+        placeholder={resolvedPlaceholder}
+        error={cardForm.errors.cardholderName}
+        {...rest}
+      />
+    );
+  }
+);

package/src/Components/inputs/PrimerExpiryDateInput.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { Image, StyleSheet, type TextInputProps } from 'react-native';
+import { PrimerTextInput } from './PrimerTextInput';
+import { caretFromDigitIndex, countDigits, countDigitsBefore, targetDigitIndex } from './caret';
+import { TRAILING_ICON_MARGIN, TRAILING_ICON_SIZE } from './dimensions';
+import { usePrimerLocalization } from '../internal/localization';
+import { usePrimerCardForm } from '../hooks/usePrimerCardForm';
+import type { PrimerExpiryDateInputProps, PrimerTextInputRef } from '../types/CardInputTypes';
+
+type SelectionChangeHandler = NonNullable<TextInputProps['onSelectionChange']>;
+
+const calendarSource = require('../../assets/images/ic-expiry-calendar.png');
+
+export const PrimerExpiryDateInput = forwardRef<PrimerTextInputRef, PrimerExpiryDateInputProps>(
+  function PrimerExpiryDateInput({ placeholder, label, ...rest }, ref) {
+    const cardForm = usePrimerCardForm();
+    const { t } = usePrimerLocalization();
+    const resolvedLabel = label ?? t('primer_card_form_label_expiry');
+    const resolvedPlaceholder = placeholder ?? t('primer_card_form_placeholder_expiry');
+    const innerRef = useRef<PrimerTextInputRef>(null);
+    const lastSelectionRef = useRef({ start: 0, end: 0 });
+    const pendingDigitIndexRef = useRef<number | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => innerRef.current?.focus(),
+        blur: () => innerRef.current?.blur(),
+        setCaret: (start: number, end?: number) => innerRef.current?.setCaret(start, end),
+      }),
+      []
+    );
+
+    useEffect(() => {
+      if (pendingDigitIndexRef.current == null) return;
+      const pos = caretFromDigitIndex(cardForm.expiryDate, pendingDigitIndexRef.current);
+      innerRef.current?.setCaret(pos);
+      pendingDigitIndexRef.current = null;
+    }, [cardForm.expiryDate]);
+
+    const handleChangeText = (text: string) => {
+      const prev = cardForm.expiryDate;
+      const prevCaret = lastSelectionRef.current.start;
+      const prevDigits = countDigits(prev);
+      const nextDigits = countDigits(text);
+
+      // Smart separator-delete: backspacing the "/" deletes the preceding month digit.
+      if (prevDigits === nextDigits && text.length < prev.length) {
+        const digitsBefore = countDigitsBefore(prev, prevCaret);
+        if (digitsBefore > 0) {
+          const raw = text.replace(/\D/g, '');
+          const adjusted = raw.slice(0, digitsBefore - 1) + raw.slice(digitsBefore);
+          pendingDigitIndexRef.current = digitsBefore - 1;
+          cardForm.updateExpiryDate(adjusted);
+          return;
+        }
+      }
+
+      pendingDigitIndexRef.current = targetDigitIndex(prev, prevCaret, text);
+      cardForm.updateExpiryDate(text);
+    };
+
+    const handleSelectionChange: SelectionChangeHandler = (e) => {
+      lastSelectionRef.current = e.nativeEvent.selection;
+    };
+
+    return (
+      <PrimerTextInput
+        ref={innerRef}
+        value={cardForm.expiryDate}
+        onChangeText={handleChangeText}
+        onFocus={() => cardForm.markFieldFocused('expiryDate')}
+        onBlur={() => cardForm.markFieldBlurred('expiryDate')}
+        keyboardType="number-pad"
+        maxLength={5}
+        autoComplete="cc-exp"
+        label={resolvedLabel}
+        placeholder={resolvedPlaceholder}
+        error={cardForm.errors.expiryDate}
+        onSelectionChange={handleSelectionChange}
+        trailingContent={
+          <Image
+            source={calendarSource}
+            style={styles.icon}
+            resizeMode="contain"
+            testID={rest.testID ? `${rest.testID}-calendar-icon` : undefined}
+          />
+        }
+        {...rest}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  icon: {
+    height: TRAILING_ICON_SIZE,
+    marginLeft: TRAILING_ICON_MARGIN,
+    width: TRAILING_ICON_SIZE,
+  },
+});

package/src/Components/inputs/PrimerTextInput.tsx

@@ -0,0 +1,201 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState, type ComponentRef } from 'react';
+import { Platform, StyleSheet, Text, TextInput, View, type TextStyle } from 'react-native';
+import { usePrimerTheme } from '../internal/theme';
+import { FIELD_HEIGHT, LINE_HEIGHT_RATIO } from './dimensions';
+import type { PrimerTextInputProps, PrimerTextInputRef, PrimerTextInputTheme } from '../types/CardInputTypes';
+import type { PrimerTokens } from '../internal/theme/types';
+
+// Shared nativeID for an empty InputAccessoryView rendered once in CheckoutSheet.
+// Suppresses iOS's auto-added Previous/Next/Done navigation toolbar above the keyboard.
+export const PRIMER_EMPTY_ACCESSORY_ID = 'primer-empty-input-accessory';
+
+function resolveTheme(tokens: PrimerTokens, override?: PrimerTextInputTheme) {
+  const borderWidth = override?.borderWidth ?? tokens.borders.input;
+  const focusedBorderWidth = Math.max(override?.focusedBorderWidth ?? tokens.borders.strong, borderWidth);
+  return {
+    backgroundColor: override?.backgroundColor ?? tokens.colors.background,
+    borderColor: override?.borderColor ?? tokens.colors.border,
+    borderRadius: override?.borderRadius ?? tokens.radii.small,
+    borderWidth,
+    disabledBackgroundColor: override?.disabledBackgroundColor ?? tokens.colors.surface,
+    disabledBorderColor: override?.disabledBorderColor ?? tokens.colors.borderDisabled,
+    errorColor: override?.errorColor ?? tokens.colors.borderError,
+    errorTextColor: override?.errorTextColor ?? tokens.colors.textNegative,
+    fieldHeight: override?.fieldHeight ?? FIELD_HEIGHT,
+    focusedBorderWidth,
+    fontFamily: override?.fontFamily ?? tokens.typography.fontFamily,
+    fontSize: override?.fontSize ?? tokens.typography.bodyLarge.fontSize,
+    labelColor: override?.labelColor ?? tokens.colors.textPrimary,
+    labelFontSize: override?.labelFontSize ?? tokens.typography.bodySmall.fontSize,
+    placeholderColor: override?.placeholderColor ?? tokens.colors.textPlaceholder,
+    primaryColor: override?.primaryColor ?? tokens.colors.borderFocused,
+    textColor: override?.textColor ?? tokens.colors.textPrimary,
+  };
+}
+
+export const PrimerTextInput = forwardRef<PrimerTextInputRef, PrimerTextInputProps>(function PrimerTextInput(
+  {
+    value,
+    onChangeText,
+    onBlur,
+    onFocus,
+    editable = true,
+    keyboardType,
+    maxLength,
+    secureTextEntry = false,
+    autoComplete,
+    autoCapitalize = 'none',
+    label,
+    showLabel = true,
+    placeholder,
+    error,
+    trailingContent,
+    onSelectionChange,
+    selectionColor,
+    returnKeyType,
+    onSubmitEditing,
+    theme: themeOverride,
+    style,
+    inputStyle,
+    labelStyle,
+    errorStyle,
+    accessibilityLabel,
+    testID,
+  },
+  ref
+) {
+  const tokens = usePrimerTheme();
+  const resolved = useMemo(() => resolveTheme(tokens, themeOverride), [tokens, themeOverride]);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setCaret(start: number, end?: number) {
+        const selection = { start, end: end ?? start };
+        const apply = () => inputRef.current?.setNativeProps({ selection });
+        // Web SDK hit the same race on Android with setSelectionRange — defer a tick.
+        if (Platform.OS === 'android') {
+          setTimeout(apply, 0);
+        } else {
+          apply();
+        }
+      },
+      focus() {
+        inputRef.current?.focus();
+      },
+      blur() {
+        inputRef.current?.blur();
+      },
+    }),
+    []
+  );
+
+  const hasError = !!error;
+  const currentBorderWidth = isFocused || hasError ? resolved.focusedBorderWidth : resolved.borderWidth;
+  const borderWidthDiff = currentBorderWidth - resolved.borderWidth;
+
+  // Error takes precedence over focus — the validation signal is more important than the
+  // focus hint. Disabled still wins over both (you can't have errors on a non-editable field).
+  const borderColor = !editable
+    ? resolved.disabledBorderColor
+    : hasError
+      ? resolved.errorColor
+      : isFocused
+        ? resolved.primaryColor
+        : resolved.borderColor;
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {},
+        error: {
+          color: resolved.errorTextColor,
+          fontFamily: resolved.fontFamily,
+          fontSize: resolved.labelFontSize,
+          marginTop: tokens.spacing.xsmall,
+        },
+        input: {
+          color: editable ? resolved.textColor : tokens.colors.textDisabled,
+          flex: 1,
+          fontFamily: resolved.fontFamily,
+          fontSize: resolved.fontSize,
+          letterSpacing: tokens.typography.bodyLarge.letterSpacing,
+          lineHeight: Math.round(resolved.fontSize * LINE_HEIGHT_RATIO),
+          padding: 0,
+        },
+        inputContainer: {
+          alignItems: 'center',
+          backgroundColor: editable ? resolved.backgroundColor : resolved.disabledBackgroundColor,
+          borderColor,
+          borderRadius: resolved.borderRadius,
+          borderWidth: currentBorderWidth,
+          flexDirection: 'row',
+          height: resolved.fieldHeight,
+          paddingHorizontal: tokens.spacing.medium - borderWidthDiff,
+        },
+        label: {
+          color: resolved.labelColor,
+          fontFamily: resolved.fontFamily,
+          fontSize: resolved.labelFontSize,
+          marginBottom: tokens.spacing.xsmall,
+        },
+      }),
+    [resolved, borderColor, currentBorderWidth, borderWidthDiff, editable, tokens]
+  );
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {showLabel && label != null && <Text style={[styles.label, labelStyle]}>{label}</Text>}
+      <View style={styles.inputContainer}>
+        <TextInput
+          ref={inputRef}
+          style={[styles.input, inputStyle] as TextStyle[]}
+          value={value}
+          onChangeText={onChangeText}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          editable={editable}
+          keyboardType={keyboardType}
+          maxLength={maxLength}
+          secureTextEntry={secureTextEntry}
+          autoComplete={autoComplete}
+          autoCapitalize={autoCapitalize}
+          placeholder={placeholder}
+          placeholderTextColor={resolved.placeholderColor}
+          onSelectionChange={onSelectionChange}
+          selectionColor={selectionColor ?? resolved.primaryColor}
+          returnKeyType={returnKeyType}
+          onSubmitEditing={onSubmitEditing}
+          blurOnSubmit={returnKeyType !== 'next'}
+          inputAccessoryViewID={Platform.OS === 'ios' ? PRIMER_EMPTY_ACCESSORY_ID : undefined}
+          accessibilityState={{ disabled: !editable }}
+          accessibilityLabel={accessibilityLabel ?? label}
+          aria-invalid={hasError}
+          testID={testID ? `${testID}-input` : undefined}
+        />
+        {trailingContent}
+      </View>
+      {hasError && (
+        <Text
+          accessibilityLiveRegion="polite"
+          style={[styles.error, errorStyle]}
+          testID={testID ? `${testID}-error` : undefined}
+        >
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+});

package/src/Components/inputs/caret.ts

@@ -0,0 +1,37 @@
+export function countDigits(str: string): number {
+  let n = 0;
+  for (let i = 0; i < str.length; i++) {
+    const c = str.charCodeAt(i);
+    if (c >= 48 && c <= 57) n++;
+  }
+  return n;
+}
+
+export function countDigitsBefore(str: string, pos: number): number {
+  const end = Math.min(pos, str.length);
+  let n = 0;
+  for (let i = 0; i < end; i++) {
+    const c = str.charCodeAt(i);
+    if (c >= 48 && c <= 57) n++;
+  }
+  return n;
+}
+
+export function caretFromDigitIndex(formatted: string, digitIndex: number): number {
+  let seen = 0;
+  for (let i = 0; i < formatted.length; i++) {
+    if (seen === digitIndex) return i;
+    const c = formatted.charCodeAt(i);
+    if (c >= 48 && c <= 57) seen++;
+  }
+  return formatted.length;
+}
+
+export function targetDigitIndex(prevFormatted: string, prevCaret: number, nextRaw: string): number {
+  const digitsBefore = countDigitsBefore(prevFormatted, prevCaret);
+  const prevDigits = countDigits(prevFormatted);
+  const nextDigits = countDigits(nextRaw);
+  if (nextDigits > prevDigits) return digitsBefore + (nextDigits - prevDigits);
+  if (nextDigits < prevDigits) return Math.max(0, digitsBefore - (prevDigits - nextDigits));
+  return digitsBefore;
+}

package/src/Components/inputs/dimensions.ts

@@ -0,0 +1,15 @@
+// Card-input dimension constants. Sourced from Figma and not theme-driven
+// because the token system has no slot for icon size / field height. Keep all
+// design-spec numerics in this one file so any future spec change is local.
+
+export const FIELD_HEIGHT = 44;
+export const LINE_HEIGHT_RATIO = 1.25;
+
+// Trailing glyph inside the input (expiry calendar, CVV hint). Square, 20×20,
+// with 8px gap to the left of it.
+export const TRAILING_ICON_SIZE = 20;
+export const TRAILING_ICON_MARGIN = 8;
+
+// Generic chip-card placeholder shown in the card number input's empty state.
+export const PLACEHOLDER_ICON_WIDTH = 28;
+export const PLACEHOLDER_ICON_HEIGHT = 20;

package/src/Components/inputs/index.ts

@@ -0,0 +1,7 @@
+export { PrimerTextInput } from './PrimerTextInput';
+export { PrimerCardNumberInput } from './PrimerCardNumberInput';
+export { PrimerExpiryDateInput } from './PrimerExpiryDateInput';
+export { PrimerCVVInput } from './PrimerCVVInput';
+export { PrimerCardholderNameInput } from './PrimerCardholderNameInput';
+export { CountrySelectorRow } from './CountrySelectorRow';
+export type { CountrySelectorRowProps } from './CountrySelectorRow';