@crossmint/client-sdk-react-ui 1.9.2 → 1.10.0

package/dist/chunk-2LTCJUPK.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk46UDUOKJcjs = require('./chunk-46UDUOKJ.cjs');
+
+// src/components/CrossmintNFTCollectionView.tsx
+var _clientsdkbase = require('@crossmint/client-sdk-base');
+var _jsxruntime = require('react/jsx-runtime');
+function CrossmintNFTCollectionView(props) {
+  _clientsdkbase.assertValidNFTCollectionViewProps.call(void 0, props);
+  const src = _clientsdkbase.getNFTCollectionViewSrc.call(void 0, props, _chunk46UDUOKJcjs.LIB_VERSION);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "iframe",
+    {
+      src,
+      width: "100%",
+      height: "100%",
+      style: {
+        flexGrow: "1",
+        border: "none",
+        margin: "0",
+        padding: "0"
+      },
+      role: "nft-collection-view"
+    }
+  );
+}
+
+
+
+exports.CrossmintNFTCollectionView = CrossmintNFTCollectionView;
+//# sourceMappingURL=chunk-2LTCJUPK.cjs.map

package/dist/chunk-2LTCJUPK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CrossmintNFTCollectionView.tsx"],"names":[],"mappings":";;;;;AAAA,SAAS,mCAAmC,+BAA+B;AAWnE;AAND,SAAS,2BAA2B,OAA+B;AACtE,oCAAkC,KAAK;AAEvC,QAAM,MAAM,wBAAwB,OAAO,WAAW;AAEtD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QACH,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACb;AAAA,MACA,MAAK;AAAA;AAAA,EACT;AAER","sourcesContent":["import { assertValidNFTCollectionViewProps, getNFTCollectionViewSrc } from \"@crossmint/client-sdk-base\";\nimport type { NFTCollectionViewProps } from \"@crossmint/common-sdk-base\";\n\nimport { LIB_VERSION } from \"../consts/version\";\n\nexport function CrossmintNFTCollectionView(props: NFTCollectionViewProps) {\n    assertValidNFTCollectionViewProps(props);\n\n    const src = getNFTCollectionViewSrc(props, LIB_VERSION);\n\n    return (\n        <iframe\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            style={{\n                flexGrow: \"1\",\n                border: \"none\",\n                margin: \"0\",\n                padding: \"0\",\n            }}\n            role=\"nft-collection-view\"\n        />\n    );\n}\n"]}

package/dist/chunk-2QB7GW4K.cjs

@@ -0,0 +1,64 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/components/embed/v3/crypto/utils/handleEvmTransaction.ts
+
+
+var _commonsdkbase = require('@crossmint/common-sdk-base');
+var _viem = require('viem');
+function handleEvmTransaction(_0) {
+  return _chunk4DAZAO6Ycjs.__async.call(void 0, this, arguments, function* ({
+    primaryWallet,
+    chain,
+    serializedTransaction,
+    iframeClient
+  }) {
+    try {
+      yield primaryWallet.switchNetwork(_commonsdkbase.blockchainToChainId.call(void 0, chain));
+    } catch (error) {
+      console.error("[CryptoWalletConnectionHandler] failed to switch network", error);
+      iframeClient.send("crypto:send-transaction:failed", {
+        error: error.message
+      });
+      return;
+    }
+    let walletClient;
+    try {
+      walletClient = yield primaryWallet.getWalletClient();
+    } catch (error) {
+      console.error("[CryptoWalletConnectionHandler] failed to get wallet client", error);
+      iframeClient.send("crypto:send-transaction:failed", {
+        error: error.message
+      });
+      return;
+    }
+    let parsedTransaction;
+    try {
+      parsedTransaction = _viem.parseTransaction.call(void 0, serializedTransaction);
+    } catch (error) {
+      console.error("[CryptoWalletConnectionHandler] failed to parse transaction", error);
+      iframeClient.send("crypto:send-transaction:failed", {
+        error: error.message
+      });
+      return;
+    }
+    try {
+      const txId = yield walletClient.sendTransaction(parsedTransaction);
+      console.log("[CryptoWalletConnectionHandler] txId", txId);
+      iframeClient.send("crypto:send-transaction:success", {
+        txId
+      });
+    } catch (error) {
+      console.error("[CryptoWalletConnectionHandler] failed to send transaction", error);
+      iframeClient.send("crypto:send-transaction:failed", {
+        error: error.message
+      });
+    }
+  });
+}
+
+
+
+exports.handleEvmTransaction = handleEvmTransaction;
+//# sourceMappingURL=chunk-2QB7GW4K.cjs.map

