@fluid-app/portal-sdk 0.1.286 → 0.1.288

package/dist/ProfileScreen-CT5nLt3E.cjs

@@ -0,0 +1,1244 @@
+require("./chunk-9hOWP6kD.cjs");
+const require_FluidProvider = require("./FluidProvider-IQDml4f2.cjs");
+const require_portal_tenant = require("./portal_tenant-DG4gKXnu.cjs");
+const require_api_context = require("./api-context-BkBvyFVK.cjs");
+const require_countries_api_context = require("./countries-api-context-C0C0K9gJ.cjs");
+const require_src = require("./src-B0ut9PTw.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-CsfhnuJk.cjs");
+const require_query_keys = require("./query-keys-D3lK70Ea.cjs");
+const require_use_account = require("./use-account-DlmM-lMR.cjs");
+const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-tZX9kPwb.cjs");
+const require_use_mysite_portal = require("./use-mysite-portal-BMo64_Dx.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let zod = require("zod");
+//#region src/screens/profile/derive-last-name.ts
+function deriveLastName(firstName, fullName) {
+	if (!firstName) return "";
+	const prefix = `${firstName} `;
+	return fullName.startsWith(prefix) ? fullName.slice(prefix.length) : "";
+}
+//#endregion
+//#region src/screens/profile/ProfileLayout.tsx
+function ProfileLayout(props) {
+	const { account, pointsBalance, pointsLedger, rewardsEnabled, addresses, paymentMethods, mySiteDisplayUrl, socialLinks, onEditPersonalInfo, onAddAddress, onEditAddress, onDeleteAddress, onAddPaymentMethod, onEditPaymentMethod, onCopyMySiteLink, onEditMySiteLink, onConnectSocial, onSignOut } = props;
+	const fullName = `${account.first_name ?? ""} ${account.last_name ?? ""}`.trim();
+	const heroDisplay = (account.first_name || "").trim().split(" ")[0] || account.email?.split("@")[0] || "Account";
+	const connectedSocialCount = Object.values(socialLinks).filter((v) => typeof v === "string" && v.length > 0).length;
+	const [isPointsHistoryOpen, setIsPointsHistoryOpen] = (0, react.useState)(false);
+	const POINTS_PREVIEW_COUNT = 4;
+	const ledger = pointsLedger ?? [];
+	const ledgerPreview = ledger.slice(0, POINTS_PREVIEW_COUNT);
+	const hasMoreLedger = ledger.length > POINTS_PREVIEW_COUNT;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "relative",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "max-w-profile-container relative mx-auto px-5 pt-8 pb-20 md:px-8",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "flex items-center gap-3.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "size-profile-avatar-sm md:size-profile-avatar relative shrink-0 overflow-hidden rounded-full ring-1 ring-black/5",
+							children: account.avatar_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: account.avatar_url,
+								alt: "",
+								className: "h-full w-full object-cover"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "bg-profile-dark text-profile-dark-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
+								children: heroDisplay.charAt(0).toUpperCase()
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+								className: "text-profile-hero tracking-profile-hero text-profile-text md:text-profile-hero-lg truncate font-bold",
+								children: heroDisplay
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-profile-sm-plus text-profile-text-muted mt-0.5 truncate",
+								children: account.email
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex shrink-0 items-center gap-2",
+							children: rewardsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "ring-profile-border bg-profile-card text-profile-xs-plus text-profile-text inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-semibold ring-1",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
+										className: "text-profile-accent size-3",
+										strokeWidth: 2.25
+									}),
+									(pointsBalance ?? 0).toLocaleString(),
+									" pts"
+								]
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+					title: "Personal information",
+					action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillButton, {
+						onClick: onEditPersonalInfo,
+						icon: lucide_react.Pencil,
+						label: "Edit"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+							icon: lucide_react.User,
+							label: "Name",
+							value: fullName || account.first_name || ""
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+							icon: lucide_react.Mail,
+							label: "Email",
+							value: account.email ?? ""
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+							icon: lucide_react.Phone,
+							label: "Phone",
+							value: account.phone ?? "",
+							placeholder: "Add phone number"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+							icon: lucide_react.Quote,
+							label: "Bio",
+							value: account.bio ?? "",
+							placeholder: "Add a short bio",
+							multiline: true,
+							isLast: true
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, { title: "Payment methods" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-2.5 grid grid-cols-1 gap-2.5 sm:grid-cols-3",
+					children: [paymentMethods.map((method) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentCardVisual, {
+						method,
+						onClick: () => onEditPaymentMethod(method)
+					}, method.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddPaymentTile, { onClick: onAddPaymentMethod })]
+				}),
+				rewardsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+					title: "Points history",
+					action: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-profile-xs text-profile-text-faint",
+						children: [(pointsBalance ?? 0).toLocaleString(), " pts available"]
+					})
+				}), ledger.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					children: [ledgerPreview.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsLedgerRow, {
+						entry,
+						isLast: !hasMoreLedger && i === ledgerPreview.length - 1
+					}, entry.id)), hasMoreLedger && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => setIsPointsHistoryOpen(true),
+						className: "text-profile-xs text-profile-text hover:bg-profile-pill-hover flex w-full items-center justify-center gap-1 px-4 py-3 font-bold transition-colors",
+						children: [
+							"See all ",
+							ledger.length,
+							" transactions"
+						]
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ring-dashed ring-profile-dashed-border bg-profile-card mt-2.5 flex flex-col items-center justify-center gap-1 rounded-2xl px-4 py-8 text-center ring-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
+							className: "text-profile-text-faint size-5",
+							strokeWidth: 1.75
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-profile-base text-profile-text font-bold",
+							children: "No points yet"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-profile-xs text-profile-text-muted",
+							children: "Earn points on every order to unlock rewards."
+						})
+					]
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+					title: "Your MySite link",
+					action: onEditMySiteLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillButton, {
+						onClick: onEditMySiteLink,
+						icon: lucide_react.Pencil,
+						label: "Edit link"
+					}) : void 0
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ring-profile-border bg-profile-card mt-2.5 flex items-center gap-3 rounded-2xl p-3.5 ring-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "size-profile-mysite-icon bg-profile-icon-bg text-profile-text flex shrink-0 items-center justify-center rounded-full",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link2, {
+								className: "size-[18px]",
+								strokeWidth: 2
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-profile-2xs tracking-profile-uppercase-1 text-profile-text-faint font-bold uppercase",
+								children: "Public link"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-profile-base text-profile-text mt-0.5 truncate font-mono font-semibold",
+								children: mySiteDisplayUrl || "Set your MySite link"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: onCopyMySiteLink,
+							disabled: !mySiteDisplayUrl,
+							className: "ring-profile-border bg-profile-card text-profile-xs text-profile-text hover:bg-profile-pill-hover inline-flex items-center gap-1 rounded-md px-3 py-1.5 font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, {
+								className: "size-3",
+								strokeWidth: 2.25
+							}), "Copy"]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, { title: "Shipping addresses" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-2.5 grid grid-cols-1 gap-2.5 sm:grid-cols-2",
+					children: [addresses.map((address) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressCard, {
+						address,
+						onEdit: () => onEditAddress(address),
+						onDelete: address.default ? void 0 : () => onDeleteAddress(address)
+					}, address.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddAddressTile, { onClick: onAddAddress })]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
+					title: "Social media",
+					action: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-profile-xs text-profile-text-faint",
+						children: [connectedSocialCount, " connected"]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					children: SOCIAL_ENTRIES.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialRow, {
+						entry,
+						handle: socialLinks[entry.key] ?? "",
+						isLast: i === SOCIAL_ENTRIES.length - 1,
+						onConnect: () => onConnectSocial(entry.key)
+					}, entry.key))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
+					open: isPointsHistoryOpen,
+					onOpenChange: setIsPointsHistoryOpen,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
+						className: "max-w-md md:max-w-lg",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: "Points history" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "ring-profile-border bg-profile-card max-h-[60vh] overflow-y-auto rounded-2xl ring-1",
+							children: ledger.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsLedgerRow, {
+								entry,
+								isLast: i === ledger.length - 1
+							}, entry.id))
+						})]
+					})
+				}),
+				onSignOut && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ring-profile-border bg-profile-card mt-8 flex flex-wrap items-center justify-between gap-3 rounded-2xl p-3.5 ring-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-profile-danger-bg flex size-9 items-center justify-center rounded-md",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, {
+								className: "text-profile-danger-icon size-4",
+								strokeWidth: 2.25
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-profile-base text-profile-text font-bold",
+							children: "Sign out"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-profile-xs-plus text-profile-text-muted",
+							children: "You can sign back in any time"
+						})] })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: onSignOut,
+						className: "bg-profile-danger-button-bg text-profile-sm text-profile-danger-button-text hover:bg-profile-danger-button-hover rounded-md px-4 py-2 font-bold transition-colors",
+						children: "Sign out"
+					})]
+				})
+			]
+		})
+	});
+}
+function SectionHeader({ title, action }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mt-8 flex items-end justify-between",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+			className: "text-profile-lg tracking-profile-heading text-profile-text font-bold",
+			children: title
+		}), action ?? null]
+	});
+}
+function PillButton({ onClick, icon: Icon, label, disabled }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className: "ring-profile-border bg-profile-card text-profile-xs text-profile-text hover:bg-profile-pill-hover inline-flex items-center gap-1 rounded-md px-3 py-1.5 font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			className: "size-3",
+			strokeWidth: 2.25
+		}), label]
+	});
+}
+function PointsLedgerRow({ entry, isLast }) {
+	const isCredit = entry.amount >= 0;
+	const sign = isCredit ? "+" : "−";
+	const magnitude = Math.abs(entry.amount).toLocaleString();
+	const amountColor = isCredit ? "text-emerald-600" : "text-profile-danger-icon";
+	const sourceName = entry.metadata?.source?.name?.trim();
+	const transactionType = entry.metadata?.transaction_type;
+	const label = sourceName || (transactionType ? transactionType.charAt(0).toUpperCase() + transactionType.slice(1) : isCredit ? "Points earned" : "Points redeemed");
+	const dateLabel = formatLedgerDate(entry.created_at);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-profile-divider border-b"}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-profile-icon-bg flex size-9 shrink-0 items-center justify-center rounded-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
+					className: `size-4 ${isCredit ? "text-profile-accent" : "text-profile-text-muted"}`,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-profile-md text-profile-text truncate font-medium",
+					children: label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-profile-xs text-profile-text-muted",
+					children: dateLabel
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `text-profile-md shrink-0 font-mono font-bold tabular-nums ${amountColor}`,
+				children: [sign, magnitude]
+			})
+		]
+	});
+}
+function formatLedgerDate(iso) {
+	try {
+		return new Date(iso).toLocaleDateString(void 0, {
+			month: "short",
+			day: "numeric",
+			year: "numeric"
+		});
+	} catch {
+		return iso;
+	}
+}
+function FieldRow({ icon: Icon, label, value, placeholder, isLast, multiline }) {
+	const display = value || placeholder || "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex gap-3 px-4 py-3.5 ${multiline ? "items-start" : "items-center"} ${isLast ? "" : "border-profile-divider border-b"}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-profile-icon-bg text-profile-text-muted flex size-9 shrink-0 items-center justify-center rounded-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: "size-4",
+				strokeWidth: 2
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-profile-2xs tracking-profile-uppercase-1 text-profile-text-faint font-bold uppercase",
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `mt-0.5 ${multiline ? "whitespace-pre-line" : "truncate"} text-profile-md font-medium ${!value && Boolean(placeholder) ? "text-profile-text-placeholder" : "text-profile-text"}`,
+				children: display
+			})]
+		})]
+	});
+}
+const CARD_BRAND_LABEL = {
+	amex: "AMERICAN EXPRESS",
+	visa: "VISA",
+	mastercard: "MASTERCARD",
+	discover: "DISCOVER",
+	diners: "DINERS CLUB",
+	jcb: "JCB",
+	unionpay: "UNIONPAY"
+};
+const CARD_BRAND_BADGE = {
+	amex: "AMEX",
+	visa: "VISA",
+	mastercard: "MC",
+	discover: "DISC",
+	diners: "DC",
+	jcb: "JCB",
+	unionpay: "UPI"
+};
+function PaymentCardVisual({ method, onClick }) {
+	const brand = (method.details.card_brand || "").toLowerCase();
+	const brandLabel = CARD_BRAND_LABEL[brand] || (brand ? brand.toUpperCase() : "CARD");
+	const badge = CARD_BRAND_BADGE[brand] || "CARD";
+	const last4 = method.details.last_four ?? "••••";
+	const expMonth = String(method.details.exp_month ?? "").padStart(2, "0");
+	const expYear = String(method.details.exp_year ?? "").slice(-2);
+	const exp = expMonth && expYear ? `${expMonth}/${expYear}` : "";
+	const holder = method.billing_address?.name ?? "";
+	const badgeBg = brand === "visa" ? "bg-[#1A1F71]" : brand === "mastercard" ? "bg-[#EB001B]" : "bg-[#0064D2]";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		className: "group bg-foreground text-background ring-foreground/10 relative flex aspect-[1.586/1] flex-col justify-between overflow-hidden rounded-xl p-4 text-left shadow-sm ring-1 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "absolute inset-0 bg-[repeating-linear-gradient(135deg,transparent_0px,transparent_22px,currentColor_22px,currentColor_24px)] opacity-[0.04]"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative flex items-start justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-profile-micro tracking-profile-uppercase-2 text-background/50 font-semibold uppercase",
+					children: brandLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-profile-hero tracking-profile-mono text-background mt-1 font-mono font-bold",
+					children: last4
+				})] }), method.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-profile-micro bg-background/10 text-background/80 rounded-md px-2 py-0.5 font-bold tracking-wider uppercase",
+					children: "Default"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative flex items-end justify-between gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-profile-nano tracking-profile-uppercase-2 text-background/40 font-semibold uppercase",
+							children: "Cardholder"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-profile-xs-plus text-background truncate font-semibold",
+							children: holder || " "
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-profile-nano tracking-profile-uppercase-2 text-background/40 font-semibold uppercase",
+						children: "Expires"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-profile-xs-plus text-background font-mono font-semibold",
+						children: exp
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `text-profile-micro shrink-0 rounded px-1.5 py-0.5 font-bold tracking-wider text-white ${badgeBg}`,
+						children: badge
+					})
+				]
+			})
+		]
+	});
+}
+function AddPaymentTile({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		className: "group ring-dashed ring-profile-dashed-border bg-profile-card text-profile-text-muted hover:bg-profile-canvas hover:text-profile-text flex aspect-[1.586/1] flex-col items-center justify-center gap-1.5 rounded-xl ring-1 transition-colors",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ring-profile-border bg-profile-card flex size-9 items-center justify-center rounded-full ring-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+					className: "size-4",
+					strokeWidth: 2.25
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-profile-sm text-profile-text font-bold",
+				children: "Add payment method"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-profile-2xs-plus text-profile-text-faint",
+				children: "Visa, Mastercard, Amex"
+			})
+		]
+	});
+}
+function AddressCard({ address, onEdit, onDelete }) {
+	const label = address.name?.trim() || "Address";
+	const cityLine = [
+		address.city,
+		address.state,
+		address.postal_code
+	].filter(Boolean).join(", ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "ring-profile-border bg-profile-card hover:bg-profile-pill-hover focus-within:ring-profile-text/40 relative flex flex-col rounded-2xl ring-1 transition-all duration-200 focus-within:ring-2 hover:ring-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: onEdit,
+			className: "flex w-full flex-col rounded-2xl p-4 pr-12 text-left focus-visible:outline-none",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "bg-profile-icon-bg flex size-8 items-center justify-center rounded-full",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MapPin, {
+							className: "text-profile-text-muted size-4",
+							strokeWidth: 2
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-profile-md text-profile-text font-bold",
+						children: label
+					})]
+				}), address.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "bg-profile-dark text-profile-micro text-profile-dark-foreground rounded-md px-2 py-0.5 font-bold tracking-wider uppercase",
+					children: "Default"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-profile-sm-plus text-profile-text mt-3 space-y-0.5 leading-snug",
+				children: [
+					address.address1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: address.address1 }),
+					address.address2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: address.address2 }),
+					cityLine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: cityLine }),
+					address.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-profile-text-muted",
+						children: address.country_code
+					})
+				]
+			})]
+		}), onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute top-2 right-2 z-10",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.EllipsesDropdown, {
+				onEdit,
+				onDelete,
+				editLabel: "Edit",
+				deleteLabel: "Delete"
+			})
+		})]
+	});
+}
+function AddAddressTile({ onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		className: "group ring-dashed ring-profile-dashed-border min-h-profile-tile-min-h bg-profile-card text-profile-text-muted hover:bg-profile-canvas hover:text-profile-text flex flex-col items-center justify-center gap-1.5 rounded-2xl ring-1 transition-colors",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "ring-profile-border bg-profile-card flex size-9 items-center justify-center rounded-full ring-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
+				className: "size-4",
+				strokeWidth: 2.25
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-profile-base text-profile-text font-bold",
+			children: "Add an address"
+		})]
+	});
+}
+const SOCIAL_ENTRIES = [
+	{
+		key: "linkedin",
+		label: "LinkedIn",
+		icon: lucide_react.Linkedin,
+		placeholder: "linkedin.com/in/username"
+	},
+	{
+		key: "facebook",
+		label: "Facebook",
+		icon: lucide_react.Facebook,
+		placeholder: "facebook.com/username"
+	},
+	{
+		key: "x",
+		label: "X",
+		icon: lucide_react.Twitter,
+		placeholder: "x.com/username"
+	},
+	{
+		key: "instagram",
+		label: "Instagram",
+		icon: lucide_react.Instagram,
+		placeholder: "instagram.com/username"
+	},
+	{
+		key: "youtube",
+		label: "YouTube",
+		icon: lucide_react.Youtube,
+		placeholder: "youtube.com/@channel"
+	},
+	{
+		key: "pinterest",
+		label: "Pinterest",
+		icon: lucide_react.Globe,
+		placeholder: "pinterest.com/username"
+	},
+	{
+		key: "tiktok",
+		label: "TikTok",
+		icon: lucide_react.Globe,
+		placeholder: "tiktok.com/@username"
+	}
+];
+function SocialRow({ entry, handle, isLast, onConnect }) {
+	const Icon = entry.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-profile-divider border-b"}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-profile-icon-bg text-profile-text flex size-9 shrink-0 items-center justify-center rounded-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					className: "size-4",
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-profile-base text-profile-text font-bold",
+					children: entry.label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `text-profile-sm truncate ${handle ? "text-profile-text-muted" : "text-profile-text-placeholder"}`,
+					children: handle || entry.placeholder
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillButton, {
+				onClick: onConnect,
+				icon: handle ? lucide_react.Pencil : lucide_react.Plus,
+				label: handle ? "Edit" : "Connect"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/ProfileContentScreen.tsx
+function mapAccountToCustomerAccount(raw) {
+	return {
+		fluid_pay_account: {
+			id: raw.id,
+			email: raw.email,
+			address_count: 0,
+			payment_methods_count: 0,
+			language_iso: null
+		},
+		customer: {
+			id: raw.id,
+			active: true,
+			active_subscriptions_count: 0,
+			display_total_spent: "0",
+			email: raw.email,
+			first_name: raw.first_name,
+			full_name: `${raw.first_name} ${raw.last_name}`.trim(),
+			inactive_subscriptions_count: 0,
+			is_rep: raw.member_type === "rep",
+			phone: raw.phone,
+			orders_count: 0
+		}
+	};
+}
+function composeAddressName(firstName, lastName) {
+	const combined = `${firstName} ${lastName}`.trim();
+	return combined.length > 0 ? combined : null;
+}
+function mapToFluidPayAddress(raw) {
+	return {
+		id: raw.id,
+		address1: raw.street1,
+		address2: raw.street2,
+		city: raw.city,
+		country_code: raw.country,
+		default: raw.default,
+		name: raw.name,
+		postal_code: raw.zip,
+		state: raw.state,
+		subdivision_code: null
+	};
+}
+const SOCIAL_KEY_TO_FIELD = {
+	linkedin: "linkedin",
+	facebook: "facebook",
+	x: "twitter",
+	instagram: "instagram",
+	youtube: "youtube",
+	pinterest: null,
+	tiktok: "tiktok"
+};
+const SOCIAL_LABELS = {
+	linkedin: "LinkedIn",
+	facebook: "Facebook",
+	x: "X",
+	instagram: "Instagram",
+	youtube: "YouTube",
+	pinterest: "Pinterest",
+	tiktok: "TikTok"
+};
+const SOCIAL_PLACEHOLDERS = {
+	linkedin: "linkedin.com/in/username",
+	facebook: "facebook.com/username",
+	x: "x.com/username",
+	instagram: "instagram.com/username",
+	youtube: "youtube.com/@channel",
+	pinterest: "pinterest.com/username",
+	tiktok: "tiktok.com/@username"
+};
+function ProfileContentScreen({ onToast }) {
+	const { t } = require_AddressAutocompleteInput.useProfileTranslation();
+	const payApi = require_api_context.usePayApi();
+	const accountApi = require_portal_tenant.useAccountApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const fluidPayShim = (0, react.useMemo)(() => require_AddressAutocompleteInput.createFluidPayApiAdapter(payApi), [payApi]);
+	const { data: mySiteProfile } = require_use_mysite_portal.usePortalMySiteProfile();
+	const mySiteUrl = mySiteProfile?.mysite_url ?? "";
+	const mySiteDisplayUrl = mySiteUrl ? mySiteUrl.replace(/^https?:\/\//, "") : "";
+	const { data: accountRep, isLoading: isLoadingAccount, isError: isAccountError } = require_use_account.useAccount();
+	const accountData = (0, react.useMemo)(() => accountRep ? mapAccountToCustomerAccount(accountRep) : void 0, [accountRep]);
+	const { data: addressesData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.payKeys.addresses.list(),
+		queryFn: async () => {
+			return (await payApi.fetchAddresses()).addresses.map(mapToFluidPayAddress);
+		},
+		enabled: true
+	});
+	const { data: paymentMethodsData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.payKeys.paymentMethods.list(),
+		queryFn: async () => {
+			return (await payApi.fetchPaymentMethods()).payment_methods.map(require_AddressAutocompleteInput.mapToFluidPayPaymentMethod);
+		},
+		enabled: true
+	});
+	const countriesAdapter = require_countries_api_context.useCountriesApi();
+	const languagesAdapter = require_FluidProvider.useLanguagesApi();
+	const { data: countriesData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.storeKeys.countries(),
+		queryFn: () => countriesAdapter.listCountries(),
+		enabled: true
+	});
+	const { data: languagesData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.storeKeys.languages(),
+		queryFn: () => languagesAdapter.listLanguages(),
+		enabled: true
+	});
+	const { data: pointsLedgerData, isError: isPointsLedgerError } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.payKeys.pointsLedgers.list(),
+		queryFn: () => payApi.fetchPointsLedgers(),
+		enabled: true,
+		retry: (failureCount, error) => {
+			if (error instanceof Error && "status" in error && error.status === 403) return false;
+			return failureCount < 1;
+		}
+	});
+	const rewardPointsEnabled = !isPointsLedgerError && pointsLedgerData != null;
+	const adaptedPointsLedger = (0, react.useMemo)(() => {
+		return (pointsLedgerData?.points_ledgers ?? []).map((entry) => {
+			const meta = entry.metadata;
+			return {
+				id: entry.id,
+				amount: entry.amount,
+				company_id: 0,
+				created_at: entry.created_at,
+				customer_id: 0,
+				metadata: {
+					transaction_type: meta?.transaction_type ?? void 0,
+					source: meta?.source ?? void 0
+				},
+				total_balance: entry.total_balance,
+				updated_at: entry.created_at
+			};
+		});
+	}, [pointsLedgerData]);
+	const updateCustomerMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: async (data) => {
+			await accountApi.updateAccount({ account: {
+				first_name: data.first_name,
+				last_name: data.last_name,
+				phone: data.phone_number,
+				bio: data.bio
+			} });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.accountKeys.all });
+			onToast("Profile updated", "success");
+		},
+		onError: () => {
+			onToast("Failed to update profile", "error");
+		}
+	});
+	const deletePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (paymentMethodId) => payApi.deletePaymentMethod(paymentMethodId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+		},
+		onError: () => {
+			onToast("Failed to delete payment method", "error");
+		}
+	});
+	const updatePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ paymentMethodId, data }) => payApi.updatePaymentMethod(paymentMethodId, { payment_method: {
+			default: data.set_as_default,
+			billing_address: {
+				name: data.billing_address.name,
+				street1: data.billing_address.address1,
+				street2: data.billing_address.address2 ?? null,
+				city: data.billing_address.city,
+				state: data.billing_address.state,
+				zip: data.billing_address.zip,
+				country: data.billing_address.country_code
+			}
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+		},
+		onError: () => {
+			onToast("Failed to update payment method", "error");
+		}
+	});
+	const createAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (body) => payApi.createAddress({ address: {
+			name: composeAddressName(body.address.first_name, body.address.last_name),
+			street1: body.address.address1,
+			street2: body.address.address2,
+			city: body.address.city,
+			state: body.address.state,
+			zip: body.address.postal_code,
+			country: body.address.country_code
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onToast("Address created", "success");
+		},
+		onError: () => {
+			onToast("Failed to create address", "error");
+		}
+	});
+	const updateAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ addressId, body }) => payApi.updateAddress(addressId, { address: {
+			name: composeAddressName(body.address.first_name, body.address.last_name),
+			street1: body.address.address1,
+			street2: body.address.address2,
+			city: body.address.city,
+			state: body.address.state,
+			zip: body.address.postal_code,
+			country: body.address.country_code
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onToast("Address updated", "success");
+		},
+		onError: () => {
+			onToast("Failed to update address", "error");
+		}
+	});
+	const deleteAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (addressId) => payApi.deleteAddress(addressId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onToast("Address deleted", "success");
+		},
+		onError: () => {
+			onToast("Failed to delete address", "error");
+		}
+	});
+	const addCreditCardMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (data) => payApi.createPaymentMethod({ payment_method: {
+			type: "card",
+			token: data.payment_method.token,
+			default: data.default_payment_method
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+			onToast("Payment method added", "success");
+		},
+		onError: () => {
+			onToast("Failed to add payment method", "error");
+		}
+	});
+	const addresses = addressesData ?? [];
+	const paymentMethods = paymentMethodsData ?? [];
+	const adaptedLanguages = (languagesData?.languages ?? []).map((l, i) => ({
+		id: i,
+		name: l.name,
+		iso: l.code
+	}));
+	const countries = countriesData?.countries;
+	const countryOptions = (0, react.useMemo)(() => [...countries ?? []].map((c) => ({
+		iso: c.code,
+		name: c.name
+	})).sort((a, b) => a.name.localeCompare(b.name)), [countries]);
+	const statesByCountry = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const c of countries ?? []) map.set(c.code, c.states.map((s) => ({
+			name: s.name,
+			isoCode: s.code
+		})));
+		return map;
+	}, [countries]);
+	const fetchStatesFromCountries = (0, react.useCallback)((countryCode) => Promise.resolve(statesByCountry.get(countryCode) ?? []), [statesByCountry]);
+	const [isInfoDialogOpen, setIsInfoDialogOpen] = (0, react.useState)(false);
+	const [addressDialog, setAddressDialog] = (0, react.useState)({
+		open: false,
+		selected: null
+	});
+	const [deletingAddress, setDeletingAddress] = (0, react.useState)(null);
+	const [isAddCardOpen, setIsAddCardOpen] = (0, react.useState)(false);
+	const [editPaymentMethod, setEditPaymentMethod] = (0, react.useState)(null);
+	const userInfoLanguage = (0, react.useMemo)(() => {
+		return adaptedLanguages.find((l) => l.iso === accountData?.fluid_pay_account.language_iso)?.name ?? "English";
+	}, [adaptedLanguages, accountData]);
+	const derivedLastName = (0, react.useMemo)(() => {
+		if (!accountData) return "";
+		const { first_name, full_name } = accountData.customer;
+		return deriveLastName(first_name, full_name);
+	}, [accountData]);
+	const userInfoForm = require_src.useZodForm((0, react.useMemo)(() => zod.z.object({
+		first_name: zod.z.string().min(1, "First name is required"),
+		last_name: zod.z.string().min(1, "Last name is required"),
+		phone_number: zod.z.string().optional(),
+		language: zod.z.string().min(1, "Language is required"),
+		bio: zod.z.string().optional()
+	}), []), { defaultValues: {
+		first_name: accountData?.customer.first_name ?? "",
+		last_name: derivedLastName,
+		phone_number: accountData?.customer.phone ?? "",
+		language: userInfoLanguage,
+		bio: accountRep?.bio ?? ""
+	} });
+	const handleOpenInfoDialog = (0, react.useCallback)(() => {
+		userInfoForm.reset({
+			first_name: accountData?.customer.first_name ?? "",
+			last_name: derivedLastName,
+			phone_number: accountData?.customer.phone ?? "",
+			language: userInfoLanguage,
+			bio: accountRep?.bio ?? ""
+		});
+		setIsInfoDialogOpen(true);
+	}, [
+		accountData,
+		accountRep,
+		derivedLastName,
+		userInfoLanguage,
+		userInfoForm
+	]);
+	const onSubmitUserInfo = userInfoForm.handleSubmit(async (data) => {
+		try {
+			await updateCustomerMutation.mutateAsync(data);
+			setIsInfoDialogOpen(false);
+		} catch {}
+	});
+	const socialLinks = (0, react.useMemo)(() => {
+		const src = accountRep?.social_links ?? {};
+		const result = {};
+		for (const [key, field] of Object.entries(SOCIAL_KEY_TO_FIELD)) {
+			if (!field) continue;
+			const v = src[field];
+			if (typeof v === "string" && v.length > 0) result[key] = v;
+		}
+		return result;
+	}, [accountRep]);
+	const handleCopyMySiteLink = (0, react.useCallback)(async () => {
+		if (!mySiteUrl) return;
+		try {
+			await navigator.clipboard.writeText(mySiteUrl);
+			onToast("MySite link copied", "success");
+		} catch {
+			onToast("Failed to copy link", "error");
+		}
+	}, [mySiteUrl, onToast]);
+	const [editingSocial, setEditingSocial] = (0, react.useState)(null);
+	const [socialDraft, setSocialDraft] = (0, react.useState)("");
+	const handleConnectSocial = (0, react.useCallback)((key) => {
+		const field = SOCIAL_KEY_TO_FIELD[key];
+		if (!field) {
+			onToast("This platform isn't editable yet", "warning");
+			return;
+		}
+		setSocialDraft(accountRep?.social_links?.[field] ?? "");
+		setEditingSocial(key);
+	}, [accountRep, onToast]);
+	const updateSocialMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: async ({ field, value }) => {
+			const current = accountRep?.social_links ?? {};
+			await accountApi.updateAccount({ account: { social_links: {
+				...current,
+				[field]: value
+			} } });
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.accountKeys.all });
+			onToast("Social link updated", "success");
+		},
+		onError: () => {
+			onToast("Failed to update social link", "error");
+		}
+	});
+	const handleSubmitSocial = (0, react.useCallback)(async () => {
+		if (!editingSocial) return;
+		const field = SOCIAL_KEY_TO_FIELD[editingSocial];
+		if (!field) return;
+		await updateSocialMutation.mutateAsync({
+			field,
+			value: socialDraft.trim()
+		});
+		setEditingSocial(null);
+	}, [
+		editingSocial,
+		socialDraft,
+		updateSocialMutation
+	]);
+	if (isAccountError && !isLoadingAccount) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-4 py-8 sm:px-9",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-muted-foreground text-center text-sm",
+			children: "Unable to load account data. Please try again later."
+		})
+	});
+	if (isLoadingAccount || !accountData || !accountRep) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-4 pt-4 sm:px-9 md:pt-8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-16 animate-pulse rounded" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-32 animate-pulse rounded" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-32 animate-pulse rounded" })
+			]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AddressAutocompleteInput.FluidPayCoreProvider, {
+		api: fluidPayShim,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileLayout, {
+				account: accountRep,
+				pointsBalance: rewardPointsEnabled ? pointsLedgerData?.points_ledgers?.[0]?.total_balance ?? 0 : void 0,
+				pointsLedger: adaptedPointsLedger,
+				rewardsEnabled: rewardPointsEnabled,
+				addresses,
+				paymentMethods,
+				mySiteDisplayUrl,
+				socialLinks,
+				onEditPersonalInfo: handleOpenInfoDialog,
+				onAddAddress: () => setAddressDialog({
+					open: true,
+					selected: null
+				}),
+				onEditAddress: (address) => setAddressDialog({
+					open: true,
+					selected: address
+				}),
+				onDeleteAddress: (address) => setDeletingAddress(address),
+				onAddPaymentMethod: () => setIsAddCardOpen(true),
+				onEditPaymentMethod: (pm) => setEditPaymentMethod(pm),
+				onCopyMySiteLink: handleCopyMySiteLink,
+				onConnectSocial: handleConnectSocial
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.UserInfoDialog, {
+				control: userInfoForm.control,
+				isOpen: isInfoDialogOpen,
+				onSubmit: onSubmitUserInfo,
+				handleClose: () => setIsInfoDialogOpen(false),
+				languageOptions: adaptedLanguages.map((l) => ({
+					name: l.name,
+					value: l.name
+				})),
+				errorMsg: void 0,
+				isSubmitting: updateCustomerMutation.isPending,
+				email: accountRep.email ?? ""
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressFormDialog, {
+				isOpen: addressDialog.open,
+				onClose: () => setAddressDialog({
+					open: false,
+					selected: null
+				}),
+				selectedAddress: addressDialog.selected,
+				t: (key) => t(key),
+				onSubmit: async (formData) => {
+					if (addressDialog.selected) await updateAddressMutation.mutateAsync({
+						addressId: addressDialog.selected.id,
+						body: formData
+					});
+					else await createAddressMutation.mutateAsync(formData);
+					setAddressDialog({
+						open: false,
+						selected: null
+					});
+				},
+				isSubmitting: createAddressMutation.isPending || updateAddressMutation.isPending,
+				onDelete: addressDialog.selected && !addressDialog.selected.default ? async () => {
+					if (!addressDialog.selected) return;
+					try {
+						await deleteAddressMutation.mutateAsync(addressDialog.selected.id);
+						setAddressDialog({
+							open: false,
+							selected: null
+						});
+					} catch {}
+				} : void 0,
+				isDeleting: deleteAddressMutation.isPending,
+				countries: countryOptions,
+				fetchStates: fetchStatesFromCountries,
+				renderAddressAutocomplete: ({ control, setValue, countryCode }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressAutocompleteInput, {
+					control,
+					setValue,
+					countryIso: countryCode,
+					addressLineField: "address1",
+					cityField: "city",
+					stateField: "state",
+					postalCodeField: "postal_code",
+					placeholder: t("address_line_1")
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.ConfirmActionDialog, {
+				title: t("delete_address"),
+				description: t("delete_address_message"),
+				openDialog: deletingAddress !== null,
+				setOpenDialog: (open) => {
+					if (!open) setDeletingAddress(null);
+				},
+				onAction: async () => {
+					if (!deletingAddress) return;
+					try {
+						await deleteAddressMutation.mutateAsync(deletingAddress.id);
+						setDeletingAddress(null);
+					} catch {}
+				},
+				isLoading: deleteAddressMutation.isPending,
+				actionText: t("delete")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.CreditCardFormDialog, {
+				isOpen: isAddCardOpen,
+				onClose: () => setIsAddCardOpen(false),
+				t: (key) => t(key),
+				onSubmit: async (data) => {
+					try {
+						await addCreditCardMutation.mutateAsync(data);
+						setIsAddCardOpen(false);
+					} catch {}
+				},
+				isSubmitting: addCreditCardMutation.isPending,
+				countries: countryOptions,
+				jwt: "",
+				renderAddressAutocomplete: ({ control, setValue, countryCode }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressAutocompleteInput, {
+					control,
+					setValue,
+					countryIso: countryCode,
+					addressLineField: "address1",
+					cityField: "city",
+					stateField: "state",
+					postalCodeField: "zip",
+					placeholder: t("address_line_1")
+				})
+			}),
+			editPaymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.EditPaymentMethodDialog, {
+				isOpen: true,
+				onClose: () => setEditPaymentMethod(null),
+				paymentMethod: editPaymentMethod,
+				countries: countryOptions,
+				onSubmit: (data) => {
+					updatePaymentMethodMutation.mutate({
+						paymentMethodId: editPaymentMethod.id,
+						data
+					}, { onSuccess: () => setEditPaymentMethod(null) });
+				},
+				isSubmitting: updatePaymentMethodMutation.isPending,
+				onDelete: () => {
+					deletePaymentMethodMutation.mutate(editPaymentMethod.id, { onSuccess: () => setEditPaymentMethod(null) });
+				},
+				isDeleting: deletePaymentMethodMutation.isPending
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
+				open: editingSocial !== null,
+				onOpenChange: (open) => !open && setEditingSocial(null),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
+					className: "max-w-sm md:max-w-md",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: editingSocial ? `Edit ${SOCIAL_LABELS[editingSocial]} link` : "Edit social link" }) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-2 pt-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+								htmlFor: "social-handle",
+								className: "mb-1.5 block text-sm font-medium",
+								children: "URL"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+								id: "social-handle",
+								value: socialDraft,
+								onChange: (e) => setSocialDraft(e.target.value),
+								placeholder: editingSocial ? SOCIAL_PLACEHOLDERS[editingSocial] : "",
+								onKeyDown: (e) => {
+									if (e.key === "Enter") {
+										e.preventDefault();
+										handleSubmitSocial();
+									}
+								},
+								autoFocus: true
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							type: "button",
+							variant: "outline",
+							onClick: () => setEditingSocial(null),
+							disabled: updateSocialMutation.isPending,
+							children: "Cancel"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							type: "button",
+							onClick: () => {
+								handleSubmitSocial();
+							},
+							disabled: updateSocialMutation.isPending,
+							children: updateSocialMutation.isPending ? "Saving..." : "Save"
+						})] })
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/ProfileScreen.tsx
+function defaultToast(message, type) {
+	require_src.fluidToast({
+		title: message,
+		type
+	});
+}
+function ProfileScreen({ onToast, background, textColor, accentColor, padding, borderRadius, ...divProps }) {
+	const { config } = require_FluidProvider.useFluidContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.ProfileTranslationBridge, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileScreenContent, {
+		onToast: onToast ?? defaultToast,
+		countryIso: config.countryIso ?? "US",
+		divProps
+	}) });
+}
+function ProfileScreenContent({ onToast, countryIso, divProps }) {
+	const { t } = require_AddressAutocompleteInput.useProfileTranslation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: t("breadcrumb")
+		}) })
+	}) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileContentScreen, {
+			onToast,
+			countryIso
+		})
+	})] });
+}
+const profileScreenPropertySchema = {
+	widgetType: "ProfileScreen",
+	displayName: "Profile Screen",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: []
+};
+//#endregion
+Object.defineProperty(exports, "ProfileScreen", {
+	enumerable: true,
+	get: function() {
+		return ProfileScreen;
+	}
+});
+Object.defineProperty(exports, "profileScreenPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return profileScreenPropertySchema;
+	}
+});
+
+//# sourceMappingURL=ProfileScreen-CT5nLt3E.cjs.map