@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/checkout/components/OrderSummary.js

@@ -0,0 +1,293 @@
+import { categoryTokens as e, statusTokens as t } from "../../../shared/utils/tokens.js";
+import { formatCurrency as n } from "../../../shared/utils/format.js";
+import { useMemo as r } from "react";
+import { Blocks as i, Check as a, Coins as o, Minus as s, Package as c, Plus as l, Receipt as u, ShoppingCart as d, Trash2 as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Accordion as _, AccordionContent as v, AccordionItem as y, AccordionTrigger as b } from "@burdenoff/fe-libs/ui";
+//#region src/billing/modules/checkout/components/OrderSummary.tsx
+var x = 100, S = ({ items: S, subtotal: C, discountAmount: w, taxAmount: T, taxRate: E, taxType: D, total: O, currency: k, showInCredits: A = !1, isCalculatingTax: j = !1, onUpdateQuantity: M, onRemoveItem: N, isEditable: P = !0 }) => {
+	let { t: F } = g(), I = (e, t) => {
+		let n = F(e);
+		return n === e ? t : n;
+	}, L = (e) => {
+		switch (e) {
+			case "PLAN": return /* @__PURE__ */ m(c, { className: "h-5 w-5" });
+			case "ADDON": return /* @__PURE__ */ m(i, { className: "h-5 w-5" });
+			case "CREDITS": return /* @__PURE__ */ m(o, { className: "h-5 w-5" });
+			case "ORDER": return /* @__PURE__ */ m(d, { className: "h-5 w-5" });
+			default: return /* @__PURE__ */ m(c, { className: "h-5 w-5" });
+		}
+	}, R = (t) => ({
+		PLAN: {
+			label: "Plan",
+			className: `${e.plan.bg} ${e.plan.text}`
+		},
+		ADDON: {
+			label: "Add-on",
+			className: `${e.addon.bg} ${e.addon.text}`
+		},
+		CREDITS: {
+			label: "Credits",
+			className: `${e.credits.bg} ${e.credits.text}`
+		},
+		ORDER: {
+			label: "Store Order",
+			className: "bg-status-success-bg-subtle text-status-success-text"
+		}
+	})[t], z = (e) => e * x, B = r(() => S.reduce((e, t) => e + (t.priceUSD ?? t.price) * t.quantity, 0), [S]), V = (e, t) => A ? `${z(t?.priceUSD ?? e).toLocaleString(void 0, {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 0
+	})} Credits` : n(e, k), H = (e, t) => typeof t == "boolean" ? t ? "Included" : "Not included" : typeof t == "number" ? t === -1 || t === Infinity ? "Unlimited" : t.toLocaleString() : String(t), U = (e) => {
+		let t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = t.get(n.name);
+			if (e) {
+				let t = { ...e.limits };
+				if (n.limits) for (let [e, r] of Object.entries(n.limits)) {
+					let n = t[e];
+					typeof r == "number" && typeof n == "number" ? n === -1 || r === -1 ? t[e] = -1 : t[e] = n + r : t[e] = r;
+				}
+				e.limits = t;
+			} else t.set(n.name, {
+				...n,
+				limits: n.limits ? { ...n.limits } : void 0
+			});
+		}
+		return Array.from(t.values());
+	}, W = (e) => !e || e.length === 0 ? null : /* @__PURE__ */ m("ul", {
+		className: "space-y-2",
+		children: U(e).map((e) => /* @__PURE__ */ h("li", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ m(a, { className: `h-4 w-4 ${t.success.icon} shrink-0 mt-0.5` }), /* @__PURE__ */ h("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ m("span", {
+					className: "text-sm text-foreground",
+					children: e.name
+				}), e.limits && Object.keys(e.limits).length > 0 && /* @__PURE__ */ m("div", {
+					className: "mt-1 flex flex-wrap gap-1.5",
+					children: Object.entries(e.limits).map(([e, t]) => /* @__PURE__ */ h("span", {
+						className: "inline-flex items-center text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground",
+						children: [
+							e,
+							": ",
+							H(e, t)
+						]
+					}, e))
+				})]
+			})]
+		}, e.id))
+	});
+	return /* @__PURE__ */ h("div", {
+		className: "rounded-lg border border-border bg-card overflow-hidden",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "px-4 py-3 border-b border-border bg-muted/30",
+				children: /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ m(u, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ m("h3", {
+						className: "font-semibold text-foreground",
+						children: I("billing.checkout.orderSummary", "Order Summary")
+					})]
+				})
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "divide-y divide-border",
+				children: S.length === 0 ? /* @__PURE__ */ h("div", {
+					className: "p-6 text-center",
+					children: [/* @__PURE__ */ m(c, { className: "mx-auto h-8 w-8 text-muted-foreground" }), /* @__PURE__ */ m("p", {
+						className: "mt-2 text-sm text-muted-foreground",
+						children: "No items in checkout"
+					})]
+				}) : S.map((e) => {
+					let t = R(e.type), n = e.features && e.features.length > 0;
+					return /* @__PURE__ */ m("div", {
+						className: "p-4",
+						children: /* @__PURE__ */ h("div", {
+							className: "flex items-start gap-3",
+							children: [/* @__PURE__ */ m("div", {
+								className: "p-2 rounded-lg bg-muted text-muted-foreground shrink-0",
+								children: L(e.type)
+							}), /* @__PURE__ */ h("div", {
+								className: "flex-1 min-w-0",
+								children: [
+									/* @__PURE__ */ h("div", {
+										className: "flex items-center gap-2 flex-wrap",
+										children: [/* @__PURE__ */ m("span", {
+											className: "font-medium text-foreground",
+											children: e.name
+										}), /* @__PURE__ */ m("span", {
+											className: `text-xs px-1.5 py-0.5 rounded ${t.className}`,
+											children: t.label
+										})]
+									}),
+									e.description && /* @__PURE__ */ m("p", {
+										className: "text-sm text-muted-foreground mt-0.5 line-clamp-2",
+										children: e.description
+									}),
+									/* @__PURE__ */ h("div", {
+										className: "flex items-center justify-between mt-3",
+										children: [P && e.type !== "PLAN" ? /* @__PURE__ */ h("div", {
+											className: "flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ m("button", {
+													type: "button",
+													onClick: () => M?.(e.id, e.quantity - 1),
+													disabled: e.quantity <= 1,
+													className: "p-1 rounded border border-border hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed",
+													"aria-label": `Decrease ${e.name} quantity`,
+													children: /* @__PURE__ */ m(s, { className: "h-3 w-3" })
+												}),
+												/* @__PURE__ */ m("span", {
+													className: "w-8 text-center text-sm font-medium",
+													children: e.quantity
+												}),
+												/* @__PURE__ */ m("button", {
+													type: "button",
+													onClick: () => M?.(e.id, e.quantity + 1),
+													className: "p-1 rounded border border-border hover:bg-muted",
+													"aria-label": `Increase ${e.name} quantity`,
+													children: /* @__PURE__ */ m(l, { className: "h-3 w-3" })
+												})
+											]
+										}) : /* @__PURE__ */ h("span", {
+											className: "text-sm text-muted-foreground",
+											children: ["Qty: ", e.quantity]
+										}), /* @__PURE__ */ h("div", {
+											className: "flex items-center gap-3",
+											children: [/* @__PURE__ */ m("span", {
+												className: "font-medium text-foreground",
+												children: V(e.price * e.quantity, e)
+											}), P && N && /* @__PURE__ */ m("button", {
+												type: "button",
+												onClick: () => N(e.id),
+												className: "p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+												"aria-label": `Remove ${e.name}`,
+												children: /* @__PURE__ */ m(f, { className: "h-4 w-4" })
+											})]
+										})]
+									}),
+									n && (() => {
+										let t = U(e.features).length;
+										return /* @__PURE__ */ m(_, {
+											type: "single",
+											collapsible: !0,
+											className: "mt-3",
+											children: /* @__PURE__ */ h(y, {
+												value: "features",
+												className: "border-0",
+												children: [/* @__PURE__ */ m(b, {
+													className: "py-2 px-0 text-sm text-muted-foreground hover:text-foreground hover:no-underline",
+													children: /* @__PURE__ */ h("span", {
+														className: "flex items-center gap-1.5",
+														children: [
+															/* @__PURE__ */ m(a, { className: "h-3.5 w-3.5" }),
+															t,
+															" ",
+															t === 1 ? "feature" : "features",
+															" ",
+															"included"
+														]
+													})
+												}), /* @__PURE__ */ m(v, {
+													className: "pt-2 pb-0",
+													children: W(e.features)
+												})]
+											})
+										});
+									})()
+								]
+							})]
+						})
+					}, e.id);
+				})
+			}),
+			S.length > 0 && /* @__PURE__ */ m("div", {
+				className: "border-t border-border bg-muted/20",
+				children: /* @__PURE__ */ h("div", {
+					className: "p-4 space-y-2",
+					children: [
+						/* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ m("span", {
+								className: "text-muted-foreground",
+								children: I("billing.checkout.subtotal", "Subtotal")
+							}), /* @__PURE__ */ m("span", {
+								className: "text-foreground",
+								children: V(A ? B : C)
+							})]
+						}),
+						w > 0 && /* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ m("span", {
+								className: t.success.text,
+								children: "Discount"
+							}), /* @__PURE__ */ h("span", {
+								className: t.success.text,
+								children: ["-", V(w)]
+							})]
+						}),
+						j ? /* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ m("span", {
+								className: "text-muted-foreground",
+								children: "Tax"
+							}), /* @__PURE__ */ m("span", {
+								className: "text-muted-foreground animate-pulse",
+								children: "Calculating..."
+							})]
+						}) : T > 0 && E > 0 ? /* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ h("span", {
+								className: "text-muted-foreground",
+								children: [
+									D || "Tax",
+									" (",
+									(E * 100).toFixed(0),
+									"%)"
+								]
+							}), /* @__PURE__ */ m("span", {
+								className: "text-foreground",
+								children: V(T)
+							})]
+						}) : null,
+						/* @__PURE__ */ m("div", { className: "border-t border-border my-2" }),
+						A ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ m("span", {
+								className: "font-semibold text-foreground",
+								children: I("billing.checkout.total", "Total")
+							}), /* @__PURE__ */ h("span", {
+								className: "text-xl font-bold text-foreground",
+								children: [
+									z(B).toLocaleString(void 0, {
+										minimumFractionDigits: 0,
+										maximumFractionDigits: 0
+									}),
+									" ",
+									"Credits"
+								]
+							})]
+						}), /* @__PURE__ */ m("p", {
+							className: "text-xs text-center text-muted-foreground pt-2",
+							children: "Paying with account credits"
+						})] }) : /* @__PURE__ */ m(p, { children: /* @__PURE__ */ h("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ h("span", {
+								className: "font-semibold text-foreground",
+								children: ["Total in ", k]
+							}), /* @__PURE__ */ m("span", {
+								className: "text-xl font-bold text-foreground",
+								children: n(O, k)
+							})]
+						}) })
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { S as OrderSummary };
+
+//# sourceMappingURL=OrderSummary.js.map

