@evervault/react - npm Package Compare versions

Comparing version 2.10.0 to 2.11.0

dist/evervault-react.main.d.ts

@@ -16,3 +16,3 @@ import { events } from 'events';
 
-export declare function Card({ theme, fields, autoFocus, translations, onSwipe, onReady, onError, onChange, onComplete, autoComplete, autoProgress, acceptedBrands, }: CardProps): React_2.JSX.Element;
+export declare function Card({ theme, icons, fields, autoFocus, translations, onSwipe, onReady, onError, onChange, onComplete, autoComplete, autoProgress, acceptedBrands, }: CardProps): React_2.JSX.Element;
 
@@ -26,2 +26,3 @@ declare class Card_2 {
         config: {
+            icons: boolean | CardIcons | undefined;
             autoFocus: boolean | undefined;
@@ -98,3 +99,6 @@ translations: Partial<CardTranslations> | undefined;
 
+export declare type CardIcons = Record<CardBrandName | "default", string>;
+
 export declare interface CardOptions {
+    icons?: boolean | CardIcons;
     theme?: ThemeDefinition;
@@ -138,2 +142,3 @@ autoFocus?: boolean;
     theme?: ThemeDefinition;
+    icons?: boolean | CardIcons;
     translations?: CardTranslations;
@@ -163,2 +168,5 @@ fields?: CardField[];
         styles: {
+            ":root": {
+                "--icon-offset": "1.9rem",
+            },
             body: {
@@ -181,3 +189,2 @@ paddingBottom: 2,
                 border: "1px solid #e6ebf1",
-
                 boxShadow:
@@ -214,3 +221,3 @@ "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
                     borderColor: "#63e",
-                }
+                },
             },
@@ -249,2 +256,16 @@ select: {
             },
+            "[ev-component=card]:has(.icon)": {
+                "& .field[ev-name=number]": {
+                    position: "relative",
+                },
+                "& .icon": {
+                    left: 10,
+                    height: 20,
+                    position: "absolute",
+                    top: "var(--icon-offset)",
+                },
+                "& .field[ev-name=number] input": {
+                    paddingLeft: 48,
+                },
+            },
             ...(extended ? utils.extend(extended) : {}),
@@ -667,2 +688,22 @@ },
             },
+
+            "[ev-component=card]:has(.icon)": {
+                "& .icon": {
+                    left: 10,
+                    height: 20,
+                    position: "absolute",
+                    top: 10,
+                    opacity: 0,
+                },
+
+                "& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])":
+                    {
+                    "& .icon": {
+                        opacity: 1,
+                    },
+                    "& input": {
+                        paddingLeft: 45,
+                    },
+                },
+            },
             ...(extended ? utils.extend(extended) : {}),
@@ -676,2 +717,6 @@ },
         styles: {
+            ":root": {
+                "--icon-offset": "34px",
+            },
+
             body: {
@@ -840,3 +885,13 @@ paddingBottom: 2,
             },
-
+            "[ev-component=card]:has(.icon)": {
+                "& .icon": {
+                    left: 10,
+                    height: 20,
+                    position: "absolute",
+                    top: "var(--icon-offset)",
+                },
+                "& .field[ev-name=number] input": {
+                    paddingLeft: 48,
+                },
+            },
             ...(extended ? utils.extend(extended) : {}),
@@ -843,0 +898,0 @@ },

dist/evervault-react.main.js

 "use client";
 import * as u from "react";
