@coinflowlabs/react 5.12.0 → 5.14.0

package/README.md

@@ -5,7 +5,9 @@
 ### 5.12.0
 
 - New `CoinflowCardForm`, `CoinflowCardNumberForm`, and `CoinflowCvvForm` components — simple card inputs with a single `tokenize()` call and full theme support
-- Added theme options for `fontSize` and placeholder text
+- Theme options: `font`, `fontSize`, `background`, `textColor`, `showCardIcon`, `cardNumberPlaceholder`, `cvvPlaceholder`, `expirationPlaceholder`
+- `showCardIcon`: display the detected card brand (Visa, Mastercard, etc.) inline with the card number input
+- Improved browser autocomplete support for card fields
 - Improved security for iframe communication
 
 ## Withdraw Usage

package/build/cjs/CoinflowApplePayButton.d.ts

@@ -2,4 +2,4 @@ import { CoinflowPurchaseProps } from './common';
 import React from 'react';
 import { MobileWalletButtonProps } from './MobileWalletButton';
 export declare function CoinflowApplePayButton(props: CoinflowPurchaseProps & MobileWalletButtonProps): React.JSX.Element;
-export declare function AppleButtonOverlayLogo({ color }: Pick<MobileWalletButtonProps, 'color'>): React.JSX.Element;
+export declare function AppleButtonOverlayLogo({ color, }: Pick<MobileWalletButtonProps, 'color'>): React.JSX.Element;

package/build/cjs/CoinflowApplePayButton.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.CoinflowApplePayButton = CoinflowApplePayButton;
 exports.AppleButtonOverlayLogo = AppleButtonOverlayLogo;
