@freehold/payments 0.0.1

package/dist/index.js

@@ -0,0 +1,595 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/utils/format-currency.ts
+function formatCurrency(amount, currency = "USD", locale = "en-US") {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(amount);
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var orderSummaryVariants = classVarianceAuthority.cva(
+  ["w-full font-sans"],
+  {
+    variants: {
+      variant: {
+        default: "space-y-3",
+        compact: "space-y-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var OrderSummary = react.forwardRef(
+  ({
+    className,
+    variant,
+    items,
+    subtotal,
+    tax,
+    discount,
+    total,
+    currency,
+    ...props
+  }, ref) => {
+    const isCompact = variant === "compact";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(orderSummaryVariants({ variant }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", isCompact && "space-y-1"), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-start justify-between gap-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                      "text-[#2C2824] font-medium truncate",
+                      isCompact ? "text-sm" : "text-sm"
+                    ), children: item.name }),
+                    item.quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-[#8A847A] shrink-0", children: [
+                      "x",
+                      item.quantity
+                    ] })
+                  ] }),
+                  !isCompact && item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[#5C574F] mt-0.5 truncate", children: item.description })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[#2C2824] font-medium shrink-0", children: formatCurrency(item.unitPrice * item.quantity, currency) })
+              ]
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[rgba(184,164,142,0.15)]" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1.5", isCompact && "space-y-1"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm text-[#5C574F]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Subtotal" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency(subtotal, currency) })
+            ] }),
+            discount !== void 0 && discount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm text-[#8DB580]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "-",
+                formatCurrency(discount, currency)
+              ] })
+            ] }),
+            tax !== void 0 && tax > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm text-[#5C574F]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tax" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency(tax, currency) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[rgba(184,164,142,0.15)] pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[#2C2824]", children: "Total" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-[#2C2824]", children: formatCurrency(total, currency) })
+            ] }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+OrderSummary.displayName = "OrderSummary";
+function VisaIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "32", rx: "4", fill: "#1A1F71" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.3 21.5h-2.9l1.8-11h2.9l-1.8 11zm-4.2-11l-2.7 7.5-.3-1.6-1-5.1s-.1-.8-1.1-.8H7.1l-.1.3s1.2.2 2.5.9l2.1 8h3l4.5-10.2h-3zm22.4 11h2.6l-2.3-11h-2.3c-.8 0-1.1.5-1.1.5l-4.3 10.5h3l.6-1.6h3.7l.3 1.6zm-3.2-3.9l1.5-4.2.9 4.2h-2.4zm-5.3-4.5l.4-2.4s-1.3-.5-2.6-.5c-1.4 0-4.8.6-4.8 3.7 0 2.9 4 2.9 4 4.4s-3.6 1.2-4.8.3l-.4 2.5s1.3.6 3.3.6c2 0 4.9-1 4.9-3.8 0-2.9-4-3.2-4-4.4 0-1.3 2.8-1.1 4-.4z", fill: "#fff" })
+  ] });
+}
+function MastercardIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "32", rx: "4", fill: "#252525" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "16", r: "8", fill: "#EB001B" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "29", cy: "16", r: "8", fill: "#F79E1B" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 10.3a8 8 0 0 1 0 11.4 8 8 0 0 1 0-11.4z", fill: "#FF5F00" })
+  ] });
+}
+function AmexIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "32", rx: "4", fill: "#2E77BC" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 16h34M11 11l-4 5 4 5m26-10l4 5-4 5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: "24", y: "18", textAnchor: "middle", fill: "#fff", fontSize: "7", fontWeight: "bold", fontFamily: "sans-serif", children: "AMEX" })
+  ] });
+}
+function ApplePayIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "32", rx: "4", fill: "#000" }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: "24", y: "18.5", textAnchor: "middle", fill: "#fff", fontSize: "9", fontWeight: "600", fontFamily: "system-ui, sans-serif", children: " Pay" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 10.5c.5-.6.8-1.5.7-2.3-.7 0-1.6.5-2.1 1.1-.4.5-.8 1.4-.7 2.2.8.1 1.6-.4 2.1-1z", fill: "#fff" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.2 11.6c-1.2-.1-2.2.7-2.7.7s-1.4-.6-2.4-.6c-1.2 0-2.3.7-2.9 1.8-1.3 2.2-.3 5.4.9 7.2.6.9 1.3 1.8 2.3 1.8s1.3-.6 2.4-.6 1.4.6 2.4.6 1.6-.9 2.2-1.8c.7-1 1-2 1-2s-1.9-.7-1.9-2.8c0-1.8 1.5-2.6 1.5-2.6-.8-1.2-2-1.3-2.5-1.4l-.3-.3z", fill: "#fff" })
+  ] });
+}
+function GooglePayIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "32", rx: "4", fill: "#fff", stroke: "#E5E5E5", strokeWidth: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24.5 17.2v3.1h-1v-7.7h2.6c.6 0 1.2.2 1.7.7.5.4.7 1 .7 1.6 0 .7-.2 1.2-.7 1.6-.4.5-1 .7-1.7.7h-1.6zm0-3.6v2.7h1.7c.4 0 .7-.1 1-.4.3-.3.4-.6.4-1s-.1-.7-.4-1c-.3-.3-.6-.4-1-.4h-1.7z", fill: "#3C4043" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M32.1 14.8c.7 0 1.3.2 1.7.6.4.4.6 1 .6 1.7v3.2h-.9v-.7c-.4.6-.9.8-1.6.8-.7 0-1.2-.2-1.6-.5-.4-.4-.6-.8-.6-1.3 0-.5.2-.9.6-1.3.4-.3.9-.5 1.5-.5.6 0 1 .2 1.4.5v-.3c0-.4-.1-.7-.4-1-.3-.3-.6-.4-1-.4-.6 0-1 .2-1.4.7l-.7-.5c.5-.6 1.2-1 2.1-1h.3zm-1.2 4.5c.3.2.6.3 1 .3s.7-.1 1-.3c.3-.2.4-.5.4-.8 0-.3-.1-.6-.4-.8-.3-.2-.6-.3-1-.3s-.7.1-1 .3c-.3.2-.4.5-.4.8 0 .3.1.6.4.8z", fill: "#3C4043" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M39 14.9l-3.2 7.3h-1l1.2-2.6-2.1-4.7h1.1l1.5 3.5 1.5-3.5h1z", fill: "#3C4043" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.7 16.3c0-.3 0-.6-.1-.9h-4.2v1.7h2.4c-.1.6-.4 1-.8 1.4v1.1h1.3c.8-.7 1.3-1.8 1.4-3.3z", fill: "#4285F4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.4 20.3c1.1 0 2.1-.4 2.8-1l-1.3-1c-.4.3-.9.4-1.4.4-1.1 0-2-.7-2.3-1.7H11.8v1.1c.7 1.3 2 2.2 3.6 2.2z", fill: "#34A853" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.1 16.9c-.2-.5-.2-1.1 0-1.6v-1.1h-1.4c-.5 1-.5 2.2 0 3.3l1.4-1.1v.5z", fill: "#FBBC04" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.4 13.3c.6 0 1.2.2 1.6.6l1.2-1.2c-.8-.7-1.7-1.1-2.8-1.1-1.6 0-2.9.9-3.6 2.2l1.4 1.1c.3-1 1.2-1.6 2.2-1.6z", fill: "#EA4335" })
+  ] });
+}
+function PayPalIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "32", rx: "4", fill: "#fff", stroke: "#E5E5E5", strokeWidth: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.5 8h5.3c2.4 0 4.1 1 3.7 3.5-.5 3.2-2.4 5-5.4 5h-1.4c-.4 0-.7.3-.8.7L20.2 22h-3c-.3 0-.4-.2-.4-.5L19 8.5c0-.3.2-.5.5-.5z", fill: "#003087" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 8h5.3c2.4 0 4.1 1 3.7 3.5-.5 3.2-2.4 5-5.4 5h-1.4c-.4 0-.7.3-.8.7L22.7 22h-3c-.3 0-.4-.2-.4-.5L21.5 8.5c0-.3.2-.5.5-.5z", fill: "#0070E0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M27.8 13.5c.1-.5 0-.9-.3-1.2-.3-.3-.9-.5-1.7-.5h-2.2l-.6 3.8h1.4c1.5 0 2.9-.8 3.4-2.1z", fill: "#fff" })
+  ] });
+}
+var iconMap = {
+  visa: VisaIcon,
+  mastercard: MastercardIcon,
+  amex: AmexIcon,
+  "apple-pay": ApplePayIcon,
+  "google-pay": GooglePayIcon,
+  paypal: PayPalIcon
+};
+var sizeClasses = {
+  sm: "w-8 h-5",
+  md: "w-10 h-6",
+  lg: "w-12 h-8"
+};
+var PaymentMethodIcon = react.forwardRef(
+  ({ className, method, size = "md", ...props }, ref) => {
+    const Icon = iconMap[method];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn("inline-flex items-center", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: sizeClasses[size], "aria-label": method })
+      }
+    );
+  }
+);
+PaymentMethodIcon.displayName = "PaymentMethodIcon";
+var securityBadgeVariants = classVarianceAuthority.cva(
+  ["inline-flex items-center gap-1.5 font-medium"],
+  {
+    variants: {
+      variant: {
+        default: "text-sm text-[#5C574F]",
+        subtle: "text-xs text-[#8A847A]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var SecurityBadge = react.forwardRef(
+  ({ className, variant, label = "Secure checkout", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(securityBadgeVariants({ variant }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+SecurityBadge.displayName = "SecurityBadge";
+var CheckoutDivider = react.forwardRef(
+  ({ className, label = "or", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative flex items-center py-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 border-t border-[rgba(184,164,142,0.2)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 text-xs font-medium text-[#8A847A] uppercase tracking-wider", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 border-t border-[rgba(184,164,142,0.2)]" })
+        ]
+      }
+    );
+  }
+);
+CheckoutDivider.displayName = "CheckoutDivider";
+var CheckoutHeader = react.forwardRef(
+  ({ className, title, description, logo, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-2", className), ...props, children: [
+      logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: logo }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-['DM_Serif_Display',serif] text-xl text-[#2C2824]", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[#5C574F]", children: description })
+    ] });
+  }
+);
+CheckoutHeader.displayName = "CheckoutHeader";
+var CheckoutFooter = react.forwardRef(
+  ({ className, termsUrl, privacyUrl, showPoweredBy = false, ...props }, ref) => {
+    const hasLinks = termsUrl || privacyUrl;
+    if (!hasLinks && !showPoweredBy) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center gap-2 pt-4 text-xs text-[#8A847A]",
+          className
+        ),
+        ...props,
+        children: [
+          hasLinks && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            termsUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: termsUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline underline-offset-2 hover:text-[#5C574F] transition-colors",
+                children: "Terms"
+              }
+            ),
+            termsUrl && privacyUrl && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[rgba(184,164,142,0.4)]", children: "\xB7" }),
+            privacyUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: privacyUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "underline underline-offset-2 hover:text-[#5C574F] transition-colors",
+                children: "Privacy"
+              }
+            )
+          ] }),
+          showPoweredBy && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-[#8A847A]/70", children: "Powered by Freehold" })
+        ]
+      }
+    );
+  }
+);
+CheckoutFooter.displayName = "CheckoutFooter";
+var pricingCardVariants = classVarianceAuthority.cva(
+  [
+    "relative flex flex-col",
+    "bg-white rounded-[14px]",
+    "border",
+    "p-6 sm:p-8",
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-[rgba(184,164,142,0.15)]",
+          "shadow-[0_2px_4px_0_rgba(184,164,142,0.08),0_4px_8px_0_rgba(44,40,36,0.04)]"
+        ],
+        featured: [
+          "border-[#B8A48E]",
+          "shadow-[0_4px_8px_0_rgba(184,164,142,0.08),0_8px_16px_-4px_rgba(44,40,36,0.06)]",
+          "scale-[1.02]",
+          "z-10"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var billingPeriodLabels = {
+  monthly: "/mo",
+  yearly: "/yr",
+  "one-time": ""
+};
+var PricingCard = react.forwardRef(
+  ({
+    className,
+    variant: variantProp,
+    name,
+    description,
+    price,
+    currency,
+    billingPeriod,
+    billingLabel,
+    features,
+    badge,
+    ctaLabel,
+    featured,
+    originalPrice,
+    ctaSlot,
+    onCtaClick,
+    ...props
+  }, ref) => {
+    const resolvedVariant = variantProp ?? (featured ? "featured" : "default");
+    const periodLabel = billingLabel || billingPeriodLabels[billingPeriod] || "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(pricingCardVariants({ variant: resolvedVariant }), className),
+        ...props,
+        children: [
+          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "inline-block px-3 py-1 rounded-full text-xs font-medium tracking-wide whitespace-nowrap",
+                resolvedVariant === "featured" ? "bg-[#2C2824] text-[#FAF9F6]" : "bg-[#F5F3EF] text-[#5C574F] border border-[rgba(184,164,142,0.25)]"
+              ),
+              children: badge
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", badge && "mt-2"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-['DM_Serif_Display',serif] text-xl text-[#2C2824]", children: name }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[#5C574F]", children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-6", children: [
+            originalPrice !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[#8A847A] line-through mr-2", children: formatCurrency(originalPrice, currency) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['DM_Serif_Display',serif] text-4xl text-[#2C2824]", children: formatCurrency(price, currency) }),
+              periodLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[#8A847A]", children: periodLabel })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[rgba(184,164,142,0.15)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex-1 space-y-3 py-6", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2.5", children: [
+            feature.included !== false ? /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "#8DB580",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "shrink-0 mt-0.5",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "#C4796B",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "shrink-0 mt-0.5",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm",
+                  feature.included !== false ? "text-[#2C2824]" : "text-[#8A847A]"
+                ),
+                children: feature.text
+              }
+            )
+          ] }, index)) }),
+          ctaSlot ?? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onCtaClick,
+              className: cn(
+                "w-full py-2.5 px-4 rounded-[10px] text-sm font-medium",
+                "transition-colors duration-200",
+                resolvedVariant === "featured" ? "bg-[#2C2824] text-[#FAF9F6] hover:bg-[#3d3832]" : "bg-[#F5F3EF] text-[#2C2824] hover:bg-[#EFECE6] border border-[rgba(184,164,142,0.25)]"
+              ),
+              children: ctaLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PricingCard.displayName = "PricingCard";
+var CheckoutCard = react.forwardRef(
+  ({ className, header, footer, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full max-w-md mx-auto",
+          "bg-white rounded-[14px]",
+          "border border-[rgba(184,164,142,0.15)]",
+          "shadow-[0_2px_4px_0_rgba(184,164,142,0.08),0_8px_24px_0_rgba(44,40,36,0.06)]",
+          "p-6 sm:p-8",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          header && /* @__PURE__ */ jsxRuntime.jsx(CheckoutHeader, { ...header }),
+          children,
+          footer && /* @__PURE__ */ jsxRuntime.jsx(CheckoutFooter, { ...footer })
+        ] })
+      }
+    );
+  }
+);
+CheckoutCard.displayName = "CheckoutCard";
+var CheckoutFullScreen = react.forwardRef(
+  ({ className, header, footer, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "min-h-screen bg-[#FAF9F6]",
+          "flex items-center justify-center",
+          "px-4 py-12",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "bg-white rounded-[14px]",
+              "border border-[rgba(184,164,142,0.15)]",
+              "shadow-[0_2px_4px_0_rgba(184,164,142,0.08),0_8px_24px_0_rgba(44,40,36,0.06)]",
+              "p-6 sm:p-8"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+              header && /* @__PURE__ */ jsxRuntime.jsx(CheckoutHeader, { ...header }),
+              children,
+              footer && /* @__PURE__ */ jsxRuntime.jsx(CheckoutFooter, { ...footer })
+            ] })
+          }
+        ) })
+      }
+    );
+  }
+);
+CheckoutFullScreen.displayName = "CheckoutFullScreen";
+var CheckoutSplitScreen = react.forwardRef(
+  ({ className, left, header, footer, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "min-h-screen flex flex-col md:flex-row",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "md:w-1/2 bg-[#2C2824] text-[#FAF9F6]",
+                "flex items-center justify-center",
+                "p-8 md:p-12 lg:p-16",
+                "min-h-[240px] md:min-h-screen"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-md", children: left })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "md:w-1/2 bg-white",
+                "flex items-center justify-center",
+                "p-6 sm:p-8 md:p-12 lg:p-16"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+                header && /* @__PURE__ */ jsxRuntime.jsx(CheckoutHeader, { ...header }),
+                children,
+                footer && /* @__PURE__ */ jsxRuntime.jsx(CheckoutFooter, { ...footer })
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CheckoutSplitScreen.displayName = "CheckoutSplitScreen";
+var columnClasses = {
+  2: "md:grid-cols-2 max-w-3xl",
+  3: "md:grid-cols-2 lg:grid-cols-3 max-w-5xl",
+  4: "md:grid-cols-2 lg:grid-cols-4 max-w-6xl"
+};
+var PricingGrid = react.forwardRef(
+  ({ className, columns = 3, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid grid-cols-1 gap-6 items-start mx-auto",
+          columnClasses[columns],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+PricingGrid.displayName = "PricingGrid";
+
+exports.CheckoutCard = CheckoutCard;
+exports.CheckoutDivider = CheckoutDivider;
+exports.CheckoutFooter = CheckoutFooter;
+exports.CheckoutFullScreen = CheckoutFullScreen;
+exports.CheckoutHeader = CheckoutHeader;
+exports.CheckoutSplitScreen = CheckoutSplitScreen;
+exports.OrderSummary = OrderSummary;
+exports.PaymentMethodIcon = PaymentMethodIcon;
+exports.PricingCard = PricingCard;
+exports.PricingGrid = PricingGrid;
+exports.SecurityBadge = SecurityBadge;
+exports.cn = cn;
+exports.formatCurrency = formatCurrency;
+exports.orderSummaryVariants = orderSummaryVariants;
+exports.pricingCardVariants = pricingCardVariants;
+exports.securityBadgeVariants = securityBadgeVariants;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map