@cimplify/sdk 0.71.0 → 0.73.0

package/dist/react.js

@@ -1149,14 +1149,20 @@ function CimplifyProvider({
   client,
   children,
   onLocationChange,
+  initialBusiness,
+  initialLocations,
   optimistic = true
 }) {
   const resolvedClient = React14.useMemo(() => client ?? createDefaultClient(), [client]);
   const onLocationChangeRef = React14.useRef(onLocationChange);
-  const [business, setBusiness] = React14.useState(null);
-  const [locations, setLocations] = React14.useState([]);
-  const [currentLocation, setCurrentLocationState] = React14.useState(null);
-  const [isReady, setIsReady] = React14.useState(false);
+  const seeded = initialBusiness !== void 0;
+  const initialBootstrapDone = React14.useRef(seeded);
+  const [business, setBusiness] = React14.useState(initialBusiness ?? null);
+  const [locations, setLocations] = React14.useState(initialLocations ?? []);
+  const [currentLocation, setCurrentLocationState] = React14.useState(
+    initialLocations && initialLocations.length > 0 ? initialLocations[0] : null
+  );
+  const [isReady, setIsReady] = React14.useState(seeded);
   React14.useEffect(() => {
     onLocationChangeRef.current = onLocationChange;
   }, [onLocationChange]);
@@ -1230,7 +1236,9 @@ function CimplifyProvider({
   React14.useEffect(() => {
     let cancelled = false;
     async function bootstrap() {
-      setIsReady(false);
+      if (!initialBootstrapDone.current) {
+        setIsReady(false);
+      }
       const [businessResult, locationsResult] = await Promise.all([
         resolvedClient.business.getInfo(),
         resolvedClient.business.getLocations()
@@ -1255,23 +1263,27 @@ function CimplifyProvider({
         resolvedClient.setLocationId(null);
         setStoredLocationId(null);
       }
+      initialBootstrapDone.current = true;
       setIsReady(true);
     }
     bootstrap().catch(() => {
       if (cancelled) {
         return;
       }
-      setBusiness(null);
-      setLocations([]);
-      setCurrentLocationState(null);
-      resolvedClient.setLocationId(null);
-      setStoredLocationId(null);
+      if (!seeded) {
+        setBusiness(null);
+        setLocations([]);
+        setCurrentLocationState(null);
+        resolvedClient.setLocationId(null);
+        setStoredLocationId(null);
+      }
+      initialBootstrapDone.current = true;
       setIsReady(true);
     });
     return () => {
       cancelled = true;
     };
-  }, [resolvedClient]);
+  }, [resolvedClient, seeded]);
   const clientContextValue = React14.useMemo(
     () => ({
       client: resolvedClient,
@@ -4203,11 +4215,18 @@ function CimplifyUserButton({
     )
   ] });
 }
-function Price({ amount, currency, className, prefix }) {
+function Price({
+  amount,
+  currency,
+  className,
+  prefix,
+  convert = true
+}) {
   const context = useOptionalCimplify();
-  const resolvedCurrency = currency ?? context?.displayCurrency ?? "USD";
-  const convertedAmount = !currency && context?.convertPrice ? context.convertPrice(amount) : amount;
-  const resolvedAmount = typeof convertedAmount === "string" ? parseFloat(convertedAmount) || 0 : convertedAmount;
+  const sourceCurrency = currency ?? context?.baseCurrency ?? "USD";
+  const fxActive = convert && context?.fxRate != null && context.displayCurrency !== sourceCurrency && sourceCurrency === context.baseCurrency;
+  const resolvedCurrency = fxActive ? context.displayCurrency : sourceCurrency;
+  const resolvedAmount = fxActive ? context.convertPrice(amount) : typeof amount === "string" ? parseFloat(amount) || 0 : amount;
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className, children: [
     prefix,
     chunk7Y2O3E4D_js.formatPrice(resolvedAmount, resolvedCurrency)
@@ -6163,6 +6182,7 @@ function VariantSelector({
   variants,
   variantAxes,
   basePrice,
+  currency,
   selectedVariantId,
   onVariantChange,
   productName,
@@ -6235,6 +6255,36 @@ function VariantSelector({
             className: cn("flex flex-wrap gap-2", classNames?.axisOptions),
             children: axis.values.map((value) => {
               const isSelected = axisSelections[axis.id] === value.id;
+              if (value.image_url || value.color_hex) {
+                const isImage = Boolean(value.image_url);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  radio.Radio.Root,
+                  {
+                    value: value.id,
+                    "data-cimplify-variant-option": true,
+                    "data-cimplify-variant-swatch": true,
+                    "data-selected": isSelected || void 0,
+                    "aria-label": value.name,
+                    title: value.name,
+                    style: isImage ? void 0 : { backgroundColor: value.color_hex },
+                    className: cn(
+                      "relative overflow-hidden border border-border transition-shadow",
+                      isImage ? "h-12 w-12 rounded-md" : "h-9 w-9 rounded-full",
+                      isSelected && "ring-2 ring-foreground ring-offset-2 ring-offset-background border-transparent",
+                      isSelected ? classNames?.swatchSelected : classNames?.swatch
+                    ),
+                    children: isImage && /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: value.image_url,
+                        alt: "",
+                        className: "h-full w-full object-cover"
+                      }
+                    )
+                  },
+                  value.id
+                );
+              }
               return /* @__PURE__ */ jsxRuntime.jsx(
                 radio.Radio.Root,
                 {
@@ -6315,7 +6365,7 @@ function VariantSelector({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm text-muted-foreground", classNames?.pricing), children: [
                   adjustment > 0 ? "+" : adjustment < 0 ? "" : "+",
-                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment, currency })
                 ] })
               ]
             },
@@ -6330,6 +6380,7 @@ function AddOnSelector({
   addOns,
   selectedOptions,
   onOptionsChange,
+  currency,
   className,
   classNames
 }) {
@@ -6488,7 +6539,7 @@ function AddOnSelector({
                       ),
                       option.default_price != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
                         "+",
-                        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: option.default_price })
+                        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: option.default_price, currency })
                       ] })
                     ]
                   },
