@evervault/react - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

dist/evervault-react.main.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="node" />
-
 import { events } from 'events';
@@ -41,16 +39,16 @@ import * as React_2 from 'react';
 
-export declare type CardBrandName = 
-"american-express" | 
-"visa" | 
-"mastercard" | 
-"discover" | 
-"jcb" | 
-"diners-club" | 
-"unionpay" | 
-"maestro" | 
-"mir" | 
-"elo" | 
-"hipercard" | 
-"hiper" |
-"szep";
+export declare type CardBrandName =
+| "american-express"
+| "visa"
+| "mastercard"
+| "discover"
+| "jcb"
+| "diners-club"
+| "unionpay"
+| "maestro"
+| "mir"
+| "elo"
+| "hipercard"
+| "hiper"
+| "szep";
 
@@ -65,3 +63,3 @@ declare interface CardEvents {
 
-declare interface CardExpiry {
+export declare interface CardExpiry {
     month: string | null;
@@ -132,3 +130,6 @@ year: string | null;
 export declare interface CardTranslations extends TranslationsObject {
-    number: CardFieldTranslations<{ invalid?: string, unsupportedBrand?: string }>;
+    number: CardFieldTranslations<{
+        invalid?: string;
+        unsupportedBrand?: string;
+    }>;
     expiry: CardFieldTranslations<{ invalid?: string }>;
@@ -171,2 +172,38 @@ cvc: CardFieldTranslations<{ invalid?: string }>;
             },
+            textarea: {
+                height: 40,
+                fontSize: 16,
+                borderRadius: 6,
+                color: "#0a2540",
+                padding: "6px 12px",
+                backgroundColor: "#fff",
+                border: "1px solid #e6ebf1",
+
+                boxShadow:
+                "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
+
+                "&::placeholder": {
+                    color: "#717f96",
+                },
+
+                "&:focus": {
+                    outline: "none",
+                    borderColor: "#63e",
+                }
+            },
+            select: {
+                height: 40,
+                fontSize: 16,
+                borderRadius: 6,
+                color: "#0a2540",
+                padding: "6px 12px",
+                backgroundColor: "#fff",
+                border: "1px solid #e6ebf1",
+            },
+            button: {
+                fontSize: 16,
+                height: 40,
+                border: "1px solid #e6ebf1",
+                padding: "0 12px",
+            },
             ".field[ev-valid=false] input": {
@@ -194,2 +231,7 @@ color: "#df1c41",
 
+export declare interface ComponentError {
+    code: string;
+    message: string;
+}
+
 declare interface ComponentsConfig {
@@ -288,3 +330,3 @@ url: string;
         NOC: "NOC";
-        LCY: "LCY";
+        BFS: "QkTC";
     };
@@ -317,3 +359,2 @@ header: {
         }>;
-        getAppForms: () => Promise<Form[]>;
     };
@@ -377,3 +418,2 @@ input: {
     }>;
-    enableFormEncryption(thirdPartyForm: HTMLFormElement | undefined, formUuid: string | undefined): Promise<void>;
     isInDebugMode(): boolean;
@@ -383,2 +423,3 @@ }
 export declare interface EvervaultFrameClientMessages {
+    EV_ERROR: ComponentError | undefined;
     EV_RESIZE: { height: number };
@@ -441,11 +482,35 @@ EV_FRAME_READY: undefined;
 
-declare interface Form {
-    uuid: string;
-    targetElements: TargetElement[];
-    appUuid: string;
-    createdAt: Date;
-    updatedAt: Date | null;
-    deletedAt: Date | null;
+declare class Form {
+    #private;
+    constructor(client: EvervaultClient, options?: FormOptions);
+    get config(): {
+        theme: ThemeDefinition | undefined;
+        config: {
+            formSubmissionUrl: string | undefined;
+            formUuid: string | undefined;
+        };
+    };
+    mount(selector: SelectorType): this;
+    unmount(): this;
+    update(options: FormOptions): this;
+    on<T extends keyof FormEvents>(event: T, callback: FormEvents[T]): () => void;
 }
 
+declare interface FormEvents {
+    ready: () => void;
+    error: () => void;
+    submitted: () => void;
+}
+
+export declare interface FormFrameClientMessages extends EvervaultFrameClientMessages {
+    EV_ERROR: undefined;
+    EV_SUBMITTED: undefined;
+}
+
+export declare interface FormOptions {
+    theme?: ThemeDefinition;
+    formUuid?: string;
+    formSubmissionUrl?: string;
+}
+
 declare interface HttpConfig {
@@ -534,2 +599,21 @@ keysUrl: string;
 
+            textarea: {
+                height: 40,
+                fontSize: 16,
+                borderRadius: 6,
+                color: "#0a2540",
+                padding: "6 12px",
+                backgroundColor: "#fff",
+                border: "1px solid #e6ebf1",
+
+                "&::placeholder": {
+                    color: "transparent",
+                },
+
+                "&:focus": {
+                    outline: "none",
+                    borderColor: "#63e",
+                },
+            },
+
             ".field[ev-valid=false] input": {
@@ -615,2 +699,24 @@ color: "#df1c41",
 
+            textarea: {
+                height: 40,
+                fontSize: 16,
+                borderRadius: 0,
+                color: "#0a2540",
+                padding: "6 12px",
+                backgroundColor: "#fff",
+                border: "1px solid #e6ebf1",
+
+                boxShadow:
+                "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
+
+                "&::placeholder": {
+                    color: "#717f96",
+                },
+
+                "&:focus": {
+                    outline: "none",
+                    borderColor: "#63e",
+                },
+            },
+
             ".field[ev-valid=false] input": {
@@ -914,7 +1020,2 @@ color: "#df1c41",
 
-declare interface TargetElement {
-    elementType: string;
-    elementName: string;
-}
-
 export declare type ThemeDefinition = ThemeObject | ThemeFunction;
@@ -945,2 +1046,56 @@
 
+export declare function ThreeDSecure({ session, theme, size, onReady, onError, onSuccess, onFailure, }: ThreeDSecureProps): React_2.JSX.Element;
+
+declare class ThreeDSecure_2 {
+    #private;
+    constructor(client: EvervaultClient, session: string, options?: ThreeDSecureOptions);
+    get config(): {
+        theme: ThemeDefinition | undefined;
+        config: {
+            session: string;
+            size: {
+                width: string;
+                height: string;
+            } | undefined;
+            isOverlay: boolean;
+        };
+    };
+    mount(selector?: SelectorType): this;
+    update(options?: ThreeDSecureOptions): this;
+    unmount(): this;
+    on<T extends keyof ThreeDSecureEvents>(event: T, callback: ThreeDSecureEvents[T]): () => void;
+}
+
+declare interface ThreeDSecureEvents {
+    ready: () => void;
+    success: () => void;
+    failure: () => void;
+    error: (error: ComponentError) => void;
+}
+
+export declare interface ThreeDSecureFrameClientMessages
+extends EvervaultFrameClientMessages {
+    EV_SUCCESS: undefined;
+    EV_FAILURE: undefined;
+    EV_CANCEL: undefined;
+}
+
+export declare interface ThreeDSecureOptions {
+    theme?: ThemeDefinition;
+    size?: { width: string; height: string };
+}
+
+declare interface ThreeDSecureProps {
+    session: string;
+    theme?: ThemeDefinition;
+    size?: {
+        width: string;
+        height: string;
+    };
+    onReady?: () => void;
+    onSuccess?: () => void;
+    onFailure?: () => void;
+    onError?: (error: ComponentError) => void;
+}
+
 export declare interface TranslationsObject {
@@ -962,2 +1117,4 @@ [key: string]: string | TranslationsObject | undefined;
     reveal(request: Request): Reveal_2;
+    form(opts?: FormOptions): Form;
+    threeDSecure(session: string, opts?: ThreeDSecureOptions): ThreeDSecure_2;
 }
@@ -967,2 +1124,22 @@
 
+export declare function useThreeDSecure(opts?: UseThreeDSecureOptions): {
+    start: (session: string, callbacks?: UseThreeDSecureCallbacks) => void;
+    update: (newOptions?: UseThreeDSecureOptions) => void;
+};
+
+declare interface UseThreeDSecureCallbacks {
+    onReady?: () => void;
+    onSuccess?: () => void;
+    onFailure?: () => void;
+    onError?: (error: ComponentError) => void;
+}
+
+declare interface UseThreeDSecureOptions {
+    theme?: ThemeDefinition;
+    size?: {
+        width: string;
+        height: string;
+    };
+}
+
 export { }

dist/evervault-react.main.js

 "use client";
-import * as l from "react";
-import { createContext as L, useContext as C, useState as S, useRef as p, useLayoutEffect as y, useEffect as m, useMemo as B } from "react";
-function T(e) {
-  return (t) => ({
+import * as d from "react";
+import { createContext as C, useContext as j, useState as S, useRef as p, useLayoutEffect as y, useEffect as g, useMemo as B, useCallback as L } from "react";
+function _(o) {
+  return (n) => ({
     styles: {
@@ -33,2 +33,34 @@ body: {
       },
+      textarea: {
+        height: 40,
+        fontSize: 16,
+        borderRadius: 6,
+        color: "#0a2540",
+        padding: "6px 12px",
+        backgroundColor: "#fff",
+        border: "1px solid #e6ebf1",
+        boxShadow: "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
+        "&::placeholder": {
+          color: "#717f96"
+        },
+        "&:focus": {
+          outline: "none",
+          borderColor: "#63e"
+        }
+      },
+      select: {
+        height: 40,
+        fontSize: 16,
+        borderRadius: 6,
+        color: "#0a2540",
+        padding: "6px 12px",
+        backgroundColor: "#fff",
+        border: "1px solid #e6ebf1"
+      },
+      button: {
+        fontSize: 16,
+        height: 40,
+        border: "1px solid #e6ebf1",
+        padding: "0 12px"
+      },
       ".field[ev-valid=false] input": {
@@ -51,8 +83,8 @@ color: "#df1c41",
       },
-      ...e ? t.extend(e) : {}
+      ...o ? n.extend(o) : {}
     }
   });
 }
-function j(e) {
-  return (t) => ({
+function D(o) {
+  return (n) => ({
     styles: {
@@ -97,2 +129,18 @@ body: {
       },
+      textarea: {
+        height: 40,
+        fontSize: 16,
+        borderRadius: 6,
+        color: "#0a2540",
+        padding: "6 12px",
+        backgroundColor: "#fff",
+        border: "1px solid #e6ebf1",
+        "&::placeholder": {
+          color: "transparent"
+        },
+        "&:focus": {
+          outline: "none",
+          borderColor: "#63e"
+        }
+      },
       ".field[ev-valid=false] input": {
@@ -123,8 +171,8 @@ color: "#df1c41",
       },
-      ...e ? t.extend(e) : {}
+      ...o ? n.extend(o) : {}
     }
   });
 }
-function _(e) {
-  return (t) => ({
+function M(o) {
+  return (n) => ({
     styles: {
@@ -163,2 +211,19 @@ body: {
       },
+      textarea: {
+        height: 40,
+        fontSize: 16,
+        borderRadius: 0,
+        color: "#0a2540",
+        padding: "6 12px",
+        backgroundColor: "#fff",
+        border: "1px solid #e6ebf1",
+        boxShadow: "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
+        "&::placeholder": {
+          color: "#717f96"
+        },
+        "&:focus": {
+          outline: "none",
+          borderColor: "#63e"
+        }
+      },
       ".field[ev-valid=false] input": {
@@ -243,123 +308,123 @@ color: "#df1c41",
       },
-      ...e ? t.extend(e) : {}
+      ...o ? n.extend(o) : {}
     }
   });
 }
-const D = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  clean: T,
-  material: j,
-  minimal: _
-}, Symbol.toStringTag, { value: "Module" })), R = L(null);
-function E() {
+  clean: _,
+  material: D,
+  minimal: M
+}, Symbol.toStringTag, { value: "Module" })), R = C(null);
+function x() {
   if (typeof window > "u")
     return null;
-  if (typeof l.useContext != "function")
+  if (typeof d.useContext != "function")
     throw new Error(
       "You must use React >= 18.0 in order to use useEvervault()"
     );
-  const e = l.useContext(R);
-  if (!e)
+  const o = d.useContext(R);
+  if (!o)
     throw new Error(
       "You must wrap your app in an <EvervaultProvider> to use useEvervault()"
     );
-  return e;
+  return o;
 }
-const P = L(
+const P = C(
   void 0
 );
-function k() {
-  const e = C(P);
-  if (!e)
+function I() {
+  const o = j(P);
+  if (!o)
     throw new Error("Reveal consumers must be used within a Reveal component");
-  return e;
+  return o;
 }
 function O({
-  path: e,
-  onCopy: t,
-  ...o
+  path: o,
+  onCopy: n,
+  ...t
 }) {
-  const [r, a] = S(null), u = p(null), { reveal: n } = k();
-  return l.useEffect(() => {
-    if (!(!r || !t))
-      return r == null ? void 0 : r.on("copy", t);
-  }, [r, t]), y(() => {
-    if ((!u.current || r) ?? !n)
+  const [i, f] = S(null), l = p(null), { reveal: e } = I();
+  return d.useEffect(() => {
+    if (!(!i || !n))
+      return i == null ? void 0 : i.on("copy", n);
+  }, [i, n]), y(() => {
+    if ((!l.current || i) ?? !e)
       return;
-    const c = n == null ? void 0 : n.copyButton(e, o);
-    c.mount(u.current), a(c);
-  }, [n, e, o, r]), /* @__PURE__ */ l.createElement("div", { ref: u });
+    const a = e == null ? void 0 : e.copyButton(o, t);
+    a.mount(l.current), f(a);
+  }, [e, o, t, i]), /* @__PURE__ */ d.createElement("div", { ref: l });
 }
-function M({ path: e, theme: t, format: o }) {
-  const [r, a] = S(null), u = p(null), { reveal: n } = k();
+function Y({ path: o, theme: n, format: t }) {
+  const [i, f] = S(null), l = p(null), { reveal: e } = I();
   return y(() => {
-    if ((!u.current || r) ?? !n)
+    if ((!l.current || i) ?? !e)
       return;
-    const c = n.text(e, {
-      theme: t,
-      format: o
+    const a = e.text(o, {
+      theme: n,
+      format: t
     });
-    c.mount(u.current), a(c);
-  }, [n, e, t, o, r]), /* @__PURE__ */ l.createElement("div", { ref: u });
+    a.mount(l.current), f(a);
+  }, [e, o, n, t, i]), /* @__PURE__ */ d.createElement("div", { ref: l });
 }
-function I({ request: e, children: t, onReady: o, onError: r }) {
-  const a = p(!1), u = E(), [n, c] = S(null), s = p(null);
-  return l.useEffect(() => {
-    if (!(!n || !o))
-      return n == null ? void 0 : n.on("ready", o);
-  }, [n, o]), l.useEffect(() => {
-    if (!(!n || !r))
-      return n == null ? void 0 : n.on("error", r);
-  }, [n, r]), m(() => {
-    if (!s.current || a.current)
+function T({ request: o, children: n, onReady: t, onError: i }) {
+  const f = p(!1), l = x(), [e, a] = S(null), c = p(null);
+  return d.useEffect(() => {
+    if (!(!e || !t))
+      return e == null ? void 0 : e.on("ready", t);
+  }, [e, t]), d.useEffect(() => {
+    if (!(!e || !i))
+      return e == null ? void 0 : e.on("error", i);
+  }, [e, i]), g(() => {
+    if (!c.current || f.current)
       return;
-    async function f() {
-      a.current = !0;
-      const d = await u;
-      if (!d)
+    async function s() {
+      f.current = !0;
+      const r = await l;
+      if (!r)
         return;
-      const v = d.ui.reveal(e);
-      c(v);
+      const v = r.ui.reveal(o);
+      a(v);
     }
-    f().catch(console.error);
-  }, [n, e, u]), /* @__PURE__ */ l.createElement(P.Provider, { value: { reveal: n } }, /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { ref: s }), t));
+    s().catch(console.error);
+  }, [e, o, l]), /* @__PURE__ */ d.createElement(P.Provider, { value: { reveal: e } }, /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement("div", { ref: c }), n));
 }
-I.Text = M;
-I.CopyButton = O;
-function F({
-  theme: e,
-  fields: t,
-  autoFocus: o,
-  translations: r,
-  onSwipe: a,
-  onReady: u,
-  onError: n,
-  onChange: c,
-  onComplete: s
+T.Text = Y;
+T.CopyButton = O;
+function J({
+  theme: o,
+  fields: n,
+  autoFocus: t,
+  translations: i,
+  onSwipe: f,
+  onReady: l,
+  onError: e,
+  onChange: a,
+  onComplete: c
 }) {
-  const f = E(), d = p(!1), v = p(null), [i, h] = l.useState(null);
-  m(() => {
-    if (!(!i || !u))
-      return i == null ? void 0 : i.on("ready", u);
-  }, [i, u]), m(() => {
-    if (!(!i || !n))
-      return i == null ? void 0 : i.on("error", n);
-  }, [i, n]), m(() => {
-    if (!(!i || !a))
-      return i == null ? void 0 : i.on("swipe", a);
-  }, [i, a]), m(() => {
-    if (!(!i || !c))
-      return i == null ? void 0 : i.on("change", c);
-  }, [i, c]), m(() => {
-    if (!(!i || !s))
-      return i == null ? void 0 : i.on("complete", s);
-  }, [i, s]);
-  const b = B(
+  const s = x(), r = p(!1), v = p(null), [u, m] = d.useState(null);
+  g(() => {
+    if (!(!u || !l))
+      return u == null ? void 0 : u.on("ready", l);
+  }, [u, l]), g(() => {
+    if (!(!u || !e))
+      return u == null ? void 0 : u.on("error", e);
+  }, [u, e]), g(() => {
+    if (!(!u || !f))
+      return u == null ? void 0 : u.on("swipe", f);
+  }, [u, f]), g(() => {
+    if (!(!u || !a))
+      return u == null ? void 0 : u.on("change", a);
+  }, [u, a]), g(() => {
+    if (!(!u || !c))
+      return u == null ? void 0 : u.on("complete", c);
+  }, [u, c]);
+  const h = B(
     () => ({
-      theme: e,
-      fields: t,
-      autoFocus: o,
-      translations: r
+      theme: o,
+      fields: n,
+      autoFocus: t,
+      translations: i
     }),
-    [e, r, t, o]
+    [o, i, n, t]
   );
@@ -369,180 +434,248 @@ return y(() => {
       return;
-    async function x() {
-      if (d.current || !v.current)
+    async function b() {
+      if (r.current || !v.current)
         return;
-      d.current = !0;
-      const w = await f;
-      if (!w)
+      r.current = !0;
+      const E = await s;
+      if (!E)
         return;
-      const z = w.ui.card(b);
-      z.mount(v.current), h(z);
+      const z = E.ui.card(h);
+      z.mount(v.current), m(z);
     }
-    i ? i.update(b) : x().catch(console.error);
-  }, [b, i]), /* @__PURE__ */ l.createElement("div", { ref: v });
+    u ? u.update(h) : b().catch(console.error);
+  }, [h, u]), /* @__PURE__ */ d.createElement("div", { ref: v });
 }
-function G({
-  theme: e,
-  autoFocus: t,
-  mode: o,
-  inputType: r,
-  length: a,
-  onReady: u,
-  onChange: n,
-  onError: c
+function K({
+  theme: o,
+  autoFocus: n,
+  mode: t,
+  inputType: i,
+  length: f,
+  onReady: l,
+  onChange: e,
+  onError: a
 }) {
-  const s = E(), f = p(!1), [d, v] = l.useState(null), i = p(null);
-  l.useEffect(() => {
-    if (!(!d || !u))
-      return d == null ? void 0 : d.on("ready", u);
-  }, [d, u]), l.useEffect(() => {
-    if (!(!d || !c))
-      return d == null ? void 0 : d.on("error", c);
-  }, [d, c]), l.useEffect(() => {
-    if (!(!d || !n))
-      return d == null ? void 0 : d.on("change", n);
-  }, [d, n]);
-  const h = B(
+  const c = x(), s = p(!1), [r, v] = d.useState(null), u = p(null);
+  d.useEffect(() => {
+    if (!(!r || !l))
+      return r == null ? void 0 : r.on("ready", l);
+  }, [r, l]), d.useEffect(() => {
+    if (!(!r || !a))
+      return r == null ? void 0 : r.on("error", a);
+  }, [r, a]), d.useEffect(() => {
+    if (!(!r || !e))
+      return r == null ? void 0 : r.on("change", e);
+  }, [r, e]);
+  const m = B(
     () => ({
-      theme: e,
-      length: a,
-      autoFocus: t,
-      mode: o,
-      inputType: r
+      theme: o,
+      length: f,
+      autoFocus: n,
+      mode: t,
+      inputType: i
     }),
-    [e, a, t, o, r]
+    [o, f, n, t, i]
   );
   return y(() => {
-    if (!i.current)
+    if (!u.current)
       return;
-    async function b() {
-      if (f.current || !i.current)
+    async function h() {
+      if (s.current || !u.current)
         return;
-      f.current = !0;
-      const x = await s;
-      if (!x)
+      s.current = !0;
+      const b = await c;
+      if (!b)
         return;
-      const w = x.ui.pin(h);
-      w.mount(i.current), v(w);
+      const E = b.ui.pin(m);
+      E.mount(u.current), v(E);
     }
-    d ? d.update(h) : b().catch(console.error);
-  }, [d, h]), /* @__PURE__ */ l.createElement("div", { ref: i });
+    r ? r.update(m) : h().catch(console.error);
+  }, [r, m]), /* @__PURE__ */ d.createElement("div", { ref: u });
 }
-class Y extends Promise {
-  async encrypt(t) {
-    return (await this).encrypt(t);
+function N({
+  session: o,
+  theme: n,
+  size: t,
+  onReady: i,
+  onError: f,
+  onSuccess: l,
+  onFailure: e
+}) {
+  const a = x(), c = d.useRef(!1), s = d.useRef(null), [r, v] = d.useState(
+    null
+  );
+  d.useEffect(() => {
+    if (!(!r || !i))
+      return r == null ? void 0 : r.on("ready", i);
+  }, [r, i]), d.useEffect(() => {
+    if (!(!r || !l))
+      return r == null ? void 0 : r.on("success", l);
+  }, [r, l]), d.useEffect(() => {
+    if (!(!r || !e))
+      return r == null ? void 0 : r.on("failure", e);
+  }, [r, e]), d.useEffect(() => {
+    if (!(!r || !f))
+      return r == null ? void 0 : r.on("error", f);
+  }, [r, f]);
+  const u = d.useMemo(
+    () => ({
+      theme: n,
+      size: t
+    }),
+    [n, t]
+  );
+  return d.useLayoutEffect(() => {
+    async function m() {
+      if (c.current)
+        return;
+      c.current = !0;
+      const h = await a;
+      if (!h)
+        return;
+      const b = h.ui.threeDSecure(o, u);
+      b.mount(s.current), v(b);
+    }
+    r ? r.update(u) : m().catch(console.error);
+  }, [r, o, u]), /* @__PURE__ */ d.createElement("div", { ref: s });
+}
+function Q(o) {
+  const n = x(), t = p(null), i = L(
+    (l, e) => {
+      if (t.current)
+        return;
+      async function a() {
+        const c = await n;
+        c && (t.current = c.ui.threeDSecure(l, o), e != null && e.onReady && t.current.on("ready", e.onReady), e != null && e.onSuccess && t.current.on("success", e.onSuccess), e != null && e.onFailure && t.current.on("failure", e.onFailure), e != null && e.onError && t.current.on("error", e.onError), t.current.mount());
+      }
+      a();
+    },
+    [n, o]
+  ), f = L((l) => {
+    t.current && t.current.update(l);
+  }, []);
+  return {
+    start: i,
+    update: f
+  };
+}
+class U extends Promise {
+  async encrypt(n) {
+    return (await this).encrypt(n);
   }
-  async decrypt(t, o) {
-    return (await this).decrypt(t, o);
+  async decrypt(n, t) {
+    return (await this).decrypt(n, t);
   }
 }
-const U = "https://js.evervault.com/v2";
-function V(e) {
-  const t = document.createElement("script");
-  e ? t.src = e : t.src = U;
-  const o = document.head || document.body;
-  if (!o)
+const V = "https://js.evervault.com/v2";
+function A(o) {
+  const n = document.createElement("script");
+  o ? n.src = o : n.src = V;
+  const t = document.head || document.body;
+  if (!t)
     throw new Error(
       "Expected document.body not to be null. Evervault.js requires a <body> element."
     );
-  return o.appendChild(t), t;
+  return t.appendChild(n), n;
 }
-let g = null;
-function A(e) {
-  return g !== null || (g = new Promise((t, o) => {
+let w = null;
+function H(o) {
+  return w !== null || (w = new Promise((n, t) => {
     if (typeof window > "u") {
-      t(void 0);
+      n(void 0);
       return;
     }
     if (window.Evervault) {
-      console.warn("Evervault has already been loaded"), t(window.Evervault);
+      console.warn("Evervault has already been loaded"), n(window.Evervault);
       return;
     }
     try {
-      const r = V(e);
-      r.addEventListener("load", () => {
-        window.Evervault ? t(window.Evervault) : o(new Error("Evervault.js not available"));
-      }), r.addEventListener("error", () => {
-        o(new Error("Failed to load Evervault.js"));
+      const i = A(o);
+      i.addEventListener("load", () => {
+        window.Evervault ? n(window.Evervault) : t(new Error("Evervault.js not available"));
+      }), i.addEventListener("error", () => {
+        t(new Error("Failed to load Evervault.js"));
       });
-    } catch (r) {
-      o(r);
+    } catch (i) {
+      t(i);
     }
-  })), g;
+  })), w;
 }
-function H(e) {
-  const t = Promise.resolve().then(() => A(e));
-  let o = !1;
-  return t.catch((r) => {
-    o || console.warn(r);
-  }), o = !0, t.then((r) => typeof window < "u" ? window.Evervault : r ?? void 0);
+function q(o) {
+  const n = Promise.resolve().then(() => H(o));
+  let t = !1;
+  return n.catch((i) => {
+    t || console.warn(i);
+  }), t = !0, n.then((i) => typeof window < "u" ? window.Evervault : i ?? void 0);
 }
-const J = ({
-  teamId: e,
-  appId: t,
-  customConfig: o,
-  children: r,
-  ...a
+const W = ({
+  teamId: o,
+  appId: n,
+  customConfig: t,
+  children: i,
+  ...f
 }) => {
   if (typeof window > "u")
-    return /* @__PURE__ */ l.createElement(R.Provider, { value: null }, r);
-  const u = l.useMemo(
-    () => new Y((n, c) => {
-      H(o == null ? void 0 : o.jsSdkUrl).then((s) => {
-        s !== void 0 ? n(new s(e, t, o)) : (console.error("Evervault.js not available"), c("Evervault.js not available"));
-      }).catch((s) => c(s));
+    return /* @__PURE__ */ d.createElement(R.Provider, { value: null }, i);
+  const l = d.useMemo(
+    () => new U((e, a) => {
+      q(t == null ? void 0 : t.jsSdkUrl).then((c) => {
+        c !== void 0 ? e(new c(o, n, t)) : (console.error("Evervault.js not available"), a("Evervault.js not available"));
+      }).catch((c) => a(c));
     }),
     []
   );
-  return /* @__PURE__ */ l.createElement(R.Provider, { ...a, value: u }, r);
+  return /* @__PURE__ */ d.createElement(R.Provider, { ...f, value: l }, i);
 };
-function K({
-  onChange: e,
-  config: t,
-  onInputsLoad: o
+function X({
+  onChange: o,
+  config: n,
+  onInputsLoad: t
 }) {
-  const r = l.useId();
+  const i = d.useId();
   if (typeof window > "u")
-    return /* @__PURE__ */ l.createElement("div", { id: r });
-  const a = E(), { height: u = "auto", ...n } = t ?? {}, c = n ? { height: u, ...n } : { height: u };
-  return l.useEffect(() => {
-    a == null || a.then((s) => {
-      const f = s.inputs(r, c);
-      f == null || f.on("change", (d) => {
-        typeof e == "function" && e(d);
-      }), o && (f == null ? void 0 : f.isInputsLoaded) != null && f.isInputsLoaded instanceof Promise && f.isInputsLoaded.then(() => o());
+    return /* @__PURE__ */ d.createElement("div", { id: i });
+  const f = x(), { height: l = "auto", ...e } = n ?? {}, a = e ? { height: l, ...e } : { height: l };
+  return d.useEffect(() => {
+    f == null || f.then((c) => {
+      const s = c.inputs(i, a);
+      s == null || s.on("change", (r) => {
+        typeof o == "function" && o(r);
+      }), t && (s == null ? void 0 : s.isInputsLoaded) != null && s.isInputsLoaded instanceof Promise && s.isInputsLoaded.then(() => t());
     });
-  }, [a]), /* @__PURE__ */ l.createElement("div", { id: r });
+  }, [f]), /* @__PURE__ */ d.createElement("div", { id: i });
 }
-function N({
-  request: e,
-  config: t,
-  onCopy: o,
-  onRevealLoad: r,
-  onRevealError: a
+function Z({
+  request: o,
+  config: n,
+  onCopy: t,
+  onRevealLoad: i,
+  onRevealError: f
 }) {
-  const u = l.useId();
+  const l = d.useId();
   if (typeof window > "u")
-    return /* @__PURE__ */ l.createElement("div", { id: u });
-  const n = E(), { height: c = "auto", ...s } = t ?? {}, f = s ? { height: c, ...s } : { height: c };
-  return l.useEffect(() => {
-    n == null || n.then((d) => {
-      const v = d.reveal(u, e, f, o);
+    return /* @__PURE__ */ d.createElement("div", { id: l });
+  const e = x(), { height: a = "auto", ...c } = n ?? {}, s = c ? { height: a, ...c } : { height: a };
+  return d.useEffect(() => {
+    e == null || e.then((r) => {
+      const v = r.reveal(l, o, s, t);
       (v == null ? void 0 : v.isRevealLoaded) != null && v.isRevealLoaded instanceof Promise && v.isRevealLoaded.then(() => {
-        r && r();
-      }).catch((i) => {
-        a && a(i);
+        i && i();
+      }).catch((u) => {
+        f && f(u);
       });
     });
-  }, [n]), /* @__PURE__ */ l.createElement("div", { id: u });
+  }, [e]), /* @__PURE__ */ d.createElement("div", { id: l });
 }
 export {
-  F as Card,
-  K as EvervaultInput,
-  J as EvervaultProvider,
-  N as EvervaultReveal,
-  G as Pin,
-  Y as PromisifiedEvervaultClient,
-  I as Reveal,
-  D as themes,
-  E as useEvervault
+  J as Card,
+  X as EvervaultInput,
+  W as EvervaultProvider,
+  Z as EvervaultReveal,
+  K as Pin,
+  U as PromisifiedEvervaultClient,
+  T as Reveal,
+  N as ThreeDSecure,
+  G as themes,
+  x as useEvervault,
+  Q as useThreeDSecure
 };

package.json

 {
   "private": false,
   "name": "@evervault/react",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "React package for the Evervault SDK",
@@ -36,6 +36,6 @@ "license": "MIT",
     "vite-plugin-dts": "^3.6.3",
-    "types": "^0.0.0",
-    "themes": "^0.0.0",
-    "@evervault/browser": "^2.23.0",
-    "tsconfig": "^0.0.1"
+    "types": "^0.1.0",
+    "themes": "^0.1.1",
+    "tsconfig": "^0.0.1",
+    "@evervault/browser": "^2.26.0"
   },
@@ -42,0 +42,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

79754

increased by15.66%

Lines of code

1705

increased by21.27%

No dependency changes