package/dist/billing/modules/checkout/components/OrderSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/OrderSummary.tsx"],"sourcesContent":["/**\n * Order Summary Component\n * Displays checkout items, discounts, taxes, and total\n */\n\nimport { type FC, useMemo } from 'react';\nimport {\n  Package,\n  Blocks,\n  Coins,\n  Minus,\n  Plus,\n  Trash2,\n  Receipt,\n  Check,\n  ShoppingCart,\n} from 'lucide-react';\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from '@burdenoff/fe-libs/ui';\nimport type { CheckoutItem, Currency, CheckoutFeature } from '../types';\nimport { formatCurrency } from '../../../shared/utils/format';\nimport { categoryTokens, statusTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n/**\n * Credit conversion rate: How many credits equal 1 USD\n * This should match the backend creditRate.rateUSD (default 0.01 means 100 credits = $1)\n */\nconst CREDITS_PER_USD = 100;\n\ninterface OrderSummaryProps {\n  items: CheckoutItem[];\n  subtotal: number;\n  discountAmount: number;\n  taxAmount: number;\n  taxRate: number;\n  taxType?: string;\n  total: number;\n  currency: Currency;\n  showInCredits?: boolean;\n  /** Whether tax is being calculated */\n  isCalculatingTax?: boolean;\n  onUpdateQuantity?: (itemId: string, quantity: number) => void;\n  onRemoveItem?: (itemId: string) => void;\n  isEditable?: boolean;\n}\n\nexport const OrderSummary: FC<OrderSummaryProps> = ({\n  items,\n  subtotal,\n  discountAmount,\n  taxAmount,\n  taxRate,\n  taxType,\n  total,\n  currency,\n  showInCredits = false,\n  isCalculatingTax = false,\n  onUpdateQuantity,\n  onRemoveItem,\n  isEditable = true,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const getItemIcon = (type: CheckoutItem['type']) => {\n    switch (type) {\n      case 'PLAN':\n        return <Package className=\"h-5 w-5\" />;\n      case 'ADDON':\n        return <Blocks className=\"h-5 w-5\" />;\n      case 'CREDITS':\n        return <Coins className=\"h-5 w-5\" />;\n      case 'ORDER':\n        return <ShoppingCart className=\"h-5 w-5\" />;\n      default:\n        return <Package className=\"h-5 w-5\" />;\n    }\n  };\n\n  const getItemTypeBadge = (type: CheckoutItem['type']) => {\n    const badges = {\n      PLAN: {\n        label: 'Plan',\n        className: `${categoryTokens.plan.bg} ${categoryTokens.plan.text}`,\n      },\n      ADDON: {\n        label: 'Add-on',\n        className: `${categoryTokens.addon.bg} ${categoryTokens.addon.text}`,\n      },\n      CREDITS: {\n        label: 'Credits',\n        className: `${categoryTokens.credits.bg} ${categoryTokens.credits.text}`,\n      },\n      ORDER: {\n        label: 'Store Order',\n        className: 'bg-status-success-bg-subtle text-status-success-text',\n      },\n    };\n    return badges[type];\n  };\n\n  // Convert USD amount to credits\n  const usdToCredits = (usdAmount: number) => usdAmount * CREDITS_PER_USD;\n\n  // Subtotal in USD — used for credit conversion (items may be priced in local currency)\n  const subtotalUSD = useMemo(\n    () => items.reduce((sum, item) => sum + (item.priceUSD ?? item.price) * item.quantity, 0),\n    [items]\n  );\n\n  // Format amount - show in credits if paying with credits, otherwise in selected currency\n  // Items now have their prices stored in the selected currency (from currencyPrices)\n  // For credit conversion always use priceUSD (base USD price) — not the localized price.\n  const formatAmount = (amount: number, item?: CheckoutItem) => {\n    if (showInCredits) {\n      const usdAmount = item?.priceUSD ?? amount;\n      const creditsAmount = usdToCredits(usdAmount);\n      return `${creditsAmount.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })} Credits`;\n    }\n    // Format in selected currency (items now have localized prices)\n    return formatCurrency(amount, currency);\n  };\n\n  // Format limit value for display\n  const formatLimitValue = (_key: string, value: unknown): string => {\n    if (typeof value === 'boolean') {\n      return value ? 'Included' : 'Not included';\n    }\n    if (typeof value === 'number') {\n      if (value === -1 || value === Infinity) return 'Unlimited';\n      return value.toLocaleString();\n    }\n    return String(value);\n  };\n\n  // Merge duplicate features by name, combining numeric limits\n  const mergeFeatures = (features: CheckoutFeature[]): CheckoutFeature[] => {\n    const merged = new Map<string, CheckoutFeature>();\n\n    for (const feature of features) {\n      const existing = merged.get(feature.name);\n      if (existing) {\n        // Merge limits - add numeric values together\n        const mergedLimits: Record<string, number | string | boolean> = { ...existing.limits };\n        if (feature.limits) {\n          for (const [key, value] of Object.entries(feature.limits)) {\n            const existingValue = mergedLimits[key];\n            if (typeof value === 'number' && typeof existingValue === 'number') {\n              // Both are numbers - add them (unless unlimited)\n              if (existingValue === -1 || value === -1) {\n                mergedLimits[key] = -1; // Unlimited stays unlimited\n              } else {\n                mergedLimits[key] = existingValue + value;\n              }\n            } else {\n              // Non-numeric or first occurrence - just set\n              mergedLimits[key] = value;\n            }\n          }\n        }\n        existing.limits = mergedLimits;\n      } else {\n        // Clone the feature to avoid mutating original\n        merged.set(feature.name, {\n          ...feature,\n          limits: feature.limits ? { ...feature.limits } : undefined,\n        });\n      }\n    }\n\n    return Array.from(merged.values());\n  };\n\n  // Render features list\n  const renderFeatures = (features: CheckoutFeature[]) => {\n    if (!features || features.length === 0) return null;\n\n    const mergedFeatures = mergeFeatures(features);\n\n    return (\n      <ul className=\"space-y-2\">\n        {mergedFeatures.map((feature) => (\n          <li key={feature.id} className=\"flex items-start gap-2\">\n            <Check className={`h-4 w-4 ${statusTokens.success.icon} shrink-0 mt-0.5`} />\n            <div className=\"flex-1 min-w-0\">\n              <span className=\"text-sm text-foreground\">{feature.name}</span>\n              {feature.limits && Object.keys(feature.limits).length > 0 && (\n                <div className=\"mt-1 flex flex-wrap gap-1.5\">\n                  {Object.entries(feature.limits).map(([key, value]) => (\n                    <span\n                      key={key}\n                      className=\"inline-flex items-center text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground\"\n                    >\n                      {key}: {formatLimitValue(key, value)}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n    );\n  };\n\n  return (\n    <div className=\"rounded-lg border border-border bg-card overflow-hidden\">\n      {/* Header */}\n      <div className=\"px-4 py-3 border-b border-border bg-muted/30\">\n        <div className=\"flex items-center gap-2\">\n          <Receipt className=\"h-4 w-4 text-muted-foreground\" />\n          <h3 className=\"font-semibold text-foreground\">\n            {tr('billing.checkout.orderSummary', 'Order Summary')}\n          </h3>\n        </div>\n      </div>\n\n      {/* Items */}\n      <div className=\"divide-y divide-border\">\n        {items.length === 0 ? (\n          <div className=\"p-6 text-center\">\n            <Package className=\"mx-auto h-8 w-8 text-muted-foreground\" />\n            <p className=\"mt-2 text-sm text-muted-foreground\">No items in checkout</p>\n          </div>\n        ) : (\n          items.map((item) => {\n            const badge = getItemTypeBadge(item.type);\n            const hasFeatures = item.features && item.features.length > 0;\n\n            return (\n              <div key={item.id} className=\"p-4\">\n                <div className=\"flex items-start gap-3\">\n                  {/* Icon */}\n                  <div className=\"p-2 rounded-lg bg-muted text-muted-foreground shrink-0\">\n                    {getItemIcon(item.type)}\n                  </div>\n\n                  {/* Item details */}\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center gap-2 flex-wrap\">\n                      <span className=\"font-medium text-foreground\">{item.name}</span>\n                      <span className={`text-xs px-1.5 py-0.5 rounded ${badge.className}`}>\n                        {badge.label}\n                      </span>\n                    </div>\n                    {item.description && (\n                      <p className=\"text-sm text-muted-foreground mt-0.5 line-clamp-2\">\n                        {item.description}\n                      </p>\n                    )}\n\n                    {/* Quantity controls */}\n                    <div className=\"flex items-center justify-between mt-3\">\n                      {isEditable && item.type !== 'PLAN' ? (\n                        <div className=\"flex items-center gap-2\">\n                          <button\n                            type=\"button\"\n                            onClick={() => onUpdateQuantity?.(item.id, item.quantity - 1)}\n                            disabled={item.quantity <= 1}\n                            className=\"p-1 rounded border border-border hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed\"\n                            aria-label={`Decrease ${item.name} quantity`}\n                          >\n                            <Minus className=\"h-3 w-3\" />\n                          </button>\n                          <span className=\"w-8 text-center text-sm font-medium\">\n                            {item.quantity}\n                          </span>\n                          <button\n                            type=\"button\"\n                            onClick={() => onUpdateQuantity?.(item.id, item.quantity + 1)}\n                            className=\"p-1 rounded border border-border hover:bg-muted\"\n                            aria-label={`Increase ${item.name} quantity`}\n                          >\n                            <Plus className=\"h-3 w-3\" />\n                          </button>\n                        </div>\n                      ) : (\n                        <span className=\"text-sm text-muted-foreground\">Qty: {item.quantity}</span>\n                      )}\n\n                      <div className=\"flex items-center gap-3\">\n                        <span className=\"font-medium text-foreground\">\n                          {formatAmount(item.price * item.quantity, item)}\n                        </span>\n                        {isEditable && onRemoveItem && (\n                          <button\n                            type=\"button\"\n                            onClick={() => onRemoveItem(item.id)}\n                            className=\"p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10\"\n                            aria-label={`Remove ${item.name}`}\n                          >\n                            <Trash2 className=\"h-4 w-4\" />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n\n                    {/* Features - Collapsible */}\n                    {hasFeatures &&\n                      (() => {\n                        const mergedCount = mergeFeatures(item.features!).length;\n                        return (\n                          <Accordion type=\"single\" collapsible className=\"mt-3\">\n                            <AccordionItem value=\"features\" className=\"border-0\">\n                              <AccordionTrigger className=\"py-2 px-0 text-sm text-muted-foreground hover:text-foreground hover:no-underline\">\n                                <span className=\"flex items-center gap-1.5\">\n                                  <Check className=\"h-3.5 w-3.5\" />\n                                  {mergedCount} {mergedCount === 1 ? 'feature' : 'features'}{' '}\n                                  included\n                                </span>\n                              </AccordionTrigger>\n                              <AccordionContent className=\"pt-2 pb-0\">\n                                {renderFeatures(item.features!)}\n                              </AccordionContent>\n                            </AccordionItem>\n                          </Accordion>\n                        );\n                      })()}\n                  </div>\n                </div>\n              </div>\n            );\n          })\n        )}\n      </div>\n\n      {/* Totals */}\n      {items.length > 0 && (\n        <div className=\"border-t border-border bg-muted/20\">\n          <div className=\"p-4 space-y-2\">\n            {/* Subtotal - already in selected currency (from currencyPrices) */}\n            <div className=\"flex items-center justify-between text-sm\">\n              <span className=\"text-muted-foreground\">\n                {tr('billing.checkout.subtotal', 'Subtotal')}\n              </span>\n              <span className=\"text-foreground\">\n                {showInCredits ? formatAmount(subtotalUSD) : formatAmount(subtotal)}\n              </span>\n            </div>\n\n            {/* Discount */}\n            {discountAmount > 0 && (\n              <div className=\"flex items-center justify-between text-sm\">\n                <span className={statusTokens.success.text}>Discount</span>\n                <span className={statusTokens.success.text}>-{formatAmount(discountAmount)}</span>\n              </div>\n            )}\n\n            {/* Tax - calculated on the subtotal in selected currency */}\n            {isCalculatingTax ? (\n              <div className=\"flex items-center justify-between text-sm\">\n                <span className=\"text-muted-foreground\">Tax</span>\n                <span className=\"text-muted-foreground animate-pulse\">Calculating...</span>\n              </div>\n            ) : taxAmount > 0 && taxRate > 0 ? (\n              <div className=\"flex items-center justify-between text-sm\">\n                <span className=\"text-muted-foreground\">\n                  {taxType || 'Tax'} ({(taxRate * 100).toFixed(0)}%)\n                </span>\n                <span className=\"text-foreground\">{formatAmount(taxAmount)}</span>\n              </div>\n            ) : null}\n\n            {/* Divider */}\n            <div className=\"border-t border-border my-2\" />\n\n            {/* Total - show in credits or selected currency */}\n            {showInCredits ? (\n              <>\n                {/* Credit payment: Show total in credits */}\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"font-semibold text-foreground\">\n                    {tr('billing.checkout.total', 'Total')}\n                  </span>\n                  <span className=\"text-xl font-bold text-foreground\">\n                    {usdToCredits(subtotalUSD).toLocaleString(undefined, {\n                      minimumFractionDigits: 0,\n                      maximumFractionDigits: 0,\n                    })}{' '}\n                    Credits\n                  </span>\n                </div>\n                <p className=\"text-xs text-center text-muted-foreground pt-2\">\n                  Paying with account credits\n                </p>\n              </>\n            ) : (\n              <>\n                {/* Card payment: Show total in selected currency */}\n                {/* Items already have localized prices from currencyPrices - no conversion needed */}\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"font-semibold text-foreground\">Total in {currency}</span>\n                  <span className=\"text-xl font-bold text-foreground\">\n                    {formatCurrency(total, currency)}\n                  </span>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/checkout/components/PaymentProviderSelector.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { PaymentProvider, Currency } from '../types';
+
+interface PaymentProviderSelectorProps {
+    selectedProvider: PaymentProvider;
+    onSelect: (provider: PaymentProvider) => void;
+    selectedCurrency: Currency;
+    stripeEnabled: boolean;
+    razorpayEnabled: boolean;
+    canPayWithCredits: boolean;
+    availableCredits: number;
+    totalAmount: number;
+    isLoading?: boolean;
+    /** Billing address country code (e.g., 'IN', 'US') - used to restrict payment providers */
+    billingCountry?: string;
+}
+export declare const PaymentProviderSelector: FC<PaymentProviderSelectorProps>;
+export {};
+//# sourceMappingURL=PaymentProviderSelector.d.ts.map

package/dist/billing/modules/checkout/components/PaymentProviderSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentProviderSelector.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/PaymentProviderSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAS1D,UAAU,4BAA4B;IACpC,gBAAgB,EAAE,eAAe,CAAC;IAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,QAAQ,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAYD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA6LpE,CAAC"}

package/dist/billing/modules/checkout/components/PaymentProviderSelector.js

@@ -0,0 +1,3 @@
+import "lucide-react";
+import "react/jsx-runtime";
+import "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";

package/dist/billing/modules/checkout/components/PromoCodeInput.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+
+interface PromoCodeInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onValidate: () => Promise<{
+        valid: boolean;
+        error?: string;
+    }>;
+    onClear: () => void;
+    isApplied: boolean;
+    discountValue?: number;
+    discountType?: 'PERCENTAGE' | 'FIXED';
+    isValidating?: boolean;
+    error?: string;
+}
+export declare const PromoCodeInput: FC<PromoCodeInputProps>;
+export {};
+//# sourceMappingURL=PromoCodeInput.d.ts.map

package/dist/billing/modules/checkout/components/PromoCodeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoCodeInput.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/PromoCodeInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAyB,MAAM,OAAO,CAAC;AAKvD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4IlD,CAAC"}

package/dist/billing/modules/checkout/components/PromoCodeInput.js

@@ -0,0 +1,102 @@
+import { statusTokens as e } from "../../../shared/utils/tokens.js";
+import { useCallback as t, useState as n } from "react";
+import { Check as r, Loader2 as i, Tag as a, X as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/checkout/components/PromoCodeInput.tsx
+var u = ({ value: u, onChange: d, onValidate: f, onClear: p, isApplied: m, discountValue: h, discountType: g, isValidating: _ = !1, error: v }) => {
+	let { t: y } = l(), b = (e, t) => {
+		let n = y(e);
+		return n === e ? t : n;
+	}, [x, S] = n(null), C = t(async () => {
+		if (!u.trim()) {
+			S("Please enter a promo code");
+			return;
+		}
+		S(null);
+		let e = await f();
+		!e.valid && e.error && S(e.error);
+	}, [u, f]), w = t(() => {
+		S(null), p();
+	}, [p]), T = t((e) => {
+		e.key === "Enter" && (e.preventDefault(), C());
+	}, [C]), E = v || x;
+	return m && h ? /* @__PURE__ */ s("div", {
+		className: `rounded-lg border ${e.success.border} ${e.success.bg} p-3`,
+		children: /* @__PURE__ */ c("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ s("div", {
+					className: `p-1.5 rounded-full ${e.success.bg} ${e.success.icon}`,
+					children: /* @__PURE__ */ s(r, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ s("span", {
+						className: `font-medium ${e.success.text}`,
+						children: u.toUpperCase()
+					}), /* @__PURE__ */ s("span", {
+						className: `text-sm ${e.success.text}`,
+						children: "applied"
+					})]
+				}), /* @__PURE__ */ s("p", {
+					className: `text-sm ${e.success.text}`,
+					children: /* @__PURE__ */ c("span", {
+						className: "flex items-center gap-0.5",
+						children: [h.toFixed(2), " off your order"]
+					})
+				})] })]
+			}), /* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: w,
+				className: `p-1.5 rounded-full hover:${e.success.bg} ${e.success.icon}`,
+				children: /* @__PURE__ */ s(o, { className: "h-4 w-4" })
+			})]
+		})
+	}) : /* @__PURE__ */ c("div", {
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ s("label", {
+				className: "text-sm font-medium text-foreground",
+				children: b("billing.checkout.promoCode", "Promo Code")
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ c("div", {
+					className: "relative flex-1",
+					children: [/* @__PURE__ */ s(a, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ s("input", {
+						type: "text",
+						value: u,
+						onChange: (e) => {
+							d(e.target.value.toUpperCase()), S(null);
+						},
+						onKeyDown: T,
+						placeholder: "Enter code",
+						disabled: _,
+						className: `
+              w-full pl-[3.25rem] pr-4 py-2.5 rounded-lg border bg-background text-foreground
+              placeholder:text-muted-foreground
+              focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
+              disabled:opacity-50 disabled:cursor-not-allowed
+              ${E ? "border-destructive focus:ring-destructive/20 focus:border-destructive" : "border-border"}
+            `
+					})]
+				}), /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: C,
+					disabled: !u.trim() || _,
+					className: "px-4 py-2.5 rounded-lg border border-border bg-muted text-foreground font-medium\n            hover:bg-muted/80 disabled:opacity-50 disabled:cursor-not-allowed\n            transition-colors duration-200",
+					children: _ ? /* @__PURE__ */ s(i, { className: "h-4 w-4 animate-spin" }) : "Apply"
+				})]
+			}),
+			E && /* @__PURE__ */ c("p", {
+				className: "text-sm text-destructive flex items-center gap-1.5",
+				children: [/* @__PURE__ */ s(o, { className: "h-3.5 w-3.5" }), E]
+			})
+		]
+	});
+};
+//#endregion
+export { u as PromoCodeInput };
+
+//# sourceMappingURL=PromoCodeInput.js.map