@@ -6508,6 +6559,7 @@ function BundleSelector({
   bundlePrice,
   discountValue,
   pricingType,
+  currency,
   onSelectionsChange,
   onPriceChange,
   onReady,
@@ -6588,6 +6640,7 @@ function BundleSelector({
         component: comp,
         selectedVariantId: variantChoices[comp.id],
         onVariantChange: (variantId) => handleVariantChange(comp.id, variantId),
+        currency,
         classNames
       },
       comp.id
@@ -6599,7 +6652,7 @@ function BundleSelector({
         className: cn("border-t border-border pt-4 flex justify-between text-sm", classNames?.summary),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Bundle price" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundlePrice, className: "font-medium text-primary" })
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundlePrice, currency, className: "font-medium text-primary" })
         ]
       }
     ),
@@ -6610,7 +6663,7 @@ function BundleSelector({
         className: cn("flex justify-between text-sm", classNames?.savings),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "You save" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: discountValue, className: "text-green-600 font-medium" })
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: discountValue, currency, className: "text-green-600 font-medium" })
         ]
       }
     )
@@ -6643,6 +6696,7 @@ function BundleComponentCard({
   component,
   selectedVariantId,
   onVariantChange,
+  currency,
   classNames
 }) {
   const idPrefix = React14.useId();
@@ -6723,7 +6777,7 @@ function BundleComponentCard({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayPrice }) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayPrice, currency }) })
             ]
           }
         ),
@@ -6769,7 +6823,7 @@ function BundleComponentCard({
                         className: cn("text-sm text-muted-foreground", classNames?.variantAdjustment),
                         children: [
                           adjustment > 0 ? "+" : "",
-                          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+                          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment, currency })
                         ]
                       }
                     )
@@ -6787,6 +6841,7 @@ function BundleComponentCard({
 function CompositeSelector({
   compositeId,
   groups,
+  currency,
   onSelectionsChange,
   onPriceChange,
   onReady,
@@ -7165,7 +7220,7 @@ function CompositeSelector({
                         ),
                         component.price != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground shrink-0", children: [
                           "+",
-                          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price })
+                          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, currency })
                         ] })
                       ]
                     },
@@ -7192,7 +7247,7 @@ function CompositeSelector({
               className: cn("flex justify-between text-muted-foreground", classNames?.summaryLine),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.base_price })
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.base_price, currency })
               ]
             }
           ),
@@ -7203,7 +7258,7 @@ function CompositeSelector({
               className: cn("flex justify-between text-muted-foreground", classNames?.summaryLine),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Selections" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.components_total })
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.components_total, currency })
               ]
             }
           ),
@@ -7214,7 +7269,7 @@ function CompositeSelector({
               className: cn("flex justify-between font-medium pt-1 border-t border-border", classNames?.summaryTotal),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.final_price, className: "text-primary" })
+                /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.final_price, currency, className: "text-primary" })
               ]
             }
           )