package/dist/chunk-2QB7GW4K.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/embed/v3/crypto/utils/handleEvmTransaction.ts"],"names":[],"mappings":";;;;;AACA;AAAA,EAEI;AAAA,OAEG;AAEP,SAAS,wBAA6D;AAEtE,SAAsB,qBAAqB,IAUxC;AAAA,6CAVwC;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,GAKG;AACC,QAAI;AACA,YAAM,cAAc,cAAc,oBAAoB,KAAsC,CAAC;AAAA,IACjG,SAAS,OAAO;AACZ,cAAQ,MAAM,4DAA4D,KAAK;AAC/E,mBAAa,KAAK,kCAAkC;AAAA,QAChD,OAAQ,MAAgB;AAAA,MAC5B,CAAC;AACD;AAAA,IACJ;AAEA,QAAI;AACJ,QAAI;AACA,qBAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,SAAS,OAAO;AACZ,cAAQ,MAAM,+DAA+D,KAAK;AAClF,mBAAa,KAAK,kCAAkC;AAAA,QAChD,OAAQ,MAAgB;AAAA,MAC5B,CAAC;AACD;AAAA,IACJ;AAEA,QAAI;AACJ,QAAI;AACA,0BAAoB,iBAAiB,qBAAsC;AAAA,IAC/E,SAAS,OAAO;AACZ,cAAQ,MAAM,+DAA+D,KAAK;AAClF,mBAAa,KAAK,kCAAkC;AAAA,QAChD,OAAQ,MAAgB;AAAA,MAC5B,CAAC;AACD;AAAA,IACJ;AAEA,QAAI;AACA,YAAM,OAAO,MAAM,aAAa,gBAAgB,iBAAiB;AACjE,cAAQ,IAAI,wCAAwC,IAAI;AACxD,mBAAa,KAAK,mCAAmC;AAAA,QACjD;AAAA,MACJ,CAAC;AAAA,IACL,SAAS,OAAO;AACZ,cAAQ,MAAM,8DAA8D,KAAK;AACjF,mBAAa,KAAK,kCAAkC;AAAA,QAChD,OAAQ,MAAgB;AAAA,MAC5B,CAAC;AAAA,IACL;AAAA,EACJ;AAAA","sourcesContent":["import type { EmbeddedCheckoutV3IFrameEmitter } from \"@crossmint/client-sdk-base\";\nimport {\n    type BlockchainIncludingTestnet,\n    blockchainToChainId,\n    type EVMBlockchainIncludingTestnet,\n} from \"@crossmint/common-sdk-base\";\nimport type { EthereumWallet } from \"@dynamic-labs/ethereum-core\";\nimport { parseTransaction, type TransactionSerializableEIP1559 } from \"viem\";\n\nexport async function handleEvmTransaction({\n    primaryWallet,\n    chain,\n    serializedTransaction,\n    iframeClient,\n}: {\n    primaryWallet: EthereumWallet;\n    chain: BlockchainIncludingTestnet;\n    serializedTransaction: string;\n    iframeClient: EmbeddedCheckoutV3IFrameEmitter;\n}) {\n    try {\n        await primaryWallet.switchNetwork(blockchainToChainId(chain as EVMBlockchainIncludingTestnet));\n    } catch (error) {\n        console.error(\"[CryptoWalletConnectionHandler] failed to switch network\", error);\n        iframeClient.send(\"crypto:send-transaction:failed\", {\n            error: (error as Error).message,\n        });\n        return;\n    }\n\n    let walletClient: Awaited<ReturnType<typeof primaryWallet.getWalletClient>>;\n    try {\n        walletClient = await primaryWallet.getWalletClient();\n    } catch (error) {\n        console.error(\"[CryptoWalletConnectionHandler] failed to get wallet client\", error);\n        iframeClient.send(\"crypto:send-transaction:failed\", {\n            error: (error as Error).message,\n        });\n        return;\n    }\n\n    let parsedTransaction: TransactionSerializableEIP1559;\n    try {\n        parsedTransaction = parseTransaction(serializedTransaction as `0x${string}`) as TransactionSerializableEIP1559;\n    } catch (error) {\n        console.error(\"[CryptoWalletConnectionHandler] failed to parse transaction\", error);\n        iframeClient.send(\"crypto:send-transaction:failed\", {\n            error: (error as Error).message,\n        });\n        return;\n    }\n\n    try {\n        const txId = await walletClient.sendTransaction(parsedTransaction);\n        console.log(\"[CryptoWalletConnectionHandler] txId\", txId);\n        iframeClient.send(\"crypto:send-transaction:success\", {\n            txId,\n        });\n    } catch (error) {\n        console.error(\"[CryptoWalletConnectionHandler] failed to send transaction\", error);\n        iframeClient.send(\"crypto:send-transaction:failed\", {\n            error: (error as Error).message,\n        });\n    }\n}\n"]}

package/dist/chunk-2T2VCED7.js

@@ -0,0 +1,17 @@
+import {
+  FiatEmbeddedCheckoutIFrame
+} from "./chunk-QDKAU3H2.js";
+import {
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/components/embed/fiat/FiatEmbeddedCheckout.tsx
+import { jsx } from "react/jsx-runtime";
+function CrossmintFiatEmbeddedCheckout(props) {
+  return /* @__PURE__ */ jsx(FiatEmbeddedCheckoutIFrame, __spreadValues({}, props));
+}
+
+export {
+  CrossmintFiatEmbeddedCheckout
+};
+//# sourceMappingURL=chunk-2T2VCED7.js.map

package/dist/chunk-2T2VCED7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/embed/fiat/FiatEmbeddedCheckout.tsx"],"sourcesContent":["import type { FiatEmbeddedCheckoutProps } from \"@crossmint/client-sdk-base\";\n\nimport FiatEmbeddedCheckoutIFrame from \"../../../components/embed/fiat/FiatEmbeddedCheckoutIFrame\";\n\nexport function CrossmintFiatEmbeddedCheckout(props: FiatEmbeddedCheckoutProps) {\n    return <FiatEmbeddedCheckoutIFrame {...props} />;\n}\n"],"mappings":";;;;;;;;AAKW;AADJ,SAAS,8BAA8B,OAAkC;AAC5E,SAAO,oBAAC,+CAA+B,MAAO;AAClD;","names":[]}

package/dist/chunk-33WZFL2D.js