package/dist/billing/modules/checkout/components/PromoCodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoCodeInput.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/PromoCodeInput.tsx"],"sourcesContent":["/**\n * Promo Code Input Component\n * Input field for entering and validating discount codes\n */\n\nimport { type FC, useState, useCallback } from 'react';\nimport { Tag, Check, X, Loader2 } from 'lucide-react';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface PromoCodeInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  onValidate: () => Promise<{ valid: boolean; error?: string }>;\n  onClear: () => void;\n  isApplied: boolean;\n  discountValue?: number;\n  discountType?: 'PERCENTAGE' | 'FIXED';\n  isValidating?: boolean;\n  error?: string;\n}\n\nexport const PromoCodeInput: FC<PromoCodeInputProps> = ({\n  value,\n  onChange,\n  onValidate,\n  onClear,\n  isApplied,\n  discountValue,\n  discountType: _discountType,\n  isValidating = false,\n  error,\n}) => {\n  void _discountType;\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  const handleValidate = useCallback(async () => {\n    if (!value.trim()) {\n      setLocalError('Please enter a promo code');\n      return;\n    }\n    setLocalError(null);\n    const result = await onValidate();\n    if (!result.valid && result.error) {\n      setLocalError(result.error);\n    }\n  }, [value, onValidate]);\n\n  const handleClear = useCallback(() => {\n    setLocalError(null);\n    onClear();\n  }, [onClear]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        handleValidate();\n      }\n    },\n    [handleValidate]\n  );\n\n  const displayError = error || localError;\n\n  if (isApplied && discountValue) {\n    // Show applied discount\n    return (\n      <div\n        className={`rounded-lg border ${statusTokens.success.border} ${statusTokens.success.bg} p-3`}\n      >\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <div\n              className={`p-1.5 rounded-full ${statusTokens.success.bg} ${statusTokens.success.icon}`}\n            >\n              <Check className=\"h-4 w-4\" />\n            </div>\n            <div>\n              <div className=\"flex items-center gap-1.5\">\n                <span className={`font-medium ${statusTokens.success.text}`}>\n                  {value.toUpperCase()}\n                </span>\n                <span className={`text-sm ${statusTokens.success.text}`}>applied</span>\n              </div>\n              <p className={`text-sm ${statusTokens.success.text}`}>\n                {/* discountValue now contains the actual discount amount, not percentage */}\n                <span className=\"flex items-center gap-0.5\">\n                  {discountValue.toFixed(2)} off your order\n                </span>\n              </p>\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            className={`p-1.5 rounded-full hover:${statusTokens.success.bg} ${statusTokens.success.icon}`}\n          >\n            <X className=\"h-4 w-4\" />\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <label className=\"text-sm font-medium text-foreground\">\n        {tr('billing.checkout.promoCode', 'Promo Code')}\n      </label>\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <Tag className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n          <input\n            type=\"text\"\n            value={value}\n            onChange={(e) => {\n              onChange(e.target.value.toUpperCase());\n              setLocalError(null);\n            }}\n            onKeyDown={handleKeyDown}\n            placeholder=\"Enter code\"\n            disabled={isValidating}\n            className={`\n              w-full pl-[3.25rem] pr-4 py-2.5 rounded-lg border bg-background text-foreground\n              placeholder:text-muted-foreground\n              focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary\n              disabled:opacity-50 disabled:cursor-not-allowed\n              ${\n                displayError\n                  ? 'border-destructive focus:ring-destructive/20 focus:border-destructive'\n                  : 'border-border'\n              }\n            `}\n          />\n        </div>\n        <button\n          type=\"button\"\n          onClick={handleValidate}\n          disabled={!value.trim() || isValidating}\n          className=\"px-4 py-2.5 rounded-lg border border-border bg-muted text-foreground font-medium\n            hover:bg-muted/80 disabled:opacity-50 disabled:cursor-not-allowed\n            transition-colors duration-200\"\n        >\n          {isValidating ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : 'Apply'}\n        </button>\n      </div>\n\n      {/* Error message */}\n      {displayError && (\n        <p className=\"text-sm text-destructive flex items-center gap-1.5\">\n          <X className=\"h-3.5 w-3.5\" />\n          {displayError}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAsBA,IAAa,KAA2C,EACtD,UACA,aACA,eACA,YACA,cACA,kBACA,cAAc,GACd,kBAAe,IACf,eACI;CAEJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAE3D,IAAiB,EAAY,YAAY;AAC7C,MAAI,CAAC,EAAM,MAAM,EAAE;AACjB,KAAc,4BAA4B;AAC1C;;AAEF,IAAc,KAAK;EACnB,IAAM,IAAS,MAAM,GAAY;AACjC,EAAI,CAAC,EAAO,SAAS,EAAO,SAC1B,EAAc,EAAO,MAAM;IAE5B,CAAC,GAAO,EAAW,CAAC,EAEjB,IAAc,QAAkB;AAEpC,EADA,EAAc,KAAK,EACnB,GAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAgB,GACnB,MAA2B;AAC1B,EAAI,EAAE,QAAQ,YACZ,EAAE,gBAAgB,EAClB,GAAgB;IAGpB,CAAC,EAAe,CACjB,EAEK,IAAe,KAAS;AA0C9B,QAxCI,KAAa,IAGb,kBAAC,OAAD;EACE,WAAW,qBAAqB,EAAa,QAAQ,OAAO,GAAG,EAAa,QAAQ,GAAG;YAEvF,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAW,sBAAsB,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;eAEjF,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACzB,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAW,eAAe,EAAa,QAAQ;gBAClD,EAAM,aAAa;MACf,CAAA,EACP,kBAAC,QAAD;MAAM,WAAW,WAAW,EAAa,QAAQ;gBAAQ;MAAc,CAAA,CACnE;QACN,kBAAC,KAAD;KAAG,WAAW,WAAW,EAAa,QAAQ;eAE5C,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACG,EAAc,QAAQ,EAAE,EAAC,kBACrB;;KACL,CAAA,CACA,EAAA,CAAA,CACF;OACN,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAW,4BAA4B,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;cAEvF,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;IAClB,CAAA,CACL;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,SAAD;IAAO,WAAU;cACd,EAAG,8BAA8B,aAAa;IACzC,CAAA;GACR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAK,WAAU,0EAA2E,CAAA,EAC1F,kBAAC,SAAD;MACE,MAAK;MACE;MACP,WAAW,MAAM;AAEf,OADA,EAAS,EAAE,OAAO,MAAM,aAAa,CAAC,EACtC,EAAc,KAAK;;MAErB,WAAW;MACX,aAAY;MACZ,UAAU;MACV,WAAW;;;;;gBAMP,IACI,0EACA,gBACL;;MAEH,CAAA,CACE;QACN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,CAAC,EAAM,MAAM,IAAI;KAC3B,WAAU;eAIT,IAAe,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAAG;KACxD,CAAA,CACL;;GAGL,KACC,kBAAC,KAAD;IAAG,WAAU;cAAb,CACE,kBAAC,GAAD,EAAG,WAAU,eAAgB,CAAA,EAC5B,EACC;;GAEF"}

package/dist/billing/modules/checkout/components/RazorpayPaymentButton.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { RazorpaySuccessResponse } from '../types';
+
+interface RazorpayPaymentButtonProps {
+    orderId: string;
+    keyId: string;
+    amount: number;
+    currency: string;
+    name?: string;
+    description?: string;
+    customerId?: string;
+    prefill?: {
+        name?: string;
+        email?: string;
+        contact?: string;
+    };
+    notes?: Record<string, string>;
+    onSuccess: (response: RazorpaySuccessResponse) => void;
+    onError: (error: string) => void;
+    onCancel?: () => void;
+    disabled?: boolean;
+}
+export declare const RazorpayPaymentButton: FC<RazorpayPaymentButtonProps>;
+export {};
+//# sourceMappingURL=RazorpayPaymentButton.d.ts.map

package/dist/billing/modules/checkout/components/RazorpayPaymentButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RazorpayPaymentButton.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/checkout/components/RazorpayPaymentButton.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAoC,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EACV,uBAAuB,EAGxB,MAAM,UAAU,CAAC;AASlB,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,EAAE,CAAC,QAAQ,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA0PhE,CAAC"}