@evervault/react-native 2.0.0

package/build/sdk.d.ts

@@ -0,0 +1,9 @@
+export type Encrypted<T> = T extends undefined ? undefined : T extends null ? null : T extends string | number | boolean ? string : T extends Function ? never : T extends object ? {
+    [K in keyof T]: Encrypted<T[K]>;
+} : T extends Array<infer U> ? Array<Encrypted<U>> : never;
+export declare const sdk: {
+    verify(): boolean;
+    initialize(teamId: string, appId: string): string;
+    encrypt<T>(instanceId: string, data: T): Promise<Encrypted<T>>;
+};
+//# sourceMappingURL=sdk.d.ts.map

package/build/sdk.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../src/sdk.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAC1C,SAAS,GACT,CAAC,SAAS,IAAI,GACd,IAAI,GACJ,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GACnC,MAAM,GACN,CAAC,SAAS,QAAQ,GAClB,KAAK,GACL,CAAC,SAAS,MAAM,GAChB;KACG,CAAC,IAAI,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAChC,GACD,CAAC,SAAS,KAAK,CAAC,MAAM,CAAC,CAAC,GACxB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GACnB,KAAK,CAAC;AAUV,eAAO,MAAM,GAAG;;uBAMK,MAAM,SAAS,MAAM,GAAG,MAAM;YAcnC,CAAC,cAAc,MAAM,QAAQ,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAqBrE,CAAC"}

package/build/sdk.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sdk.test.d.ts.map

package/build/sdk.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdk.test.d.ts","sourceRoot":"","sources":["../src/sdk.test.ts"],"names":[],"mappings":""}

package/build/specs/NativeEvervault.d.ts

@@ -0,0 +1,59 @@
+import { TurboModule } from "react-native";
+export interface Spec extends TurboModule {
+    /**
+     * Initialize the Evervault SDK.
+     *
+     * @param teamId - The team ID.
+     * @param appId - The app ID.
+     *
+     * @returns A unique identifier for the SDK instance.
+     */
+    initialize(teamId: string, appId: string): string;
+    /**
+     * Encrypt a string.
+     *
+     * @param instanceId - The unique identifier for the SDK instance.
+     * @param data - The string to encrypt.
+     *
+     * @returns The encrypted string.
+     */
+    encryptString(instanceId: string, data: string): Promise<string>;
+    /**
+     * Encrypt a number.
+     *
+     * @param instanceId - The unique identifier for the SDK instance.
+     * @param data - The number to encrypt.
+     *
+     * @returns The encrypted number.
+     */
+    encryptNumber(instanceId: string, data: number): Promise<string>;
+    /**
+     * Encrypt a boolean.
+     *
+     * @param instanceId - The unique identifier for the SDK instance.
+     * @param data - The boolean to encrypt.
+     *
+     * @returns The encrypted boolean.
+     */
+    encryptBoolean(instanceId: string, data: boolean): Promise<string>;
+    /**
+     * Encrypt an object.
+     *
+     * @param instanceId - The unique identifier for the SDK instance.
+     * @param data - The object to encrypt.
+     *
+     * @returns The encrypted object.
+     */
+    encryptObject(instanceId: string, data: Object): Promise<Object>;
+    /**
+     * Encrypt an array.
+     *
+     * @param instanceId - The unique identifier for the SDK instance.
+     * @param data - The array to encrypt.
+     *
+     * @returns The encrypted array.
+     */
+    encryptArray(instanceId: string, data: Array<any>): Promise<Array<any>>;
+}
+export declare const NativeEvervault: Spec | null;
+//# sourceMappingURL=NativeEvervault.d.ts.map

package/build/specs/NativeEvervault.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeEvervault.d.ts","sourceRoot":"","sources":["../../src/specs/NativeEvervault.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,cAAc,CAAC;AAEhE,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC;;;;;;;OAOG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAElD;;;;;;;OAOG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEjE;;;;;;;OAOG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEjE;;;;;;;OAOG;IACH,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEnE;;;;;;;OAOG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEjE;;;;;;;OAOG;IACH,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;CACzE;AAED,eAAO,MAAM,eAAe,EAEvB,IAAI,GAAG,IAAI,CAAC"}

package/build/useEvervault.d.ts

@@ -0,0 +1,2 @@
+export declare function useEvervault(): import("./context").EvervaultContextValue;
+//# sourceMappingURL=useEvervault.d.ts.map

package/build/useEvervault.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvervault.d.ts","sourceRoot":"","sources":["../src/useEvervault.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,8CAU3B"}

package/build/useEvervault.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useEvervault.test.d.ts.map