@@ -0,0 +1,80 @@
+import {
+  classNames
+} from "./chunk-RZPQIRIY.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/components/common/InputOTP.tsx
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { createContext, useContext as useContext2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CustomStylesContext = createContext(void 0);
+var InputOTP = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, containerClassName, customStyles } = _b, props = __objRest(_b, ["className", "containerClassName", "customStyles"]);
+  return /* @__PURE__ */ jsx(CustomStylesContext.Provider, { value: customStyles, children: /* @__PURE__ */ jsx(
+    OTPInput,
+    __spreadValues({
+      autoFocus: true,
+      ref,
+      containerClassName: classNames("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName),
+      className: classNames("disabled:cursor-not-allowed", className)
+    }, props)
+  ) });
+});
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: classNames("flex gap-2 items-center", className) }, props));
+  }
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef((_a, ref) => {
+  var _b = _a, { index, className, hasError } = _b, props = __objRest(_b, ["index", "className", "hasError"]);
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  const customStyles = useContext2(CustomStylesContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: classNames(
+        "relative flex h-14 w-12 items-center bg-cm-muted-primary justify-center border border-cm-border text-lg transition-all rounded-md text-cm-text-primary",
+        isActive && `z-10 ring-2 ring-offset-background`,
+        className
+      ),
+      style: {
+        borderRadius: customStyles == null ? void 0 : customStyles.borderRadius,
+        borderColor: hasError ? customStyles == null ? void 0 : customStyles.danger : customStyles == null ? void 0 : customStyles.border,
+        boxShadow: isActive ? `0 0 0 2px ${customStyles == null ? void 0 : customStyles.accent}` : "none",
+        backgroundColor: char ? customStyles == null ? void 0 : customStyles.buttonBackground : customStyles == null ? void 0 : customStyles.inputBackground
+      }
+    }, props), {
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-4 w-px animate-caret-blink duration-1000",
+            style: {
+              height: "18px",
+              backgroundColor: customStyles == null ? void 0 : customStyles.textPrimary
+            }
+          }
+        ) })
+      ]
+    })
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot
+};
+//# sourceMappingURL=chunk-33WZFL2D.js.map

package/dist/chunk-33WZFL2D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/common/InputOTP.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { createContext, useContext } from \"react\";\nimport { classNames } from \"@/utils/classNames\";\n\n// Define the type for customStyles\ntype CustomStyles = {\n    textPrimary: string;\n    inputBackground: string;\n    buttonBackground: string;\n    accent: string;\n    danger: string;\n    border: string;\n    borderRadius?: string;\n};\n\n// Create a context for customStyles\nconst CustomStylesContext = createContext<CustomStyles | undefined>(undefined);\n\ntype InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    customStyles?: CustomStyles;\n};\ntype InputOTPRef = React.ElementRef<typeof OTPInput>;\n\nconst InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<InputOTPRef>> = React.forwardRef<\n    InputOTPRef,\n    InputOTPProps\n>(({ className, containerClassName, customStyles, ...props }, ref) => (\n    <CustomStylesContext.Provider value={customStyles}>\n        <OTPInput\n            autoFocus\n            ref={ref}\n            containerClassName={classNames(\"flex items-center gap-2 has-[:disabled]:opacity-50\", containerClassName)}\n            className={classNames(\"disabled:cursor-not-allowed\", className)}\n            {...props}\n        />\n    </CustomStylesContext.Provider>\n));\nInputOTP.displayName = \"InputOTP\";\n\nconst InputOTPGroup = React.forwardRef<React.ElementRef<\"div\">, React.ComponentPropsWithoutRef<\"div\">>(\n    ({ className, ...props }, ref) => (\n        <div ref={ref} className={classNames(\"flex gap-2 items-center\", className)} {...props} />\n    )\n);\nInputOTPGroup.displayName = \"InputOTPGroup\";\n\nconst InputOTPSlot = React.forwardRef<\n    React.ElementRef<\"div\">,\n    React.ComponentPropsWithoutRef<\"div\"> & {\n        index: number;\n        hasError?: boolean;\n    }\n>(({ index, className, hasError, ...props }, ref) => {\n    const inputOTPContext = React.useContext(OTPInputContext);\n    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];\n    const customStyles = useContext(CustomStylesContext);\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(\n                \"relative flex h-14 w-12 items-center bg-cm-muted-primary justify-center border border-cm-border text-lg transition-all rounded-md text-cm-text-primary\",\n                isActive && `z-10 ring-2 ring-offset-background`,\n                className\n            )}\n            style={{\n                borderRadius: customStyles?.borderRadius,\n                borderColor: hasError ? customStyles?.danger : customStyles?.border,\n                boxShadow: isActive ? `0 0 0 2px ${customStyles?.accent}` : \"none\",\n                backgroundColor: char ? customStyles?.buttonBackground : customStyles?.inputBackground,\n            }}\n            {...props}\n        >\n            {char}\n            {hasFakeCaret && (\n                <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n                    <div\n                        className=\"h-4 w-px animate-caret-blink duration-1000\"\n                        style={{\n                            height: \"18px\",\n                            backgroundColor: customStyles?.textPrimary,\n                        }}\n                    />\n                </div>\n            )}\n        </div>\n    );\n});\nInputOTPSlot.displayName = \"InputOTPSlot\";\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot };\n"],"mappings":";;;;;;;;;;AAEA,YAAY,WAAW;AACvB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,eAAe,cAAAA,mBAAkB;AA2BlC,cA8BA,YA9BA;AAZR,IAAM,sBAAsB,cAAwC,MAAS;AAO7E,IAAM,WAAoG,iBAGxG,CAAC,IAA2D,QAAK;AAAhE,eAAE,aAAW,oBAAoB,aA7BpC,IA6BG,IAAkD,kBAAlD,IAAkD,CAAhD,aAAW,sBAAoB;AAChC,6BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACjC;AAAA,IAAC;AAAA;AAAA,MACG,WAAS;AAAA,MACT;AAAA,MACA,oBAAoB,WAAW,sDAAsD,kBAAkB;AAAA,MACvG,WAAW,WAAW,+BAA+B,SAAS;AAAA,OAC1D;AAAA,EACR,GACJ;AAAA,CACH;AACD,SAAS,cAAc;AAEvB,IAAM,gBAAsB;AAAA,EACxB,CAAC,IAAyB,QAAK;AAA9B,iBAAE,YA3CP,IA2CK,IAAgB,kBAAhB,IAAgB,CAAd;AACC,+BAAC,wBAAI,KAAU,WAAW,WAAW,2BAA2B,SAAS,KAAO,MAAO;AAAA;AAE/F;AACA,cAAc,cAAc;AAE5B,IAAM,eAAqB,iBAMzB,CAAC,IAA0C,QAAQ;AAAlD,eAAE,SAAO,WAAW,SAvDvB,IAuDG,IAAiC,kBAAjC,IAAiC,CAA/B,SAAO,aAAW;AACnB,QAAM,kBAAwB,iBAAW,eAAe;AACxD,QAAM,EAAE,MAAM,cAAc,SAAS,IAAI,gBAAgB,MAAM,KAAK;AACpE,QAAM,eAAeC,YAAW,mBAAmB;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACH,cAAc,6CAAc;AAAA,QAC5B,aAAa,WAAW,6CAAc,SAAS,6CAAc;AAAA,QAC7D,WAAW,WAAW,aAAa,6CAAc,MAAM,KAAK;AAAA,QAC5D,iBAAiB,OAAO,6CAAc,mBAAmB,6CAAc;AAAA,MAC3E;AAAA,OACI,QAbP;AAAA,MAeI;AAAA;AAAA,QACA,gBACG,oBAAC,SAAI,WAAU,yEACX;AAAA,UAAC;AAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO;AAAA,cACH,QAAQ;AAAA,cACR,iBAAiB,6CAAc;AAAA,YACnC;AAAA;AAAA,QACJ,GACJ;AAAA;AAAA;AAAA,EAER;AAER,CAAC;AACD,aAAa,cAAc;","names":["useContext","useContext"]}

