@cimplify/sdk 0.44.12 → 0.44.16

package/dist/testing.js

@@ -0,0 +1,213 @@
+'use strict';
+
+var chunkXL4CX75J_js = require('./chunk-XL4CX75J.js');
+require('./chunk-MBGQP6FZ.js');
+require('./chunk-CFD4J32N.js');
+require('./chunk-MNIKXG7W.js');
+
+
+
+Object.defineProperty(exports, "AddItemPayloadSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.AddItemPayloadSchema; }
+});
+Object.defineProperty(exports, "AddOnDetailsSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.AddOnDetailsSchema; }
+});
+Object.defineProperty(exports, "AuthorizationTypeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.AuthorizationTypeSchema; }
+});
+Object.defineProperty(exports, "BrandContactSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandContactSchema; }
+});
+Object.defineProperty(exports, "BrandFaqSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandFaqSchema; }
+});
+Object.defineProperty(exports, "BrandHeroSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandHeroSchema; }
+});
+Object.defineProperty(exports, "BrandNavLinkSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandNavLinkSchema; }
+});
+Object.defineProperty(exports, "BrandPolicyPageSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandPolicyPageSchema; }
+});
+Object.defineProperty(exports, "BrandPolicySectionSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandPolicySectionSchema; }
+});
+Object.defineProperty(exports, "BrandSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandSchema; }
+});
+Object.defineProperty(exports, "BrandSocialSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BrandSocialSchema; }
+});
+Object.defineProperty(exports, "BundleResolvedSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BundleResolvedSchema; }
+});
+Object.defineProperty(exports, "BundleSelectionInputSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.BundleSelectionInputSchema; }
+});
+Object.defineProperty(exports, "CartItemSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CartItemSchema; }
+});
+Object.defineProperty(exports, "CartPricingSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CartPricingSchema; }
+});
+Object.defineProperty(exports, "CartSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CartSchema; }
+});
+Object.defineProperty(exports, "CheckoutBodySchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CheckoutBodySchema; }
+});
+Object.defineProperty(exports, "CheckoutCustomerSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CheckoutCustomerSchema; }
+});
+Object.defineProperty(exports, "CheckoutResponseSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CheckoutResponseSchema; }
+});
+Object.defineProperty(exports, "ChosenPriceSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.ChosenPriceSchema; }
+});
+Object.defineProperty(exports, "CompositeResolvedSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CompositeResolvedSchema; }
+});
+Object.defineProperty(exports, "CompositeSelectionInputSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CompositeSelectionInputSchema; }
+});
+Object.defineProperty(exports, "CountryCodeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CountryCodeSchema; }
+});
+Object.defineProperty(exports, "CurrencyCodeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CurrencyCodeSchema; }
+});
+Object.defineProperty(exports, "CustomerInputValueSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.CustomerInputValueSchema; }
+});
+Object.defineProperty(exports, "DiscountDetailsSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.DiscountDetailsSchema; }
+});
+Object.defineProperty(exports, "IsoDateTimeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.IsoDateTimeSchema; }
+});
+Object.defineProperty(exports, "LineTypeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.LineTypeSchema; }
+});
+Object.defineProperty(exports, "LocaleSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.LocaleSchema; }
+});
+Object.defineProperty(exports, "MoneyLooseSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.MoneyLooseSchema; }
+});
+Object.defineProperty(exports, "MoneySchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.MoneySchema; }
+});
+Object.defineProperty(exports, "NextActionSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.NextActionSchema; }
+});
+Object.defineProperty(exports, "PhoneE164Schema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.PhoneE164Schema; }
+});
+Object.defineProperty(exports, "ProductTypeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.ProductTypeSchema; }
+});
+Object.defineProperty(exports, "SCHEMA_VERSION", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.SCHEMA_VERSION; }
+});
+Object.defineProperty(exports, "SchemaViolationError", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.SchemaViolationError; }
+});
+Object.defineProperty(exports, "SeedNameSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.SeedNameSchema; }
+});
+Object.defineProperty(exports, "ServiceStatusSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.ServiceStatusSchema; }
+});
+Object.defineProperty(exports, "TimestampSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.TimestampSchema; }
+});
+Object.defineProperty(exports, "VariantDetailsSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.VariantDetailsSchema; }
+});
+Object.defineProperty(exports, "VariantDisplayAttributeSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.VariantDisplayAttributeSchema; }
+});
+Object.defineProperty(exports, "VariantInfoSchema", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.VariantInfoSchema; }
+});
+Object.defineProperty(exports, "assertAddItemPayload", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.assertAddItemPayload; }
+});
+Object.defineProperty(exports, "assertBrand", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.assertBrand; }
+});
+Object.defineProperty(exports, "assertCart", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.assertCart; }
+});
+Object.defineProperty(exports, "assertCartItem", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.assertCartItem; }
+});
+Object.defineProperty(exports, "assertCheckoutBody", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.assertCheckoutBody; }
+});
+Object.defineProperty(exports, "assertCheckoutResponse", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.assertCheckoutResponse; }
+});
+Object.defineProperty(exports, "createTestClient", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.createTestClient; }
+});
+Object.defineProperty(exports, "fixtures", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.fixtures; }
+});
+Object.defineProperty(exports, "makeAssertion", {
+  enumerable: true,
+  get: function () { return chunkXL4CX75J_js.makeAssertion; }
+});