@@ -7271,6 +7326,7 @@ function formatMarkup(plan) {
 function BillingPlanSelector({
   productId,
   plans: plansProp,
+  currency,
   onPlanSelect,
   selectedPlanId,
   showOneTimePurchase = false,
@@ -7332,7 +7388,7 @@ function BillingPlanSelector({
             markup && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-billing-markup": true, className: classNames?.price, children: markup }),
             plan.markup_type === "fixed" && plan.markup_amount != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-billing-markup": true, className: classNames?.price, children: [
               "+",
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: plan.markup_amount })
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: plan.markup_amount, currency })
             ] }),
             plan.trial_days > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-billing-trial": true, className: classNames?.trialBadge, children: [
               plan.trial_days,
@@ -7340,7 +7396,7 @@ function BillingPlanSelector({
             ] }),
             plan.setup_fee > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-billing-setup-fee": true, className: classNames?.setupFee, children: [
               "Setup fee: ",
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: plan.setup_fee })
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: plan.setup_fee, currency })
             ] }),
             plan.plan_type === "installment" && plan.installment_periods != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-billing-periods": true, children: [
               plan.installment_periods,
@@ -7368,6 +7424,7 @@ function VolumePricing({
   tiers,
   currentQuantity,
   defaultOpen = false,
+  currency,
   className,
   classNames
 }) {
@@ -7432,7 +7489,7 @@ function VolumePricing({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-volume-pricing-price": true, className: classNames?.tierPrice, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: tier.unit_price, prefix: "" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: tier.unit_price, currency, prefix: "" }),
                       " /ea"
                     ] })
                   ]
@@ -7707,6 +7764,7 @@ function CustomerInputFields({
   values,
   onChange,
   onFileUpload,
+  currency,
   className,
   classNames
 }) {
@@ -7736,6 +7794,7 @@ function CustomerInputFields({
       value: values[field.id],
       onValueChange: (value) => setValue(field.id, value),
       onFileUpload: onFileUpload ?? (clientContext?.client ? (_file, _field) => defaultFileUpload(_file) : void 0),
+      currency,
       classNames
     },
     field.id
@@ -7746,6 +7805,7 @@ function InputField({
   value,
   onValueChange,
   onFileUpload,
+  currency,
   classNames
 }) {
   const hasPriceAdjustment = field.price_adjustment != null && chunk7Y2O3E4D_js.parsePrice(field.price_adjustment) > 0;
@@ -7755,7 +7815,7 @@ function InputField({
       field.is_required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs text-destructive", classNames?.required), children: "Required" }),
       hasPriceAdjustment && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-xs text-muted-foreground", classNames?.priceAdjustment), children: [
         "+",
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: field.price_adjustment })
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: field.price_adjustment, currency })
       ] })
     ] }),
     field.help_text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs text-muted-foreground mb-1.5", classNames?.helpText), children: field.help_text }),