package/dist/chunk-35RV5AOT.cjs

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/components/embed/EmbeddedCheckoutIFrame.tsx
+var _react = require('react');
+
+
+
+var _clientsdkbase = require('@crossmint/client-sdk-base');
+var _jsxruntime = require('react/jsx-runtime');
+function CrossmintEmbeddedCheckoutIFrame(_a) {
+  var _b = _a, {
+    onInternalEvent
+  } = _b, props = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _b, [
+    "onInternalEvent"
+  ]);
+  const { getUrl, listenToEvents, listenToInternalEvents } = _clientsdkbase.crossmintIFrameService.call(void 0, props);
+  const [height, setHeight] = _react.useState.call(void 0, 0);
+  const [url] = _react.useState.call(void 0, getUrl(props));
+  _react.useEffect.call(void 0, () => {
+    const clearListener = listenToEvents((event) => {
+      var _a2;
+      return (_a2 = props.onEvent) == null ? void 0 : _a2.call(props, event.data);
+    });
+    return () => {
+      clearListener();
+    };
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    const clearListener = listenToInternalEvents((event) => {
+      const { type, payload } = event.data;
+      if (type === _clientsdkbase.IncomingInternalEvents.UI_HEIGHT_CHANGED) {
+        setHeight(payload.height);
+      }
+      onInternalEvent == null ? void 0 : onInternalEvent(event.data);
+    });
+    return () => {
+      clearListener();
+    };
+  }, []);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "iframe",
+    {
+      src: url,
+      id: "crossmint-embedded-checkout.iframe",
+      role: "crossmint-embedded-checkout.iframe",
+      allow: "payment *",
+      style: {
+        boxShadow: "none",
+        border: "none",
+        padding: "0px",
+        width: "100%",
+        minWidth: "100%",
+        overflow: "hidden",
+        display: "block",
+        userSelect: "none",
+        transform: "translate(0px)",
+        opacity: "1",
+        transition: "ease 0s, opacity 0.4s ease 0.1s",
+        height: `${height}px`
+      }
+    }
+  );
+}
+
+
+
+exports.CrossmintEmbeddedCheckoutIFrame = CrossmintEmbeddedCheckoutIFrame;
+//# sourceMappingURL=chunk-35RV5AOT.cjs.map