-import { createContext as P, useContext as M, useState as z, useRef as m, useLayoutEffect as y, useEffect as g, useMemo as I, useCallback as B } from "react";
-function O(o) {
+import { createContext as P, useContext as O, useState as z, useRef as m, useLayoutEffect as y, useEffect as w, useMemo as I, useCallback as B } from "react";
+function Y(o) {
   return (n) => ({
     styles: {
+      ":root": {
+        "--icon-offset": "1.9rem"
+      },
       body: {
@@ -82,2 +85,16 @@ paddingBottom: 2
       },
+      "[ev-component=card]:has(.icon)": {
+        "& .field[ev-name=number]": {
+          position: "relative"
+        },
+        "& .icon": {
+          left: 10,
+          height: 20,
+          position: "absolute",
+          top: "var(--icon-offset)"
+        },
+        "& .field[ev-name=number] input": {
+          paddingLeft: 48
+        }
+      },
       ...o ? n.extend(o) : {}
@@ -87,3 +104,3 @@ }
 }
-function Y(o) {
+function U(o) {
   return (n) => ({
@@ -170,2 +187,19 @@ styles: {
       },
+      "[ev-component=card]:has(.icon)": {
+        "& .icon": {
+          left: 10,
+          height: 20,
+          position: "absolute",
+          top: 10,
+          opacity: 0
+        },
+        "& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])": {
+          "& .icon": {
+            opacity: 1
+          },
+          "& input": {
+            paddingLeft: 45
+          }
+        }
+      },
       ...o ? n.extend(o) : {}
@@ -175,5 +209,8 @@ }
 }
-function U(o) {
+function V(o) {
   return (n) => ({
     styles: {
+      ":root": {
+        "--icon-offset": "34px"
+      },
       body: {
@@ -307,2 +344,13 @@ paddingBottom: 2
       },
+      "[ev-component=card]:has(.icon)": {
+        "& .icon": {
+          left: 10,
+          height: 20,
+          position: "absolute",
+          top: "var(--icon-offset)"
+        },
+        "& .field[ev-name=number] input": {
+          paddingLeft: 48
+        }
+      },
       ...o ? n.extend(o) : {}
@@ -312,9 +360,9 @@ }
 }
-const N = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  clean: O,
-  material: Y,
-  minimal: U
+  clean: Y,
+  material: U,
+  minimal: V
 }, Symbol.toStringTag, { value: "Module" })), S = P(null);
-function x() {
+function g() {
   if (typeof window > "u")
@@ -337,3 +385,3 @@ return null;
 function j() {
-  const o = M(T);
+  const o = O(T);
   if (!o)
@@ -343,6 +391,6 @@ throw new Error("Reveal consumers must be used within a Reveal component");
 }
-function V({
+function A({
   path: o,
   onCopy: n,
-  ...t
+  ...r
 }) {
@@ -356,7 +404,7 @@ const [i, f] = z(null), d = m(null), { reveal: e } = j();
       return;
-    const a = e == null ? void 0 : e.copyButton(o, t);
+    const a = e == null ? void 0 : e.copyButton(o, r);
     a.mount(d.current), f(a);
-  }, [e, o, t, i]), /* @__PURE__ */ u.createElement("div", { ref: d });
+  }, [e, o, r, i]), /* @__PURE__ */ u.createElement("div", { ref: d });
 }
-function A({ path: o, theme: n, format: t }) {
+function H({ path: o, theme: n, format: r }) {
   const [i, f] = z(null), d = m(null), { reveal: e } = j();
@@ -368,16 +416,16 @@ return y(() => {
       theme: n,
-      format: t
+      format: r
     });
     a.mount(d.current), f(a);
-  }, [e, o, n, t, i]), /* @__PURE__ */ u.createElement("div", { ref: d });
+  }, [e, o, n, r, i]), /* @__PURE__ */ u.createElement("div", { ref: d });
 }
-function _({ request: o, children: n, onReady: t, onError: i }) {
-  const f = m(!1), d = x(), [e, a] = z(null), c = m(null);
+function _({ request: o, children: n, onReady: r, onError: i }) {
+  const f = m(!1), d = g(), [e, a] = z(null), c = m(null);
   return u.useEffect(() => {
-    if (!(!e || !t))
-      return e == null ? void 0 : e.on("ready", t);
-  }, [e, t]), u.useEffect(() => {
+    if (!(!e || !r))
+      return e == null ? void 0 : e.on("ready", r);
+  }, [e, r]), u.useEffect(() => {
     if (!(!e || !i))
       return e == null ? void 0 : e.on("error", i);
-  }, [e, i]), g(() => {
+  }, [e, i]), w(() => {
     if (!c.current || f.current)
@@ -387,6 +435,6 @@ return;
       f.current = !0;
-      const r = await d;
-      if (!r)
+      const t = await d;
+      if (!t)
         return;
-      const v = r.ui.reveal(o);
+      const v = t.ui.reveal(o);
       a(v);
@@ -397,53 +445,56 @@ }
 }
-_.Text = A;
-_.CopyButton = V;
-function Q({
+_.Text = H;
+_.CopyButton = A;
+function W({
   theme: o,
-  fields: n,
-  autoFocus: t,
-  translations: i,
-  onSwipe: f,
-  onReady: d,
-  onError: e,
-  onChange: a,
-  onComplete: c,
-  autoComplete: s,
-  autoProgress: r,
-  acceptedBrands: v
+  icons: n,
+  fields: r,
+  autoFocus: i,
+  translations: f,
+  onSwipe: d,
+  onReady: e,
+  onError: a,
+  onChange: c,
+  onComplete: s,
+  autoComplete: t,
+  autoProgress: v,
+  acceptedBrands: p
 }) {
-  const p = x(), b = m(!1), h = m(null), [l, E] = u.useState(null);
-  g(() => {
-    if (!(!l || !d))
-      return l == null ? void 0 : l.on("ready", d);
-  }, [l, d]), g(() => {
+  const b = g(), x = m(!1), h = m(null), [l, D] = u.useState(null);
+  w(() => {
     if (!(!l || !e))
-      return l == null ? void 0 : l.on("error", e);
-  }, [l, e]), g(() => {
-    if (!(!l || !f))
-      return l == null ? void 0 : l.on("swipe", f);
-  }, [l, f]), g(() => {
+      return l == null ? void 0 : l.on("ready", e);
+  }, [l, e]), w(() => {
     if (!(!l || !a))
-      return l == null ? void 0 : l.on("change", a);
-  }, [l, a]), g(() => {
+      return l == null ? void 0 : l.on("error", a);
+  }, [l, a]), w(() => {
+    if (!(!l || !d))
+      return l == null ? void 0 : l.on("swipe", d);
+  }, [l, d]), w(() => {
     if (!(!l || !c))
-      return l == null ? void 0 : l.on("complete", c);
-  }, [l, c]);
+      return l == null ? void 0 : l.on("change", c);
+  }, [l, c]), w(() => {
+    if (!(!l || !s))
+      return l == null ? void 0 : l.on("complete", s);
+  }, [l, s]);
   const R = I(
     () => ({
       theme: o,
-      fields: n,
-      autoFocus: t,
-      translations: i,
-      autoComplete: s,
-      autoProgress: r,
-      acceptedBrands: v
+      icons: n,
+      fields: r,
+      autoFocus: i,
+      translations: f,
+      autoComplete: t,
+      autoProgress: v,
+      acceptedBrands: p
     }),
     [
       o,
+      n,
+      f,
+      r,
       i,
-      n,
       t,
-      s,
-      r,
-      v
+      v,
+      p
     ]
@@ -454,19 +505,19 @@ );
       return;
-    async function D() {
-      if (b.current || !h.current)
+    async function M() {
+      if (x.current || !h.current)
         return;
-      b.current = !0;
-      const L = await p;
+      x.current = !0;
+      const L = await b;
       if (!L)
         return;
       const C = L.ui.card(R);
-      C.mount(h.current), E(C);
+      C.mount(h.current), D(C);
     }
-    l ? l.update(R) : D().catch(console.error);
+    l ? l.update(R) : M().catch(console.error);
   }, [R, l]), /* @__PURE__ */ u.createElement("div", { ref: h });
 }
-function W({
+function X({
   theme: o,
   autoFocus: n,
-  mode: t,
+  mode: r,
   inputType: i,
@@ -478,13 +529,13 @@ length: f,
 }) {
-  const c = x(), s = m(!1), [r, v] = u.useState(null), p = m(null);
+  const c = g(), s = m(!1), [t, v] = u.useState(null), p = m(null);
   u.useEffect(() => {
-    if (!(!r || !d))
-      return r == null ? void 0 : r.on("ready", d);
-  }, [r, d]), u.useEffect(() => {
-    if (!(!r || !a))
-      return r == null ? void 0 : r.on("error", a);
-  }, [r, a]), u.useEffect(() => {
-    if (!(!r || !e))
-      return r == null ? void 0 : r.on("change", e);
-  }, [r, e]);
+    if (!(!t || !d))
+      return t == null ? void 0 : t.on("ready", d);
+  }, [t, d]), u.useEffect(() => {
+    if (!(!t || !a))
+      return t == null ? void 0 : t.on("error", a);
+  }, [t, a]), u.useEffect(() => {
+    if (!(!t || !e))
+      return t == null ? void 0 : t.on("change", e);
+  }, [t, e]);
   const b = I(
@@ -495,6 +546,6 @@ () => ({
       autoFocus: n,
-      mode: t,
+      mode: r,
       inputType: i
     }),
-    [o, f, n, t, i]
+    [o, f, n, r, i]
   );
@@ -504,19 +555,19 @@ return y(() => {
       return;
-    async function h() {
+    async function x() {
       if (s.current || !p.current)
         return;
       s.current = !0;
-      const l = await c;
-      if (!l)
+      const h = await c;
+      if (!h)
         return;
-      const E = l.ui.pin(b);
-      E.mount(p.current), v(E);
+      const l = h.ui.pin(b);
+      l.mount(p.current), v(l);
     }
-    r ? r.update(b) : h().catch(console.error);
-  }, [r, b]), /* @__PURE__ */ u.createElement("div", { ref: p });
+    t ? t.update(b) : x().catch(console.error);
+  }, [t, b]), /* @__PURE__ */ u.createElement("div", { ref: p });
 }
-function X({
+function Z({
   session: o,
   theme: n,
-  size: t,
+  size: r,
   onReady: i,
@@ -527,24 +578,24 @@ onError: f,
 }) {
-  const a = x(), c = u.useRef(!1), s = u.useRef(null), [r, v] = u.useState(
+  const a = g(), c = u.useRef(!1), s = u.useRef(null), [t, v] = u.useState(
     null
   );
   u.useEffect(() => {
-    if (!(!r || !i))
-      return r == null ? void 0 : r.on("ready", i);
-  }, [r, i]), u.useEffect(() => {
-    if (!(!r || !d))
-      return r == null ? void 0 : r.on("success", d);
-  }, [r, d]), u.useEffect(() => {
-    if (!(!r || !e))
-      return r == null ? void 0 : r.on("failure", e);
-  }, [r, e]), u.useEffect(() => {
-    if (!(!r || !f))
-      return r == null ? void 0 : r.on("error", f);
-  }, [r, f]);
+    if (!(!t || !i))
+      return t == null ? void 0 : t.on("ready", i);
+  }, [t, i]), u.useEffect(() => {
+    if (!(!t || !d))
+      return t == null ? void 0 : t.on("success", d);
+  }, [t, d]), u.useEffect(() => {
+    if (!(!t || !e))
+      return t == null ? void 0 : t.on("failure", e);
+  }, [t, e]), u.useEffect(() => {
+    if (!(!t || !f))
+      return t == null ? void 0 : t.on("error", f);
+  }, [t, f]);
   const p = u.useMemo(
     () => ({
       theme: n,
-      size: t
+      size: r
     }),
-    [n, t]
+    [n, r]
   );
@@ -556,19 +607,19 @@ return u.useLayoutEffect(() => {
       c.current = !0;
-      const h = await a;
-      if (!h)
+      const x = await a;
+      if (!x)
         return;
-      const l = h.ui.threeDSecure(o, p);
-      l.mount(s.current), v(l);
+      const h = x.ui.threeDSecure(o, p);
+      h.mount(s.current), v(h);
     }
-    r ? r.update(p) : b().catch(console.error);
-  }, [r, o, p]), /* @__PURE__ */ u.createElement("div", { ref: s });
+    t ? t.update(p) : b().catch(console.error);
+  }, [t, o, p]), /* @__PURE__ */ u.createElement("div", { ref: s });
 }
-function Z(o) {
-  const n = x(), t = m(null), i = B(
+function $(o) {
+  const n = g(), r = m(null), i = B(
     (d, e) => {
-      if (t.current)
+      if (r.current)
         return;
       async function a() {
         const c = await n;
-        c && (t.current = c.ui.threeDSecure(d, 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());
+        c && (r.current = c.ui.threeDSecure(d, o), e != null && e.onReady && r.current.on("ready", e.onReady), e != null && e.onSuccess && r.current.on("success", e.onSuccess), e != null && e.onFailure && r.current.on("failure", e.onFailure), e != null && e.onError && r.current.on("error", e.onError), r.current.mount());
       }
@@ -579,3 +630,3 @@ a();
   ), f = B((d) => {
-    t.current && t.current.update(d);
+    r.current && r.current.update(d);
   }, []);
@@ -587,24 +638,24 @@ return {
 }
-class H extends Promise {
+class q extends Promise {
   async encrypt(n) {
     return (await this).encrypt(n);
   }
-  async decrypt(n, t) {
-    return (await this).decrypt(n, t);
+  async decrypt(n, r) {
+    return (await this).decrypt(n, r);
   }
 }
-const q = "https://js.evervault.com/v2";
-function F(o) {
+const F = "https://js.evervault.com/v2";
+function G(o) {
   const n = document.createElement("script");
-  o ? n.src = o : n.src = q;
-  const t = document.head || document.body;
-  if (!t)
+  o ? n.src = o : n.src = F;
+  const r = document.head || document.body;
+  if (!r)
     throw new Error(
       "Expected document.body not to be null. Evervault.js requires a <body> element."
     );
-  return t.appendChild(n), n;
+  return r.appendChild(n), n;
 }
-let w = null;
-function G(o) {
-  return w !== null || (w = new Promise((n, t) => {
+let E = null;
+function J(o) {
+  return E !== null || (E = new Promise((n, r) => {
     if (typeof window > "u") {
@@ -619,24 +670,24 @@ n(void 0);
     try {
-      const i = F(o);
+      const i = G(o);
       i.addEventListener("load", () => {
-        window.Evervault ? n(window.Evervault) : t(new Error("Evervault.js not available"));
+        window.Evervault ? n(window.Evervault) : r(new Error("Evervault.js not available"));
       }), i.addEventListener("error", () => {
-        t(new Error("Failed to load Evervault.js"));
+        r(new Error("Failed to load Evervault.js"));
       });
     } catch (i) {
-      t(i);
+      r(i);
     }
-  })), w;
+  })), E;
 }
-function J(o) {
-  const n = Promise.resolve().then(() => G(o));
-  let t = !1;
+function K(o) {
+  const n = Promise.resolve().then(() => J(o));
+  let r = !1;
   return n.catch((i) => {
-    t || console.warn(i);
-  }), t = !0, n.then((i) => typeof window < "u" ? window.Evervault : i ?? void 0);
+    r || console.warn(i);
+  }), r = !0, n.then((i) => typeof window < "u" ? window.Evervault : i ?? void 0);
 }
-const $ = ({
+const k = ({
   teamId: o,
   appId: n,
-  customConfig: t,
+  customConfig: r,
   children: i,
@@ -648,5 +699,5 @@ ...f
   const d = u.useMemo(
-    () => new H((e, a) => {
-      J(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"));
+    () => new q((e, a) => {
+      K(r == null ? void 0 : r.jsSdkUrl).then((c) => {
+        c !== void 0 ? e(new c(o, n, r)) : (console.error("Evervault.js not available"), a("Evervault.js not available"));
       }).catch((c) => a(c));
@@ -658,6 +709,6 @@ }),
 };
-function k({
+function ee({
   onChange: o,
   config: n,
-  onInputsLoad: t
+  onInputsLoad: r
 }) {
@@ -667,16 +718,16 @@ const i = u.useId();
     return /* @__PURE__ */ u.createElement("div", { id: i });
-  const f = x(), { height: d = "auto", ...e } = n ?? {}, a = e ? { height: d, ...e } : { height: d };
+  const f = g(), { height: d = "auto", ...e } = n ?? {}, a = e ? { height: d, ...e } : { height: d };
   return u.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());
+      s == null || s.on("change", (t) => {
+        typeof o == "function" && o(t);
+      }), r && (s == null ? void 0 : s.isInputsLoaded) != null && s.isInputsLoaded instanceof Promise && s.isInputsLoaded.then(() => r());
     });
   }, [f]), /* @__PURE__ */ u.createElement("div", { id: i });
 }
-function ee({
+function te({
   request: o,
   config: n,
-  onCopy: t,
+  onCopy: r,
   onRevealLoad: i,
@@ -688,6 +739,6 @@ onRevealError: f
     return /* @__PURE__ */ u.createElement("div", { id: d });
-  const e = x(), { height: a = "auto", ...c } = n ?? {}, s = c ? { height: a, ...c } : { height: a };
+  const e = g(), { height: a = "auto", ...c } = n ?? {}, s = c ? { height: a, ...c } : { height: a };
   return u.useEffect(() => {
-    e == null || e.then((r) => {
-      const v = r.reveal(d, o, s, t);
+    e == null || e.then((t) => {
+      const v = t.reveal(d, o, s, r);
       (v == null ? void 0 : v.isRevealLoaded) != null && v.isRevealLoaded instanceof Promise && v.isRevealLoaded.then(() => {
@@ -702,13 +753,13 @@ i && i();
 export {
-  Q as Card,
-  k as EvervaultInput,
-  $ as EvervaultProvider,
-  ee as EvervaultReveal,
-  W as Pin,
-  H as PromisifiedEvervaultClient,
+  W as Card,
+  ee as EvervaultInput,
+  k as EvervaultProvider,
+  te as EvervaultReveal,
+  X as Pin,
+  q as PromisifiedEvervaultClient,
   _ as Reveal,
-  X as ThreeDSecure,
-  N as themes,
-  x as useEvervault,
-  Z as useThreeDSecure
+  Z as ThreeDSecure,
+  Q as themes,
+  g as useEvervault,
+  $ as useThreeDSecure
 };

package.json

 {
   "private": false,
   "name": "@evervault/react",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "React package for the Evervault SDK",
@@ -37,4 +37,4 @@ "license": "MIT",
     "types": "^0.3.0",
-    "@evervault/browser": "^2.30.0",
     "themes": "^0.1.3",
+    "@evervault/browser": "^2.31.0",
     "tsconfig": "^0.0.1"
@@ -41,0 +41,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84570

increased by4.7%

Lines of code

1846

increased by6.15%

No dependency changes