@@ -8678,6 +8738,8 @@ function SlotPicker({
   onSlotSelect,
   groupByTimeOfDay = true,
   showPrice = true,
+  lowCapacityThreshold = 3,
+  currency,
   schedulingMode = "intraday",
   durationUnit,
   durationValue,
@@ -8770,14 +8832,18 @@ function SlotPicker({
                 children: group.slots.map((slot) => {
                   const value = slotToValue(slot);
                   const isSelected = selectedSlot?.start_time === slot.start_time && selectedSlot?.end_time === slot.end_time;
+                  const capacity = slot.capacity_available ?? slot.remaining_capacity;
+                  const soldOut = capacity === 0;
+                  const unavailable = slot.is_available === false || soldOut;
+                  const lowCapacity = lowCapacityThreshold > 0 && capacity != null && capacity > 0 && capacity <= lowCapacityThreshold;
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     radio.Radio.Root,
                     {
                       value,
-                      disabled: slot.is_available === false,
+                      disabled: unavailable,
                       "data-cimplify-slot": true,
                       "data-selected": isSelected || void 0,
-                      "data-unavailable": slot.is_available === false || void 0,
+                      "data-unavailable": unavailable || void 0,
                       className: cn(
                         "inline-flex items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[unavailable]:cursor-not-allowed data-[unavailable]:opacity-40 data-[unavailable]:line-through",
                         isMultiDay && "justify-between text-left",
@@ -8790,7 +8856,18 @@ function SlotPicker({
                           {
                             "data-cimplify-slot-price": true,
                             className: cn("text-xs opacity-70", classNames?.slotPrice),
-                            children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: slot.price })
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: slot.price, currency })
+                          }
+                        ),
+                        lowCapacity && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            "data-cimplify-slot-scarcity": true,
+                            className: cn("text-xs font-medium text-amber-600", classNames?.slotScarcity),
+                            children: [
+                              capacity,
+                              " left"
+                            ]
                           }
                         )
                       ]
@@ -8827,6 +8904,7 @@ function DateSlotPicker({
   onSlotSelect,
   availability: availabilityProp,
   showPrice = true,
+  currency,
   schedulingMode,
   durationUnit,
   durationValue,
@@ -8975,6 +9053,7 @@ function DateSlotPicker({
             selectedSlot,
             onSlotSelect: handleSlotSelect,
             showPrice,
+            currency,
             schedulingMode,
             durationUnit,
             durationValue,
@@ -9011,6 +9090,7 @@ function ProductCustomizer({
   const [specialInstructions, setSpecialInstructions] = React14.useState("");
   const [selectedSlot, setSelectedSlot] = React14.useState(null);
   const cart = useCart();
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const productType = product.type || "product";
   const isComposite = productType === "composite";
   const isBundle = productType === "bundle";
@@ -9177,6 +9257,7 @@ function ProductCustomizer({
       {
         compositeId: product.composite_id,
         groups: product.groups,
+        currency,
         onSelectionsChange: setCompositeSelections,
         onPriceChange: setCompositePrice,
         onReady: setCompositeReady,
@@ -9190,6 +9271,7 @@ function ProductCustomizer({
         bundlePrice: product.bundle_price,
         discountValue: product.discount_value,
         pricingType: product.pricing_type,
+        currency,
         onSelectionsChange: setBundleSelections,
         onPriceChange: setBundleTotalPrice,
         onReady: setBundleReady
@@ -9201,7 +9283,8 @@ function ProductCustomizer({
         serviceId: product.id,
         selectedSlot,
         onSlotSelect: (slot) => setSelectedSlot(slot),
-        participantCount: quantity
+        participantCount: quantity,
+        currency
       }
     ),
     hasVariants && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9210,6 +9293,7 @@ function ProductCustomizer({
         variants: product.variants,
         variantAxes: product.variant_axes,
         basePrice: product.default_price,
+        currency,
         selectedVariantId,
         onVariantChange: handleVariantChange,
         productName: product.name
@@ -9220,7 +9304,8 @@ function ProductCustomizer({
       {
         addOns: product.add_ons,
         selectedOptions: selectedAddOnOptionIds,
-        onOptionsChange: setSelectedAddOnOptionIds
+        onOptionsChange: setSelectedAddOnOptionIds,
+        currency
       }
     ),
     product.billing_plans && product.billing_plans.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9228,6 +9313,7 @@ function ProductCustomizer({
       {
         productId: product.id,
         plans: product.billing_plans,
+        currency,
         onPlanSelect: setSelectedBillingPlan,
         selectedPlanId: selectedBillingPlan?.id ?? null,
         showOneTimePurchase: true
@@ -9237,7 +9323,8 @@ function ProductCustomizer({
       VolumePricing,
       {
         tiers: product.quantity_pricing,
-        currentQuantity: quantity
+        currentQuantity: quantity,
+        currency
       }
     ),
     product.input_fields && product.input_fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9245,12 +9332,13 @@ function ProductCustomizer({
       {
         fields: product.input_fields,
         values: customerInputValues,
-        onChange: setCustomerInputValues
+        onChange: setCustomerInputValues,
+        currency
       }
     ),
     product.deposit_type && product.deposit_type !== "none" && product.deposit_amount && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-customizer-deposit": true, className: cn("text-sm text-muted-foreground", classNames?.depositInfo), children: product.deposit_type === "fixed" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
       "Deposit required: ",
-      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount })
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount, currency })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
       "Deposit required: ",
       chunk7Y2O3E4D_js.parsePrice(product.deposit_amount),
@@ -9314,7 +9402,7 @@ function ProductCustomizer({
               ] })
             ] }),
             product.quantity_pricing && product.quantity_pricing.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-unit-price": true, className: "text-sm text-muted-foreground text-right shrink-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getUnitPriceAtQuantity(product.quantity_pricing, quantity, chunk7Y2O3E4D_js.parsePrice(product.default_price)), className: "font-medium text-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getUnitPriceAtQuantity(product.quantity_pricing, quantity, chunk7Y2O3E4D_js.parsePrice(product.default_price)), currency, className: "font-medium text-foreground" }),
               " ea."
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -9331,7 +9419,7 @@ function ProductCustomizer({
                 ),
                 children: isAdded ? "Added to Cart" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   "Add to Cart \xB7 ",
-                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayTotalPrice })
+                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayTotalPrice, currency })
                 ] })
               }
             )
@@ -9360,9 +9448,15 @@ function ProductImageGallery({
     [images]
   );
   const [selectedImage, setSelectedImage] = React14.useState(0);
+  const [fadeIn, setFadeIn] = React14.useState(true);
   React14.useEffect(() => {
     setSelectedImage(0);
   }, [normalizedImages.length, productName]);
+  React14.useEffect(() => {
+    setFadeIn(false);
+    const id = requestAnimationFrame(() => setFadeIn(true));
+    return () => cancelAnimationFrame(id);
+  }, [selectedImage]);
   if (normalizedImages.length === 0) {
     return null;
   }
@@ -9378,7 +9472,13 @@ function ProductImageGallery({
           {
             src: activeImage,
             alt: productName,
-            style: { width: "100%", height: "100%", objectFit: "cover" },
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: fadeIn ? 1 : 0,
+              transition: "opacity 300ms ease"
+            },
             "data-cimplify-image-gallery-active": true
           }
         )
@@ -10080,7 +10180,7 @@ function SaleBadge({
           "%"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-sale-label": true, className: classNames?.label, children: badgeText }),
-        showOriginalPrice && onSale && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-sale-original-price": true, className: classNames?.originalPrice, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product) }) })
+        showOriginalPrice && onSale && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-sale-original-price": true, className: classNames?.originalPrice, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), currency: chunk7Y2O3E4D_js.getProductCurrency(product) }) })
       ]
     }
   );
@@ -10375,6 +10475,7 @@ function ProductSheet({
             Price,
             {
               amount: fullProduct.default_price,
+              currency: chunk7Y2O3E4D_js.getProductCurrency(fullProduct),
               className: classNames?.price
             }
           )
@@ -10541,6 +10642,7 @@ function FoodProductCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const tags = product.tags || [];
   const isSignature = product.metadata?.is_signature === true;
   const isNew = product.metadata?.is_new === true;
@@ -10567,8 +10669,8 @@ function FoodProductCard({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3", children: [
         isComposite ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold", children: [
           "From ",
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-sm font-bold" }),
         tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) })
       ] })
     ] })