package/dist/chunk-35RV5AOT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/embed/EmbeddedCheckoutIFrame.tsx"],"names":["_a"],"mappings":";;;;;AAAA,SAAS,WAAW,gBAAgB;AAEpC;AAAA,EAGI;AAAA,EACA;AAAA,OACG;AA0CC;AApCO,SAAR,gCAAiD,IAGf;AAHe,eACpD;AAAA;AAAA,EAdJ,IAawD,IAEjD,kBAFiD,IAEjD;AAAA,IADH;AAAA;AAGA,QAAM,EAAE,QAAQ,gBAAgB,uBAAuB,IAAI,uBAAuB,KAAK;AAEvF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AACtC,QAAM,CAAC,GAAG,IAAI,SAAS,OAAO,KAAK,CAAC;AAGpC,YAAU,MAAM;AACZ,UAAM,gBAAgB,eAAe,CAAC,UAAO;AAxBrD,UAAAA;AAwBwD,cAAAA,MAAA,MAAM,YAAN,gBAAAA,IAAA,YAAgB,MAAM;AAAA,KAAK;AAE3E,WAAO,MAAM;AACT,oBAAc;AAAA,IAClB;AAAA,EACJ,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACZ,UAAM,gBAAgB,uBAAuB,CAAC,UAAU;AACpD,YAAM,EAAE,MAAM,QAAQ,IAAI,MAAM;AAEhC,UAAI,SAAS,uBAAuB,mBAAmB;AACnD,kBAAU,QAAQ,MAAM;AAAA,MAC5B;AAEA,yDAAkB,MAAM;AAAA,IAC5B,CAAC;AAED,WAAO,MAAM;AACT,oBAAc;AAAA,IAClB;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,IAAG;AAAA,MACH,MAAK;AAAA,MACL,OAAM;AAAA,MACN,OAAO;AAAA,QACH,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ,GAAG,MAAM;AAAA,MACrB;AAAA;AAAA,EACJ;AAER","sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport {\n    type CrossmintEmbeddedCheckoutProps,\n    type IncomingInternalEvent,\n    IncomingInternalEvents,\n    crossmintIFrameService,\n} from \"@crossmint/client-sdk-base\";\n\ntype CrossmintEmbeddedCheckoutIFrameProps = CrossmintEmbeddedCheckoutProps & {\n    onInternalEvent?: (event: IncomingInternalEvent) => void;\n};\n\nexport default function CrossmintEmbeddedCheckoutIFrame({\n    onInternalEvent,\n    ...props\n}: CrossmintEmbeddedCheckoutIFrameProps) {\n    const { getUrl, listenToEvents, listenToInternalEvents } = crossmintIFrameService(props);\n\n    const [height, setHeight] = useState(0);\n    const [url] = useState(getUrl(props));\n\n    // Public events\n    useEffect(() => {\n        const clearListener = listenToEvents((event) => props.onEvent?.(event.data));\n\n        return () => {\n            clearListener();\n        };\n    }, []);\n\n    // Internal events\n    useEffect(() => {\n        const clearListener = listenToInternalEvents((event) => {\n            const { type, payload } = event.data;\n\n            if (type === IncomingInternalEvents.UI_HEIGHT_CHANGED) {\n                setHeight(payload.height);\n            }\n\n            onInternalEvent?.(event.data);\n        });\n\n        return () => {\n            clearListener();\n        };\n    }, []);\n\n    return (\n        <iframe\n            src={url}\n            id=\"crossmint-embedded-checkout.iframe\"\n            role=\"crossmint-embedded-checkout.iframe\"\n            allow=\"payment *\"\n            style={{\n                boxShadow: \"none\",\n                border: \"none\",\n                padding: \"0px\",\n                width: \"100%\",\n                minWidth: \"100%\",\n                overflow: \"hidden\",\n                display: \"block\",\n                userSelect: \"none\",\n                transform: \"translate(0px)\",\n                opacity: \"1\",\n                transition: \"ease 0s, opacity 0.4s ease 0.1s\",\n                height: `${height}px`,\n            }}\n        />\n    );\n}\n"]}

package/dist/chunk-3J6CUUWT.js

@@ -0,0 +1,50 @@
+// src/hooks/useCrossmint.tsx
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { createCrossmint } from "@crossmint/common-sdk-base";
+import { jsx } from "react/jsx-runtime";
+var CrossmintContext = createContext(null);
+function CrossmintProvider({
+  children,
+  apiKey,
+  overrideBaseUrl
+}) {
+  const [version, setVersion] = useState(0);
+  const crossmintRef = useRef(
+    new Proxy(createCrossmint({ apiKey, overrideBaseUrl }), {
+      set(target, prop, value2) {
+        if (prop === "jwt" && target.jwt !== value2) {
+          setVersion((v) => v + 1);
+        }
+        return Reflect.set(target, prop, value2);
+      }
+    })
+  );
+  const setJwt = useCallback((jwt) => {
+    if (jwt !== crossmintRef.current.jwt) {
+      crossmintRef.current.jwt = jwt;
+    }
+  }, []);
+  const value = useMemo(
+    () => ({
+      get crossmint() {
+        return crossmintRef.current;
+      },
+      setJwt
+    }),
+    [setJwt, version]
+  );
+  return /* @__PURE__ */ jsx(CrossmintContext.Provider, { value, children });
+}
+function useCrossmint(missingContextMessage) {
+  const context = useContext(CrossmintContext);
+  if (context == null) {
+    throw new Error(missingContextMessage != null ? missingContextMessage : "useCrossmint must be used within a CrossmintProvider");
+  }
+  return context;
+}
+
+export {
+  CrossmintProvider,
+  useCrossmint
+};
+//# sourceMappingURL=chunk-3J6CUUWT.js.map

package/dist/chunk-3J6CUUWT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useCrossmint.tsx"],"sourcesContent":["import { type ReactNode, createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\n\nimport { type Crossmint, createCrossmint } from \"@crossmint/common-sdk-base\";\n\nexport interface CrossmintContext {\n    crossmint: Crossmint;\n    setJwt: (jwt: string | undefined) => void;\n}\n\nconst CrossmintContext = createContext<CrossmintContext | null>(null);\n\nexport function CrossmintProvider({\n    children,\n    apiKey,\n    overrideBaseUrl,\n}: Omit<Crossmint, \"jwt\"> & {\n    children: ReactNode;\n}) {\n    const [version, setVersion] = useState(0);\n\n    const crossmintRef = useRef<Crossmint>(\n        new Proxy<Crossmint>(createCrossmint({ apiKey, overrideBaseUrl }), {\n            set(target, prop, value) {\n                if (prop === \"jwt\" && target.jwt !== value) {\n                    setVersion((v) => v + 1);\n                }\n                return Reflect.set(target, prop, value);\n            },\n        })\n    );\n\n    const setJwt = useCallback((jwt: string | undefined) => {\n        if (jwt !== crossmintRef.current.jwt) {\n            crossmintRef.current.jwt = jwt;\n        }\n    }, []);\n\n    const value = useMemo(\n        () => ({\n            get crossmint() {\n                return crossmintRef.current;\n            },\n            setJwt,\n        }),\n        [setJwt, version]\n    );\n\n    return <CrossmintContext.Provider value={value}>{children}</CrossmintContext.Provider>;\n}\n\nexport function useCrossmint(missingContextMessage?: string) {\n    const context = useContext(CrossmintContext);\n    if (context == null) {\n        throw new Error(missingContextMessage ?? \"useCrossmint must be used within a CrossmintProvider\");\n    }\n    return context;\n}\n"],"mappings":";AAAA,SAAyB,eAAe,aAAa,YAAY,SAAS,QAAQ,gBAAgB;AAElG,SAAyB,uBAAuB;AA6CrC;AAtCX,IAAM,mBAAmB,cAAuC,IAAI;AAE7D,SAAS,kBAAkB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACJ,GAEG;AACC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AAExC,QAAM,eAAe;AAAA,IACjB,IAAI,MAAiB,gBAAgB,EAAE,QAAQ,gBAAgB,CAAC,GAAG;AAAA,MAC/D,IAAI,QAAQ,MAAMA,QAAO;AACrB,YAAI,SAAS,SAAS,OAAO,QAAQA,QAAO;AACxC,qBAAW,CAAC,MAAM,IAAI,CAAC;AAAA,QAC3B;AACA,eAAO,QAAQ,IAAI,QAAQ,MAAMA,MAAK;AAAA,MAC1C;AAAA,IACJ,CAAC;AAAA,EACL;AAEA,QAAM,SAAS,YAAY,CAAC,QAA4B;AACpD,QAAI,QAAQ,aAAa,QAAQ,KAAK;AAClC,mBAAa,QAAQ,MAAM;AAAA,IAC/B;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACV,OAAO;AAAA,MACH,IAAI,YAAY;AACZ,eAAO,aAAa;AAAA,MACxB;AAAA,MACA;AAAA,IACJ;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACpB;AAEA,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAe,UAAS;AAC9D;AAEO,SAAS,aAAa,uBAAgC;AACzD,QAAM,UAAU,WAAW,gBAAgB;AAC3C,MAAI,WAAW,MAAM;AACjB,UAAM,IAAI,MAAM,wDAAyB,sDAAsD;AAAA,EACnG;AACA,SAAO;AACX;","names":["value"]}

