@evervault/react-native 2.2.1 → 2.4.0

package/build/Card/Cvc.d.ts

@@ -1,5 +1,12 @@
 import { BaseEvervaultInputProps, EvervaultInput } from "../Input";
-export type CardCvcProps = BaseEvervaultInputProps;
+export interface CardCvcProps extends BaseEvervaultInputProps {
+    /**
+     * Whether to obfuscate the entire CVC value.
+     *
+     * If a string is provided, it will be used to obfuscate the value.
+     */
+    obfuscateValue?: boolean | string;
+}
 export type CardCvc = EvervaultInput;
-export declare const CardCvc: import("react").ForwardRefExoticComponent<BaseEvervaultInputProps & import("react").RefAttributes<EvervaultInput>>;
+export declare const CardCvc: import("react").ForwardRefExoticComponent<CardCvcProps & import("react").RefAttributes<EvervaultInput>>;
 //# sourceMappingURL=Cvc.d.ts.map

package/build/Card/Cvc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cvc.d.ts","sourceRoot":"","sources":["../../src/Card/Cvc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,MAAM,YAAY,GAAG,uBAAuB,CAAC;AAEnD,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC;AAErC,eAAO,MAAM,OAAO,oHAgClB,CAAC"}
+{"version":3,"file":"Cvc.d.ts","sourceRoot":"","sources":["../../src/Card/Cvc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,WAAW,YAAa,SAAQ,uBAAuB;IAC3D;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC;AAErC,eAAO,MAAM,OAAO,yGAgClB,CAAC"}

package/build/Card/Number.d.ts

@@ -1,5 +1,12 @@
 import { BaseEvervaultInputProps, EvervaultInput } from "../Input";
-export type CardNumberProps = BaseEvervaultInputProps;
+export interface CardNumberProps extends BaseEvervaultInputProps {
+    /**
+     * Whether to obfuscate the card number value (excluding the last 4 digits).
+     *
+     * If a string is provided, it will be used to obfuscate the value.
+     */
+    obfuscateValue?: boolean | string;
+}
 export type CardNumber = EvervaultInput;
-export declare const CardNumber: import("react").ForwardRefExoticComponent<BaseEvervaultInputProps & import("react").RefAttributes<EvervaultInput>>;
+export declare const CardNumber: import("react").ForwardRefExoticComponent<CardNumberProps & import("react").RefAttributes<EvervaultInput>>;
 //# sourceMappingURL=Number.d.ts.map

package/build/Card/Number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Number.d.ts","sourceRoot":"","sources":["../../src/Card/Number.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,MAAM,eAAe,GAAG,uBAAuB,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,UAAU,oHA4BtB,CAAC"}
+{"version":3,"file":"Number.d.ts","sourceRoot":"","sources":["../../src/Card/Number.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAazE,MAAM,WAAW,eAAgB,SAAQ,uBAAuB;IAC9D;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,UAAU,4GA4BtB,CAAC"}

package/build/Card/index.d.ts

@@ -8,8 +8,8 @@ export type Card = CardRef;
 export declare const Card: import("react").ForwardRefExoticComponent<import("./Root").CardProps & import("react").RefAttributes<CardRoot>> & {
     Holder: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
     Expiry: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
-    Cvc: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
-    Number: import("react").ForwardRefExoticComponent<import("..").EvervaultInputProps & import("react").RefAttributes<import("..").EvervaultInput>>;
+    Cvc: import("react").ForwardRefExoticComponent<import("./Cvc").CardCvcProps & import("react").RefAttributes<import("..").EvervaultInput>>;
+    Number: import("react").ForwardRefExoticComponent<import("./Number").CardNumberProps & import("react").RefAttributes<import("..").EvervaultInput>>;
 };
 export type { CardHolderProps } from "./Holder";
 export { CardHolder };

package/build/Card/types.d.ts

@@ -1,4 +1,4 @@
-export declare const CARD_BRAND_NAMES: readonly ["american-express", "visa", "mastercard", "discover", "jcb", "diners-club", "unionpay", "maestro", "mir", "elo", "hipercard", "hiper", "szep", "uatp"];
+export declare const CARD_BRAND_NAMES: readonly ["american-express", "visa", "mastercard", "discover", "jcb", "diners-club", "unionpay", "maestro", "mir", "elo", "hipercard", "hiper", "szep", "uatp", "rupay"];
 export type CardBrandName = (typeof CARD_BRAND_NAMES)[number];
 export interface CardConfig {
     /**

package/build/Card/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Card/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,kKAenB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;QAC5B,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;KACpB,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;CACH"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Card/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,2KAgBnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;QAC5B,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;KACpB,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;CACH"}

package/build/Input.d.ts

@@ -11,6 +11,7 @@ export declare function mask(format: string): MaskArray;
 export interface EvervaultInputProps<Values extends Record<string, unknown>> extends BaseEvervaultInputProps {
     name: keyof Values;
     mask?: Mask;
+    obfuscateValue?: boolean | string;
 }
 export declare const EvervaultInput: <Values extends Record<string, unknown>>(props: EvervaultInputProps<Values> & {
     ref?: Ref<EvervaultInput>;

package/build/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,GAAG,EAMJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,0BAA0B;IACzC,cAAc,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;CAC7D;AAED,eAAO,MAAM,qBAAqB,qDAEhC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,iBAAiB,GACjB,eAAe,CAClB,CAAC;AA4CF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,EACd,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,cAAc,CACvD,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAO9C;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACzE,SAAQ,uBAAuB;IAC/B,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,cAAc,EAuDrB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3C,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC/D,SAAS,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,GAAG,EAQJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,0BAA0B;IACzC,cAAc,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;CAC7D;AAED,eAAO,MAAM,qBAAqB,qDAEhC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACP,WAAW,GACX,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,iBAAiB,GACjB,eAAe,CAClB,CAAC;AA4CF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,EACd,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,cAAc,CACvD,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAqB9C;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CACzE,SAAQ,uBAAuB;IAC/B,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,cAAc,EAgErB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3C,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC/D,SAAS,CAAC"}

package/build/index.cjs.js

@@ -608,50 +608,6 @@ function useController(props) {
     }), [field, formState, fieldState]);
 }
 
-/**
- * Component based on `useController` hook to work with controlled component.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
- *
- * @param props - the path name to the form field value, and validation rules.
- *
- * @returns provide field handler functions, field and form state.
- *
- * @example
- * ```tsx
- * function App() {
- *   const { control } = useForm<FormValues>({
- *     defaultValues: {
- *       test: ""
- *     }
- *   });
- *
- *   return (
- *     <form>
- *       <Controller
- *         control={control}
- *         name="test"
- *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
- *           <>
- *             <input
- *               onChange={onChange} // send value to hook form
- *               onBlur={onBlur} // notify when input is touched
- *               value={value} // return updated value
- *               ref={ref} // set ref for focus management
- *             />
- *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
- *             <p>{fieldState.isTouched ? "touched" : ""}</p>
- *           </>
- *         )}
- *       />
- *     </form>
- *   );
- * }
- * ```
- */
-const Controller = (props) => props.render(useController(props));
-
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? {
         ...errors[name],
@@ -6794,7 +6750,7 @@ const h = [
     isLocal: false,
     numberValidationRules: {
       luhnCheck: true,
-      ranges: [[300, 305], 36, 38, 39],
+      ranges: [[300, 305], 3095, 36, 38, 39],
       lengths: [14, 16, 19]
     },
     securityCodeValidationRules: {
@@ -6806,7 +6762,7 @@ const h = [
     isLocal: false,
     numberValidationRules: {
       luhnCheck: true,
-      ranges: [6011, [644, 649], 65],
+      ranges: [6011, [644, 649], [65e4, 651999], [653150, 659999], 622],
       lengths: [16, 19]
     },
     securityCodeValidationRules: {
@@ -6818,7 +6774,16 @@ const h = [
     isLocal: false,
     numberValidationRules: {
       luhnCheck: true,
-      ranges: [2131, 1800, [3528, 3589]],
+      ranges: [
+        2131,
+        1800,
+        [3088, 3094],
+        [3096, 3102],
+        [3112, 3120],
+        [3158, 3159],
+        [3337, 3349],
+        [3528, 3589]
+      ],
       lengths: [16, 17, 18, 19]
     },
     securityCodeValidationRules: {
@@ -6866,16 +6831,20 @@ const h = [
     numberValidationRules: {
       luhnCheck: true,
       ranges: [
+        5018,
+        5020,
+        5038,
+        5893,
+        6101,
+        6304,
+        6759,
+        6761,
+        6762,
+        6763,
         493698,
         [5e5, 504174],
         [504176, 506698],
         [506779, 508999],
-        [56, 59],
-        60,
-        61,
-        63,
-        64,
-        67,
         69
       ],
       lengths: [12, 13, 14, 15, 16, 17, 18, 19]
@@ -6981,6 +6950,18 @@ const h = [
     securityCodeValidationRules: {
       lengths: [0]
     }
+  },
+  {
+    name: "rupay",
+    isLocal: false,
+    numberValidationRules: {
+      luhnCheck: true,
+      ranges: [60, 81, 82, 508, [652100, 653149], [817200, 819899]],
+      lengths: [16]
+    },
+    securityCodeValidationRules: {
+      lengths: [3]
+    }
   }
 ];
 function g(n, e, t) {
@@ -7047,7 +7028,7 @@ function C(n, e) {
     isValid: l
   };
 }
-function b(n) {
+function R(n) {
   var r;
   const e = /^(0[1-9]|1[[0-2]).*$/, t = n.match(e), s = t ? parseInt(t[1].toString(), 10) : null, l = /^(0[1-9]|1[[0-2])(\d{2})$/, i = n.match(l), a = i ? parseInt(i[2].toString(), 10) : null;
   if (s) {
@@ -7113,7 +7094,7 @@ function areValuesComplete(values) {
     if ("number" in values && !f(values.number ?? "").isValid) {
         return false;
     }
-    if ("expiry" in values && !b(values.expiry ?? "").isValid) {
+    if ("expiry" in values && !R(values.expiry ?? "").isValid) {
         return false;
     }
     if ("cvc" in values &&
@@ -7134,7 +7115,7 @@ function isAcceptedBrand(acceptedBrands, cardNumberValidationResult) {
     return isBrandAccepted || isLocalBrandAccepted;
 }
 function formatExpiry(expiry) {
-    const parsedExpiry = b(expiry);
+    const parsedExpiry = R(expiry);
     if (!parsedExpiry.isValid) {
         return null;
     }
@@ -7157,7 +7138,7 @@ function getCardFormSchema(acceptedBrands) {
         expiry: z
             .string()
             .min(1, "Required")
-            .refine((value) => b(value).isValid, {
+            .refine((value) => R(value).isValid, {
             message: "Invalid expiry",
         }),
         cvc: z
@@ -7403,44 +7384,69 @@ function useForwardedInputRef(ref) {
     return inputRef;
 }
 function mask(format) {
-    return format.split("").map((char) => {
+    const maskArray = [];
+    let isObfuscated = false;
+    format.split("").forEach((char) => {
+        if (char === "[") {
+            isObfuscated = true;
+            return;
+        }
+        else if (char === "]") {
+            isObfuscated = false;
+            return;
+        }
+        let value = char;
         if (char === "9") {
-            return /\d/;
+            value = isObfuscated ? [/\d/] : /\d/;
         }
-        return char;
+        maskArray.push(value);
     });
+    return maskArray;
 }
-const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, ...props }, ref) {
+const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, obfuscateValue, ...props }, ref) {
     const { validationMode } = React.useContext(EvervaultInputContext);
     const inputRef = useForwardedInputRef(ref);
     const methods = useFormContext();
-    return (jsxRuntime.jsx(Controller, { control: methods.control, name: name, shouldUnregister: true, render: ({ field, fieldState }) => (jsxRuntime.jsx(MaskInput
+    const { field, fieldState } = useController({
+        control: methods.control,
+        name,
+        shouldUnregister: true,
+    });
+    const obfuscationCharacter = React.useMemo(() => {
+        if (typeof obfuscateValue === "string") {
+            return obfuscateValue;
+        }
+        else {
+            return "•";
+        }
+    }, [obfuscateValue]);
+    return (jsxRuntime.jsx(MaskInput
+    // Overridable props
+    , { 
         // Overridable props
-        , { 
-            // Overridable props
-            id: field.name, ...props, 
-            // Strict props
-            ref: mergeRefs(inputRef, field.ref), editable: !field.disabled && (props.editable ?? true), onBlur: (evt) => {
-                const shouldValidate = validationMode === "onBlur" ||
-                    validationMode === "onTouched" ||
-                    validationMode === "all";
-                methods.setValue(field.name, field.value, {
-                    shouldDirty: true,
-                    shouldTouch: true,
-                    shouldValidate,
-                });
-                props.onBlur?.(evt);
-            }, mask: mask, maskAutoComplete: !!mask, value: field.value, onChangeText: (masked, unmasked) => {
-                const shouldValidate = (validationMode === "onTouched" && fieldState.isTouched) ||
-                    ((validationMode === "onChange" || validationMode === "all") &&
-                        (!!fieldState.error || fieldState.isTouched));
-                methods.setValue(field.name, unmasked, {
-                    shouldDirty: true,
-                    shouldValidate,
-                });
-            }, 
-            // Remove unwanted props
-            defaultValue: undefined, onChange: undefined })) }));
+        id: field.name, ...props, 
+        // Strict props
+        ref: mergeRefs(inputRef, field.ref), editable: !field.disabled && (props.editable ?? true), onBlur: (evt) => {
+            const shouldValidate = validationMode === "onBlur" ||
+                validationMode === "onTouched" ||
+                validationMode === "all";
+            methods.setValue(field.name, field.value, {
+                shouldDirty: true,
+                shouldTouch: true,
+                shouldValidate,
+            });
+            props.onBlur?.(evt);
+        }, mask: mask, maskAutoComplete: !!mask, obfuscationCharacter: obfuscationCharacter, showObfuscatedValue: !!obfuscateValue, value: field.value, onChangeText: (masked, unmasked) => {
+            const shouldValidate = (validationMode === "onTouched" && fieldState.isTouched) ||
+                ((validationMode === "onChange" || validationMode === "all") &&
+                    (!!fieldState.error || fieldState.isTouched));
+            methods.setValue(field.name, unmasked, {
+                shouldDirty: true,
+                shouldValidate,
+            });
+        }, 
+        // Remove unwanted props
+        defaultValue: undefined, onChange: undefined }));
 });
 
 const DEFAULT_ACCEPTED_BRANDS = [];
@@ -7513,9 +7519,9 @@ const CardExpiry = React.forwardRef(function CardExpiry(props, ref) {
     return (jsxRuntime.jsx(EvervaultInput, { placeholder: "MM / YY", ...props, ref: ref, name: "expiry", mask: CARD_EXPIRY_MASK, inputMode: "numeric", autoComplete: "cc-exp", keyboardType: "number-pad" }));
 });
 
-const DEFAULT_CARD_CVC_MASK = mask("999");
+const DEFAULT_CARD_CVC_MASK = mask("[999]");
 const CARD_CVC_MASKS = {
-    "american-express": mask("9999"),
+    "american-express": mask("[9999]"),
 };
 const CardCvc = React.forwardRef(function CardCvc(props, ref) {
     const methods = useFormContext();
@@ -7533,10 +7539,10 @@ const CardCvc = React.forwardRef(function CardCvc(props, ref) {
     return (jsxRuntime.jsx(EvervaultInput, { placeholder: "CVC", ...props, ref: ref, name: "cvc", mask: mask, inputMode: "numeric", autoComplete: "cc-csc", keyboardType: "number-pad" }));
 });
 
-const DEFAULT_CARD_NUMBER_MASK = mask("9999 9999 9999 9999");
+const DEFAULT_CARD_NUMBER_MASK = mask("9999 99[99 9999 9999]");
 const CARD_NUMBER_MASKS = {
-    unionpay: mask("9999 9999 9999 9999 999"),
-    "american-express": mask("9999 999999 99999"),
+    unionpay: mask("9999 99[99 9999 9999 999]"),
+    "american-express": mask("9999 99[9999 99999]"),
 };
 const CardNumber = React.forwardRef(function CardNumber(props, ref) {
     const mask = React.useCallback((text) => {