package/dist/testing.mjs

@@ -0,0 +1,4 @@
+export { AddItemPayloadSchema, AddOnDetailsSchema, AuthorizationTypeSchema, BrandContactSchema, BrandFaqSchema, BrandHeroSchema, BrandNavLinkSchema, BrandPolicyPageSchema, BrandPolicySectionSchema, BrandSchema, BrandSocialSchema, BundleResolvedSchema, BundleSelectionInputSchema, CartItemSchema, CartPricingSchema, CartSchema, CheckoutBodySchema, CheckoutCustomerSchema, CheckoutResponseSchema, ChosenPriceSchema, CompositeResolvedSchema, CompositeSelectionInputSchema, CountryCodeSchema, CurrencyCodeSchema, CustomerInputValueSchema, DiscountDetailsSchema, IsoDateTimeSchema, LineTypeSchema, LocaleSchema, MoneyLooseSchema, MoneySchema, NextActionSchema, PhoneE164Schema, ProductTypeSchema, SCHEMA_VERSION, SchemaViolationError, SeedNameSchema, ServiceStatusSchema, TimestampSchema, VariantDetailsSchema, VariantDisplayAttributeSchema, VariantInfoSchema, assertAddItemPayload, assertBrand, assertCart, assertCartItem, assertCheckoutBody, assertCheckoutResponse, createTestClient, fixtures, makeAssertion } from './chunk-ZLEFMQC6.mjs';
+import './chunk-UXLQ7WXI.mjs';
+import './chunk-7NML226B.mjs';
+import './chunk-6AZZ6AOF.mjs';

package/dist/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkL5GKVQVJ_js = require('./chunk-L5GKVQVJ.js');
-var chunkV2O5AO7I_js = require('./chunk-V2O5AO7I.js');
+var chunkMNIKXG7W_js = require('./chunk-MNIKXG7W.js');
 
 
 
@@ -19,109 +19,109 @@ Object.defineProperty(exports, "resolvePhoneCountryCode", {
 });
 Object.defineProperty(exports, "CURRENCY_SYMBOLS", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.CURRENCY_SYMBOLS; }
+  get: function () { return chunkMNIKXG7W_js.CURRENCY_SYMBOLS; }
 });
 Object.defineProperty(exports, "MOBILE_MONEY_PROVIDERS", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.MOBILE_MONEY_PROVIDERS; }
+  get: function () { return chunkMNIKXG7W_js.MOBILE_MONEY_PROVIDERS; }
 });
 Object.defineProperty(exports, "categorizePaymentError", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.categorizePaymentError; }
+  get: function () { return chunkMNIKXG7W_js.categorizePaymentError; }
 });
 Object.defineProperty(exports, "detectMobileMoneyProvider", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.detectMobileMoneyProvider; }
+  get: function () { return chunkMNIKXG7W_js.detectMobileMoneyProvider; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatMoney; }
+  get: function () { return chunkMNIKXG7W_js.formatMoney; }
 });
 Object.defineProperty(exports, "formatNumberCompact", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatNumberCompact; }
+  get: function () { return chunkMNIKXG7W_js.formatNumberCompact; }
 });
 Object.defineProperty(exports, "formatPrice", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatPrice; }
+  get: function () { return chunkMNIKXG7W_js.formatPrice; }
 });
 Object.defineProperty(exports, "formatPriceAdjustment", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatPriceAdjustment; }
+  get: function () { return chunkMNIKXG7W_js.formatPriceAdjustment; }
 });
 Object.defineProperty(exports, "formatPriceCompact", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatPriceCompact; }
+  get: function () { return chunkMNIKXG7W_js.formatPriceCompact; }
 });
 Object.defineProperty(exports, "formatPriceWithTax", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatPriceWithTax; }
+  get: function () { return chunkMNIKXG7W_js.formatPriceWithTax; }
 });
 Object.defineProperty(exports, "formatProductPrice", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.formatProductPrice; }
+  get: function () { return chunkMNIKXG7W_js.formatProductPrice; }
 });
 Object.defineProperty(exports, "getBasePrice", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getBasePrice; }
+  get: function () { return chunkMNIKXG7W_js.getBasePrice; }
 });
 Object.defineProperty(exports, "getCurrencySymbol", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getCurrencySymbol; }