+const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const MobileWalletButton_1 = require("./MobileWalletButton");
 function CoinflowApplePayButton(props) {

package/build/cjs/CoinflowGooglePayButton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.CoinflowGooglePayButton = CoinflowGooglePayButton;
+const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const MobileWalletButton_1 = require("./MobileWalletButton");
 function CoinflowGooglePayButton(props) {

package/build/cjs/CoinflowIFrame.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { CoinflowIFrameProps, IFrameMessageHandlers } from './common';
+import { CoinflowIFrameProps, CoinflowIntentsIFrameProps, IFrameMessageHandlers } from './common';
 export type SendAndReceiveMessage = (message: string, isResponseValid: (response: string) => boolean) => Promise<string>;
 export type CoinflowIFrameExposedFunctions = {
     sendAndReceiveMessage: SendAndReceiveMessage;
     listenForMessage: (isResponseValid: (response: string) => boolean) => Promise<string>;
 };
 export declare function useRandomHandleHeightChangeId(): string;
-export declare const CoinflowIFrame: React.ForwardRefExoticComponent<CoinflowIFrameProps & IFrameMessageHandlers & React.RefAttributes<unknown>>;
+export declare const CoinflowIFrame: React.ForwardRefExoticComponent<((CoinflowIFrameProps | CoinflowIntentsIFrameProps) & IFrameMessageHandlers) & React.RefAttributes<unknown>>;

package/build/cjs/CoinflowIFrame.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoinflowIFrame = void 0;
-const tslib_1 = require("tslib");
 exports.useRandomHandleHeightChangeId = useRandomHandleHeightChangeId;
+const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const common_1 = require("./common");
 function useRandomHandleHeightChangeId() {
@@ -11,7 +11,9 @@ function useRandomHandleHeightChangeId() {
 exports.CoinflowIFrame = (0, react_1.forwardRef)((props, ref) => {
     const IFrameRef = (0, react_1.useRef)(null);
     const url = (0, react_1.useMemo)(() => {
-        return common_1.CoinflowUtils.getCoinflowUrl(props);
+        return 'intentId' in props
+            ? common_1.CoinflowUtils.getCoinflowIntentsUrl(props)
+            : common_1.CoinflowUtils.getCoinflowUrl(props);
     }, [props]);
     const sendMessage = (0, react_1.useCallback)((message) => {
         if (!IFrameRef?.current?.contentWindow)
@@ -73,7 +75,7 @@ exports.CoinflowIFrame = (0, react_1.forwardRef)((props, ref) => {
     return (0, react_1.useMemo)(() => (react_1.default.createElement("iframe", { scrolling: handleHeightChange ? 'no' : 'yes', onLoad: () => {
             if (IFrameRef.current)
                 IFrameRef.current.style.opacity = '1';
-        }, allow: 'payment;camera;clipboard-write', ref: IFrameRef, style: {
+        }, allow: 'payment;camera;clipboard-write;geolocation', ref: IFrameRef, style: {
             width: '100%',
             height: '100%',
             opacity: 0,

package/build/cjs/CoinflowIFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoinflowIFrame.js","sourceRoot":"","sources":["../../src/CoinflowIFrame.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CoinflowIFrame.js","sourceRoot":"","sources":["../../src/CoinflowIFrame.tsx"],"names":[],"mappings":"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"}

package/build/cjs/CoinflowPaymentIntentPurchase.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CoinflowCommonPaymentIntentProps } from './common';
+export declare function CoinflowPaymentIntentCheckout(props: CoinflowCommonPaymentIntentProps): React.JSX.Element;

package/build/cjs/CoinflowPaymentIntentPurchase.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoinflowPaymentIntentCheckout = CoinflowPaymentIntentCheckout;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const common_1 = require("./common");
+const CoinflowIFrame_1 = require("./CoinflowIFrame");
+const useOverlay_1 = require("./useOverlay");
+const Utils_1 = require("./Utils");
+const Loader_1 = require("./Loader");
+function CoinflowPaymentIntentCheckout(props) {
+    const iframeRef = (0, react_1.useRef)(null);
+    const { iframeProps, messageHandlers } = useCoinflowPaymentIntentCheckout(props);
+    const { showOverlay } = (0, useOverlay_1.useOverlay)(iframeRef);
+    const loaderBackground = iframeProps.loaderBackground || '#ffffff'; // white default bg
+    const invertedColor = (0, Utils_1.invertHexColor)(loaderBackground);
+    return (react_1.default.createElement("div", { style: Utils_1.styles.container(loaderBackground) },
+        react_1.default.createElement(CoinflowIFrame_1.CoinflowIFrame, { ref: iframeRef, ...iframeProps, ...messageHandlers }),
+        showOverlay && (react_1.default.createElement(Loader_1.LoaderOverlay, { loaderBackground: loaderBackground, invertedColor: invertedColor }))));
+}
+function useCoinflowPaymentIntentCheckout(props) {
+    const handleHeightChangeId = (0, CoinflowIFrame_1.useRandomHandleHeightChangeId)();
+    const iframeProps = (0, react_1.useMemo)(() => {
+        const walletPubkey = (0, common_1.getWalletPubkey)(props);
+        return {
+            ...props,
+            walletPubkey,
+            route: `/intents/checkout/${props.paymentIntentId}`,
+            intentId: props.paymentIntentId,
+            handleHeightChangeId,
+        };
+    }, [handleHeightChangeId, props]);
+    const messageHandlers = (0, react_1.useMemo)(() => {
+        return {
+            handleSendTransaction: () => {
+                throw new Error('Not impl');
+            },
+            onSuccess: props.onSuccess,
+            onAuthDeclined: props.onAuthDeclined,
+            handleHeightChange: props.handleHeightChange,
+        };
+    }, [props]);
+    return { iframeProps, messageHandlers };
+}
+//# sourceMappingURL=CoinflowPaymentIntentPurchase.js.map

package/build/cjs/CoinflowPaymentIntentPurchase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoinflowPaymentIntentPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPaymentIntentPurchase.tsx"],"names":[],"mappings":";;;;AAAA,uDAA6C;AAC7C,qCAKkB;AAClB,qDAI0B;AAC1B,6CAAwC;AACxC,mCAA+C;AAC/C,qCAAuC;AAEvC,uCACE,KAAuC;IAEvC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiC,IAAI,CAAC,CAAC;IAC/D,MAAM,EAAC,WAAW,EAAE,eAAe,EAAC,GAClC,gCAAgC,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,EAAC,WAAW,EAAC,GAAG,IAAA,uBAAU,EAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAAC,mBAAmB;IACvF,MAAM,aAAa,GAAG,IAAA,sBAAc,EAAC,gBAAgB,CAAC,CAAC;IAEvD,OAAO,CACL,uCAAK,KAAK,EAAE,cAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC;QAC5C,8BAAC,+BAAc,IAAC,GAAG,EAAE,SAAS,KAAM,WAAW,KAAM,eAAe,GAAI;QACvE,WAAW,IAAI,CACd,8BAAC,sBAAa,IACZ,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gCAAgC,CACvC,KAAuC;IAEvC,MAAM,oBAAoB,GAAG,IAAA,8CAA6B,GAAE,CAAC;IAC7D,MAAM,WAAW,GAAG,IAAA,eAAO,EAA6B,GAAG,EAAE;QAC3D,MAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,KAAK,CAAC,CAAC;QAC5C,OAAO;YACL,GAAG,KAAK;YACR,YAAY;YACZ,KAAK,EAAE,qBAAqB,KAAK,CAAC,eAAe,EAAE;YACnD,QAAQ,EAAE,KAAK,CAAC,eAAe;YAC/B,oBAAoB;SACrB,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC,CAAC;IAElC,MAAM,eAAe,GAAG,IAAA,eAAO,EAAwB,GAAG,EAAE;QAC1D,OAAO;YACL,qBAAqB,EAAE,GAAG,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC;YAC9B,CAAC;YACD,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB;SAC7C,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,CAAC;AACxC,CAAC"}

package/build/cjs/CoinflowPurchase.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.CoinflowPurchase = CoinflowPurchase;
+const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const common_1 = require("./common");
 const CoinflowIFrame_1 = require("./CoinflowIFrame");
 const useOverlay_1 = require("./useOverlay");
+const Utils_1 = require("./Utils");
+const Loader_1 = require("./Loader");
 function useCoinflowPurchase(purchaseProps, version) {
     const handleHeightChangeId = (0, CoinflowIFrame_1.useRandomHandleHeightChangeId)();
     const iframeProps = (0, react_1.useMemo)(() => {
@@ -31,92 +33,9 @@ function CoinflowPurchase(purchaseProps) {
     const { iframeProps, messageHandlers } = useCoinflowPurchase(purchaseProps, '-v2');
     const { showOverlay } = (0, useOverlay_1.useOverlay)(iframeRef);
     const loaderBackground = iframeProps.loaderBackground || '#ffffff'; // white default bg
-    const invertedColor = invertHexColor(loaderBackground);
-    return (react_1.default.createElement("div", { style: styles.container(loaderBackground) },
+    const invertedColor = (0, Utils_1.invertHexColor)(loaderBackground);
+    return (react_1.default.createElement("div", { style: Utils_1.styles.container(loaderBackground) },
         react_1.default.createElement(CoinflowIFrame_1.CoinflowIFrame, { ref: iframeRef, ...iframeProps, ...messageHandlers }),
-        showOverlay && (react_1.default.createElement(LoaderOverlay, { loaderBackground: loaderBackground, invertedColor: invertedColor }))));
-}
-function LoaderOverlay({ loaderBackground, invertedColor, }) {
-    return (react_1.default.createElement("div", { style: styles.overlay(loaderBackground) },
-        react_1.default.createElement(LoaderGrid, { columns: 2 },
-            react_1.default.createElement(Loader, { loaderBackground: invertedColor }),
-            react_1.default.createElement(Loader, { loaderBackground: invertedColor })),
-        react_1.default.createElement(LoaderGrid, { columns: 1 },
-            react_1.default.createElement(Loader, { height: 80, loaderBackground: invertedColor })),
-        [...Array(3)].map((_, index) => (react_1.default.createElement(LoaderRow, { key: index },
-            react_1.default.createElement(Loader, { width: index < 2 ? 80 : 120, height: index < 2 ? 15 : 20, loaderBackground: invertedColor }),
-            react_1.default.createElement(Loader, { width: index < 2 ? 60 : 100, height: index < 2 ? 15 : 20, loaderBackground: invertedColor })))),
-        react_1.default.createElement(LoaderGrid, { columns: 1 },
-            react_1.default.createElement(Loader, { height: 60, loaderBackground: invertedColor })),
-        react_1.default.createElement(LoaderGrid, { columns: 1, width: "50%" },
-            react_1.default.createElement(Loader, { height: 10, loaderBackground: invertedColor })),
-        react_1.default.createElement(LoaderGrid, { columns: 1, width: "40%" },
-            react_1.default.createElement(Loader, { height: 6, loaderBackground: invertedColor }))));
-}
-function LoaderGrid({ children, columns, width = '100%', }) {
-    return (react_1.default.createElement("div", { style: {
-            ...styles.grid,
-            gridTemplateColumns: `repeat(${columns}, 1fr)`,
-            width,
-        } }, children));
-}
-function LoaderRow({ children }) {
-    return react_1.default.createElement("div", { style: styles.row }, children);
-}
-function Loader({ loaderBackground, height = 40, width, }) {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { style: styles.loader(loaderBackground, height, width) }),
-        react_1.default.createElement("style", null, styles.keyframes)));
-}
-function invertHexColor(hex) {
-    hex = hex.replace(/^#/, '');
-    const rgb = hex.match(/.{2}/g)?.map(val => 255 - parseInt(val, 16)) || [];
-    return `#${rgb.map(val => val.toString(16).padStart(2, '0')).join('')}`;
+        showOverlay && (react_1.default.createElement(Loader_1.LoaderOverlay, { loaderBackground: loaderBackground, invertedColor: invertedColor }))));
 }
-const styles = {
-    container: (bg) => ({
-        position: 'relative',
-        height: '100%',
-        backgroundColor: bg,
-    }),
-    overlay: (bg) => ({
-        backgroundColor: bg,
-        display: 'flex',
-        color: 'gray',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        fontSize: 24,
-        alignItems: 'center',
-        flexDirection: 'column',
-        gap: '20px',
-        zIndex: 10,
-        padding: '20px',
-    }),
-    grid: {
-        display: 'grid',
-        gap: '20px',
-        width: '100%',
-    },
-    row: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-    },
-    loader: (bg, height, width) => ({
-        width: width ? `${width}px` : '100%',
-        height: `${height}px`,
-        backgroundColor: bg,
-        borderRadius: '4px',
-        animation: 'pulse 1.5s infinite',
-    }),
-    keyframes: `
-    @keyframes pulse {
-      0%, 100% { opacity: 0.07; }
-      50% { opacity: 0.03; }
-    }
-  `,
-};
 //# sourceMappingURL=CoinflowPurchase.js.map

package/build/cjs/CoinflowPurchase.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPurchase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CoinflowPurchase.js","sourceRoot":"","sources":["../../src/CoinflowPurchase.tsx"],"names":[],"mappings":";;;;AAAA,uDAA6C;AAC7C,qCAOkB;AAClB,qDAI0B;AAC1B,6CAAwC;AACxC,mCAA+C;AAC/C,qCAAuC;AAEvC,SAAS,mBAAmB,CAC1B,aAAoC,EACpC,OAAe;IAEf,MAAM,oBAAoB,GAAG,IAAA,8CAA6B,GAAE,CAAC;IAC7D,MAAM,WAAW,GAAG,IAAA,eAAO,EAAsB,GAAG,EAAE;QACpD,MAAM,YAAY,GAAG,IAAA,wBAAe,EAAC,aAAa,CAAC,CAAC;QACpD,OAAO;YACL,GAAG,aAAa;YAChB,YAAY;YACZ,KAAK,EAAE,YAAY,OAAO,IAAI,aAAa,CAAC,UAAU,EAAE;YACxD,WAAW,EAAE,sBAAa,CAAC,cAAc,CAAC,aAAa,CAAC;YACxD,oBAAoB;SACrB,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnD,MAAM,eAAe,GAAG,IAAA,eAAO,EAAwB,GAAG,EAAE;QAC1D,OAAO;YACL,GAAG,IAAA,oBAAW,EAAC,aAAa,CAAC;YAC7B,kBAAkB,EAAE,aAAa,CAAC,kBAAkB;SACrD,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,CAAC;AACxC,CAAC;AAED,0BAAiC,aAAoC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiC,IAAI,CAAC,CAAC;IAC/D,MAAM,EAAC,WAAW,EAAE,eAAe,EAAC,GAAG,mBAAmB,CACxD,aAAa,EACb,KAAK,CACN,CAAC;IAEF,MAAM,EAAC,WAAW,EAAC,GAAG,IAAA,uBAAU,EAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAAC,mBAAmB;IACvF,MAAM,aAAa,GAAG,IAAA,sBAAc,EAAC,gBAAgB,CAAC,CAAC;IAEvD,OAAO,CACL,uCAAK,KAAK,EAAE,cAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC;QAC5C,8BAAC,+BAAc,IAAC,GAAG,EAAE,SAAS,KAAM,WAAW,KAAM,eAAe,GAAI;QACvE,WAAW,IAAI,CACd,8BAAC,sBAAa,IACZ,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC"}

package/build/cjs/CoinflowPurchaseHistory.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.CoinflowPurchaseHistory = CoinflowPurchaseHistory;
+const tslib_1 = require("tslib");
 const CoinflowIFrame_1 = require("./CoinflowIFrame");
 const react_1 = tslib_1.__importStar(require("react"));
 const common_1 = require("./common");

package/build/cjs/CoinflowPurchaseProtection.d.ts

@@ -1,5 +1,5 @@
 import { CoinflowEnvs } from './common';
-export declare function CoinflowPurchaseProtection({ coinflowEnv, merchantId }: {
+export declare function CoinflowPurchaseProtection({ coinflowEnv, merchantId, }: {
     coinflowEnv: CoinflowEnvs;
     merchantId: string;
 }): null;

package/build/cjs/CoinflowWithdraw.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.CoinflowWithdraw = CoinflowWithdraw;
+const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const CoinflowIFrame_1 = require("./CoinflowIFrame");
 const common_1 = require("./common");

package/build/cjs/CoinflowWithdrawHistory.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.CoinflowWithdrawHistory = CoinflowWithdrawHistory;
+const tslib_1 = require("tslib");
 const CoinflowIFrame_1 = require("./CoinflowIFrame");
 const react_1 = tslib_1.__importStar(require("react"));
 const common_1 = require("./common");

package/build/cjs/Loader.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function LoaderOverlay({ loaderBackground, invertedColor, }: {
+    loaderBackground: string;
+    invertedColor: string;
+}): React.JSX.Element;

package/build/cjs/Loader.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoaderOverlay = LoaderOverlay;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Utils_1 = require("./Utils");
+function LoaderOverlay({ loaderBackground, invertedColor, }) {
+    return (react_1.default.createElement("div", { style: Utils_1.styles.overlay(loaderBackground) },
+        react_1.default.createElement(LoaderGrid, { columns: 2 },
+            react_1.default.createElement(Loader, { loaderBackground: invertedColor }),
+            react_1.default.createElement(Loader, { loaderBackground: invertedColor })),
+        react_1.default.createElement(LoaderGrid, { columns: 1 },
+            react_1.default.createElement(Loader, { height: 80, loaderBackground: invertedColor })),
+        [...Array(3)].map((_, index) => (react_1.default.createElement(LoaderRow, { key: index },
+            react_1.default.createElement(Loader, { width: index < 2 ? 80 : 120, height: index < 2 ? 15 : 20, loaderBackground: invertedColor }),
+            react_1.default.createElement(Loader, { width: index < 2 ? 60 : 100, height: index < 2 ? 15 : 20, loaderBackground: invertedColor })))),
+        react_1.default.createElement(LoaderGrid, { columns: 1 },
+            react_1.default.createElement(Loader, { height: 60, loaderBackground: invertedColor })),
+        react_1.default.createElement(LoaderGrid, { columns: 1, width: "50%" },
+            react_1.default.createElement(Loader, { height: 10, loaderBackground: invertedColor })),
+        react_1.default.createElement(LoaderGrid, { columns: 1, width: "40%" },
+            react_1.default.createElement(Loader, { height: 6, loaderBackground: invertedColor }))));
+}
+function LoaderGrid({ children, columns, width = '100%', }) {
+    return (react_1.default.createElement("div", { style: {
+            ...Utils_1.styles.grid,
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            width,
+        } }, children));
+}
+function LoaderRow({ children }) {
+    return react_1.default.createElement("div", { style: Utils_1.styles.row }, children);
+}
+function Loader({ loaderBackground, height = 40, width, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: Utils_1.styles.loader(loaderBackground, height, width) }),
+        react_1.default.createElement("style", null, Utils_1.styles.keyframes)));
+}
+//# sourceMappingURL=Loader.js.map

package/build/cjs/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/Loader.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,mCAA+B;AAE/B,uBAA8B,EAC5B,gBAAgB,EAChB,aAAa,GAId;IACC,OAAO,CACL,uCAAK,KAAK,EAAE,cAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC1C,8BAAC,UAAU,IAAC,OAAO,EAAE,CAAC;YACpB,8BAAC,MAAM,IAAC,gBAAgB,EAAE,aAAa,GAAI;YAC3C,8BAAC,MAAM,IAAC,gBAAgB,EAAE,aAAa,GAAI,CAChC;QACb,8BAAC,UAAU,IAAC,OAAO,EAAE,CAAC;YACpB,8BAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC5C;QACZ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,8BAAC,SAAS,IAAC,GAAG,EAAE,KAAK;YACnB,8BAAC,MAAM,IACL,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAC3B,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC3B,gBAAgB,EAAE,aAAa,GAC/B;YACF,8BAAC,MAAM,IACL,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAC3B,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC3B,gBAAgB,EAAE,aAAa,GAC/B,CACQ,CACb,CAAC;QACF,8BAAC,UAAU,IAAC,OAAO,EAAE,CAAC;YACpB,8BAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC5C;QACb,8BAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK;YACjC,8BAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC5C;QACb,8BAAC,UAAU,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK;YACjC,8BAAC,MAAM,IAAC,MAAM,EAAE,CAAC,EAAE,gBAAgB,EAAE,aAAa,GAAI,CAC3C,CACT,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,MAAM,GAC6C;IAC3D,OAAO,CACL,uCACE,KAAK,EAAE;YACL,GAAG,cAAM,CAAC,IAAI;YACd,mBAAmB,EAAE,UAAU,OAAO,QAAQ;YAC9C,KAAK;SACN,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAC,QAAQ,EAA8B;IACxD,OAAO,uCAAK,KAAK,EAAE,cAAM,CAAC,GAAG,IAAG,QAAQ,CAAO,CAAC;AAClD,CAAC;AAED,SAAS,MAAM,CAAC,EACd,gBAAgB,EAChB,MAAM,GAAG,EAAE,EACX,KAAK,GAKN;IACC,OAAO,CACL;QACE,uCAAK,KAAK,EAAE,cAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,GAAI;QAC9D,6CAAQ,cAAM,CAAC,SAAS,CAAS,CAChC,CACJ,CAAC;AACJ,CAAC"}

package/build/cjs/MobileWalletButton.d.ts

@@ -1,6 +1,6 @@
 import { CoinflowPurchaseProps } from './common';
 import React from 'react';
-export declare function MobileWalletButton({ props, route, overlayDisplayOverride, children, alignItems }: {
+export declare function MobileWalletButton({ props, route, overlayDisplayOverride, children, alignItems, }: {
     props: CoinflowPurchaseProps & MobileWalletButtonProps;
     route: string;
     overlayDisplayOverride?: string;

package/build/cjs/MobileWalletButton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 exports.MobileWalletButton = MobileWalletButton;
+const tslib_1 = require("tslib");
 const common_1 = require("./common");
 const react_1 = tslib_1.__importStar(require("react"));
 const CoinflowIFrame_1 = require("./CoinflowIFrame");

package/build/cjs/Utils.d.ts

@@ -0,0 +1,42 @@
+export declare function invertHexColor(hex: string): string;
+export declare const styles: {
+    container: (bg: string) => {
+        position: 'relative';
+        height: string;
+        backgroundColor: string;
+    };
+    overlay: (bg: string) => {
+        backgroundColor: string;
+        display: string;
+        color: string;
+        position: 'absolute';
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        fontSize: number;
+        alignItems: string;
+        flexDirection: 'column';
+        gap: string;
+        zIndex: number;
+        padding: string;
+    };
+    grid: {
+        display: string;
+        gap: string;
+        width: string;
+    };
+    row: {
+        display: string;
+        justifyContent: string;
+        width: string;
+    };
+    loader: (bg: string, height: number, width?: number) => {
+        width: string;
+        height: string;
+        backgroundColor: string;
+        borderRadius: string;
+        animation: string;
+    };
+    keyframes: string;
+};

package/build/cjs/Utils.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+exports.invertHexColor = invertHexColor;
+function invertHexColor(hex) {
+    hex = hex.replace(/^#/, '');
+    const rgb = hex.match(/.{2}/g)?.map(val => 255 - parseInt(val, 16)) || [];
+    return `#${rgb.map(val => val.toString(16).padStart(2, '0')).join('')}`;
+}
+exports.styles = {
+    container: (bg) => ({
+        position: 'relative',
+        height: '100%',
+        backgroundColor: bg,
+    }),
+    overlay: (bg) => ({
+        backgroundColor: bg,
+        display: 'flex',
+        color: 'gray',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        fontSize: 24,
+        alignItems: 'center',
+        flexDirection: 'column',
+        gap: '20px',
+        zIndex: 10,
+        padding: '20px',
+    }),
+    grid: {
+        display: 'grid',
+        gap: '20px',
+        width: '100%',
+    },
+    row: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    loader: (bg, height, width) => ({
+        width: width ? `${width}px` : '100%',
+        height: `${height}px`,
+        backgroundColor: bg,
+        borderRadius: '4px',
+        animation: 'pulse 1.5s infinite',
+    }),
+    keyframes: `
+    @keyframes pulse {
+      0%, 100% { opacity: 0.07; }
+      50% { opacity: 0.03; }
+    }
+  `,
+};
+//# sourceMappingURL=Utils.js.map

package/build/cjs/Utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../src/Utils.ts"],"names":[],"mappings":";;;;AAAA,wBAA+B,GAAW;IACxC,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC5B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1E,OAAO,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;AAC1E,CAAC;AAEY,QAAA,MAAM,GAAG;IACpB,SAAS,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,CAAC;QAC1B,QAAQ,EAAE,UAAmB;QAC7B,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,EAAE;KACpB,CAAC;IACF,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,CAAC;QACxB,eAAe,EAAE,EAAE;QACnB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAmB;QAC7B,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAiB;QAChC,GAAG,EAAE,MAAM;QACX,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;KAChB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;KACd;IACD,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,KAAK,EAAE,MAAM;KACd;IACD,MAAM,EAAE,CAAC,EAAU,EAAE,MAAc,EAAE,KAAc,EAAE,EAAE,CAAC,CAAC;QACvD,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM;QACpC,MAAM,EAAE,GAAG,MAAM,IAAI;QACrB,eAAe,EAAE,EAAE;QACnB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,qBAAqB;KACjC,CAAC;IACF,SAAS,EAAE;;;;;GAKV;CACF,CAAC"}

package/build/cjs/card-form/CoinflowCardForm.d.ts

@@ -36,7 +36,7 @@ import { MerchantIdOrCheckoutJwt, CoinflowCardNumberInputProps, CoinflowCvvOnlyI
  *
  * ```
  */
-export declare const CoinflowCardNumberInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<(CoinflowCardNumberInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>>;
+export declare const CoinflowCardNumberInput: React.NamedExoticComponent<(CoinflowCardNumberInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
 /**
  * The CVV number input for creating a new tokenized card
  */
@@ -78,7 +78,7 @@ export declare const CoinflowCvvInput: React.MemoExoticComponent<() => React.JSX
  *
  * ```
  */
-export declare const CoinflowCvvOnlyInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>>;
+export declare const CoinflowCvvOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
 /**
  * Allows merchants to collect card information from their customers in a PCI-compliant way and receive the tokenized card number.
  * The `CoinflowCardOnlyInput` is used for collecting a debit card for users to be able to withdraw their funds directly to.
@@ -115,12 +115,12 @@ export declare const CoinflowCvvOnlyInput: React.MemoExoticComponent<React.Forwa
  *
  * ```
  */
-export declare const CoinflowCardOnlyInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>>;
+export declare const CoinflowCardOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
 /** @deprecated Use CoinflowCardForm instead */
-export declare const CoinflowLegacyCardNumberInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<(CoinflowCardNumberInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>>;
+export declare const CoinflowLegacyCardNumberInput: React.NamedExoticComponent<(CoinflowCardNumberInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
 /** @deprecated Use CoinflowCvvForm instead */
 export declare const CoinflowLegacyCvvInput: React.MemoExoticComponent<() => React.JSX.Element>;
 /** @deprecated Use CoinflowCvvForm instead */
-export declare const CoinflowLegacyCvvOnlyInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>>;
+export declare const CoinflowLegacyCvvOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;
 /** @deprecated Use CoinflowCardNumberForm instead */
-export declare const CoinflowLegacyCardOnlyInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>>;
+export declare const CoinflowLegacyCardOnlyInput: React.NamedExoticComponent<(CoinflowCvvOnlyInputProps & MerchantIdOrCheckoutJwt) & React.RefAttributes<unknown>>;

package/build/cjs/card-form/CoinflowCardFormV2.d.ts

@@ -21,15 +21,15 @@ export interface CardFormTokenResponse {
 export interface CardFormRef {
     tokenize(): Promise<CardFormTokenResponse>;
 }
-export declare const CoinflowCardForm: React.MemoExoticComponent<React.ForwardRefExoticComponent<CoinflowCardFormProps & React.RefAttributes<CardFormRef>>>;
-export declare const CoinflowCardNumberForm: React.MemoExoticComponent<React.ForwardRefExoticComponent<CoinflowCardNumberFormProps & React.RefAttributes<CardFormRef>>>;
-export declare const CoinflowCvvForm: React.MemoExoticComponent<React.ForwardRefExoticComponent<CoinflowCvvFormProps & React.RefAttributes<CardFormRef>>>;
+export declare const CoinflowCardForm: React.NamedExoticComponent<CoinflowCardFormProps & React.RefAttributes<CardFormRef>>;
+export declare const CoinflowCardNumberForm: React.NamedExoticComponent<CoinflowCardNumberFormProps & React.RefAttributes<CardFormRef>>;
+export declare const CoinflowCvvForm: React.NamedExoticComponent<CoinflowCvvFormProps & React.RefAttributes<CardFormRef>>;
 /** @deprecated Use CoinflowCardForm instead */
-export declare const CoinflowCardFormV2: React.MemoExoticComponent<React.ForwardRefExoticComponent<CoinflowCardFormProps & React.RefAttributes<CardFormRef>>>;
+export declare const CoinflowCardFormV2: React.NamedExoticComponent<CoinflowCardFormProps & React.RefAttributes<CardFormRef>>;
 /** @deprecated Use CoinflowCardNumberForm instead */
-export declare const CoinflowCardNumberFormV2: React.MemoExoticComponent<React.ForwardRefExoticComponent<CoinflowCardNumberFormProps & React.RefAttributes<CardFormRef>>>;
+export declare const CoinflowCardNumberFormV2: React.NamedExoticComponent<CoinflowCardNumberFormProps & React.RefAttributes<CardFormRef>>;
 /** @deprecated Use CoinflowCvvForm instead */
-export declare const CoinflowCvvFormV2: React.MemoExoticComponent<React.ForwardRefExoticComponent<CoinflowCvvFormProps & React.RefAttributes<CardFormRef>>>;
+export declare const CoinflowCvvFormV2: React.NamedExoticComponent<CoinflowCvvFormProps & React.RefAttributes<CardFormRef>>;
 /** @deprecated Use CardFormRef instead */
 export type CardFormV2Ref = CardFormRef;
 /** @deprecated Use CardFormTokenResponse instead */