package/dist/chunk-3KR4GYLF.js

@@ -0,0 +1,26 @@
+// src/icons/chevronRight.tsx
+import { jsx } from "react/jsx-runtime";
+function ChevronRightIcon({ className, style }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      style,
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+
+export {
+  ChevronRightIcon
+};
+//# sourceMappingURL=chunk-3KR4GYLF.js.map

package/dist/chunk-3KR4GYLF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/chevronRight.tsx"],"sourcesContent":["import type React from \"react\";\n\nexport function ChevronRightIcon({ className, style }: { className?: string; style?: React.CSSProperties }) {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className={className}\n            style={style}\n        >\n            <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n    );\n}\n"],"mappings":";AAiBY;AAfL,SAAS,iBAAiB,EAAE,WAAW,MAAM,GAAwD;AACxG,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MAEA,8BAAC,UAAK,GAAE,iBAAgB;AAAA;AAAA,EAC5B;AAER;","names":[]}

package/dist/chunk-3RXUFZTR.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkFOCUIKYHcjs = require('./chunk-FOCUIKYH.cjs');
+
+// src/components/auth/EmbeddedAuthForm.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function EmbeddedAuthForm() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOCUIKYHcjs.AuthForm, { className: "w-full" });
+}
+
+
+
+exports.EmbeddedAuthForm = EmbeddedAuthForm;
+//# sourceMappingURL=chunk-3RXUFZTR.cjs.map

package/dist/chunk-3RXUFZTR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/auth/EmbeddedAuthForm.tsx"],"names":[],"mappings":";;;;;AAGW;AADJ,SAAS,mBAAmB;AAC/B,SAAO,oBAAC,YAAS,WAAU,UAAS;AACxC","sourcesContent":["import { AuthForm } from \"./AuthForm\";\n\nexport function EmbeddedAuthForm() {\n    return <AuthForm className=\"w-full\" />;\n}\n"]}

package/dist/chunk-43P7QWBK.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkR6IL3WOEcjs = require('./chunk-R6IL3WOE.cjs');
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/components/embed/fiat/FiatEmbeddedCheckout.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function CrossmintFiatEmbeddedCheckout(props) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR6IL3WOEcjs.FiatEmbeddedCheckoutIFrame, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props));
+}
+
+
+
+exports.CrossmintFiatEmbeddedCheckout = CrossmintFiatEmbeddedCheckout;
+//# sourceMappingURL=chunk-43P7QWBK.cjs.map

package/dist/chunk-43P7QWBK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/embed/fiat/FiatEmbeddedCheckout.tsx"],"names":[],"mappings":";;;;;;;;AAKW;AADJ,SAAS,8BAA8B,OAAkC;AAC5E,SAAO,oBAAC,+CAA+B,MAAO;AAClD","sourcesContent":["import type { FiatEmbeddedCheckoutProps } from \"@crossmint/client-sdk-base\";\n\nimport FiatEmbeddedCheckoutIFrame from \"../../../components/embed/fiat/FiatEmbeddedCheckoutIFrame\";\n\nexport function CrossmintFiatEmbeddedCheckout(props: FiatEmbeddedCheckoutProps) {\n    return <FiatEmbeddedCheckoutIFrame {...props} />;\n}\n"]}

package/dist/chunk-46UDUOKJ.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// package.json
+var version = "1.10.0";
+
+// src/consts/version.ts
+var LIB_VERSION = version;
+
+
+
+exports.LIB_VERSION = LIB_VERSION;
+//# sourceMappingURL=chunk-46UDUOKJ.cjs.map