+  get: function () { return chunkMNIKXG7W_js.getCurrencySymbol; }
 });
 Object.defineProperty(exports, "getDiscountPercentage", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getDiscountPercentage; }
+  get: function () { return chunkMNIKXG7W_js.getDiscountPercentage; }
 });
 Object.defineProperty(exports, "getDisplayPrice", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getDisplayPrice; }
+  get: function () { return chunkMNIKXG7W_js.getDisplayPrice; }
 });
 Object.defineProperty(exports, "getMarkupPercentage", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getMarkupPercentage; }
+  get: function () { return chunkMNIKXG7W_js.getMarkupPercentage; }
 });
 Object.defineProperty(exports, "getProductCurrency", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getProductCurrency; }
+  get: function () { return chunkMNIKXG7W_js.getProductCurrency; }
 });
 Object.defineProperty(exports, "getTaxAmount", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.getTaxAmount; }
+  get: function () { return chunkMNIKXG7W_js.getTaxAmount; }
 });
 Object.defineProperty(exports, "hasTaxInfo", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.hasTaxInfo; }
+  get: function () { return chunkMNIKXG7W_js.hasTaxInfo; }
 });
 Object.defineProperty(exports, "isOnSale", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.isOnSale; }
+  get: function () { return chunkMNIKXG7W_js.isOnSale; }
 });
 Object.defineProperty(exports, "isPaymentStatusFailure", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.isPaymentStatusFailure; }
+  get: function () { return chunkMNIKXG7W_js.isPaymentStatusFailure; }
 });
 Object.defineProperty(exports, "isPaymentStatusRequiresAction", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.isPaymentStatusRequiresAction; }
+  get: function () { return chunkMNIKXG7W_js.isPaymentStatusRequiresAction; }
 });
 Object.defineProperty(exports, "isPaymentStatusSuccess", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.isPaymentStatusSuccess; }
+  get: function () { return chunkMNIKXG7W_js.isPaymentStatusSuccess; }
 });
 Object.defineProperty(exports, "isTaxInclusive", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.isTaxInclusive; }
+  get: function () { return chunkMNIKXG7W_js.isTaxInclusive; }
 });
 Object.defineProperty(exports, "normalizePaymentResponse", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.normalizePaymentResponse; }
+  get: function () { return chunkMNIKXG7W_js.normalizePaymentResponse; }
 });
 Object.defineProperty(exports, "normalizeStatusResponse", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.normalizeStatusResponse; }
+  get: function () { return chunkMNIKXG7W_js.normalizeStatusResponse; }
 });
 Object.defineProperty(exports, "parsePrice", {
   enumerable: true,
-  get: function () { return chunkV2O5AO7I_js.parsePrice; }
+  get: function () { return chunkMNIKXG7W_js.parsePrice; }
 });

package/dist/utils.mjs

@@ -1,2 +1,2 @@
 export { isValidPhoneForContext, normalizePhoneToE164, resolvePhoneCountryCode } from './chunk-YOIVZ6OA.mjs';
-export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-6TVQQYQ5.mjs';
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-6AZZ6AOF.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.44.12",
+  "version": "0.44.16",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -61,6 +61,16 @@
       "import": "./dist/mock/msw.mjs",
       "require": "./dist/mock/msw.js"
     },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.mjs",
+      "require": "./dist/testing.js"
+    },
+    "./testing/suite": {
+      "types": "./dist/testing/suite.d.ts",
+      "import": "./dist/testing/suite.mjs",
+      "require": "./dist/testing/suite.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "scripts": {
@@ -81,7 +91,8 @@
   "peerDependencies": {
     "@paystack/inline-js": "^2.22.8",
     "react": ">=17.0.0",
-    "msw": ">=2.0.0"
+    "msw": ">=2.0.0",
+    "vitest": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "@paystack/inline-js": {
@@ -92,6 +103,9 @@
     },
     "msw": {
       "optional": true
+    },
+    "vitest": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -116,6 +130,7 @@
     "@base-ui/react": "^1.4.1",
     "clsx": "^2.1.1",
     "libphonenumber-js": "1.12.41",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.4.3"
   }
 }

package/registry/account.json