package/build/useEvervault.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvervault.test.d.ts","sourceRoot":"","sources":["../src/useEvervault.test.tsx"],"names":[],"mappings":""}

package/build/utils.d.ts

@@ -0,0 +1,15 @@
+import { Component, LegacyRef, MutableRefObject, PropsWithChildren, RefCallback } from "react";
+export declare function mergeRefs<T = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;
+export declare class ErrorBoundary extends Component<PropsWithChildren<{
+    onError?(error: Error): void;
+}>> {
+    state: {
+        hasError: boolean;
+    };
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error): void;
+    render(): import("react").ReactNode;
+}
+//# sourceMappingURL=utils.d.ts.map

package/build/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACZ,MAAM,OAAO,CAAC;AAGf,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAC/B,GAAG,IAAI,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpE,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAC1C,iBAAiB,CAAC;IAAE,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC,CACpD;IACC,KAAK;;MAAuB;IAE5B,MAAM,CAAC,wBAAwB;;;IAI/B,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAI9B,MAAM;CAIP"}

package/ios/NativeEvervault-Bridging-Header.h

@@ -0,0 +1,2 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>

package/ios/NativeEvervault.mm

@@ -0,0 +1,38 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RCT_EXTERN_MODULE(NativeEvervault, NSObject)
+
+RCT_EXTERN_METHOD(initialize:(NSString *)teamId
+                  withAppId:(NSString *)appId)
+
+RCT_EXTERN_METHOD(encryptString:(NSString *)instanceId
+                  withValue:(NSString *)value
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(encryptNumber:(NSString *)instanceId
+                  withValue:(double)value
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(encryptBoolean:(NSString *)instanceId
+                  withValue:(BOOL)value
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(encryptObject:(NSString *)instanceId
+                  withValue:(NSDictionary *)value
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(encryptArray:(NSString *)instanceId
+                  withValue:(NSArray *)value
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+@end

package/ios/NativeEvervault.swift

@@ -0,0 +1,62 @@
+import Evervault
+
+@objc(NativeEvervault)
+class NativeEvervault: NSObject {
+    var instances: [String: Evervault] = [:]
+
+    func getInstanceId(_ teamId: String, _ appId: String) -> String {
+        return "\(teamId):\(appId)"
+    }
+
+    func getInstance(_ instanceId: String) -> Evervault? {
+        return self.instances[instanceId]
+    }
+
+    @objc(initialize:withAppId:)
+    func initialize(teamId: String, appId: String) -> String {
+        let evervault = Evervault(teamId: teamId, appId: appId)
+        let instanceId = getInstanceId(teamId, appId)
+        self.instances[instanceId] = evervault
+        return instanceId
+    }
+
+    func encrypt(instanceId: String, _ value: Any, _ resolve: @escaping RCTPromiseResolveBlock, _ reject: @escaping RCTPromiseRejectBlock) {
+        Task {
+            do {
+                guard let instance = getInstance(instanceId) else {
+                    reject("Error", "Instance not found", nil)
+                    return
+                }
+                let enc = try await instance.encrypt(value)
+                resolve(enc)
+            } catch {
+                reject("Error", "Failed to encrypt: \(error.localizedDescription)", error)
+            }
+        }
+    }
+
+    @objc(encryptString:withValue:withResolver:withRejecter:)
+    func encryptString(instanceId: String, value: String, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+        return self.encrypt(instanceId: instanceId, value, resolve, reject)
+    }
+
+    @objc(encryptNumber:withValue:withResolver:withRejecter:)
+    func encryptNumber(instanceId: String, value: Double, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+        return self.encrypt(instanceId: instanceId, value, resolve, reject)
+    }
+
+    @objc(encryptBoolean:withValue:withResolver:withRejecter:)
+    func encryptBoolean(instanceId: String, value: Bool, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+        return self.encrypt(instanceId: instanceId, value, resolve, reject)
+    }
+
+    @objc(encryptObject:withValue:withResolver:withRejecter:)
+    func encryptObject(instanceId: String, value: [String: Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+        return self.encrypt(instanceId: instanceId, value, resolve, reject)
+    }
+
+    @objc(encryptArray:withValue:withResolver:withRejecter:)
+    func encryptArray(instanceId: String, value: [Any], resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+        return self.encrypt(instanceId: instanceId, value, resolve, reject)
+    }
+}

package/native-evervault.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name            = "native-evervault"
+  s.version         = package["version"]
+  s.summary         = package["description"]
+  s.description     = package["description"]
+  s.homepage        = package["homepage"]
+  s.license         = package["license"]
+  s.platforms       = { :ios => "11.0" }
+  s.author          = package["author"]
+  s.source          = { :git => package["repository"]["url"], :tag => "#{s.version}" }
+
+  s.source_files    = "ios/**/*.{h,m,mm,swift}"
+
+  install_modules_dependencies(s)
+  s.dependency "Evervault", '~> 0.3.2'
+end

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@evervault/react-native",
+  "description": "Evervault SDK for React Native",
+  "version": "2.0.0",
+  "source": "./src/index.ts",
+  "main": "./build/index.cjs.js",
+  "module": "./build/index.esm.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/index.esm.js"
+      },
+      "require": {
+        "types": "./build/index.d.ts",
+        "default": "./build/index.cjs.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "ios",
+    "android",
+    "native-evervault.podspec"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/evervault/evervault-js.git"
+  },
+  "author": "Engineering <engineering@evervault.com> (https://evervault.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/evervault/evervault-js/issues"
+  },
+  "homepage": "https://docs.evervault.com/sdks/react-native",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "devDependencies": {
+    "@react-native-community/cli": "*",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@testing-library/react-native": "^13.2.0",
+    "@types/react": "^18.2.37",
+    "react": "^18.2.0",
+    "react-native": "0.76.7",
+    "react-native-webview": "^13.12.5",
+    "react-test-renderer": "18.2.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.34.9",
+    "vitest": "^2.1.8",
+    "vitest-react-native": "^0.1.5",
+    "tsconfig": "0.1.0"
+  },
+  "codegenConfig": {
+    "name": "NativeEvervaultSpec",
+    "type": "modules",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.nativeevervault"
+    }
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.3",
+    "react-hook-form": "^7.54.2",
+    "react-native-mask-input": "^1.2.3",
+    "zod": "^3.24.2",
+    "@evervault/card-validator": "1.3.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c --watch",
+    "codegen": "rimraf build android/app && react-native codegen",
+    "test": "vitest run",
+    "test:watch": "vitest --watch"
+  }
+}

package/src/Card/Cvc.test.tsx

@@ -0,0 +1,41 @@
+import { render, userEvent } from "@testing-library/react-native";
+import { PropsWithChildren } from "react";
+import { Card } from "./Root";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { CardCvc } from "./Cvc";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+it("uses 3 digits for mask by default", async () => {
+  const { getByTestId } = render(
+    <Card>
+      <CardCvc testID="cvc" />
+    </Card>,
+    { wrapper }
+  );
+  const cvc = getByTestId("cvc");
+
+  const user = userEvent.setup();
+  await user.type(cvc, "12345");
+  expect(cvc).toHaveProp("value", "123");
+});
+
+it("uses 4 digits for mask for american express", async () => {
+  const { getByTestId } = render(
+    <Card defaultValues={{ number: "378282246310005" }}>
+      <CardCvc testID="cvc" />
+    </Card>,
+    { wrapper }
+  );
+  const cvc = getByTestId("cvc");
+
+  const user = userEvent.setup();
+  await user.type(cvc, "12345");
+  expect(cvc).toHaveProp("value", "1234");
+});

package/src/Card/Cvc.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useMemo } from "react";
+import { BaseEvervaultInputProps, EvervaultInput, mask } from "../Input";
+import { CardFormValues } from "./schema";
+import { Mask } from "react-native-mask-input";
+import { validateNumber } from "@evervault/card-validator";
+import { useFormContext } from "react-hook-form";
+import { CardBrandName } from "./types";
+
+const DEFAULT_CARD_CVC_MASK = mask("999");
+
+const CARD_CVC_MASKS: Partial<Record<CardBrandName, Mask>> = {
+  "american-express": mask("9999"),
+};
+
+export type CardCvcProps = BaseEvervaultInputProps;
+
+export type CardCvc = EvervaultInput;
+
+export const CardCvc = forwardRef<CardCvc, CardCvcProps>(function CardCvc(
+  props,
+  ref
+) {
+  const methods = useFormContext<CardFormValues>();
+
+  const number = methods.watch("number");
+  const mask = useMemo<Mask>(() => {
+    if (!number) {
+      return DEFAULT_CARD_CVC_MASK;
+    }
+
+    const brand = validateNumber(number).brand;
+    if (brand && CARD_CVC_MASKS[brand]) {
+      return CARD_CVC_MASKS[brand];
+    }
+
+    return DEFAULT_CARD_CVC_MASK;
+  }, [number]);
+
+  return (
+    <EvervaultInput<CardFormValues>
+      placeholder="CVC"
+      {...props}
+      ref={ref}
+      name="cvc"
+      mask={mask}
+      inputMode="numeric"
+      autoComplete="cc-csc"
+      keyboardType="number-pad"
+    />
+  );
+});

package/src/Card/Expiry.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { BaseEvervaultInputProps, EvervaultInput, mask } from "../Input";
+import { CardFormValues } from "./schema";
+
+const CARD_EXPIRY_MASK = mask("99 / 99");
+
+export type CardExpiryProps = BaseEvervaultInputProps;
+
+export type CardExpiry = EvervaultInput;
+
+export const CardExpiry = forwardRef<CardExpiry, CardExpiryProps>(
+  function CardExpiry(props, ref) {
+    return (
+      <EvervaultInput<CardFormValues>
+        placeholder="MM / YY"
+        {...props}
+        ref={ref}
+        name="expiry"
+        mask={CARD_EXPIRY_MASK}
+        inputMode="numeric"
+        autoComplete="cc-exp"
+        keyboardType="number-pad"
+      />
+    );
+  }
+);

package/src/Card/Holder.tsx

@@ -0,0 +1,27 @@
+import { Platform } from "react-native";
+import { forwardRef } from "react";
+import { BaseEvervaultInputProps, EvervaultInput } from "../Input";
+import { CardFormValues } from "./schema";
+
+export type CardHolderProps = BaseEvervaultInputProps;
+
+export type CardHolder = EvervaultInput;
+
+export const CardHolder = forwardRef<CardHolder, CardHolderProps>(
+  function CardHolder(props, ref) {
+    return (
+      <EvervaultInput<CardFormValues>
+        placeholder="Johnny Appleseed"
+        {...props}
+        ref={ref}
+        name="name"
+        inputMode="text"
+        autoComplete={Platform.select({
+          ios: "cc-name",
+          default: "name",
+        })}
+        keyboardType="default"
+      />
+    );
+  }
+);

package/src/Card/Number.test.tsx

@@ -0,0 +1,55 @@
+import { render, userEvent } from "@testing-library/react-native";
+import { PropsWithChildren } from "react";
+import { Card } from "./Root";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { CardNumber } from "./Number";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+it("uses 16 digits for mask by default", async () => {
+  const { getByTestId } = render(
+    <Card>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+  const number = getByTestId("number");
+
+  const user = userEvent.setup();
+  await user.type(number, "4242424242424242");
+  expect(number).toHaveProp("value", "4242 4242 4242 4242");
+});
+
+it("uses 19 digits for mask for unionpay", async () => {
+  const { getByTestId } = render(
+    <Card>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+  const number = getByTestId("number");
+
+  const user = userEvent.setup();
+  await user.type(number, "6205500000000000004");
+  expect(number).toHaveProp("value", "6205 5000 0000 0000 004");
+});
+
+it("uses 15 digits for mask for american express", async () => {
+  const { getByTestId } = render(
+    <Card>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+  const number = getByTestId("number");
+
+  const user = userEvent.setup();
+  await user.type(number, "371449635398431");
+  expect(number).toHaveProp("value", "3714 496353 98431");
+});

package/src/Card/Number.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, useCallback } from "react";
+import { BaseEvervaultInputProps, EvervaultInput, mask } from "../Input";
+import { CardFormValues } from "./schema";
+import { MaskArray } from "react-native-mask-input";
+import { validateNumber } from "@evervault/card-validator";
+import { CardBrandName } from "./types";
+
+const DEFAULT_CARD_NUMBER_MASK = mask("9999 9999 9999 9999");
+
+const CARD_NUMBER_MASKS: Partial<Record<CardBrandName, MaskArray>> = {
+  unionpay: mask("9999 9999 9999 9999 999"),
+  "american-express": mask("9999 999999 99999"),
+};
+
+export type CardNumberProps = BaseEvervaultInputProps;
+
+export type CardNumber = EvervaultInput;
+
+export const CardNumber = forwardRef<CardNumber, CardNumberProps>(
+  function CardNumber(props, ref) {
+    const mask = useCallback((text?: string): MaskArray => {
+      if (!text) {
+        return DEFAULT_CARD_NUMBER_MASK;
+      }
+
+      const brand = validateNumber(text).brand;
+      if (brand && CARD_NUMBER_MASKS[brand]) {
+        return CARD_NUMBER_MASKS[brand];
+      }
+
+      return DEFAULT_CARD_NUMBER_MASK;
+    }, []);
+
+    return (
+      <EvervaultInput<CardFormValues>
+        placeholder="1234 1234 1234 1234"
+        {...props}
+        ref={ref}
+        name="number"
+        mask={mask}
+        inputMode="numeric"
+        autoComplete="cc-number"
+        keyboardType="number-pad"
+      />
+    );
+  }
+);