@superlogic/spree-pay 0.1.1 → 0.1.3

package/build/index.js

@@ -1,9 +1,9 @@
 // src/SpreePay.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { SWRConfig } from "swr";
 
 // src/SpreePayContent.tsx
-import { useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect17 } from "react";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -22,12 +22,12 @@ function clsx() {
 
 // ../../node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
-var createClassGroupUtils = (config) => {
-  const classMap = createClassMap(config);
+var createClassGroupUtils = (config2) => {
+  const classMap = createClassMap(config2);
   const {
     conflictingClassGroups,
     conflictingClassGroupModifiers
-  } = config;
+  } = config2;
   const getClassGroupId = (className) => {
     const classParts = className.split(CLASS_PART_SEPARATOR);
     if (classParts[0] === "" && classParts.length !== 1) {
@@ -75,11 +75,11 @@ var getGroupIdForArbitraryProperty = (className) => {
     }
   }
 };
-var createClassMap = (config) => {
+var createClassMap = (config2) => {
   const {
     theme,
     classGroups
-  } = config;
+  } = config2;
   const classMap = {
     nextPart: /* @__PURE__ */ new Map(),
     validators: []
@@ -169,11 +169,11 @@ var createLruCache = (maxCacheSize) => {
 var IMPORTANT_MODIFIER = "!";
 var MODIFIER_SEPARATOR = ":";
 var MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
-var createParseClassName = (config) => {
+var createParseClassName = (config2) => {
   const {
     prefix,
     experimentalParseClassName
-  } = config;
+  } = config2;
   let parseClassName = (className) => {
     const modifiers = [];
     let bracketDepth = 0;
@@ -243,8 +243,8 @@ var stripImportantModifier = (baseClassName) => {
   }
   return baseClassName;
 };
-var createSortModifiers = (config) => {
-  const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map((modifier) => [modifier, true]));
+var createSortModifiers = (config2) => {
+  const orderSensitiveModifiers = Object.fromEntries(config2.orderSensitiveModifiers.map((modifier) => [modifier, true]));
   const sortModifiers = (modifiers) => {
     if (modifiers.length <= 1) {
       return modifiers;
@@ -265,11 +265,11 @@ var createSortModifiers = (config) => {
   };
   return sortModifiers;
 };
-var createConfigUtils = (config) => ({
-  cache: createLruCache(config.cacheSize),
-  parseClassName: createParseClassName(config),
-  sortModifiers: createSortModifiers(config),
-  ...createClassGroupUtils(config)
+var createConfigUtils = (config2) => ({
+  cache: createLruCache(config2.cacheSize),
+  parseClassName: createParseClassName(config2),
+  sortModifiers: createSortModifiers(config2),
+  ...createClassGroupUtils(config2)
 });
 var SPLIT_CLASSES_REGEX = /\s+/;
 var mergeClassList = (classList, configUtils) => {
@@ -362,8 +362,8 @@ function createTailwindMerge(createConfigFirst, ...createConfigRest) {
   let cacheSet;
   let functionToCall = initTailwindMerge;
   function initTailwindMerge(classList) {
-    const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
-    configUtils = createConfigUtils(config);
+    const config2 = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
+    configUtils = createConfigUtils(config2);
     cacheGet = configUtils.cache.get;
     cacheSet = configUtils.cache.set;
     functionToCall = tailwindMerge;
@@ -3030,13 +3030,32 @@ var useSpreePayRegister = () => {
   return { register: ctx.register };
 };
 
+// src/utils/format.ts
+var formatUSD = (amount, currency = "USD") => {
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    style: "decimal",
+    maximumFractionDigits: 5,
+    minimumFractionDigits: 2
+  }).format(amount);
+  return `${formattedAmount} ${currency}`;
+};
+var formatCoin = (amount, currency = "USDC") => {
+  const formattedAmount = new Intl.NumberFormat("en-US", {
+    style: "decimal",
+    maximumFractionDigits: 5,
+    minimumFractionDigits: 2
+  }).format(amount);
+  return `${formattedAmount} ${currency}`;
+};
+
 // src/components/CheckoutButton.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var CheckoutButton = ({ amount, onCheckout }) => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const isDisabled = !amount || !selectedPaymentMethod.method;
+  const isDisabled = !amount || !selectedPaymentMethod.method || selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */;
+  const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ jsx2("div", { className: "px-7 py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-secondary", children: [
+    /* @__PURE__ */ jsx2("div", { className: "px-7 py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-[#798B95]", children: [
       "By clicking on the button below I acknowledge that I have read and accepted the",
       " ",
       /* @__PURE__ */ jsx2("a", { className: "underline", href: "/", children: "Property Policies" }),
@@ -3059,7 +3078,7 @@ var CheckoutButton = ({ amount, onCheckout }) => {
         className: cn("bg-primary pointer w-full py-4 text-xl font-semibold text-white", {
           "opacity-50": isDisabled
         }),
-        children: amount ? `Pay ${amount}` : "Checkout"
+        children: amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
       }
     )
   ] });
@@ -3077,7 +3096,7 @@ var SpreeLegal = () => {
         d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
       }
     ) }),
-    /* @__PURE__ */ jsxs2("p", { className: "text-secondary text-xs", children: [
+    /* @__PURE__ */ jsxs2("p", { className: "text-xs text-[#798B95]", children: [
       "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
       " ",
       /* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Learn more" }),
@@ -3136,7 +3155,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
           "div",
           {
             className: cn(
-              "flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-4",
+              "flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
               {
                 "border-primary": isSelected
               }
@@ -3144,7 +3163,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
             children: [
               /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
               /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxs3("p", { className: "text-secondary text-sm font-medium", children: [
+                /* @__PURE__ */ jsxs3("p", { className: "text-sm font-medium text-[#798B95]", children: [
                   "Ending in ",
                   /* @__PURE__ */ jsx4("span", { className: "text-black", children: card.lastFourNumbers })
                 ] }),
@@ -3229,7 +3248,7 @@ import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React2.forwardRef((props, forwardedRef) => {
+  const Slot22 = React2.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     const childrenArray = React2.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
@@ -3247,8 +3266,8 @@ function createSlot(ownerName) {
     }
     return /* @__PURE__ */ jsx5(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
 }
 var Slot = /* @__PURE__ */ createSlot("Slot");
 // @__NO_SIDE_EFFECTS__
@@ -3313,10 +3332,10 @@ function getElementRef(element) {
 // ../../node_modules/class-variance-authority/dist/index.mjs
 var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
 var cx = clsx;
-var cva = (base, config) => (props) => {
+var cva = (base2, config2) => (props) => {
   var _config_compoundVariants;
-  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config;
+  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base2, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config2;
   const getVariantClassNames = Object.keys(variants).map((variant) => {
     const variantProp = props === null || props === void 0 ? void 0 : props[variant];
     const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
@@ -3332,7 +3351,7 @@ var cva = (base, config) => (props) => {
     acc[key] = value;
     return acc;
   }, {});
-  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
     let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
     return Object.entries(compoundVariantOptions).every((param2) => {
       let [key, value] = param2;
@@ -3349,7 +3368,7 @@ var cva = (base, config) => (props) => {
       cvClassName
     ] : acc;
   }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  return cx(base2, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
 
 // ../ui/src/components/button.tsx
@@ -3397,9 +3416,25 @@ import * as React10 from "react";
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React3 from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
+function createContext22(rootComponentName, defaultContext) {
+  const Context = React3.createContext(defaultContext);
+  const Provider = (props) => {
+    const { children, ...context } = props;
+    const value = React3.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ jsx7(Context.Provider, { value, children });
+  };
+  Provider.displayName = rootComponentName + "Provider";
+  function useContext22(consumerName) {
+    const context = React3.useContext(Context);
+    if (context) return context;
+    if (defaultContext !== void 0) return defaultContext;
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  }
+  return [Provider, useContext22];
+}
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
-  function createContext3(rootComponentName, defaultContext) {
+  function createContext32(rootComponentName, defaultContext) {
     const BaseContext = React3.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
@@ -3432,7 +3467,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
     };
   };
   createScope.scopeName = scopeName;
-  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+  return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
 }
 function composeContextScopes(...scopes) {
   const baseScope = scopes[0];
@@ -3741,18 +3776,21 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Slot2 = createSlot(`Primitive.${node}`);
-  const Node = React9.forwardRef((props, forwardedRef) => {
+  const Slot3 = createSlot(`Primitive.${node}`);
+  const Node2 = React9.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot2 : node;
+    const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
     return /* @__PURE__ */ jsx8(Comp, { ...primitiveProps, ref: forwardedRef });
   });
-  Node.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node };
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
 }, {});
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
 
 // ../../node_modules/@radix-ui/react-checkbox/dist/index.mjs
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -4107,6 +4145,13 @@ var createLucideIcon = (iconName, iconNode) => {
 var __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
 var Check = createLucideIcon("check", __iconNode);
 
+// ../../node_modules/lucide-react/dist/esm/icons/x.js
+var __iconNode2 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+var X = createLucideIcon("x", __iconNode2);
+
 // ../ui/src/components/checkbox.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 function Checkbox2({ className, ...props }) {
@@ -4282,7 +4327,7 @@ var CreditCard = () => {
   const [showForm, setShowForm] = useState7(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
-  const { config } = useConfig();
+  const { config: config2 } = useConfig();
   const setCard = (card) => {
     setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
   };
@@ -4292,7 +4337,7 @@ var CreditCard = () => {
     setShowForm(false);
   };
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ jsx14("h3", { className: "text-primary text-xl font-semibold", children: "Your Credit Cards" }),
+    /* @__PURE__ */ jsx14("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
     !showForm && /* @__PURE__ */ jsxs6(Fragment5, { children: [
       /* @__PURE__ */ jsx14(
         CardsList,
@@ -4301,173 +4346,2582 @@ var CreditCard = () => {
           setCard
         }
       ),
-      config?.stripePublicKey && /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black", children: "Add new card" })
+      config2?.stripePublicKey && /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black", children: "Add new card" })
     ] }),
-    config?.stripePublicKey && showForm && /* @__PURE__ */ jsx14(SripeWrapper, { saveNewCard, publicKey: config.stripePublicKey })
+    config2?.stripePublicKey && showForm && /* @__PURE__ */ jsx14(SripeWrapper, { saveNewCard, publicKey: config2.stripePublicKey })
   ] });
 };
 
-// src/components/TabButtons.tsx
+// src/components/Crypto/CryptoWrapper.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import NiceModal3 from "@ebay/nice-modal-react";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { getDefaultConfig as getDefaultConfig2 } from "@rainbow-me/rainbowkit";
+import "@rainbow-me/rainbowkit/styles.css";
+import { WagmiProvider } from "wagmi";
+import { base } from "wagmi/chains";
+
+// src/components/Crypto/Crypto.tsx
+import NiceModal2 from "@ebay/nice-modal-react";
+import { useAccount as useAccount3 } from "wagmi";
+
+// src/config/symbolLogos.tsx
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
-var TabButton = ({ isActive, children, onClick }) => {
-  return /* @__PURE__ */ jsx15(
-    "button",
+var MOCA_SVG = /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsx15("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
+  /* @__PURE__ */ jsx15(
+    "path",
     {
-      onClick,
-      className: cn(
-        "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black px-2.5 py-1.5 text-sm text-black",
-        { "opacity-50": !isActive },
-        { "bg-primary/7 border-primary text-primary": isActive }
-      ),
-      children
+      fill: "#fff",
+      d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33Z"
     }
-  );
-};
-var TabButtons = (props) => {
-  const { value, onChange } = props;
-  const handleChange = (type) => () => {
-    onChange({ type, method: null });
-  };
-  return /* @__PURE__ */ jsxs7("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsxs7(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
-      /* @__PURE__ */ jsx15("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx15(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
-        }
-      ) }),
-      /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium", children: "Card" })
-    ] }),
-    /* @__PURE__ */ jsxs7(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
-      /* @__PURE__ */ jsxs7("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-        /* @__PURE__ */ jsx15(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
-          }
-        ),
-        /* @__PURE__ */ jsx15("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
-      ] }),
-      /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium", children: "Crypto" })
-    ] })
-  ] });
+  ),
+  /* @__PURE__ */ jsx15("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+] });
+var USDC_SVG = /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsxs7("g", { clipPath: "url(#clip0_528_9163)", children: [
+    /* @__PURE__ */ jsx15("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#fff",
+        d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#fff",
+        d: "M11.03 22.34a8.69 8.69 0 0 1-5.2-11.2 8.63 8.63 0 0 1 5.2-5.19c.23-.12.35-.3.35-.58v-.82c0-.23-.12-.4-.35-.47-.06 0-.18 0-.24.06a10.48 10.48 0 0 0 0 20.01c.24.12.47 0 .53-.23.06-.06.06-.12.06-.24v-.81c0-.18-.18-.41-.35-.53Zm6.18-18.2c-.23-.12-.47 0-.53.23-.05.06-.05.12-.05.24v.81c0 .24.17.47.35.59a8.69 8.69 0 0 1 5.19 11.2 8.63 8.63 0 0 1-5.2 5.19c-.23.12-.34.3-.34.58v.82c0 .23.11.4.35.47.05 0 .17 0 .23-.06a10.48 10.48 0 0 0 6.82-13.19 10.58 10.58 0 0 0-6.82-6.88Z"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx15("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
+] });
+var USDT_SVG = /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsx15("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
+  /* @__PURE__ */ jsx15(
+    "path",
+    {
+      fill: "#fff",
+      d: "M15.5 15.3v-.01c-.1 0-.6.04-1.72.04-.88 0-1.5-.03-1.73-.04-3.42-.15-5.97-.74-5.97-1.46 0-.7 2.55-1.3 5.97-1.46v2.33a26 26 0 0 0 3.44 0v-2.32c3.42.15 5.96.74 5.96 1.46 0 .7-2.55 1.3-5.96 1.45m0-3.15v-2.08h4.76V6.89H7.3v3.17h4.76v2.08c-3.87.17-6.77.94-6.77 1.86 0 .92 2.9 1.68 6.77 1.86v6.67h3.45v-6.67c3.86-.18 6.76-.94 6.76-1.86 0-.92-2.9-1.68-6.76-1.86"
+    }
+  )
+] });
+var WETH_SVG = /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
+  /* @__PURE__ */ jsxs7("g", { clipPath: "url(#clip0_528_9173)", children: [
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#000",
+        d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#F61F7D",
+        d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#000",
+        fillRule: "evenodd",
+        d: "M19.19 18.27c1.87-2 3.03-4.65 3.03-7.26 0-2.52-1.39-5-3.56-6.87-2.18-1.88-5-3.05-7.65-3.05a9.54 9.54 0 0 0-9.57 9.51c0 2.57 1.33 5.31 3.42 7.44 2.1 2.13 4.8 3.5 7.38 3.5a9.7 9.7 0 0 0 6.95-3.27Zm-6.95 4.36c5.89 0 11.07-5.77 11.07-11.62C23.31 5.15 16.9 0 11.01 0A10.63 10.63 0 0 0 .34 10.6c0 5.86 6 12.03 11.9 12.03Z",
+        clipRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ jsx15("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#000",
+        fillRule: "evenodd",
+        d: "M13.2 21.87a9.7 9.7 0 1 0 0-19.4 9.7 9.7 0 0 0 0 19.4Zm0 1.1a10.8 10.8 0 1 0 0-21.6 10.8 10.8 0 0 0 0 21.6Z",
+        clipRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ jsx15("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx15(
+      "path",
+      {
+        fill: "#000",
+        d: "M5.83 9.94h.99l.31 3 .4-3h.78l.41 2.98.32-2.98h.98l-.63 5.15H8.37l-.45-3.1-.42 3.1H6.47l-.64-5.15ZM10.91 9.94h2.38v.78h-1.2v1.27H13v.8h-.92v1.53h1.22v.77h-2.39V9.94ZM14.64 10.79h-.81v-.85h2.78v.85h-.8v4.3h-1.17v-4.3ZM17.42 9.94h1.16v2.09h.82V9.94h1.17v5.15H19.4v-2.25h-.82v2.25h-1.16V9.94Z"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx15("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+] });
+var symbolLogos = {
+  MOCA: MOCA_SVG,
+  USDC: USDC_SVG,
+  USDT: USDT_SVG,
+  WETH: WETH_SVG
 };
+function getSymbolLogo(symbol) {
+  return symbolLogos[symbol] ?? null;
+}
 
-// src/components/Tabs.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-var Tabs = () => {
-  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  return /* @__PURE__ */ jsxs8("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
-      /* @__PURE__ */ jsx16("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ jsx16(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "px-7 py-6", children: [
-      selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx16(CreditCard, {}),
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && null
-    ] })
-  ] });
-};
+// src/modals/CryptoSelectModal.tsx
+import { useState as useState16 } from "react";
+import NiceModal, { useModal } from "@ebay/nice-modal-react";
 
-// src/fetcher/client.ts
-var cfg = { baseUrl: void 0, accessToken: void 0, tenantId: void 0 };
-var buildUrl = (key) => {
-  if (!cfg.baseUrl) throw new Error("Missing SLAPI baseUrl. Call registerApi(...) first.");
-  if (typeof key === "string") return cfg.baseUrl + key;
-  const { url, params = {} } = key;
-  const usp = new URLSearchParams();
-  Object.entries(params).forEach(([k, v]) => {
-    if (v === void 0 || v === null) return;
-    usp.append(k, String(v));
+// ../../node_modules/@radix-ui/react-dialog/dist/index.mjs
+import * as React28 from "react";
+
+// ../../node_modules/@radix-ui/react-id/dist/index.mjs
+import * as React12 from "react";
+var useReactId = React12[" useId ".trim().toString()] || (() => void 0);
+var count = 0;
+function useId2(deterministicId) {
+  const [id, setId] = React12.useState(useReactId());
+  useLayoutEffect2(() => {
+    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
+  }, [deterministicId]);
+  return deterministicId || (id ? `radix-${id}` : "");
+}
+
+// ../../node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
+import * as React15 from "react";
+
+// ../../node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
+import * as React13 from "react";
+function useCallbackRef(callback) {
+  const callbackRef = React13.useRef(callback);
+  React13.useEffect(() => {
+    callbackRef.current = callback;
   });
-  const qs = usp.toString();
-  return cfg.baseUrl + url + (qs ? `?${qs}` : "");
-};
-var request = async (method, url, body) => {
-  const headers = {
-    Accept: "application/json"
+  return React13.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+
+// ../../node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs
+import * as React14 from "react";
+function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
+  const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
+  React14.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onEscapeKeyDown(event);
+      }
+    };
+    ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [onEscapeKeyDown, ownerDocument]);
+}
+
+// ../../node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DISMISSABLE_LAYER_NAME = "DismissableLayer";
+var CONTEXT_UPDATE = "dismissableLayer.update";
+var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+var originalBodyPointerEvents;
+var DismissableLayerContext = React15.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+var DismissableLayer = React15.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      disableOutsidePointerEvents = false,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      ...layerProps
+    } = props;
+    const context = React15.useContext(DismissableLayerContext);
+    const [node, setNode] = React15.useState(null);
+    const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+    const [, force] = React15.useState({});
+    const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
+    const layers = Array.from(context.layers);
+    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const index = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      const target = event.target;
+      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+      onPointerDownOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    }, ownerDocument);
+    const focusOutside = useFocusOutside((event) => {
+      const target = event.target;
+      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+      if (isFocusInBranch) return;
+      onFocusOutside?.(event);
+      onInteractOutside?.(event);
+      if (!event.defaultPrevented) onDismiss?.();
+    }, ownerDocument);
+    useEscapeKeydown((event) => {
+      const isHighestLayer = index === context.layers.size - 1;
+      if (!isHighestLayer) return;
+      onEscapeKeyDown?.(event);
+      if (!event.defaultPrevented && onDismiss) {
+        event.preventDefault();
+        onDismiss();
+      }
+    }, ownerDocument);
+    React15.useEffect(() => {
+      if (!node) return;
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+          ownerDocument.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
+      }
+      context.layers.add(node);
+      dispatchUpdate();
+      return () => {
+        if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, context]);
+    React15.useEffect(() => {
+      return () => {
+        if (!node) return;
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+    React15.useEffect(() => {
+      const handleUpdate = () => force({});
+      document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+    }, []);
+    return /* @__PURE__ */ jsx16(
+      Primitive.div,
+      {
+        ...layerProps,
+        ref: composedRefs,
+        style: {
+          pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+          ...props.style
+        },
+        onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+        onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+        onPointerDownCapture: composeEventHandlers(
+          props.onPointerDownCapture,
+          pointerDownOutside.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
+var BRANCH_NAME = "DismissableLayerBranch";
+var DismissableLayerBranch = React15.forwardRef((props, forwardedRef) => {
+  const context = React15.useContext(DismissableLayerContext);
+  const ref = React15.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React15.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ jsx16(Primitive.div, { ...props, ref: composedRefs });
+});
+DismissableLayerBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
+  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React15.useRef(false);
+  const handleClickRef = React15.useRef(() => {
+  });
+  React15.useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent2 = function() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            handlePointerDownOutside,
+            eventDetail,
+            { discrete: true }
+          );
+        };
+        var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
+        const eventDetail = { originalEvent: event };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
+          ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent2();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.current);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.current);
+    };
+  }, [ownerDocument, handlePointerDownOutside]);
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
   };
-  if (!cfg.accessToken) throw new Error("Missing SLAPI accessToken. Call registerApi(...) first.");
-  if (!cfg.tenantId) throw new Error("Missing SLAPI tenantId. Call registerApi(...) first.");
-  headers.Authorization = `Bearer ${cfg.accessToken}`;
-  headers["X-Tenant-ID"] = cfg.tenantId;
-  let payload;
-  if (method !== "GET" && method !== "DELETE" && body !== void 0) {
-    if (typeof FormData !== "undefined" && body instanceof FormData) {
-      payload = body;
-    } else if (body instanceof Blob) {
-      payload = body;
-    } else {
-      headers["Content-Type"] = "application/json";
-      payload = JSON.stringify(body);
+}
+function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
+  const handleFocusOutside = useCallbackRef(onFocusOutside);
+  const isFocusInsideReactTreeRef = React15.useRef(false);
+  React15.useEffect(() => {
+    const handleFocus = (event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    return () => ownerDocument.removeEventListener("focusin", handleFocus);
+  }, [ownerDocument, handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name, handler, { once: true });
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
+}
+
+// ../../node_modules/@radix-ui/react-focus-scope/dist/index.mjs
+import * as React16 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+var EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var FOCUS_SCOPE_NAME = "FocusScope";
+var FocusScope = React16.forwardRef((props, forwardedRef) => {
+  const {
+    loop = false,
+    trapped = false,
+    onMountAutoFocus: onMountAutoFocusProp,
+    onUnmountAutoFocus: onUnmountAutoFocusProp,
+    ...scopeProps
+  } = props;
+  const [container, setContainer] = React16.useState(null);
+  const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
+  const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
+  const lastFocusedElementRef = React16.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
+  const focusScope = React16.useRef({
+    paused: false,
+    pause() {
+      this.paused = true;
+    },
+    resume() {
+      this.paused = false;
+    }
+  }).current;
+  React16.useEffect(() => {
+    if (trapped) {
+      let handleFocusIn2 = function(event) {
+        if (focusScope.paused || !container) return;
+        const target = event.target;
+        if (container.contains(target)) {
+          lastFocusedElementRef.current = target;
+        } else {
+          focus(lastFocusedElementRef.current, { select: true });
+        }
+      }, handleFocusOut2 = function(event) {
+        if (focusScope.paused || !container) return;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget === null) return;
+        if (!container.contains(relatedTarget)) {
+          focus(lastFocusedElementRef.current, { select: true });
+        }
+      }, handleMutations2 = function(mutations) {
+        const focusedElement = document.activeElement;
+        if (focusedElement !== document.body) return;
+        for (const mutation of mutations) {
+          if (mutation.removedNodes.length > 0) focus(container);
+        }
+      };
+      var handleFocusIn = handleFocusIn2, handleFocusOut = handleFocusOut2, handleMutations = handleMutations2;
+      document.addEventListener("focusin", handleFocusIn2);
+      document.addEventListener("focusout", handleFocusOut2);
+      const mutationObserver = new MutationObserver(handleMutations2);
+      if (container) mutationObserver.observe(container, { childList: true, subtree: true });
+      return () => {
+        document.removeEventListener("focusin", handleFocusIn2);
+        document.removeEventListener("focusout", handleFocusOut2);
+        mutationObserver.disconnect();
+      };
+    }
+  }, [trapped, container, focusScope.paused]);
+  React16.useEffect(() => {
+    if (container) {
+      focusScopesStack.add(focusScope);
+      const previouslyFocusedElement = document.activeElement;
+      const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+      if (!hasFocusedCandidate) {
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container.dispatchEvent(mountEvent);
+        if (!mountEvent.defaultPrevented) {
+          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
+          if (document.activeElement === previouslyFocusedElement) {
+            focus(container);
+          }
+        }
+      }
+      return () => {
+        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        setTimeout(() => {
+          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container.dispatchEvent(unmountEvent);
+          if (!unmountEvent.defaultPrevented) {
+            focus(previouslyFocusedElement ?? document.body, { select: true });
+          }
+          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          focusScopesStack.remove(focusScope);
+        }, 0);
+      };
     }
+  }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
+  const handleKeyDown = React16.useCallback(
+    (event) => {
+      if (!loop && !trapped) return;
+      if (focusScope.paused) return;
+      const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+      const focusedElement = document.activeElement;
+      if (isTabKey && focusedElement) {
+        const container2 = event.currentTarget;
+        const [first, last] = getTabbableEdges(container2);
+        const hasTabbableElementsInside = first && last;
+        if (!hasTabbableElementsInside) {
+          if (focusedElement === container2) event.preventDefault();
+        } else {
+          if (!event.shiftKey && focusedElement === last) {
+            event.preventDefault();
+            if (loop) focus(first, { select: true });
+          } else if (event.shiftKey && focusedElement === first) {
+            event.preventDefault();
+            if (loop) focus(last, { select: true });
+          }
+        }
+      }
+    },
+    [loop, trapped, focusScope.paused]
+  );
+  return /* @__PURE__ */ jsx17(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+});
+FocusScope.displayName = FOCUS_SCOPE_NAME;
+function focusFirst(candidates, { select = false } = {}) {
+  const previouslyFocusedElement = document.activeElement;
+  for (const candidate of candidates) {
+    focus(candidate, { select });
+    if (document.activeElement !== previouslyFocusedElement) return;
   }
-  const res = await fetch(url, {
-    method,
-    headers,
-    body: payload,
-    cache: "no-store"
+}
+function getTabbableEdges(container) {
+  const candidates = getTabbableCandidates(container);
+  const first = findVisible(candidates, container);
+  const last = findVisible(candidates.reverse(), container);
+  return [first, last];
+}
+function getTabbableCandidates(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
   });
-  if (!res.ok) {
-    const text = await res.text().catch(() => "");
-    throw new Error(text || `Request failed: ${res.status}`);
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}
+function findVisible(elements, container) {
+  for (const element of elements) {
+    if (!isHidden(element, { upTo: container })) return element;
   }
-  const contentType = res.headers.get("content-type") || "";
-  if (!contentType.includes("application/json")) {
-    return await res.text();
+}
+function isHidden(node, { upTo }) {
+  if (getComputedStyle(node).visibility === "hidden") return true;
+  while (node) {
+    if (upTo !== void 0 && node === upTo) return false;
+    if (getComputedStyle(node).display === "none") return true;
+    node = node.parentElement;
   }
-  return await res.json();
-};
-var slapiApi = {
-  get: async () => {
-    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
-  },
-  post: async () => {
-    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
-  },
-  put: async () => {
-    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
-  },
-  patch: async () => {
-    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
-  },
-  delete: async () => {
-    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
+  return false;
+}
+function isSelectableInput(element) {
+  return element instanceof HTMLInputElement && "select" in element;
+}
+function focus(element, { select = false } = {}) {
+  if (element && element.focus) {
+    const previouslyFocusedElement = document.activeElement;
+    element.focus({ preventScroll: true });
+    if (element !== previouslyFocusedElement && isSelectableInput(element) && select)
+      element.select();
   }
-};
-var registerApi = (config) => {
-  cfg.baseUrl = config.baseUrl;
-  cfg.accessToken = config.accessToken;
-  cfg.tenantId = config.tenantId;
-  slapiApi = {
-    get: async (key) => {
-      const url = buildUrl(key);
-      return request("GET", url);
-    },
-    post: async (key, body) => {
-      const url = buildUrl(key);
-      return request("POST", url, body);
-    },
-    put: async (key, body) => {
-      const url = buildUrl(key);
-      return request("PUT", url, body);
-    },
-    patch: async (key, body) => {
-      const url = buildUrl(key);
-      return request("PATCH", url, body);
+}
+var focusScopesStack = createFocusScopesStack();
+function createFocusScopesStack() {
+  let stack = [];
+  return {
+    add(focusScope) {
+      const activeFocusScope = stack[0];
+      if (focusScope !== activeFocusScope) {
+        activeFocusScope?.pause();
+      }
+      stack = arrayRemove(stack, focusScope);
+      stack.unshift(focusScope);
     },
-    delete: async (key) => {
-      const url = buildUrl(key);
-      return request("DELETE", url);
+    remove(focusScope) {
+      stack = arrayRemove(stack, focusScope);
+      stack[0]?.resume();
+    }
+  };
+}
+function arrayRemove(array, item) {
+  const updatedArray = [...array];
+  const index = updatedArray.indexOf(item);
+  if (index !== -1) {
+    updatedArray.splice(index, 1);
+  }
+  return updatedArray;
+}
+function removeLinks(items) {
+  return items.filter((item) => item.tagName !== "A");
+}
+
+// ../../node_modules/@radix-ui/react-portal/dist/index.mjs
+import * as React17 from "react";
+import ReactDOM2 from "react-dom";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var PORTAL_NAME = "Portal";
+var Portal = React17.forwardRef((props, forwardedRef) => {
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = React17.useState(false);
+  useLayoutEffect2(() => setMounted(true), []);
+  const container = containerProp || mounted && globalThis?.document?.body;
+  return container ? ReactDOM2.createPortal(/* @__PURE__ */ jsx18(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+});
+Portal.displayName = PORTAL_NAME;
+
+// ../../node_modules/@radix-ui/react-focus-guards/dist/index.mjs
+import * as React18 from "react";
+var count2 = 0;
+function useFocusGuards() {
+  React18.useEffect(() => {
+    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
+    count2++;
+    return () => {
+      if (count2 === 1) {
+        document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
+      }
+      count2--;
+    };
+  }, []);
+}
+function createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-radix-focus-guard", "");
+  element.tabIndex = 0;
+  element.style.outline = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+
+// ../../node_modules/tslib/tslib.es6.mjs
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+}
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+// ../../node_modules/react-remove-scroll/dist/es2015/Combination.js
+import * as React27 from "react";
+
+// ../../node_modules/react-remove-scroll/dist/es2015/UI.js
+import * as React21 from "react";
+
+// ../../node_modules/react-remove-scroll-bar/dist/es2015/constants.js
+var zeroRightClassName = "right-scroll-bar-position";
+var fullWidthClassName = "width-before-scroll-bar";
+var noScrollbarsClassName = "with-scroll-bars-hidden";
+var removedBarSizeVariable = "--removed-body-scroll-bar-size";
+
+// ../../node_modules/use-callback-ref/dist/es2015/assignRef.js
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+  return ref;
+}
+
+// ../../node_modules/use-callback-ref/dist/es2015/useRef.js
+import { useState as useState12 } from "react";
+function useCallbackRef2(initialValue, callback) {
+  var ref = useState12(function() {
+    return {
+      // value
+      value: initialValue,
+      // last callback
+      callback,
+      // "memoized" public interface
+      facade: {
+        get current() {
+          return ref.value;
+        },
+        set current(value) {
+          var last = ref.value;
+          if (last !== value) {
+            ref.value = value;
+            ref.callback(value, last);
+          }
+        }
+      }
+    };
+  })[0];
+  ref.callback = callback;
+  return ref.facade;
+}
+
+// ../../node_modules/use-callback-ref/dist/es2015/useMergeRef.js
+import * as React19 from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React19.useLayoutEffect : React19.useEffect;
+var currentValues = /* @__PURE__ */ new WeakMap();
+function useMergeRefs(refs, defaultValue) {
+  var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
+    return refs.forEach(function(ref) {
+      return assignRef(ref, newValue);
+    });
+  });
+  useIsomorphicLayoutEffect(function() {
+    var oldValue = currentValues.get(callbackRef);
+    if (oldValue) {
+      var prevRefs_1 = new Set(oldValue);
+      var nextRefs_1 = new Set(refs);
+      var current_1 = callbackRef.current;
+      prevRefs_1.forEach(function(ref) {
+        if (!nextRefs_1.has(ref)) {
+          assignRef(ref, null);
+        }
+      });
+      nextRefs_1.forEach(function(ref) {
+        if (!prevRefs_1.has(ref)) {
+          assignRef(ref, current_1);
+        }
+      });
+    }
+    currentValues.set(callbackRef, refs);
+  }, [refs]);
+  return callbackRef;
+}
+
+// ../../node_modules/use-sidecar/dist/es2015/medium.js
+function ItoI(a) {
+  return a;
+}
+function innerCreateMedium(defaults, middleware) {
+  if (middleware === void 0) {
+    middleware = ItoI;
+  }
+  var buffer = [];
+  var assigned = false;
+  var medium = {
+    read: function() {
+      if (assigned) {
+        throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");
+      }
+      if (buffer.length) {
+        return buffer[buffer.length - 1];
+      }
+      return defaults;
+    },
+    useMedium: function(data) {
+      var item = middleware(data, assigned);
+      buffer.push(item);
+      return function() {
+        buffer = buffer.filter(function(x) {
+          return x !== item;
+        });
+      };
+    },
+    assignSyncMedium: function(cb) {
+      assigned = true;
+      while (buffer.length) {
+        var cbs = buffer;
+        buffer = [];
+        cbs.forEach(cb);
+      }
+      buffer = {
+        push: function(x) {
+          return cb(x);
+        },
+        filter: function() {
+          return buffer;
+        }
+      };
+    },
+    assignMedium: function(cb) {
+      assigned = true;
+      var pendingQueue = [];
+      if (buffer.length) {
+        var cbs = buffer;
+        buffer = [];
+        cbs.forEach(cb);
+        pendingQueue = buffer;
+      }
+      var executeQueue = function() {
+        var cbs2 = pendingQueue;
+        pendingQueue = [];
+        cbs2.forEach(cb);
+      };
+      var cycle = function() {
+        return Promise.resolve().then(executeQueue);
+      };
+      cycle();
+      buffer = {
+        push: function(x) {
+          pendingQueue.push(x);
+          cycle();
+        },
+        filter: function(filter) {
+          pendingQueue = pendingQueue.filter(filter);
+          return buffer;
+        }
+      };
+    }
+  };
+  return medium;
+}
+function createSidecarMedium(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var medium = innerCreateMedium(null);
+  medium.options = __assign({ async: true, ssr: false }, options);
+  return medium;
+}
+
+// ../../node_modules/use-sidecar/dist/es2015/exports.js
+import * as React20 from "react";
+var SideCar = function(_a) {
+  var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
+  if (!sideCar) {
+    throw new Error("Sidecar: please provide `sideCar` property to import the right car");
+  }
+  var Target = sideCar.read();
+  if (!Target) {
+    throw new Error("Sidecar medium not found");
+  }
+  return React20.createElement(Target, __assign({}, rest));
+};
+SideCar.isSideCarExport = true;
+function exportSidecar(medium, exported) {
+  medium.useMedium(exported);
+  return SideCar;
+}
+
+// ../../node_modules/react-remove-scroll/dist/es2015/medium.js
+var effectCar = createSidecarMedium();
+
+// ../../node_modules/react-remove-scroll/dist/es2015/UI.js
+var nothing = function() {
+  return;
+};
+var RemoveScroll = React21.forwardRef(function(props, parentRef) {
+  var ref = React21.useRef(null);
+  var _a = React21.useState({
+    onScrollCapture: nothing,
+    onWheelCapture: nothing,
+    onTouchMoveCapture: nothing
+  }), callbacks = _a[0], setCallbacks = _a[1];
+  var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? "div" : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
+  var SideCar2 = sideCar;
+  var containerRef = useMergeRefs([ref, parentRef]);
+  var containerProps = __assign(__assign({}, rest), callbacks);
+  return React21.createElement(
+    React21.Fragment,
+    null,
+    enabled && React21.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
+    forwardProps ? React21.cloneElement(React21.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React21.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
+  );
+});
+RemoveScroll.defaultProps = {
+  enabled: true,
+  removeScrollBar: true,
+  inert: false
+};
+RemoveScroll.classNames = {
+  fullWidth: fullWidthClassName,
+  zeroRight: zeroRightClassName
+};
+
+// ../../node_modules/react-remove-scroll/dist/es2015/SideEffect.js
+import * as React26 from "react";
+
+// ../../node_modules/react-remove-scroll-bar/dist/es2015/component.js
+import * as React25 from "react";
+
+// ../../node_modules/react-style-singleton/dist/es2015/hook.js
+import * as React24 from "react";
+
+// ../../node_modules/get-nonce/dist/es2015/index.js
+var currentNonce;
+var getNonce = function() {
+  if (currentNonce) {
+    return currentNonce;
+  }
+  if (typeof __webpack_nonce__ !== "undefined") {
+    return __webpack_nonce__;
+  }
+  return void 0;
+};
+
+// ../../node_modules/react-style-singleton/dist/es2015/singleton.js
+function makeStyleTag() {
+  if (!document)
+    return null;
+  var tag = document.createElement("style");
+  tag.type = "text/css";
+  var nonce = getNonce();
+  if (nonce) {
+    tag.setAttribute("nonce", nonce);
+  }
+  return tag;
+}
+function injectStyles(tag, css) {
+  if (tag.styleSheet) {
+    tag.styleSheet.cssText = css;
+  } else {
+    tag.appendChild(document.createTextNode(css));
+  }
+}
+function insertStyleTag(tag) {
+  var head = document.head || document.getElementsByTagName("head")[0];
+  head.appendChild(tag);
+}
+var stylesheetSingleton = function() {
+  var counter = 0;
+  var stylesheet = null;
+  return {
+    add: function(style2) {
+      if (counter == 0) {
+        if (stylesheet = makeStyleTag()) {
+          injectStyles(stylesheet, style2);
+          insertStyleTag(stylesheet);
+        }
+      }
+      counter++;
+    },
+    remove: function() {
+      counter--;
+      if (!counter && stylesheet) {
+        stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
+        stylesheet = null;
+      }
+    }
+  };
+};
+
+// ../../node_modules/react-style-singleton/dist/es2015/hook.js
+var styleHookSingleton = function() {
+  var sheet = stylesheetSingleton();
+  return function(styles, isDynamic) {
+    React24.useEffect(function() {
+      sheet.add(styles);
+      return function() {
+        sheet.remove();
+      };
+    }, [styles && isDynamic]);
+  };
+};
+
+// ../../node_modules/react-style-singleton/dist/es2015/component.js
+var styleSingleton = function() {
+  var useStyle = styleHookSingleton();
+  var Sheet = function(_a) {
+    var styles = _a.styles, dynamic = _a.dynamic;
+    useStyle(styles, dynamic);
+    return null;
+  };
+  return Sheet;
+};
+
+// ../../node_modules/react-remove-scroll-bar/dist/es2015/utils.js
+var zeroGap = {
+  left: 0,
+  top: 0,
+  right: 0,
+  gap: 0
+};
+var parse = function(x) {
+  return parseInt(x || "", 10) || 0;
+};
+var getOffset = function(gapMode) {
+  var cs = window.getComputedStyle(document.body);
+  var left = cs[gapMode === "padding" ? "paddingLeft" : "marginLeft"];
+  var top = cs[gapMode === "padding" ? "paddingTop" : "marginTop"];
+  var right = cs[gapMode === "padding" ? "paddingRight" : "marginRight"];
+  return [parse(left), parse(top), parse(right)];
+};
+var getGapWidth = function(gapMode) {
+  if (gapMode === void 0) {
+    gapMode = "margin";
+  }
+  if (typeof window === "undefined") {
+    return zeroGap;
+  }
+  var offsets = getOffset(gapMode);
+  var documentWidth = document.documentElement.clientWidth;
+  var windowWidth = window.innerWidth;
+  return {
+    left: offsets[0],
+    top: offsets[1],
+    right: offsets[2],
+    gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0])
+  };
+};
+
+// ../../node_modules/react-remove-scroll-bar/dist/es2015/component.js
+var Style = styleSingleton();
+var lockAttribute = "data-scroll-locked";
+var getStyles = function(_a, allowRelative, gapMode, important) {
+  var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap;
+  if (gapMode === void 0) {
+    gapMode = "margin";
+  }
+  return "\n  .".concat(noScrollbarsClassName, " {\n   overflow: hidden ").concat(important, ";\n   padding-right: ").concat(gap, "px ").concat(important, ";\n  }\n  body[").concat(lockAttribute, "] {\n    overflow: hidden ").concat(important, ";\n    overscroll-behavior: contain;\n    ").concat([
+    allowRelative && "position: relative ".concat(important, ";"),
+    gapMode === "margin" && "\n    padding-left: ".concat(left, "px;\n    padding-top: ").concat(top, "px;\n    padding-right: ").concat(right, "px;\n    margin-left:0;\n    margin-top:0;\n    margin-right: ").concat(gap, "px ").concat(important, ";\n    "),
+    gapMode === "padding" && "padding-right: ".concat(gap, "px ").concat(important, ";")
+  ].filter(Boolean).join(""), "\n  }\n  \n  .").concat(zeroRightClassName, " {\n    right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(fullWidthClassName, " {\n    margin-right: ").concat(gap, "px ").concat(important, ";\n  }\n  \n  .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n    right: 0 ").concat(important, ";\n  }\n  \n  .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n    margin-right: 0 ").concat(important, ";\n  }\n  \n  body[").concat(lockAttribute, "] {\n    ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n  }\n");
+};
+var getCurrentUseCounter = function() {
+  var counter = parseInt(document.body.getAttribute(lockAttribute) || "0", 10);
+  return isFinite(counter) ? counter : 0;
+};
+var useLockAttribute = function() {
+  React25.useEffect(function() {
+    document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
+    return function() {
+      var newCounter = getCurrentUseCounter() - 1;
+      if (newCounter <= 0) {
+        document.body.removeAttribute(lockAttribute);
+      } else {
+        document.body.setAttribute(lockAttribute, newCounter.toString());
+      }
+    };
+  }, []);
+};
+var RemoveScrollBar = function(_a) {
+  var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
+  useLockAttribute();
+  var gap = React25.useMemo(function() {
+    return getGapWidth(gapMode);
+  }, [gapMode]);
+  return React25.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+};
+
+// ../../node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
+var passiveSupported = false;
+if (typeof window !== "undefined") {
+  try {
+    options = Object.defineProperty({}, "passive", {
+      get: function() {
+        passiveSupported = true;
+        return true;
+      }
+    });
+    window.addEventListener("test", options, options);
+    window.removeEventListener("test", options, options);
+  } catch (err) {
+    passiveSupported = false;
+  }
+}
+var options;
+var nonPassive = passiveSupported ? { passive: false } : false;
+
+// ../../node_modules/react-remove-scroll/dist/es2015/handleScroll.js
+var alwaysContainsScroll = function(node) {
+  return node.tagName === "TEXTAREA";
+};
+var elementCanBeScrolled = function(node, overflow) {
+  if (!(node instanceof Element)) {
+    return false;
+  }
+  var styles = window.getComputedStyle(node);
+  return (
+    // not-not-scrollable
+    styles[overflow] !== "hidden" && // contains scroll inside self
+    !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === "visible")
+  );
+};
+var elementCouldBeVScrolled = function(node) {
+  return elementCanBeScrolled(node, "overflowY");
+};
+var elementCouldBeHScrolled = function(node) {
+  return elementCanBeScrolled(node, "overflowX");
+};
+var locationCouldBeScrolled = function(axis, node) {
+  var ownerDocument = node.ownerDocument;
+  var current = node;
+  do {
+    if (typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot) {
+      current = current.host;
+    }
+    var isScrollable = elementCouldBeScrolled(axis, current);
+    if (isScrollable) {
+      var _a = getScrollVariables(axis, current), scrollHeight = _a[1], clientHeight = _a[2];
+      if (scrollHeight > clientHeight) {
+        return true;
+      }
+    }
+    current = current.parentNode;
+  } while (current && current !== ownerDocument.body);
+  return false;
+};
+var getVScrollVariables = function(_a) {
+  var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+  return [
+    scrollTop,
+    scrollHeight,
+    clientHeight
+  ];
+};
+var getHScrollVariables = function(_a) {
+  var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+  return [
+    scrollLeft,
+    scrollWidth,
+    clientWidth
+  ];
+};
+var elementCouldBeScrolled = function(axis, node) {
+  return axis === "v" ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node);
+};
+var getScrollVariables = function(axis, node) {
+  return axis === "v" ? getVScrollVariables(node) : getHScrollVariables(node);
+};
+var getDirectionFactor = function(axis, direction) {
+  return axis === "h" && direction === "rtl" ? -1 : 1;
+};
+var handleScroll = function(axis, endTarget, event, sourceDelta, noOverscroll) {
+  var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction);
+  var delta = directionFactor * sourceDelta;
+  var target = event.target;
+  var targetInLock = endTarget.contains(target);
+  var shouldCancelScroll = false;
+  var isDeltaPositive = delta > 0;
+  var availableScroll = 0;
+  var availableScrollTop = 0;
+  do {
+    if (!target) {
+      break;
+    }
+    var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2];
+    var elementScroll = scroll_1 - capacity - directionFactor * position;
+    if (position || elementScroll) {
+      if (elementCouldBeScrolled(axis, target)) {
+        availableScroll += elementScroll;
+        availableScrollTop += position;
+      }
+    }
+    var parent_1 = target.parentNode;
+    target = parent_1 && parent_1.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? parent_1.host : parent_1;
+  } while (
+    // portaled content
+    !targetInLock && target !== document.body || // self content
+    targetInLock && (endTarget.contains(target) || endTarget === target)
+  );
+  if (isDeltaPositive && (noOverscroll && Math.abs(availableScroll) < 1 || !noOverscroll && delta > availableScroll)) {
+    shouldCancelScroll = true;
+  } else if (!isDeltaPositive && (noOverscroll && Math.abs(availableScrollTop) < 1 || !noOverscroll && -delta > availableScrollTop)) {
+    shouldCancelScroll = true;
+  }
+  return shouldCancelScroll;
+};
+
+// ../../node_modules/react-remove-scroll/dist/es2015/SideEffect.js
+var getTouchXY = function(event) {
+  return "changedTouches" in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
+};
+var getDeltaXY = function(event) {
+  return [event.deltaX, event.deltaY];
+};
+var extractRef = function(ref) {
+  return ref && "current" in ref ? ref.current : ref;
+};
+var deltaCompare = function(x, y) {
+  return x[0] === y[0] && x[1] === y[1];
+};
+var generateStyle = function(id) {
+  return "\n  .block-interactivity-".concat(id, " {pointer-events: none;}\n  .allow-interactivity-").concat(id, " {pointer-events: all;}\n");
+};
+var idCounter = 0;
+var lockStack = [];
+function RemoveScrollSideCar(props) {
+  var shouldPreventQueue = React26.useRef([]);
+  var touchStartRef = React26.useRef([0, 0]);
+  var activeAxis = React26.useRef();
+  var id = React26.useState(idCounter++)[0];
+  var Style2 = React26.useState(styleSingleton)[0];
+  var lastProps = React26.useRef(props);
+  React26.useEffect(function() {
+    lastProps.current = props;
+  }, [props]);
+  React26.useEffect(function() {
+    if (props.inert) {
+      document.body.classList.add("block-interactivity-".concat(id));
+      var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
+      allow_1.forEach(function(el) {
+        return el.classList.add("allow-interactivity-".concat(id));
+      });
+      return function() {
+        document.body.classList.remove("block-interactivity-".concat(id));
+        allow_1.forEach(function(el) {
+          return el.classList.remove("allow-interactivity-".concat(id));
+        });
+      };
+    }
+    return;
+  }, [props.inert, props.lockRef.current, props.shards]);
+  var shouldCancelEvent = React26.useCallback(function(event, parent) {
+    if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
+      return !lastProps.current.allowPinchZoom;
+    }
+    var touch = getTouchXY(event);
+    var touchStart = touchStartRef.current;
+    var deltaX = "deltaX" in event ? event.deltaX : touchStart[0] - touch[0];
+    var deltaY = "deltaY" in event ? event.deltaY : touchStart[1] - touch[1];
+    var currentAxis;
+    var target = event.target;
+    var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? "h" : "v";
+    if ("touches" in event && moveDirection === "h" && target.type === "range") {
+      return false;
+    }
+    var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
+    if (!canBeScrolledInMainDirection) {
+      return true;
+    }
+    if (canBeScrolledInMainDirection) {
+      currentAxis = moveDirection;
+    } else {
+      currentAxis = moveDirection === "v" ? "h" : "v";
+      canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
+    }
+    if (!canBeScrolledInMainDirection) {
+      return false;
+    }
+    if (!activeAxis.current && "changedTouches" in event && (deltaX || deltaY)) {
+      activeAxis.current = currentAxis;
+    }
+    if (!currentAxis) {
+      return true;
+    }
+    var cancelingAxis = activeAxis.current || currentAxis;
+    return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
+  }, []);
+  var shouldPrevent = React26.useCallback(function(_event) {
+    var event = _event;
+    if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
+      return;
+    }
+    var delta = "deltaY" in event ? getDeltaXY(event) : getTouchXY(event);
+    var sourceEvent = shouldPreventQueue.current.filter(function(e) {
+      return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta);
+    })[0];
+    if (sourceEvent && sourceEvent.should) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      return;
+    }
+    if (!sourceEvent) {
+      var shardNodes = (lastProps.current.shards || []).map(extractRef).filter(Boolean).filter(function(node) {
+        return node.contains(event.target);
+      });
+      var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
+      if (shouldStop) {
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+      }
+    }
+  }, []);
+  var shouldCancel = React26.useCallback(function(name, delta, target, should) {
+    var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
+    shouldPreventQueue.current.push(event);
+    setTimeout(function() {
+      shouldPreventQueue.current = shouldPreventQueue.current.filter(function(e) {
+        return e !== event;
+      });
+    }, 1);
+  }, []);
+  var scrollTouchStart = React26.useCallback(function(event) {
+    touchStartRef.current = getTouchXY(event);
+    activeAxis.current = void 0;
+  }, []);
+  var scrollWheel = React26.useCallback(function(event) {
+    shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
+  }, []);
+  var scrollTouchMove = React26.useCallback(function(event) {
+    shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
+  }, []);
+  React26.useEffect(function() {
+    lockStack.push(Style2);
+    props.setCallbacks({
+      onScrollCapture: scrollWheel,
+      onWheelCapture: scrollWheel,
+      onTouchMoveCapture: scrollTouchMove
+    });
+    document.addEventListener("wheel", shouldPrevent, nonPassive);
+    document.addEventListener("touchmove", shouldPrevent, nonPassive);
+    document.addEventListener("touchstart", scrollTouchStart, nonPassive);
+    return function() {
+      lockStack = lockStack.filter(function(inst) {
+        return inst !== Style2;
+      });
+      document.removeEventListener("wheel", shouldPrevent, nonPassive);
+      document.removeEventListener("touchmove", shouldPrevent, nonPassive);
+      document.removeEventListener("touchstart", scrollTouchStart, nonPassive);
+    };
+  }, []);
+  var removeScrollBar = props.removeScrollBar, inert = props.inert;
+  return React26.createElement(
+    React26.Fragment,
+    null,
+    inert ? React26.createElement(Style2, { styles: generateStyle(id) }) : null,
+    removeScrollBar ? React26.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
+  );
+}
+function getOutermostShadowParent(node) {
+  var shadowParent = null;
+  while (node !== null) {
+    if (node instanceof ShadowRoot) {
+      shadowParent = node.host;
+      node = node.host;
+    }
+    node = node.parentNode;
+  }
+  return shadowParent;
+}
+
+// ../../node_modules/react-remove-scroll/dist/es2015/sidecar.js
+var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
+
+// ../../node_modules/react-remove-scroll/dist/es2015/Combination.js
+var ReactRemoveScroll = React27.forwardRef(function(props, ref) {
+  return React27.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+});
+ReactRemoveScroll.classNames = RemoveScroll.classNames;
+var Combination_default = ReactRemoveScroll;
+
+// ../../node_modules/aria-hidden/dist/es2015/index.js
+var getDefaultParent = function(originalTarget) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
+  return sampleTarget.ownerDocument.body;
+};
+var counterMap = /* @__PURE__ */ new WeakMap();
+var uncontrolledNodes = /* @__PURE__ */ new WeakMap();
+var markerMap = {};
+var lockCount = 0;
+var unwrapHost = function(node) {
+  return node && (node.host || unwrapHost(node.parentNode));
+};
+var correctTargets = function(parent, targets) {
+  return targets.map(function(target) {
+    if (parent.contains(target)) {
+      return target;
+    }
+    var correctedTarget = unwrapHost(target);
+    if (correctedTarget && parent.contains(correctedTarget)) {
+      return correctedTarget;
+    }
+    console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing");
+    return null;
+  }).filter(function(x) {
+    return Boolean(x);
+  });
+};
+var applyAttributeToOthers = function(originalTarget, parentNode, markerName, controlAttribute) {
+  var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
+  if (!markerMap[markerName]) {
+    markerMap[markerName] = /* @__PURE__ */ new WeakMap();
+  }
+  var markerCounter = markerMap[markerName];
+  var hiddenNodes = [];
+  var elementsToKeep = /* @__PURE__ */ new Set();
+  var elementsToStop = new Set(targets);
+  var keep = function(el) {
+    if (!el || elementsToKeep.has(el)) {
+      return;
+    }
+    elementsToKeep.add(el);
+    keep(el.parentNode);
+  };
+  targets.forEach(keep);
+  var deep = function(parent) {
+    if (!parent || elementsToStop.has(parent)) {
+      return;
+    }
+    Array.prototype.forEach.call(parent.children, function(node) {
+      if (elementsToKeep.has(node)) {
+        deep(node);
+      } else {
+        try {
+          var attr = node.getAttribute(controlAttribute);
+          var alreadyHidden = attr !== null && attr !== "false";
+          var counterValue = (counterMap.get(node) || 0) + 1;
+          var markerValue = (markerCounter.get(node) || 0) + 1;
+          counterMap.set(node, counterValue);
+          markerCounter.set(node, markerValue);
+          hiddenNodes.push(node);
+          if (counterValue === 1 && alreadyHidden) {
+            uncontrolledNodes.set(node, true);
+          }
+          if (markerValue === 1) {
+            node.setAttribute(markerName, "true");
+          }
+          if (!alreadyHidden) {
+            node.setAttribute(controlAttribute, "true");
+          }
+        } catch (e) {
+          console.error("aria-hidden: cannot operate on ", node, e);
+        }
+      }
+    });
+  };
+  deep(parentNode);
+  elementsToKeep.clear();
+  lockCount++;
+  return function() {
+    hiddenNodes.forEach(function(node) {
+      var counterValue = counterMap.get(node) - 1;
+      var markerValue = markerCounter.get(node) - 1;
+      counterMap.set(node, counterValue);
+      markerCounter.set(node, markerValue);
+      if (!counterValue) {
+        if (!uncontrolledNodes.has(node)) {
+          node.removeAttribute(controlAttribute);
+        }
+        uncontrolledNodes.delete(node);
+      }
+      if (!markerValue) {
+        node.removeAttribute(markerName);
+      }
+    });
+    lockCount--;
+    if (!lockCount) {
+      counterMap = /* @__PURE__ */ new WeakMap();
+      counterMap = /* @__PURE__ */ new WeakMap();
+      uncontrolledNodes = /* @__PURE__ */ new WeakMap();
+      markerMap = {};
+    }
+  };
+};
+var hideOthers = function(originalTarget, parentNode, markerName) {
+  if (markerName === void 0) {
+    markerName = "data-aria-hidden";
+  }
+  var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
+  var activeParentNode = parentNode || getDefaultParent(originalTarget);
+  if (!activeParentNode) {
+    return function() {
+      return null;
+    };
+  }
+  targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll("[aria-live], script")));
+  return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
+};
+
+// ../../node_modules/@radix-ui/react-dialog/dist/index.mjs
+import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var DIALOG_NAME = "Dialog";
+var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
+var Dialog = (props) => {
+  const {
+    __scopeDialog,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = true
+  } = props;
+  const triggerRef = React28.useRef(null);
+  const contentRef = React28.useRef(null);
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+    caller: DIALOG_NAME
+  });
+  return /* @__PURE__ */ jsx19(
+    DialogProvider,
+    {
+      scope: __scopeDialog,
+      triggerRef,
+      contentRef,
+      contentId: useId2(),
+      titleId: useId2(),
+      descriptionId: useId2(),
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React28.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      modal,
+      children
+    }
+  );
+};
+Dialog.displayName = DIALOG_NAME;
+var TRIGGER_NAME2 = "DialogTrigger";
+var DialogTrigger = React28.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME2, __scopeDialog);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ jsx19(
+      Primitive.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": context.open,
+        "aria-controls": context.contentId,
+        "data-state": getState2(context.open),
+        ...triggerProps,
+        ref: composedTriggerRef,
+        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+      }
+    );
+  }
+);
+DialogTrigger.displayName = TRIGGER_NAME2;
+var PORTAL_NAME2 = "DialogPortal";
+var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME2, {
+  forceMount: void 0
+});
+var DialogPortal = (props) => {
+  const { __scopeDialog, forceMount, children, container } = props;
+  const context = useDialogContext(PORTAL_NAME2, __scopeDialog);
+  return /* @__PURE__ */ jsx19(PortalProvider, { scope: __scopeDialog, forceMount, children: React28.Children.map(children, (child) => /* @__PURE__ */ jsx19(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx19(Portal, { asChild: true, container, children: child }) })) });
+};
+DialogPortal.displayName = PORTAL_NAME2;
+var OVERLAY_NAME = "DialogOverlay";
+var DialogOverlay = React28.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
+    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+    const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
+    return context.modal ? /* @__PURE__ */ jsx19(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx19(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
+  }
+);
+DialogOverlay.displayName = OVERLAY_NAME;
+var Slot2 = createSlot("DialogOverlay.RemoveScroll");
+var DialogOverlayImpl = React28.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...overlayProps } = props;
+    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+    return (
+      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+      // ie. when `Overlay` and `Content` are siblings
+      /* @__PURE__ */ jsx19(Combination_default, { as: Slot2, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx19(
+        Primitive.div,
+        {
+          "data-state": getState2(context.open),
+          ...overlayProps,
+          ref: forwardedRef,
+          style: { pointerEvents: "auto", ...overlayProps.style }
+        }
+      ) })
+    );
+  }
+);
+var CONTENT_NAME = "DialogContent";
+var DialogContent = React28.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
+    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
+    return /* @__PURE__ */ jsx19(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx19(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx19(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
+  }
+);
+DialogContent.displayName = CONTENT_NAME;
+var DialogContentModal = React28.forwardRef(
+  (props, forwardedRef) => {
+    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
+    const contentRef = React28.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+    React28.useEffect(() => {
+      const content = contentRef.current;
+      if (content) return hideOthers(content);
+    }, []);
+    return /* @__PURE__ */ jsx19(
+      DialogContentImpl,
+      {
+        ...props,
+        ref: composedRefs,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          event.preventDefault();
+          context.triggerRef.current?.focus();
+        }),
+        onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
+          const originalEvent = event.detail.originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (isRightClick) event.preventDefault();
+        }),
+        onFocusOutside: composeEventHandlers(
+          props.onFocusOutside,
+          (event) => event.preventDefault()
+        )
+      }
+    );
+  }
+);
+var DialogContentNonModal = React28.forwardRef(
+  (props, forwardedRef) => {
+    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
+    const hasInteractedOutsideRef = React28.useRef(false);
+    const hasPointerDownOutsideRef = React28.useRef(false);
+    return /* @__PURE__ */ jsx19(
+      DialogContentImpl,
+      {
+        ...props,
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onCloseAutoFocus: (event) => {
+          props.onCloseAutoFocus?.(event);
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+            event.preventDefault();
+          }
+          hasInteractedOutsideRef.current = false;
+          hasPointerDownOutsideRef.current = false;
+        },
+        onInteractOutside: (event) => {
+          props.onInteractOutside?.(event);
+          if (!event.defaultPrevented) {
+            hasInteractedOutsideRef.current = true;
+            if (event.detail.originalEvent.type === "pointerdown") {
+              hasPointerDownOutsideRef.current = true;
+            }
+          }
+          const target = event.target;
+          const targetIsTrigger = context.triggerRef.current?.contains(target);
+          if (targetIsTrigger) event.preventDefault();
+          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+            event.preventDefault();
+          }
+        }
+      }
+    );
+  }
+);
+var DialogContentImpl = React28.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
+    const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+    const contentRef = React28.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    useFocusGuards();
+    return /* @__PURE__ */ jsxs8(Fragment8, { children: [
+      /* @__PURE__ */ jsx19(
+        FocusScope,
+        {
+          asChild: true,
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ jsx19(
+            DismissableLayer,
+            {
+              role: "dialog",
+              id: context.contentId,
+              "aria-describedby": context.descriptionId,
+              "aria-labelledby": context.titleId,
+              "data-state": getState2(context.open),
+              ...contentProps,
+              ref: composedRefs,
+              onDismiss: () => context.onOpenChange(false)
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs8(Fragment8, { children: [
+        /* @__PURE__ */ jsx19(TitleWarning, { titleId: context.titleId }),
+        /* @__PURE__ */ jsx19(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
+      ] })
+    ] });
+  }
+);
+var TITLE_NAME = "DialogTitle";
+var DialogTitle = React28.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx19(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
+  }
+);
+DialogTitle.displayName = TITLE_NAME;
+var DESCRIPTION_NAME = "DialogDescription";
+var DialogDescription = React28.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx19(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
+  }
+);
+DialogDescription.displayName = DESCRIPTION_NAME;
+var CLOSE_NAME = "DialogClose";
+var DialogClose = React28.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...closeProps } = props;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx19(
+      Primitive.button,
+      {
+        type: "button",
+        ...closeProps,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
+      }
+    );
+  }
+);
+DialogClose.displayName = CLOSE_NAME;
+function getState2(open) {
+  return open ? "open" : "closed";
+}
+var TITLE_WARNING_NAME = "DialogTitleWarning";
+var [WarningProvider, useWarningContext] = createContext22(TITLE_WARNING_NAME, {
+  contentName: CONTENT_NAME,
+  titleName: TITLE_NAME,
+  docsSlug: "dialog"
+});
+var TitleWarning = ({ titleId }) => {
+  const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
+  const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
+  React28.useEffect(() => {
+    if (titleId) {
+      const hasTitle = document.getElementById(titleId);
+      if (!hasTitle) console.error(MESSAGE);
+    }
+  }, [MESSAGE, titleId]);
+  return null;
+};
+var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
+var DescriptionWarning = ({ contentRef, descriptionId }) => {
+  const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
+  const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
+  React28.useEffect(() => {
+    const describedById = contentRef.current?.getAttribute("aria-describedby");
+    if (descriptionId && describedById) {
+      const hasDescription = document.getElementById(descriptionId);
+      if (!hasDescription) console.warn(MESSAGE);
+    }
+  }, [MESSAGE, contentRef, descriptionId]);
+  return null;
+};
+var Root2 = Dialog;
+var Portal2 = DialogPortal;
+var Overlay = DialogOverlay;
+var Content = DialogContent;
+var Title = DialogTitle;
+var Close = DialogClose;
+
+// ../ui/src/components/dialog.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function Dialog2({ ...props }) {
+  return /* @__PURE__ */ jsx20(Root2, { "data-slot": "dialog", ...props });
+}
+function DialogPortal2({ ...props }) {
+  return /* @__PURE__ */ jsx20(Portal2, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay2({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent2({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(DialogPortal2, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx20(DialogOverlay2, {}),
+    /* @__PURE__ */ jsxs9(
+      Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs9(
+            Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx20(X, {}),
+                /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogTitle2({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+
+// ../ui/src/components/input.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+import * as React29 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var NAME2 = "Separator";
+var DEFAULT_ORIENTATION = "horizontal";
+var ORIENTATIONS = ["horizontal", "vertical"];
+var Separator = React29.forwardRef((props, forwardedRef) => {
+  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
+  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
+  const ariaOrientation = orientation === "vertical" ? orientation : void 0;
+  const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
+  return /* @__PURE__ */ jsx22(
+    Primitive.div,
+    {
+      "data-orientation": orientation,
+      ...semanticProps,
+      ...domProps,
+      ref: forwardedRef
+    }
+  );
+});
+Separator.displayName = NAME2;
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var Root3 = Separator;
+
+// ../ui/src/components/separator.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx23(
+    Root3,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/hooks/useBaseERC20Token.ts
+import * as React30 from "react";
+import { erc20Abi, formatUnits, getAddress } from "viem";
+import { useAccount, usePublicClient } from "wagmi";
+
+// src/config/baseTokens.ts
+var BASE_TOKENS = [
+  {
+    address: "0x2b11834ed1feaed4b4b3a86a6f571315e25a884d",
+    chainId: 8453,
+    decimals: 18,
+    symbol: "MOCA",
+    name: "Moca",
+    logoURI: "https://assets.coingecko.com/coins/images/30046/standard/moca.png"
+  },
+  {
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bDA02913",
+    chainId: 8453,
+    decimals: 6,
+    symbol: "USDC",
+    name: "USD Coin",
+    logoURI: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png"
+  },
+  {
+    address: "0x4200000000000000000000000000000000000006",
+    chainId: 8453,
+    decimals: 18,
+    symbol: "WETH",
+    name: "Wrapped Ether",
+    logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png"
+  },
+  {
+    address: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
+    chainId: 8453,
+    decimals: 6,
+    symbol: "USDT",
+    name: "Tether USD",
+    logoURI: "https://cryptologos.cc/logos/tether-usdt-logo.png"
+  }
+];
+
+// src/hooks/useBaseERC20Token.ts
+function useBaseERC20Token() {
+  const { address } = useAccount();
+  const baseClient = usePublicClient({ chainId: 8453 });
+  const defaultClient = usePublicClient();
+  const [rows, setRows] = React30.useState([]);
+  const [isLoading, setLoading] = React30.useState(false);
+  const [error, setError] = React30.useState(null);
+  React30.useEffect(() => {
+    let cancelled = false;
+    async function run() {
+      const client = baseClient ?? defaultClient;
+      if (!address || !client) {
+        setRows([]);
+        return;
+      }
+      setLoading(true);
+      try {
+        const normalizedTokens = [];
+        for (const t of BASE_TOKENS) {
+          try {
+            const addr = getAddress(t.address);
+            normalizedTokens.push({ ...t, address: addr });
+          } catch {
+          }
+        }
+        const res = await client.multicall({
+          allowFailure: true,
+          contracts: normalizedTokens.map((t) => ({
+            address: t.address,
+            abi: erc20Abi,
+            functionName: "balanceOf",
+            args: [address]
+          }))
+        });
+        const acc = [];
+        for (let idx = 0; idx < res.length; idx++) {
+          const r2 = res[idx];
+          const t = normalizedTokens[idx];
+          if (r2.status === "success") {
+            const raw = r2.result;
+            if (raw > 0n) acc.push({ ...t, raw, formatted: formatUnits(raw, t.decimals) });
+          }
+        }
+        if (!cancelled) setRows(acc);
+      } catch (e) {
+        if (!cancelled) {
+          const msg = e instanceof Error ? e.message : "Multicall failed";
+          setError(baseClient ? msg : "Base client unavailable. Ensure Base (8453) is configured in Wagmi.");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [address, baseClient, defaultClient]);
+  return { isLoading, error: error ?? null, erc20Balances: rows };
+}
+
+// src/hooks/useBaseNativeToken.ts
+import { useAccount as useAccount2, useBalance } from "wagmi";
+function useBaseNativeToken() {
+  const { address } = useAccount2();
+  const { data, isLoading, error } = useBalance({
+    address,
+    chainId: 8453,
+    // Base
+    query: { enabled: !!address }
+  });
+  const nativeBalance = data ? { ...data, logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png" } : void 0;
+  return {
+    isLoadingNative: isLoading,
+    nativeError: error?.message ?? null,
+    nativeBalance
+  };
+}
+
+// src/modals/CryptoSelectModal.tsx
+import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+var CryptoSelectModal = NiceModal.create(() => {
+  const modal = useModal();
+  const { isLoading, error, erc20Balances } = useBaseERC20Token();
+  const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
+  const { setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const [search, setSearch] = useState16("");
+  const handleSelect = (coin) => {
+    modal.remove();
+    setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
+  };
+  return /* @__PURE__ */ jsx24(Dialog2, { open: modal.visible, onOpenChange: modal.remove, children: /* @__PURE__ */ jsxs10(DialogContent2, { showCloseButton: false, className: "gap-0 p-0", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsx24("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx24("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx24("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
+        /* @__PURE__ */ jsx24(DialogTitle2, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
+        /* @__PURE__ */ jsx24("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx24("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx24(
+          "path",
+          {
+            fill: "#000",
+            d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsx24(Input, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+    ] }),
+    /* @__PURE__ */ jsx24(Separator2, { className: "hidden md:block" }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
+      /* @__PURE__ */ jsx24("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
+      (error || nativeError) && /* @__PURE__ */ jsx24("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex w-full flex-col gap-1", children: [
+        isLoadingNative && /* @__PURE__ */ jsx24("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+        nativeBalance && /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
+            onClick: () => handleSelect(nativeBalance),
+            children: [
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+                nativeBalance.logoURI && /* @__PURE__ */ jsx24(
+                  "img",
+                  {
+                    className: "h-8 w-8 shrink-0",
+                    src: nativeBalance.logoURI,
+                    alt: `${nativeBalance.symbol} logo`
+                  }
+                ),
+                /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+              ] }),
+              /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+            ]
+          },
+          nativeBalance.symbol
+        ),
+        isLoading && /* @__PURE__ */ jsxs10(Fragment9, { children: [
+          /* @__PURE__ */ jsx24("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          /* @__PURE__ */ jsx24("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          /* @__PURE__ */ jsx24("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+        ] }),
+        erc20Balances.map((coin) => {
+          const Icon2 = getSymbolLogo(coin.symbol);
+          return /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100",
+              onClick: () => handleSelect(coin),
+              children: [
+                /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+                  Boolean(Icon2) && Icon2,
+                  /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium", children: coin.symbol })
+                ] }),
+                /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium", children: coin.formatted })
+              ]
+            },
+            coin.symbol
+          );
+        })
+      ] })
+    ] })
+  ] }) });
+});
+CryptoSelectModal.displayName = "CryptoSelectModal";
+
+// src/components/Crypto/ConnectButton.tsx
+import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
+import { Fragment as Fragment10, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var ConnectButton = () => {
+  return /* @__PURE__ */ jsx25(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+    if (!mounted) return null;
+    return /* @__PURE__ */ jsx25(Fragment10, { children: (() => {
+      if (!mounted || !account || !chain) {
+        return /* @__PURE__ */ jsx25(
+          "button",
+          {
+            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium",
+            onClick: openConnectModal,
+            children: "Connect a Wallet"
+          }
+        );
+      }
+      if (chain.unsupported) {
+        return /* @__PURE__ */ jsx25(
+          "button",
+          {
+            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
+            onClick: openChainModal,
+            children: "Wrong network"
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs11(
+        "button",
+        {
+          className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium",
+          onClick: openAccountModal,
+          children: [
+            chain.hasIcon && /* @__PURE__ */ jsx25("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx25("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+            account.displayName
+          ]
+        }
+      );
+    })() });
+  } });
+};
+
+// src/components/Crypto/Logos.tsx
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var Logos = () => {
+  return /* @__PURE__ */ jsxs12("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx26("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
+    /* @__PURE__ */ jsx26("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
+    /* @__PURE__ */ jsx26("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
+    /* @__PURE__ */ jsx26("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
+  ] });
+};
+
+// src/components/Crypto/Crypto.tsx
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+var SelectCoinButton = () => {
+  const openModal = () => {
+    NiceModal2.show(CryptoSelectModal);
+  };
+  return /* @__PURE__ */ jsxs13("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx27("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ jsx27("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center justify-between px-3", children: [
+      /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx27("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
+      /* @__PURE__ */ jsx27("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx27("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+    ] })
+  ] });
+};
+var SelectedCoin = (props) => {
+  const { coin, balance, logoURI } = props;
+  const Icon2 = getSymbolLogo(coin);
+  return /* @__PURE__ */ jsxs13("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx27("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ jsx27("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx27("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
+    /* @__PURE__ */ jsxs13("div", { className: "border-primary flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+        Icon2,
+        !Icon2 && logoURI && /* @__PURE__ */ jsx27("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ jsx27("p", { className: "font-semibold", children: coin }),
+        /* @__PURE__ */ jsx27("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx27("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+      ] }),
+      /* @__PURE__ */ jsxs13("p", { className: "text-xs font-medium text-[#798B95]", children: [
+        "Wallet balance ",
+        /* @__PURE__ */ jsx27("span", { className: "text-black", children: balance })
+      ] })
+    ] })
+  ] });
+};
+var Crypto = () => {
+  const { address } = useAccount3();
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const isWalletConnected = Boolean(address);
+  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx27("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
+      /* @__PURE__ */ jsx27(ConnectButton, {})
+    ] }),
+    !isWalletConnected && /* @__PURE__ */ jsx27(Logos, {}),
+    isWalletConnected && /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-1", children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx27(
+        SelectedCoin,
+        {
+          coin: selectedPaymentMethod.method.symbol,
+          balance: selectedPaymentMethod.method.formatted,
+          logoURI: selectedPaymentMethod.method.logoURI
+        }
+      ),
+      /* @__PURE__ */ jsx27(SelectCoinButton, {})
+    ] })
+  ] });
+};
+
+// src/components/Crypto/CryptoWrapper.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var queryClient = new QueryClient();
+var config = getDefaultConfig2({
+  appName: "Spree Pay",
+  projectId: "YOUR_PROJECT_ID",
+  chains: [base],
+  ssr: true
+});
+var CryptoWrapper = () => {
+  return /* @__PURE__ */ jsx28(WagmiProvider, { config, children: /* @__PURE__ */ jsx28(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx28(RainbowKitProvider, { children: /* @__PURE__ */ jsx28(NiceModal3.Provider, { children: /* @__PURE__ */ jsx28(Crypto, {}) }) }) }) });
+};
+
+// ../../node_modules/@radix-ui/react-switch/dist/index.mjs
+import * as React31 from "react";
+
+// ../../node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive/dist/index.mjs
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+// ../../node_modules/@radix-ui/react-switch/dist/index.mjs
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+var SWITCH_NAME = "Switch";
+var [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
+var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
+var Switch = React31.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSwitch,
+      name,
+      checked: checkedProp,
+      defaultChecked,
+      required,
+      disabled,
+      value = "on",
+      onCheckedChange,
+      form,
+      ...switchProps
+    } = props;
+    const [button, setButton] = React31.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
+    const hasConsumerStoppedPropagationRef = React31.useRef(false);
+    const isFormControl = button ? form || !!button.closest("form") : true;
+    const [checked, setChecked] = useControllableState({
+      prop: checkedProp,
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+      caller: SWITCH_NAME
+    });
+    return /* @__PURE__ */ jsxs14(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
+      /* @__PURE__ */ jsx29(
+        Primitive.button,
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": checked,
+          "aria-required": required,
+          "data-state": getState3(checked),
+          "data-disabled": disabled ? "" : void 0,
+          disabled,
+          value,
+          ...switchProps,
+          ref: composedRefs,
+          onClick: composeEventHandlers2(props.onClick, (event) => {
+            setChecked((prevChecked) => !prevChecked);
+            if (isFormControl) {
+              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+          })
+        }
+      ),
+      isFormControl && /* @__PURE__ */ jsx29(
+        SwitchBubbleInput,
+        {
+          control: button,
+          bubbles: !hasConsumerStoppedPropagationRef.current,
+          name,
+          value,
+          checked,
+          required,
+          disabled,
+          form,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+Switch.displayName = SWITCH_NAME;
+var THUMB_NAME = "SwitchThumb";
+var SwitchThumb = React31.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSwitch, ...thumbProps } = props;
+    const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
+    return /* @__PURE__ */ jsx29(
+      Primitive.span,
+      {
+        "data-state": getState3(context.checked),
+        "data-disabled": context.disabled ? "" : void 0,
+        ...thumbProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+SwitchThumb.displayName = THUMB_NAME;
+var BUBBLE_INPUT_NAME2 = "SwitchBubbleInput";
+var SwitchBubbleInput = React31.forwardRef(
+  ({
+    __scopeSwitch,
+    control,
+    checked,
+    bubbles = true,
+    ...props
+  }, forwardedRef) => {
+    const ref = React31.useRef(null);
+    const composedRefs = useComposedRefs(ref, forwardedRef);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    React31.useEffect(() => {
+      const input = ref.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        setChecked.call(input, checked);
+        input.dispatchEvent(event);
+      }
+    }, [prevChecked, checked, bubbles]);
+    return /* @__PURE__ */ jsx29(
+      "input",
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME2;
+function getState3(checked) {
+  return checked ? "checked" : "unchecked";
+}
+var Root4 = Switch;
+var Thumb = SwitchThumb;
+
+// ../ui/src/components/switch.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function Switch2({ className, ...props }) {
+  return /* @__PURE__ */ jsx30(
+    Root4,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx30(
+        Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/components/PointsSwitch.tsx
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+var PointsSwitch = () => {
+  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx31(Switch2, { disabled: true, id: "points" }),
+    /* @__PURE__ */ jsxs15(Label2, { className: "items-baseline text-xl font-semibold text-black", htmlFor: "points", children: [
+      "Use Points ",
+      /* @__PURE__ */ jsx31("span", { className: "text-xs font-medium", children: "Optional" })
+    ] })
+  ] });
+};
+
+// src/components/TabButtons.tsx
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+var TabButton = ({ isActive, children, onClick }) => {
+  return /* @__PURE__ */ jsx32(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black px-2.5 py-1.5 text-sm text-black",
+        { "opacity-50": !isActive },
+        { "bg-primary/7 border-primary text-primary": isActive }
+      ),
+      children
+    }
+  );
+};
+var TabButtons = (props) => {
+  const { value, onChange } = props;
+  const handleChange = (type) => () => {
+    if (value !== type) {
+      onChange({ type, method: null });
+    }
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsxs16(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
+      /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx32(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
+        }
+      ) }),
+      /* @__PURE__ */ jsx32("p", { className: "text-sm font-medium", children: "Card" })
+    ] }),
+    /* @__PURE__ */ jsxs16(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
+      /* @__PURE__ */ jsxs16("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
+          }
+        ),
+        /* @__PURE__ */ jsx32("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+      ] }),
+      /* @__PURE__ */ jsx32("p", { className: "text-sm font-medium", children: "Crypto" })
+    ] })
+  ] });
+};
+
+// src/components/Tabs.tsx
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+var Tabs = () => {
+  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  return /* @__PURE__ */ jsxs17("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
+      /* @__PURE__ */ jsx33("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
+      /* @__PURE__ */ jsx33(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "border-b-1 border-black/7 px-7 py-6", children: [
+      selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx33(CreditCard, {}),
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx33(CryptoWrapper, {})
+    ] }),
+    /* @__PURE__ */ jsx33("div", { className: "px-7 py-6", children: /* @__PURE__ */ jsx33(PointsSwitch, {}) })
+  ] });
+};
+
+// src/fetcher/client.ts
+var cfg = { baseUrl: void 0, accessToken: void 0, tenantId: void 0 };
+var buildUrl = (key) => {
+  if (!cfg.baseUrl) throw new Error("Missing SLAPI baseUrl. Call registerApi(...) first.");
+  if (typeof key === "string") return cfg.baseUrl + key;
+  const { url, params = {} } = key;
+  const usp = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    if (v === void 0 || v === null) return;
+    usp.append(k, String(v));
+  });
+  const qs = usp.toString();
+  return cfg.baseUrl + url + (qs ? `?${qs}` : "");
+};
+var request = async (method, url, body) => {
+  const headers = {
+    Accept: "application/json"
+  };
+  if (!cfg.accessToken) throw new Error("Missing SLAPI accessToken. Call registerApi(...) first.");
+  if (!cfg.tenantId) throw new Error("Missing SLAPI tenantId. Call registerApi(...) first.");
+  headers.Authorization = `Bearer ${cfg.accessToken}`;
+  headers["X-Tenant-ID"] = cfg.tenantId;
+  let payload;
+  if (method !== "GET" && method !== "DELETE" && body !== void 0) {
+    if (typeof FormData !== "undefined" && body instanceof FormData) {
+      payload = body;
+    } else if (body instanceof Blob) {
+      payload = body;
+    } else {
+      headers["Content-Type"] = "application/json";
+      payload = JSON.stringify(body);
+    }
+  }
+  const res = await fetch(url, {
+    method,
+    headers,
+    body: payload,
+    cache: "no-store"
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(text || `Request failed: ${res.status}`);
+  }
+  const contentType = res.headers.get("content-type") || "";
+  if (!contentType.includes("application/json")) {
+    return await res.text();
+  }
+  return await res.json();
+};
+var slapiApi = {
+  get: async () => {
+    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
+  },
+  post: async () => {
+    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
+  },
+  put: async () => {
+    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
+  },
+  patch: async () => {
+    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
+  },
+  delete: async () => {
+    throw new Error("slapiApi is not configured. Call registerApi(...) first.");
+  }
+};
+var registerApi = (config2) => {
+  cfg.baseUrl = config2.baseUrl;
+  cfg.accessToken = config2.accessToken;
+  cfg.tenantId = config2.tenantId;
+  slapiApi = {
+    get: async (key) => {
+      const url = buildUrl(key);
+      return request("GET", url);
+    },
+    post: async (key, body) => {
+      const url = buildUrl(key);
+      return request("POST", url, body);
+    },
+    put: async (key, body) => {
+      const url = buildUrl(key);
+      return request("PUT", url, body);
+    },
+    patch: async (key, body) => {
+      const url = buildUrl(key);
+      return request("PATCH", url, body);
+    },
+    delete: async (key) => {
+      const url = buildUrl(key);
+      return request("DELETE", url);
     }
   };
   return (key) => slapiApi.get(key);
@@ -4552,12 +7006,12 @@ var cardPayment = async ({ card, hash }) => {
 };
 
 // src/SpreePayContent.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var SpreePayContent = (props) => {
   const { className, amount, onProcess } = props;
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { register } = useSpreePayRegister();
-  const handlePay = useCallback5(
+  const handlePay = useCallback8(
     (data) => {
       if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
         return cardPayment({ card: selectedPaymentMethod.method, hash: data.hash });
@@ -4566,18 +7020,18 @@ var SpreePayContent = (props) => {
     },
     [selectedPaymentMethod]
   );
-  useEffect5(() => {
+  useEffect17(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ jsx17("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs9("div", { className: "w-full max-w-[540px]", children: [
-    /* @__PURE__ */ jsx17(Tabs, {}),
-    /* @__PURE__ */ jsx17(CheckoutButton, { onCheckout: onProcess, amount }),
-    /* @__PURE__ */ jsx17(SpreeLegal, {})
+  return /* @__PURE__ */ jsx34("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs18("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx34(Tabs, {}),
+    /* @__PURE__ */ jsx34(CheckoutButton, { onCheckout: onProcess, amount }),
+    /* @__PURE__ */ jsx34(SpreeLegal, {})
   ] }) });
 };
 
 // src/SpreePay.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var envConfig = {
   dev: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" },
   stg: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" },
@@ -4585,7 +7039,7 @@ var envConfig = {
 };
 var SpreePay = (props) => {
   const { env } = useSpreePayEnv();
-  const slapiFetcher = useMemo5(
+  const slapiFetcher = useMemo7(
     () => registerApi({
       accessToken: env.accessToken,
       baseUrl: envConfig[env.environment].slapiUrl,
@@ -4593,7 +7047,7 @@ var SpreePay = (props) => {
     }),
     [env]
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx35(
     SWRConfig,
     {
       value: {
@@ -4602,7 +7056,7 @@ var SpreePay = (props) => {
         revalidateIfStale: false,
         revalidateOnReconnect: false
       },
-      children: /* @__PURE__ */ jsx18(SpreePayContent, { ...props })
+      children: /* @__PURE__ */ jsx35(SpreePayContent, { ...props })
     }
   );
 };
@@ -4618,6 +7072,7 @@ lucide-react/dist/esm/defaultAttributes.js:
 lucide-react/dist/esm/Icon.js:
 lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/check.js:
+lucide-react/dist/esm/icons/x.js:
 lucide-react/dist/esm/lucide-react.js:
   (**
    * @license lucide-react v0.525.0 - ISC