package/dist/chunk-46UDUOKJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../package.json","../src/consts/version.ts"],"names":[],"mappings":";AAEI,cAAW;;;ACAR,IAAM,cAAc","sourcesContent":["{\n    \"name\": \"@crossmint/client-sdk-react-ui\",\n    \"version\": \"1.10.0\",\n    \"repository\": \"https://github.com/Crossmint/crossmint-sdk\",\n    \"license\": \"Apache-2.0\",\n    \"author\": \"Paella Labs Inc\",\n    \"sideEffects\": false,\n    \"type\": \"module\",\n    \"exports\": {\n        \"import\": \"./dist/index.js\",\n        \"require\": \"./dist/index.cjs\"\n    },\n    \"main\": \"./dist/index.cjs\",\n    \"module\": \"./dist/index.js\",\n    \"types\": \"./dist/index.d.ts\",\n    \"files\": [\"dist\", \"src\", \"LICENSE\"],\n    \"scripts\": {\n        \"build\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup\",\n        \"dev\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup --watch\",\n        \"test:vitest\": \"vitest run\"\n    },\n    \"dependencies\": {\n        \"@crossmint/client-sdk-auth\": \"workspace:*\",\n        \"@crossmint/client-sdk-base\": \"workspace:*\",\n        \"@crossmint/client-sdk-smart-wallet\": \"workspace:*\",\n        \"@crossmint/client-sdk-window\": \"workspace:*\",\n        \"@crossmint/common-sdk-auth\": \"workspace:*\",\n        \"@crossmint/common-sdk-base\": \"workspace:*\",\n        \"@dynamic-labs/ethereum\": \"3.4.4\",\n        \"@dynamic-labs/ethereum-core\": \"3.4.4\",\n        \"@dynamic-labs/sdk-react-core\": \"3.4.4\",\n        \"@dynamic-labs/solana\": \"3.4.4\",\n        \"@dynamic-labs/solana-core\": \"3.4.4\",\n        \"@ethersproject/transactions\": \"5.7.0\",\n        \"@farcaster/auth-kit\": \"0.6.0\",\n        \"@headlessui/react\": \"2.1.5\",\n        \"@radix-ui/react-dialog\": \"1.1.2\",\n        \"@radix-ui/react-visually-hidden\": \"1.1.0\",\n        \"@solana/web3.js\": \"1.95.1\",\n        \"@tanstack/react-query\": \"5.51.18\",\n        \"@twind/core\": \"1.1.3\",\n        \"@twind/preset-tailwind\": \"1.1.4\",\n        \"@wagmi/connectors\": \"5.3.3\",\n        \"bs58\": \"5.0.0\",\n        \"clsx\": \"2.1.1\",\n        \"color\": \"4.2.3\",\n        \"input-otp\": \"1.2.4\",\n        \"lodash.isequal\": \"4.5.0\",\n        \"react-jss\": \"10.10.0\",\n        \"tailwind-merge\": \"2.4.0\",\n        \"tailwindcss\": \"3.4.10\",\n        \"viem\": \"2.17.5\",\n        \"wagmi\": \"2.12.25\",\n        \"zod\": \"3.22.4\"\n    },\n    \"devDependencies\": {\n        \"@testing-library/react\": \"^16.0.1\",\n        \"@types/color\": \"4.2.0\",\n        \"@types/lodash.isequal\": \"4.5.6\",\n        \"@types/react\": \"^18.3.0\",\n        \"@types/react-dom\": \"^18.3.0\",\n        \"react\": \"^18.3.0\",\n        \"react-dom\": \"^18.3.0\"\n    },\n    \"peerDependencies\": {\n        \"react\": \">=17.0.2\",\n        \"react-dom\": \">=17.0.2\"\n    }\n}\n","import { version } from \"../../package.json\";\n\nexport const LIB_VERSION = version;\n"]}

package/dist/chunk-4DAZAO6Y.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+
+
+
+
+
+exports.__spreadValues = __spreadValues; exports.__spreadProps = __spreadProps; exports.__objRest = __objRest; exports.__async = __async;
+//# sourceMappingURL=chunk-4DAZAO6Y.cjs.map

package/dist/chunk-4DAZAO6Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-5JAEV6YP.js

@@ -0,0 +1,81 @@
+import {
+  CryptoWalletConnectionHandler
+} from "./chunk-UC3GWTEN.js";
+import {
+  createCrossmintApiClient
+} from "./chunk-BJIMCGIQ.js";
+import {
+  useCrossmint
+} from "./chunk-3J6CUUWT.js";
+
+// src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx
+import { useEffect, useRef, useState } from "react";
+import {
+  crossmintEmbeddedCheckoutV3Service
+} from "@crossmint/client-sdk-base";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function EmbeddedCheckoutV3IFrame(props) {
+  const [iframeClient, setIframeClient] = useState(null);
+  const [height, setHeight] = useState(0);
+  const { crossmint } = useCrossmint();
+  const apiClient = createCrossmintApiClient(crossmint, {
+    usageOrigin: "client"
+  });
+  const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });
+  const ref = useRef(null);
+  useEffect(() => {
+    const iframe = ref.current;
+    if (!iframe || iframeClient) {
+      return;
+    }
+    setIframeClient(embedV3Service.iframe.createClient(iframe));
+  }, [ref.current, iframeClient]);
+  useEffect(() => {
+    if (iframeClient == null) {
+      return;
+    }
+    iframeClient.on("ui:height.changed", (data) => setHeight(data.height));
+    return () => {
+      iframeClient.off("ui:height.changed");
+    };
+  }, [iframeClient]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref,
+        src: embedV3Service.iframe.getUrl(props),
+        id: "crossmint-embedded-checkout.iframe",
+        role: "crossmint-embedded-checkout.iframe",
+        allow: "payment *",
+        style: {
+          boxShadow: "none",
+          border: "none",
+          padding: "0px",
+          width: "100%",
+          minWidth: "100%",
+          overflow: "hidden",
+          display: "block",
+          userSelect: "none",
+          transform: "translate(0px)",
+          opacity: "1",
+          transition: "ease 0s, opacity 0.4s ease 0.1s",
+          height: `${height}px`,
+          backgroundColor: "transparent"
+        }
+      }
+    ),
+    props.payment.crypto.enabled ? /* @__PURE__ */ jsx(
+      CryptoWalletConnectionHandler,
+      {
+        iframeClient,
+        apiKeyEnvironment: apiClient["parsedAPIKey"].environment
+      }
+    ) : null
+  ] });
+}
+
+export {
+  EmbeddedCheckoutV3IFrame
+};
+//# sourceMappingURL=chunk-5JAEV6YP.js.map