@@ -0,0 +1,15 @@
+{
+  "name": "account",
+  "title": "CimplifyAccount",
+  "description": "Iframe wrapper for the Cimplify account portal — sign-in, orders, addresses, settings.",
+  "type": "component",
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "account.tsx",
+      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState, useMemo } from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport { useOptionalCimplify } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CimplifyAccountProps {\n  /** CimplifyClient instance. Falls back to provider context. */\n  client?: CimplifyClient;\n  /** Override the Link base URL. */\n  linkUrl?: string;\n  /** Initial section to show: \"dashboard\" | \"orders\" | \"addresses\" | \"payment-methods\" | \"sessions\" | \"settings\". */\n  section?: string;\n  /** Appearance variables — passed to Link for theming. */\n  appearance?: {\n    theme?: \"light\" | \"dark\";\n    variables?: {\n      primaryColor?: string;\n      fontFamily?: string;\n      borderRadius?: string;\n    };\n  };\n  /** Called when the user logs out from the account portal. */\n  onLogout?: () => void;\n  /** Additional CSS class for the container. */\n  className?: string;\n}\n\nconst DEFAULT_LINK_URL = \"https://link.cimplify.io\";\n\nexport function CimplifyAccount({\n  client: clientProp,\n  linkUrl,\n  section,\n  appearance,\n  onLogout,\n  className,\n}: CimplifyAccountProps): React.ReactElement {\n  const context = useOptionalCimplify();\n  const client = clientProp ?? context?.client;\n  const resolvedLinkUrl = linkUrl || DEFAULT_LINK_URL;\n\n  const iframeRef = useRef<HTMLIFrameElement | null>(null);\n  const [height, setHeight] = useState(400);\n  const [isReady, setIsReady] = useState(false);\n\n  const iframeSrc = useMemo(() => {\n    const path = section ? `/elements/account/${section}` : \"/elements/account\";\n    const url = new URL(path, resolvedLinkUrl);\n    if (client) {\n      const businessId = client.getBusinessId?.() ?? \"\";\n      if (businessId) url.searchParams.set(\"businessId\", businessId);\n    }\n    return url.toString();\n  }, [resolvedLinkUrl, section, client]);\n\n  // Listen for messages from the iframe\n  useEffect(() => {\n    function handleMessage(event: MessageEvent) {\n      if (!event.data || typeof event.data !== \"object\") return;\n\n      // Only accept messages from our iframe\n      if (iframeRef.current?.contentWindow && event.source !== iframeRef.current.contentWindow) {\n        return;\n      }\n\n      switch (event.data.type) {\n        case \"ready\":\n          setIsReady(true);\n          if (typeof event.data.height === \"number\") {\n            setHeight(event.data.height);\n          }\n          // Send init with token + appearance\n          sendInit();\n          break;\n\n        case \"height_change\":\n          if (typeof event.data.height === \"number\") {\n            setHeight(event.data.height);\n          }\n          break;\n\n        case \"logout_complete\":\n          onLogout?.();\n          break;\n      }\n    }\n\n    window.addEventListener(\"message\", handleMessage);\n    return () => window.removeEventListener(\"message\", handleMessage);\n  }, [appearance, client, onLogout]);\n\n  function sendInit() {\n    const contentWindow = iframeRef.current?.contentWindow;\n    if (!contentWindow) return;\n\n    const token = client?.getAccessToken?.();\n    contentWindow.postMessage(\n      {\n        type: \"init\",\n        token: token ?? undefined,\n        appearance: appearance ?? undefined,\n      },\n      resolvedLinkUrl,\n    );\n  }\n\n  return (\n    <div\n      data-cimplify-account\n      className={cn(\"relative overflow-hidden\", className)}\n    >\n      {!isReady && (\n        <div className=\"flex items-center justify-center py-16\">\n          <div className=\"w-6 h-6 border-2 border-border border-t-foreground rounded-full animate-spin\" />\n        </div>\n      )}\n      <iframe\n        ref={iframeRef}\n        src={iframeSrc}\n        style={{\n          border: \"none\",\n          width: \"100%\",\n          height: `${height}px`,\n          display: isReady ? \"block\" : \"none\",\n          overflow: \"hidden\",\n          background: \"transparent\",\n        }}\n        allow=\"geolocation\"\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox\"\n      />\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/billing-plan-selector.json

@@ -0,0 +1,16 @@
+{
+  "name": "billing-plan-selector",
+  "title": "BillingPlanSelector",
+  "description": "Subscription / billing-plan picker — surfaces eligible plans with pricing and trial periods.",
+  "type": "component",
+  "registryDependencies": [
+    "price",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "billing-plan-selector.tsx",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductBillingPlan, BillingFrequency } from \"@cimplify/sdk\";\nimport { useBillingPlans } from \"./hooks/use-billing-plans\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BillingPlanSelectorClassNames {\n  root?: string;\n  plan?: string;\n  activePlan?: string;\n  frequency?: string;\n  price?: string;\n  setupFee?: string;\n  trialBadge?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface BillingPlanSelectorProps {\n  /** Product ID to fetch billing plans for. */\n  productId: string;\n  /** Override plans (skips fetch). For SSR, pass pre-fetched plans. */\n  plans?: ProductBillingPlan[];\n  /** Called when a plan is selected. */\n  onPlanSelect?: (plan: ProductBillingPlan | null) => void;\n  /** Currently selected plan ID. */\n  selectedPlanId?: string | null;\n  /** Show a \"One-time purchase\" option at the top. */\n  showOneTimePurchase?: boolean;\n  /** Label for the one-time purchase option. Default: \"One-time purchase\". */\n  oneTimePurchaseLabel?: string;\n  /** Custom plan card renderer. */\n  renderPlan?: (plan: ProductBillingPlan, isActive: boolean) => React.ReactNode;\n  className?: string;\n  classNames?: BillingPlanSelectorClassNames;\n}\n\nconst FREQUENCY_LABELS: Record<BillingFrequency, string> = {\n  weekly: \"Weekly\",\n  biweekly: \"Biweekly\",\n  monthly: \"Monthly\",\n  quarterly: \"Quarterly\",\n  annually: \"Annually\",\n};\n\nfunction formatMarkup(plan: ProductBillingPlan): string | null {\n  if (!plan.markup_type || plan.markup_amount == null) return null;\n  if (plan.markup_type === \"percentage\") return `+${plan.markup_amount}%`;\n  return null;\n}\n\n/**\n * BillingPlanSelector — subscription/installment plan comparison and selection.\n *\n * Renders plan cards with frequency, markup, trial, and setup fee details.\n * Returns `null` when no plans are available (and one-time purchase is hidden).\n */\nexport function BillingPlanSelector({\n  productId,\n  plans: plansProp,\n  onPlanSelect,\n  selectedPlanId,\n  showOneTimePurchase = false,\n  oneTimePurchaseLabel = \"One-time purchase\",\n  renderPlan,\n  className,\n  classNames,\n}: BillingPlanSelectorProps): React.ReactElement | null {\n  const { plans: fetched, isLoading } = useBillingPlans(productId, {\n    enabled: plansProp === undefined,\n  });\n\n  const plans = plansProp ?? fetched;\n\n  if (isLoading && plans.length === 0) {\n    return (\n      <div\n        data-cimplify-billing-plan-selector\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (plans.length === 0 && !showOneTimePurchase) {\n    return null;\n  }\n\n  const isOneTimePurchaseSelected = selectedPlanId === null;\n\n  return (\n    <div data-cimplify-billing-plan-selector className={cn(className, classNames?.root)}>\n      {showOneTimePurchase && (\n        <button\n          type=\"button\"\n          onClick={() => onPlanSelect?.(null)}\n          data-cimplify-billing-plan\n          data-plan-type=\"one-time\"\n          data-active={isOneTimePurchaseSelected || undefined}\n          aria-pressed={isOneTimePurchaseSelected}\n          className={cn(\n            classNames?.plan,\n            isOneTimePurchaseSelected && classNames?.activePlan,\n          )}\n        >\n          <span data-cimplify-billing-frequency className={classNames?.frequency}>\n            {oneTimePurchaseLabel}\n          </span>\n        </button>\n      )}\n\n      {plans.map((plan) => {\n        const isActive = selectedPlanId === plan.id;\n        const markup = formatMarkup(plan);\n\n        return (\n          <button\n            key={plan.id}\n            type=\"button\"\n            onClick={() => onPlanSelect?.(plan)}\n            data-cimplify-billing-plan\n            data-plan-type={plan.plan_type}\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(classNames?.plan, isActive && classNames?.activePlan)}\n          >\n            {renderPlan ? (\n              renderPlan(plan, isActive)\n            ) : (\n              <>\n                <span data-cimplify-billing-frequency className={classNames?.frequency}>\n                  {FREQUENCY_LABELS[plan.frequency]}\n                </span>\n\n                {markup && (\n                  <span data-cimplify-billing-markup className={classNames?.price}>\n                    {markup}\n                  </span>\n                )}\n\n                {plan.markup_type === \"fixed\" && plan.markup_amount != null && (\n                  <span data-cimplify-billing-markup className={classNames?.price}>\n                    +<Price amount={plan.markup_amount} />\n                  </span>\n                )}\n\n                {plan.trial_days > 0 && (\n                  <span data-cimplify-billing-trial className={classNames?.trialBadge}>\n                    {plan.trial_days}-day trial\n                  </span>\n                )}\n\n                {plan.setup_fee > 0 && (\n                  <span data-cimplify-billing-setup-fee className={classNames?.setupFee}>\n                    Setup fee: <Price amount={plan.setup_fee} />\n                  </span>\n                )}\n\n                {plan.plan_type === \"installment\" && plan.installment_periods != null && (\n                  <span data-cimplify-billing-periods>\n                    {plan.installment_periods} payments\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/cart-drawer.json

@@ -0,0 +1,17 @@
+{
+  "name": "cart-drawer",
+  "title": "CartDrawer",
+  "description": "Slide-in side cart drawer with provider context, free-shipping progress, animated subtotal, and empty state. Auto-opens on add-to-cart.",
+  "type": "component",
+  "registryDependencies": [
+    "cart-summary",
+    "price",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "cart-drawer.tsx",
+      "content": "\"use client\";\n\nimport React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CartSummary } from \"./cart-summary\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\ninterface CartDrawerCtx {\n  isOpen: boolean;\n  open: () => void;\n  close: () => void;\n  toggle: () => void;\n}\n\nconst CartDrawerContext = createContext<CartDrawerCtx | null>(null);\n\nexport function useCartDrawer(): CartDrawerCtx {\n  const ctx = useContext(CartDrawerContext);\n  if (!ctx) {\n    throw new Error(\"useCartDrawer must be used within <CartDrawerProvider>\");\n  }\n  return ctx;\n}\n\ninterface ProviderProps {\n  children: React.ReactNode;\n  /** Auto-open the drawer whenever the cart's pendingOpCount goes from 0 → >0. Default: true. */\n  openOnAdd?: boolean;\n}\n\nexport function CartDrawerProvider({ children, openOnAdd = true }: ProviderProps): React.ReactElement {\n  const [isOpen, setIsOpen] = useState(false);\n  const cart = useCart();\n  const lastPendingRef = useRef(0);\n\n  const open = useCallback(() => setIsOpen(true), []);\n  const close = useCallback(() => setIsOpen(false), []);\n  const toggle = useCallback(() => setIsOpen((v) => !v), []);\n\n  useEffect(() => {\n    if (!openOnAdd) return;\n    if (cart.pendingOpCount > lastPendingRef.current && cart.pendingOpCount > 0) {\n      setIsOpen(true);\n    }\n    lastPendingRef.current = cart.pendingOpCount;\n  }, [cart.pendingOpCount, openOnAdd]);\n\n  const value = useMemo<CartDrawerCtx>(() => ({ isOpen, open, close, toggle }), [isOpen, open, close, toggle]);\n  return <CartDrawerContext.Provider value={value}>{children}</CartDrawerContext.Provider>;\n}\n\nexport interface CartDrawerProps {\n  /** Called when \"Checkout\" is clicked. Drawer auto-closes first. */\n  onCheckout?: () => void;\n  /** Called when \"Continue Shopping\" is clicked. Defaults to closing. */\n  onContinueShopping?: () => void;\n  /** Called when the empty state's CTA is clicked. */\n  onShop?: () => void;\n  /** Heading. */\n  title?: string;\n  /** Free-shipping threshold (in business currency, numeric). 0 disables the progress bar. */\n  freeShippingThreshold?: number;\n  /** Custom class on the panel. */\n  className?: string;\n}\n\n/**\n * Animate a number toward `target` over ~250ms. Used for subtotal so it\n * feels alive when items are added/removed.\n */\nfunction useAnimatedNumber(target: number, durationMs = 250) {\n  const [value, setValue] = useState(target);\n  const fromRef = useRef(target);\n  const startRef = useRef<number | null>(null);\n  useEffect(() => {\n    fromRef.current = value;\n    startRef.current = null;\n    let raf = 0;\n    const tick = (t: number) => {\n      if (startRef.current == null) startRef.current = t;\n      const p = Math.min(1, (t - startRef.current) / durationMs);\n      const eased = 1 - Math.pow(1 - p, 3);\n      setValue(fromRef.current + (target - fromRef.current) * eased);\n      if (p < 1) raf = requestAnimationFrame(tick);\n    };\n    raf = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(raf);\n    // value intentionally omitted — only re-trigger on target change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [target, durationMs]);\n  return value;\n}\n\nexport function CartDrawer({\n  onCheckout,\n  onContinueShopping,\n  onShop,\n  title = \"Cart\",\n  freeShippingThreshold = 0,\n  className,\n}: CartDrawerProps): React.ReactElement {\n  const { isOpen, close } = useCartDrawer();\n  const cart = useCart();\n  const subtotalNum = parsePrice(cart.subtotal);\n  const animatedSubtotal = useAnimatedNumber(subtotalNum);\n\n  // Lock body scroll + close on Escape while open.\n  useEffect(() => {\n    if (!isOpen) return;\n    const original = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.body.style.overflow = original;\n      window.removeEventListener(\"keydown\", onKey);\n    };\n  }, [isOpen, close]);\n\n  const handleCheckout = () => {\n    close();\n    onCheckout?.();\n  };\n\n  const handleContinue = () => {\n    onContinueShopping?.();\n    close();\n  };\n\n  const handleShop = () => {\n    onShop?.();\n    close();\n  };\n\n  // Free-shipping progress\n  const showShippingBar = freeShippingThreshold > 0 && !cart.isEmpty;\n  const remainingForShipping = Math.max(0, freeShippingThreshold - subtotalNum);\n  const shippingProgress = freeShippingThreshold > 0 ? Math.min(100, (subtotalNum / freeShippingThreshold) * 100) : 0;\n  const shippingUnlocked = subtotalNum >= freeShippingThreshold && freeShippingThreshold > 0;\n\n  return (\n    <div\n      data-cimplify-cart-drawer\n      data-open={isOpen ? \"true\" : \"false\"}\n      aria-hidden={!isOpen}\n      className={cn(\n        \"fixed inset-0 z-[200]\",\n        isOpen ? \"pointer-events-auto\" : \"pointer-events-none\",\n      )}\n    >\n      {/* Backdrop */}\n      <div\n        onClick={close}\n        className={cn(\n          \"absolute inset-0 bg-foreground/40 backdrop-blur-sm transition-opacity duration-300\",\n          isOpen ? \"opacity-100\" : \"opacity-0\",\n        )}\n      />\n\n      {/* Panel */}\n      <aside\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={title}\n        className={cn(\n          \"absolute top-0 right-0 h-full w-full sm:max-w-[480px] bg-background shadow-2xl flex flex-col\",\n          \"transition-transform duration-300\",\n          isOpen ? \"translate-x-0\" : \"translate-x-full\",\n          // ease-out cubic-bezier for a \"pull\" feel\n          \"[transition-timing-function:cubic-bezier(0.16,1,0.3,1)]\",\n          className,\n        )}\n      >\n        {/* Header */}\n        <header className=\"relative flex items-center justify-between gap-4 px-6 py-5 shrink-0\">\n          <div className=\"flex items-baseline gap-2\">\n            <h2 className=\"text-xl font-bold tracking-tight m-0\">{title}</h2>\n            {cart.itemCount > 0 && (\n              <span className=\"text-sm text-muted-foreground tabular-nums\">\n                {cart.itemCount} {cart.itemCount === 1 ? \"item\" : \"items\"}\n              </span>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={close}\n            aria-label=\"Close cart\"\n            className=\"grid place-items-center w-9 h-9 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </header>\n\n        {/* Free-shipping bar */}\n        {showShippingBar && (\n          <div data-cimplify-cart-shipping-bar className=\"px-6 pb-4 shrink-0\">\n            <div className=\"flex items-baseline justify-between gap-2 mb-1.5 text-xs\">\n              {shippingUnlocked ? (\n                <span className=\"font-medium text-primary\">✓ Free shipping unlocked</span>\n              ) : (\n                <span className=\"text-muted-foreground\">\n                  <Price amount={remainingForShipping} className=\"font-semibold text-foreground\" /> away from free shipping\n                </span>\n              )}\n            </div>\n            <div className=\"h-1 rounded-full bg-muted overflow-hidden\">\n              <div\n                className=\"h-full bg-primary transition-[width] duration-500 ease-out\"\n                style={{ width: `${shippingProgress}%` }}\n              />\n            </div>\n          </div>\n        )}\n\n        {/* Items */}\n        <div className=\"flex-1 overflow-y-auto px-6\">\n          {cart.isEmpty ? (\n            <EmptyState onShop={handleShop} />\n          ) : (\n            <CartSummary showTotals={false} showCheckoutButton={false} />\n          )}\n        </div>\n\n        {/* Footer */}\n        {!cart.isEmpty && (\n          <footer className=\"border-t border-border px-6 py-5 shrink-0 space-y-3 bg-background\">\n            <div className=\"flex items-baseline justify-between\">\n              <span className=\"text-sm text-muted-foreground\">Subtotal</span>\n              <Price amount={animatedSubtotal} className=\"text-lg font-bold tabular-nums\" />\n            </div>\n            <p className=\"text-[11px] text-muted-foreground\">\n              Tax and shipping calculated at checkout.\n            </p>\n            <button\n              type=\"button\"\n              onClick={handleCheckout}\n              className=\"w-full h-12 rounded-full bg-foreground text-background font-semibold text-sm hover:bg-foreground/90 active:scale-[0.99] transition-all\"\n            >\n              Checkout — <Price amount={cart.subtotal} className=\"tabular-nums\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleContinue}\n              className=\"w-full text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n            >\n              Continue shopping\n            </button>\n            <div className=\"flex items-center justify-center gap-1.5 text-[10px] text-muted-foreground/70 uppercase tracking-wider pt-1\">\n              <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\" aria-hidden>\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\" />\n              </svg>\n              <span>Secure checkout</span>\n            </div>\n          </footer>\n        )}\n      </aside>\n    </div>\n  );\n}\n\nfunction EmptyState({ onShop }: { onShop: () => void }) {\n  return (\n    <div data-cimplify-cart-empty className=\"h-full grid place-items-center text-center py-16\">\n      <div className=\"space-y-5 max-w-[260px]\">\n        <div className=\"relative w-20 h-20 mx-auto\">\n          <div className=\"absolute inset-0 rounded-full bg-muted\" />\n          <svg\n            className=\"relative w-10 h-10 m-auto top-1/2 -translate-y-1/2 text-muted-foreground/60\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l-1 12H6L5 9z\" />\n          </svg>\n        </div>\n        <div>\n          <p className=\"text-base font-semibold m-0\">Your cart is empty</p>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            Discover something you'll love.\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onShop}\n          className=\"inline-flex items-center gap-1.5 h-11 px-6 rounded-full bg-foreground text-background text-sm font-semibold hover:bg-foreground/90 active:scale-[0.99] transition-all\"\n        >\n          Shop now\n          <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden>\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/currency-selector.json

@@ -0,0 +1,15 @@
+{
+  "name": "currency-selector",
+  "title": "CurrencySelector",
+  "description": "Multi-currency switcher backed by the FX provider — locks display currency and quote ID.",
+  "type": "component",
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "currency-selector.tsx",
+      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport type { FxRateResponse } from \"../types/fx\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CurrencySelectorClassNames {\n  root?: string;\n  option?: string;\n  activeOption?: string;\n  rate?: string;\n  label?: string;\n  loading?: string;\n}\n\nexport interface CurrencySelectorProps {\n  /** Available currencies to display. */\n  currencies: CurrencyCode[];\n  /** Currently selected currency. */\n  currentCurrency?: CurrencyCode;\n  /** Called when a currency is selected. */\n  onCurrencyChange?: (currency: CurrencyCode) => void;\n  /** Show the exchange rate next to each currency. Requires `baseCurrency`. */\n  showRate?: boolean;\n  /** Base currency used for rate display. */\n  baseCurrency?: CurrencyCode;\n  /** Custom currency option renderer. */\n  renderCurrency?: (\n    currency: CurrencyCode,\n    isActive: boolean,\n    rate: FxRateResponse | null,\n  ) => React.ReactNode;\n  className?: string;\n  classNames?: CurrencySelectorClassNames;\n}\n\n/**\n * CurrencySelector — currency switcher for international customers.\n *\n * Renders selectable currency options with optional exchange rate display.\n * Returns `null` when there is only one currency (no selector needed).\n */\nexport function CurrencySelector({\n  currencies,\n  currentCurrency,\n  onCurrencyChange,\n  showRate = false,\n  baseCurrency,\n  renderCurrency,\n  className,\n  classNames,\n}: CurrencySelectorProps): React.ReactElement | null {\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n\n  const [rates, setRates] = useState<Record<string, FxRateResponse>>({});\n  const [isLoadingRates, setIsLoadingRates] = useState(false);\n  const requestIdRef = useRef(0);\n\n  useEffect(() => {\n    if (!showRate || !baseCurrency || !client) return;\n\n    const targets = currencies.filter((c) => c !== baseCurrency);\n    if (targets.length === 0) return;\n\n    const nextRequestId = ++requestIdRef.current;\n    setIsLoadingRates(true);\n\n    void (async () => {\n      const fetched: Record<string, FxRateResponse> = {};\n\n      await Promise.all(\n        targets.map(async (currency) => {\n          const res = await client.fx.getRate(baseCurrency, currency);\n          if (res.ok) {\n            fetched[currency] = res.value;\n          }\n        }),\n      );\n\n      if (nextRequestId !== requestIdRef.current) return;\n\n      setRates(fetched);\n      setIsLoadingRates(false);\n    })();\n  }, [client, showRate, baseCurrency, currencies]);\n\n  if (currencies.length <= 1) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-currency-selector className={cn(className, classNames?.root)}>\n      {currencies.map((currency) => {\n        const isActive = currentCurrency === currency;\n        const rate = rates[currency] ?? null;\n\n        return (\n          <button\n            key={currency}\n            type=\"button\"\n            onClick={() => onCurrencyChange?.(currency)}\n            data-cimplify-currency-option\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(\n              classNames?.option,\n              isActive && classNames?.activeOption,\n            )}\n          >\n            {renderCurrency ? (\n              renderCurrency(currency, isActive, rate)\n            ) : (\n              <>\n                <span data-cimplify-currency-label className={classNames?.label}>\n                  {currency}\n                </span>\n                {showRate && baseCurrency && currency !== baseCurrency && (\n                  <span data-cimplify-currency-rate className={classNames?.rate}>\n                    {isLoadingRates\n                      ? \"...\"\n                      : rate\n                        ? `1 ${baseCurrency} = ${rate.rate.toFixed(4)} ${currency}`\n                        : null}\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
+    }
+  ]
+}