@@ -10596,6 +10698,7 @@ function RetailProductCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const outOfStock = product.inventory_status?.in_stock === false;
   const onSale = chunk7Y2O3E4D_js.isOnSale(product);
   const swatches = getColorSwatches(product);
@@ -10614,8 +10717,8 @@ function RetailProductCard({
       product.vendor && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest", children: product.vendor }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate", children: product.name }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
-        onSale && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), className: "text-xs text-muted-foreground line-through" })
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-sm font-bold" }),
+        onSale && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), currency, className: "text-xs text-muted-foreground line-through" })
       ] }),
       swatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 mt-2.5", children: swatches.map((name) => /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -10630,8 +10733,7 @@ function RetailProductCard({
   ] });
 }
 function PriceRange({ product, currency, className }) {
-  const context = useOptionalCimplify();
-  const resolvedCurrency = currency ?? context?.displayCurrency ?? "USD";
+  const resolvedCurrency = currency ?? chunk7Y2O3E4D_js.getProductCurrency(product);
   const range = chunk7Y2O3E4D_js.getPriceRange(product);
   if (!range) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-price-range": true, className, children: chunk7Y2O3E4D_js.formatPriceRange(range.min, range.max, resolvedCurrency) });
@@ -10644,6 +10746,7 @@ function WholesaleProductCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
   const status = product.inventory_status;
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
@@ -10663,7 +10766,7 @@ function WholesaleProductCard({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
       product.sku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground font-mono", children: product.sku }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate", children: product.name }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: hasTiers ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, className: "text-sm font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: hasTiers ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, className: "text-sm font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-sm font-bold" }) }),
       status && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
           "w-[7px] h-[7px] rounded-full shrink-0",
@@ -10691,6 +10794,7 @@ function DigitalProductCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const typeBadge = product.digital_type ? TYPE_BADGES[product.digital_type] : null;
   const isTicket = product.digital_type === "event_ticket";
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
@@ -10704,7 +10808,7 @@ function DigitalProductCard({
       ] }),
       !isTicket && product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-sm font-bold" }),
         product.file_type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: [
           product.file_type.toUpperCase(),
           product.file_size_mb != null && ` \xB7 ${product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)}GB` : `${product.file_size_mb}MB`}`
@@ -10721,6 +10825,7 @@ function BundleProductCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const components = product.components || [];
   const componentCount = components.length;
   const onSale = chunk7Y2O3E4D_js.isOnSale(product);
@@ -10749,9 +10854,9 @@ function BundleProductCard({
         components.map((c) => c.product_name || c.product_id).join(", ")
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-sm font-bold" }),
         onSale && product.bundle_price && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), className: "text-xs text-muted-foreground line-through" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), currency, className: "text-xs text-muted-foreground line-through" }),
           discount != null && discount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-semibold text-emerald-600", children: [
             "Save ",
             discount,
@@ -10771,6 +10876,7 @@ function CompositeProductCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const groups = product.groups || [];
   const groupCount = groups.length;
   groups.reduce((sum, g) => sum + g.components.length, 0);
@@ -10798,7 +10904,7 @@ function CompositeProductCard({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold", children: [
           "From ",
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price })
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency })
         ] }),
         tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tags[0] })
       ] })
@@ -10822,12 +10928,13 @@ function StandardServiceCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
       product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 left-3 inline-flex items-center gap-1 text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: formatDuration3(product.duration_minutes, product.duration_unit) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }) })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
@@ -10839,7 +10946,7 @@ function StandardServiceCard({
           hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-border", children: "\xB7" }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount, currency }),
               " deposit"
             ] })
           ] })
@@ -10876,6 +10983,7 @@ function CompactServiceCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   const hasBillingPlans = product.billing_plans && product.billing_plans.length > 0;
   const href = `/products/${product.slug}`;
@@ -10891,14 +10999,14 @@ function CompactServiceCard({
           "Available"
         ] }),
         hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount, currency }),
           " deposit"
         ] }),
         hasBillingPlans && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-0.5 text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded", children: "Subscription" })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-sm font-bold" }),
       /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
     ] })
   ] });
@@ -10924,6 +11032,7 @@ function ScheduleServiceCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const href = `/products/${product.slug}`;
   const durationLabel = product.duration_minutes != null ? formatDuration2(product.duration_minutes, product.duration_unit) : null;
   const displaySlots = (slots || []).slice(0, 3);
@@ -10943,7 +11052,7 @@ function ScheduleServiceCard({
             durationLabel,
             " \xB7 "
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price })
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency })
         ] })
       ] }),
       image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) })
@@ -10995,6 +11104,7 @@ function RentalServiceCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   const unit = product.duration_unit ? UNIT_LABELS2[product.duration_unit] || product.duration_unit : "day";
   const status = product.inventory_status;
@@ -11006,7 +11116,7 @@ function RentalServiceCard({
         unit
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency }),
         "/",
         unit
       ] }),
@@ -11028,7 +11138,7 @@ function RentalServiceCard({
           product.min_order_quantity > 1 ? "s" : ""
         ] }),
         hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount, currency }),
           " deposit"
         ] })
       ] }),
@@ -11064,6 +11174,7 @@ function AccommodationCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
   const cancellationHours = product.cancellation_window_minutes ? Math.floor(product.cancellation_window_minutes / 60) : null;
   const tags = product.tags || [];
@@ -11072,7 +11183,7 @@ function AccommodationCard({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: "Per night" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency }),
         "/night"
       ] })
     ] }),
@@ -11129,6 +11240,7 @@ function LeaseServiceCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
   const unit = product.duration_unit ? UNIT_LABELS3[product.duration_unit] || product.duration_unit : "mo";
@@ -11142,7 +11254,7 @@ function LeaseServiceCard({
         unit
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency }),
         "/",
         unit
       ] })
@@ -11161,7 +11273,7 @@ function LeaseServiceCard({
           product.min_order_quantity > 1 ? "s" : ""
         ] }),
         hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount, currency }),
           " deposit"
         ] }),
         cancellationHours != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground", children: cancellationHours >= 720 ? `${Math.floor(cancellationHours / 720)} month notice` : `${cancellationHours}h notice` })
@@ -11202,6 +11314,7 @@ function SubscriptionCard({
   className
 }) {
   const image = product.image_url || product.images?.[0] || "";
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const plans = product.billing_plans || [];
   const primaryPlan = plans[0];
   const frequency = primaryPlan?.frequency ? FREQUENCY_LABELS2[primaryPlan.frequency] || `/${primaryPlan.frequency}` : "/mo";
@@ -11211,7 +11324,7 @@ function SubscriptionCard({
     /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency }),
         frequency
       ] }),
       hasTrial && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50/90 text-emerald-700 border border-emerald-200/50 backdrop-blur px-2 py-0.5 rounded-md", children: [
@@ -11240,7 +11353,7 @@ function SubscriptionCard({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
           hasTrial && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-emerald-600 font-medium", children: "Free trial" }),
           primaryPlan?.setup_fee != null && primaryPlan.setup_fee > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: primaryPlan.setup_fee }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: primaryPlan.setup_fee, currency }),
             " setup"
           ] })
         ] }),
@@ -11403,7 +11516,7 @@ function ProductCard({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-card-body": true, className: cn("p-4 flex flex-col gap-1", classNames?.body), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: product.name }),
         descriptionPreview && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: descriptionPreview }),
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: cn("text-sm font-medium text-foreground mt-1", classNames?.price) })
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency: chunk7Y2O3E4D_js.getProductCurrency(product), className: cn("text-sm font-medium text-foreground mt-1", classNames?.price) })
       ] })
     ] });
   })();
@@ -12746,6 +12859,7 @@ function BookingPage({
 }) {
   const { addItem } = useCart();
   const { client } = useCimplifyClient();
+  const currency = service.currency;
   const isReschedule = existingBooking !== void 0;
   const [step, setStep] = React14.useState(STEP.SELECT_SLOT);
   const [selectedSlot, setSelectedSlot] = React14.useState(null);
@@ -12887,10 +13001,10 @@ function BookingPage({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-service-info": true, className: classNames?.serviceInfo, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-name": true, children: service.name }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-duration": true, children: formatDuration2(service.duration_minutes, service.duration_unit) }),
-      service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-price": true, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) }),
+      service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-price": true, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price, currency }) }),
       hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-deposit-info": true, className: classNames?.depositInfo, children: [
         "Deposit: ",
-        depositType === "percentage" ? `${chunk7Y2O3E4D_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount })
+        depositType === "percentage" ? `${chunk7Y2O3E4D_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount, currency })
       ] }),
       cancellationMinutes !== void 0 && cancellationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-cancellation-policy": true, className: classNames?.cancellationPolicy, children: [
         "Free cancellation up to ",
@@ -12899,7 +13013,7 @@ function BookingPage({
       ] }),
       noShowFee !== void 0 && chunk7Y2O3E4D_js.parsePrice(noShowFee) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-no-show-fee": true, className: classNames?.cancellationPolicy, children: [
         "No-show fee: ",
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: noShowFee })
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: noShowFee, currency })
       ] })
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-error": true, className: classNames?.error, children: error }),
@@ -12912,7 +13026,8 @@ function BookingPage({
           participantCount,
           selectedSlot,
           onSlotSelect: handleSlotSelect,
-          showPrice
+          showPrice,
+          currency
         }
       )
     ] }),
@@ -12970,11 +13085,11 @@ function BookingPage({
         ] }),
         (selectedSlot.price || service.price) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: selectedSlot.price || service.price }) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: selectedSlot.price || service.price, currency }) })
         ] }),
         hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: cn(classNames?.summaryRow, classNames?.depositInfo), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Deposit" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: depositType === "percentage" ? `${chunk7Y2O3E4D_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount }) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: depositType === "percentage" ? `${chunk7Y2O3E4D_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount, currency }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13638,6 +13753,7 @@ function DefaultProductLayout({
 }) {
   const [selectedVariantId, setSelectedVariantId] = React14__default.default.useState();
   const images = chunkIQLJJW2H_js.resolveGallery(product, selectedVariantId);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasRange = product.quantity_pricing && product.quantity_pricing.length > 1 || product.variants && product.variants.length > 1;
   const onSale = chunk7Y2O3E4D_js.isOnSale(product);
   const hasPhysicalDetails = product.sku || product.vendor || product.material;
@@ -13659,15 +13775,15 @@ function DefaultProductLayout({
             /* @__PURE__ */ jsxRuntime.jsx(TagPills, { tags: product.tags || [] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-3", children: hasRange ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, className: "text-2xl font-extrabold" }) : onSale ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-extrabold" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), className: "text-lg text-muted-foreground line-through" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-3", children: hasRange ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, currency, className: "text-2xl font-extrabold" }) : onSale ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-extrabold" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunk7Y2O3E4D_js.getBasePrice(product), currency, className: "text-lg text-muted-foreground line-through" }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5", children: [
               "Save ",
               chunk7Y2O3E4D_js.getDiscountPercentage(product),
               "%"
             ] })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold" }) }),
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-semibold" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(InventoryBadge, { product }),
           /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           hasPhysicalDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-details": true, className: "space-y-1 text-sm text-muted-foreground", children: [
@@ -13726,6 +13842,7 @@ function FoodProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const tags = product.tags || [];
   const ingredients = getMetadataStringList(product.metadata, "ingredients");
   const pairings = getMetadataStringList(product.metadata, "pairings");
@@ -13751,7 +13868,7 @@ function FoodProductLayout({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold mt-2 block" })
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-semibold mt-2 block" })
           ] }),
           (product.calories != null || product.preparation_time_minutes != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-stats": true, className: "flex flex-wrap gap-4 py-3 border-y border-border", children: [
             product.preparation_time_minutes != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [
@@ -13800,6 +13917,7 @@ function WholesaleProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout": "wholesale", className: cn("space-y-8", className), children: [
     renderBreadcrumb?.(product),
@@ -13822,7 +13940,7 @@ function WholesaleProductLayout({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: hasTiers ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, className: "text-2xl font-extrabold" }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: hasTiers ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, currency, className: "text-2xl font-extrabold" }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-semibold" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(InventoryBadge, { product }),
           product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-moq": true, className: "flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 text-sm text-amber-800", children: [
             "Minimum order quantity: ",
@@ -13883,6 +14001,7 @@ function ServiceProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   const depositAmount = hasDeposit ? chunk7Y2O3E4D_js.parsePrice(product.deposit_amount) : 0;
   const cancellationHours = product.cancellation_window_minutes ? Math.floor(product.cancellation_window_minutes / 60) : null;
@@ -13902,12 +14021,12 @@ function ServiceProductLayout({
           /* @__PURE__ */ jsxRuntime.jsx(TagPills, { tags: product.tags || [] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-bold text-primary mt-2 block" })
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-bold text-primary mt-2 block" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-service-info": true, className: "flex flex-wrap gap-2", children: [
             product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: formatDuration2(product.duration_minutes, product.duration_unit) }),
             hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount, currency }),
               " deposit"
             ] }),
             product.general_service_capacity != null && product.general_service_capacity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: [
@@ -13946,10 +14065,10 @@ function ServiceProductLayout({
             ] }),
             product.no_show_fee && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
               "No-show fee: ",
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.no_show_fee, className: "font-medium text-foreground" })
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.no_show_fee, currency, className: "font-medium text-foreground" })
             ] }),
             hasDeposit && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: product.deposit_type === "fixed" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount, className: "font-medium text-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount, currency, className: "font-medium text-foreground" }),
               " deposit charged at booking"
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               chunk7Y2O3E4D_js.parsePrice(product.deposit_amount),
@@ -13984,6 +14103,7 @@ function DigitalProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const typeLabel = product.digital_type ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type : "Digital product";
   const isTicket = product.digital_type === "event_ticket";
   const isAccessPass = product.digital_type === "access_pass";
@@ -14007,7 +14127,7 @@ function DigitalProductLayout({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-bold mt-2 block" })
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-bold mt-2 block" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
           isDownload && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-delivery": true, className: "flex items-center gap-3 px-4 py-3 bg-muted rounded-lg", children: [
@@ -14110,6 +14230,7 @@ function BundleProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const components = product.components || [];
   const onSale = chunk7Y2O3E4D_js.isOnSale(product);
   const discount = chunk7Y2O3E4D_js.getDiscountPercentage(product);
@@ -14144,8 +14265,8 @@ function BundleProductLayout({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-3 mt-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-bold" }),
-              onSale && baseTotal > 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: baseTotal, className: "text-lg text-muted-foreground line-through" })
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "text-2xl font-bold" }),
+              onSale && baseTotal > 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: baseTotal, currency, className: "text-lg text-muted-foreground line-through" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),
@@ -14161,13 +14282,13 @@ function BundleProductLayout({
                 ] }),
                 component.allow_variant_choice && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-violet-600 font-medium", children: "Choose variant" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.effective_price ?? 0, className: "text-sm text-muted-foreground shrink-0" })
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.effective_price ?? 0, currency, className: "text-sm text-muted-foreground shrink-0" })
             ] }, component.id)) })
           ] }),
           savings > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-savings": true, className: "flex items-center gap-2 p-3 bg-emerald-50 border border-emerald-200/60 text-sm text-emerald-800", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
             "You save ",
-            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: savings, className: "font-semibold" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: savings, currency, className: "font-semibold" }),
             " with this bundle"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
@@ -14193,6 +14314,7 @@ function CompositeProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
+  const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const groups = product.groups || [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout": "composite", className: cn("space-y-8", className), children: [
     renderBreadcrumb?.(product),
@@ -14220,7 +14342,7 @@ function CompositeProductLayout({
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg text-muted-foreground mt-2", children: [
               "From ",
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "font-semibold text-foreground" })
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, currency, className: "font-semibold text-foreground" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: product.description, "data-cimplify-product-layout-description": true }),