package/dist/chunk-5JAEV6YP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx"],"sourcesContent":["import { useCrossmint } from \"@/hooks\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    type CrossmintEmbeddedCheckoutV3Props,\n    type EmbeddedCheckoutV3IFrameEmitter,\n    crossmintEmbeddedCheckoutV3Service,\n} from \"@crossmint/client-sdk-base\";\n\nimport { CryptoWalletConnectionHandler } from \"./crypto/CryptoWalletConnectionHandler\";\nimport { createCrossmintApiClient } from \"@/utils/createCrossmintApiClient\";\n\nexport function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) {\n    const [iframeClient, setIframeClient] = useState<EmbeddedCheckoutV3IFrameEmitter | null>(null);\n    const [height, setHeight] = useState(0);\n\n    const { crossmint } = useCrossmint();\n    const apiClient = createCrossmintApiClient(crossmint, {\n        usageOrigin: \"client\",\n    });\n    const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });\n\n    const ref = useRef<HTMLIFrameElement>(null);\n\n    useEffect(() => {\n        const iframe = ref.current;\n        if (!iframe || iframeClient) {\n            return;\n        }\n        setIframeClient(embedV3Service.iframe.createClient(iframe));\n    }, [ref.current, iframeClient]);\n\n    useEffect(() => {\n        if (iframeClient == null) {\n            return;\n        }\n        iframeClient.on(\"ui:height.changed\", (data) => setHeight(data.height));\n\n        return () => {\n            iframeClient.off(\"ui:height.changed\");\n        };\n    }, [iframeClient]);\n\n    return (\n        <>\n            <iframe\n                ref={ref}\n                src={embedV3Service.iframe.getUrl(props)}\n                id=\"crossmint-embedded-checkout.iframe\"\n                role=\"crossmint-embedded-checkout.iframe\"\n                allow=\"payment *\"\n                style={{\n                    boxShadow: \"none\",\n                    border: \"none\",\n                    padding: \"0px\",\n                    width: \"100%\",\n                    minWidth: \"100%\",\n                    overflow: \"hidden\",\n                    display: \"block\",\n                    userSelect: \"none\",\n                    transform: \"translate(0px)\",\n                    opacity: \"1\",\n                    transition: \"ease 0s, opacity 0.4s ease 0.1s\",\n                    height: `${height}px`,\n                    backgroundColor: \"transparent\",\n                }}\n            />\n            {props.payment.crypto.enabled ? (\n                <CryptoWalletConnectionHandler\n                    iframeClient={iframeClient}\n                    apiKeyEnvironment={apiClient[\"parsedAPIKey\"].environment}\n                />\n            ) : null}\n        </>\n    );\n}\n"],"mappings":";;;;;;;;;;;AACA,SAAS,WAAW,QAAQ,gBAAgB;AAE5C;AAAA,EAGI;AAAA,OACG;AAqCC,mBACI,KADJ;AAhCD,SAAS,yBAAyB,OAAyC;AAC9E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiD,IAAI;AAC7F,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,YAAY,yBAAyB,WAAW;AAAA,IAClD,aAAa;AAAA,EACjB,CAAC;AACD,QAAM,iBAAiB,mCAAmC,EAAE,UAAU,CAAC;AAEvE,QAAM,MAAM,OAA0B,IAAI;AAE1C,YAAU,MAAM;AACZ,UAAM,SAAS,IAAI;AACnB,QAAI,CAAC,UAAU,cAAc;AACzB;AAAA,IACJ;AACA,oBAAgB,eAAe,OAAO,aAAa,MAAM,CAAC;AAAA,EAC9D,GAAG,CAAC,IAAI,SAAS,YAAY,CAAC;AAE9B,YAAU,MAAM;AACZ,QAAI,gBAAgB,MAAM;AACtB;AAAA,IACJ;AACA,iBAAa,GAAG,qBAAqB,CAAC,SAAS,UAAU,KAAK,MAAM,CAAC;AAErE,WAAO,MAAM;AACT,mBAAa,IAAI,mBAAmB;AAAA,IACxC;AAAA,EACJ,GAAG,CAAC,YAAY,CAAC;AAEjB,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,KAAK,eAAe,OAAO,OAAO,KAAK;AAAA,QACvC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAO;AAAA,UACH,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ,GAAG,MAAM;AAAA,UACjB,iBAAiB;AAAA,QACrB;AAAA;AAAA,IACJ;AAAA,IACC,MAAM,QAAQ,OAAO,UAClB;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,mBAAmB,UAAU,cAAc,EAAE;AAAA;AAAA,IACjD,IACA;AAAA,KACR;AAER;","names":[]}

package/dist/chunk-5KK3YQWD.cjs

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-5KK3YQWD.cjs.map

package/dist/chunk-5KK3YQWD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-5RX5WFEW.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/utils/classNames.ts
+var _clsx = require('clsx');
+var _tailwindmerge = require('tailwind-merge');
+function classNames(...inputs) {
+  return _tailwindmerge.twMerge.call(void 0, _clsx.clsx.call(void 0, inputs));
+}
+
+
+
+exports.classNames = classNames;
+//# sourceMappingURL=chunk-5RX5WFEW.cjs.map

package/dist/chunk-5RX5WFEW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/classNames.ts"],"names":[],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAQjB,SAAS,cAAc,QAAsB;AAChD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC/B","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Combines multiple class names into a single string.\n *\n * @param inputs - The class names to combine.\n * @returns The combined class names as a string.\n */\nexport function classNames(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n"]}