@fluid-app/portal-sdk 0.1.244 → 0.1.246

package/dist/{fluid-pay-api-adapter-eNT8m0xB.mjs → fluid-pay-api-adapter-CJ7-I8k-.mjs}

@@ -1,9 +1,9 @@
 import { t as parseApiErrors } from "./parse-api-errors-CVZhXH-a.mjs";
-import { $ as DropdownMenuSeparator, A as Select, An as Accordion, C as Skeleton, Dn as Button, Fn as cn, J as DropdownMenuContent, K as Label, L as Input, M as SelectItem, Mn as AccordionItem, N as SelectTrigger, Nn as AccordionTrigger, P as SelectValue, Pn as useZodForm, Y as DropdownMenuItem, _n as AvatarFallback, at as DialogClose, b as fluidToast, ct as DialogFooter, ft as DialogTitle, gn as Avatar, it as Dialog, j as SelectContent, jn as AccordionContent, lt as DialogHeader, ot as DialogContent, q as DropdownMenu, rt as DropdownMenuTrigger } from "./src-pgBBOcJa.mjs";
+import { $ as DropdownMenuSeparator, A as Select, An as Accordion, At as CardTitle, C as Skeleton, Dn as Button, Et as CardContent, Fn as cn, J as DropdownMenuContent, K as Label, L as Input, M as SelectItem, Mn as AccordionItem, N as SelectTrigger, Nn as AccordionTrigger, P as SelectValue, Pn as useZodForm, Tt as CardAction, Y as DropdownMenuItem, _n as AvatarFallback, at as DialogClose, b as fluidToast, ct as DialogFooter, ft as DialogTitle, gn as Avatar, it as Dialog, j as SelectContent, jn as AccordionContent, kt as CardHeader, lt as DialogHeader, ot as DialogContent, q as DropdownMenu, rt as DropdownMenuTrigger, s as Textarea, wt as Card } from "./src-pgBBOcJa.mjs";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Info, Pencil } from "lucide-react";
+import { Info } from "lucide-react";
 import { Controller, useController, useWatch } from "react-hook-form";
 import { z } from "zod";
 //#region ../../profile/core/src/context.ts
@@ -286,15 +286,14 @@ function useCountryStates() {
 }
 //#endregion
 //#region ../../profile/ui/src/components/ellipses-dropdown.tsx
-function EllipsesDropdown({ onDelete, onEdit, editLabel = "Edit", deleteLabel = "Delete", disabled = false }) {
+function EllipsesDropdown({ onDelete, onEdit, onMakeDefault, editLabel = "Edit", deleteLabel = "Delete", makeDefaultLabel = "Make Default", disabled = false }) {
 	if (disabled) return /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
 		disabled: true,
-		className: "cursor-not-allowed opacity-50",
 		children: /* @__PURE__ */ jsx("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: "0 0 128 512",
-			className: "h-4 w-1 fill-gray-400",
+			className: "fill-muted-foreground h-4 w-1",
 			children: /* @__PURE__ */ jsx("path", { d: "M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z" })
 		})
 	});
@@ -305,37 +304,74 @@ function EllipsesDropdown({ onDelete, onEdit, editLabel = "Edit", deleteLabel =
 			children: /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				viewBox: "0 0 128 512",
-				className: "h-4 w-1 fill-gray-400",
+				className: "fill-muted-foreground h-4 w-1",
 				children: /* @__PURE__ */ jsx("path", { d: "M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z" })
 			})
 		})
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-		className: "min-w-20 space-y-1 text-sm text-gray-900",
-		children: [onEdit && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
-			className: "flex cursor-pointer flex-row items-center justify-between space-x-2 rounded px-2 hover:bg-gray-50",
-			onClick: (e) => {
-				e.stopPropagation();
-				onEdit();
-			},
-			children: [/* @__PURE__ */ jsx("span", { children: editLabel }), /* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				viewBox: "0 0 512 512",
-				className: "h-2.5 w-2.5 fill-current",
-				children: /* @__PURE__ */ jsx("path", { d: "M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" })
-			})]
-		}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			className: "flex cursor-pointer flex-row items-center justify-between space-x-2 rounded px-2 text-red-500 hover:bg-red-50",
-			onClick: (e) => {
-				e.stopPropagation();
-				onDelete?.();
-			},
-			children: [/* @__PURE__ */ jsx("span", { children: deleteLabel }), /* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				viewBox: "0 0 448 512",
-				className: "h-2.5 w-2.5 fill-red-500",
-				children: /* @__PURE__ */ jsx("path", { d: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0L284.2 0c12.1 0 23.2 6.8 28.6 17.7L320 32l80 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L48 96C30.3 96 16 81.7 16 64S30.3 32 48 32l80 0 7.2-14.3zM32 128l384 0 0 320c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-320z" })
-			})]
-		})]
+		className: "text-foreground min-w-28 space-y-1 text-sm",
+		children: [
+			onEdit && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "hover:bg-muted flex cursor-pointer flex-row items-center gap-x-2 rounded px-2",
+				onClick: (e) => {
+					e.stopPropagation();
+					onEdit();
+				},
+				children: [/* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					strokeWidth: 1.5,
+					stroke: "currentColor",
+					className: "h-3.5 w-3.5 flex-shrink-0",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+					})
+				}), /* @__PURE__ */ jsx("span", { children: editLabel })]
+			}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }),
+			onMakeDefault && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "hover:bg-muted flex cursor-pointer flex-row items-center gap-x-2 rounded px-2",
+				onClick: (e) => {
+					e.stopPropagation();
+					onMakeDefault();
+				},
+				children: [/* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					strokeWidth: 1.5,
+					stroke: "currentColor",
+					className: "h-3.5 w-3.5 flex-shrink-0",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "m4.5 12.75 6 6 9-13.5"
+					})
+				}), /* @__PURE__ */ jsx("span", { children: makeDefaultLabel })]
+			}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "text-destructive hover:bg-destructive/10 flex cursor-pointer flex-row items-center gap-x-2 rounded px-2",
+				onClick: (e) => {
+					e.stopPropagation();
+					onDelete?.();
+				},
+				children: [/* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					strokeWidth: 1.5,
+					stroke: "currentColor",
+					className: "h-3.5 w-3.5 flex-shrink-0",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+					})
+				}), /* @__PURE__ */ jsx("span", { children: deleteLabel })]
+			})
+		]
 	})] });
 }
 //#endregion
@@ -346,24 +382,24 @@ function ConfirmActionDialog({ title, description, onAction, openDialog, setOpen
 		open: openDialog,
 		onOpenChange: setOpenDialog,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "max-w-sm rounded md:w-90",
+			className: "max-w-sm md:w-90",
 			children: [
 				/* @__PURE__ */ jsx(DialogHeader, {
 					className: "flex flex-row justify-between",
 					children: /* @__PURE__ */ jsx(DialogTitle, {
-						className: "text-md w-full text-left font-medium",
+						className: "w-full text-left",
 						children: title
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "space-y-4",
 					children: /* @__PURE__ */ jsx("p", {
-						className: "text-left text-sm text-gray-500",
+						className: "text-muted-foreground text-left text-sm",
 						children: description
 					})
 				}),
 				errorMsg && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-red-500",
+					className: "text-destructive text-sm",
 					children: errorMsg
 				}),
 				/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs("div", {
@@ -371,16 +407,18 @@ function ConfirmActionDialog({ title, description, onAction, openDialog, setOpen
 					children: [/* @__PURE__ */ jsx(DialogClose, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Button, {
-							className: "min-w-[70px] rounded bg-gray-50 p-3 text-gray-900 ring-1 ring-gray-300 hover:bg-gray-100",
+							variant: "secondary",
+							className: "min-w-[70px]",
 							onClick: () => setOpenDialog(false),
 							children: t("cancel")
 						})
 					}), /* @__PURE__ */ jsx(Button, {
 						type: "button",
-						className: "min-w-[70px] rounded bg-red-600 p-3 text-white hover:bg-red-700",
+						variant: "destructive",
+						className: "min-w-[70px]",
 						onClick: onAction,
 						disabled: isLoading,
-						children: isLoading ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-white border-t-transparent" }) : actionText
+						children: isLoading ? /* @__PURE__ */ jsx("div", { className: "border-primary-foreground h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-t-transparent" }) : actionText
 					})]
 				}) })
 			]
@@ -388,6 +426,34 @@ function ConfirmActionDialog({ title, description, onAction, openDialog, setOpen
 	});
 }
 //#endregion
+//#region ../../profile/ui/src/components/animated-expand.tsx
+const DEFAULT_DURATION_MS = 500;
+function useReducedMotion() {
+	const [reduced, setReduced] = useState(() => typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false);
+	useEffect(() => {
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const onChange = (e) => setReduced(e.matches);
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+function AnimatedExpand({ open, durationMs = DEFAULT_DURATION_MS, children }) {
+	const effectiveDuration = useReducedMotion() ? 0 : durationMs;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			gridTemplateRows: open ? "1fr" : "0fr",
+			transition: `grid-template-rows ${effectiveDuration}ms cubic-bezier(0.4,0,0.2,1)`
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: { overflow: "hidden" },
+			children
+		})
+	});
+}
+//#endregion
 //#region ../../profile/ui/src/components/customer-points-ledger.tsx
 function formatTransactionType(ledger, t) {
 	const transactionType = ledger.metadata.transaction_type;
@@ -416,91 +482,65 @@ function CustomerPointsLedger({ pointsLedger, isLoading = false }) {
 	const [accordionValue, setAccordionValue] = useState("");
 	const { t } = useProfileUI();
 	const availablePoints = pointsLedger[0]?.total_balance ?? 0;
-	return /* @__PURE__ */ jsx("div", {
-		className: "mb-6 border-b border-gray-300 pb-4",
-		children: /* @__PURE__ */ jsx(Accordion, {
-			type: "single",
-			collapsible: true,
-			value: accordionValue,
-			onValueChange: setAccordionValue,
-			className: "w-full",
-			children: /* @__PURE__ */ jsxs(AccordionItem, {
-				value: "points-history",
-				className: "border-b-0",
+	const isExpanded = accordionValue === "points-history";
+	return /* @__PURE__ */ jsx(Accordion, {
+		type: "single",
+		collapsible: true,
+		value: accordionValue,
+		onValueChange: setAccordionValue,
+		children: /* @__PURE__ */ jsx(AccordionItem, {
+			value: "points-history",
+			className: "border-0",
+			children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, { children: t("points_history") }), pointsLedger.length > 0 && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(AccordionTrigger, { className: "[&>svg]:text-muted-foreground" }) })] }), /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex flex-col gap-3",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "mt-4 mb-1 text-sm text-gray-400",
-							children: t("points_history")
-						}), /* @__PURE__ */ jsx(AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
-					}),
-					isLoading && /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }),
-					!isLoading && !accordionValue && /* @__PURE__ */ jsx("div", {
-						className: "mb-2 flex w-full cursor-pointer flex-col",
-						onClick: () => setAccordionValue("points-history"),
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "text-sm font-semibold text-gray-900",
-							children: [
-								availablePoints.toLocaleString(),
-								" ",
-								/* @__PURE__ */ jsx("span", {
-									className: "font-normal text-gray-500",
-									children: t("points_available").toLowerCase()
-								})
-							]
-						})
-					}),
-					/* @__PURE__ */ jsxs(AccordionContent, {
-						className: "max-h-[400px] overflow-y-auto pt-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "mb-3 flex w-full flex-col",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "text-sm font-semibold text-gray-900",
-								children: [
-									availablePoints.toLocaleString(),
-									" ",
-									/* @__PURE__ */ jsx("span", {
-										className: "font-normal text-gray-500",
-										children: t("points_available").toLowerCase()
-									})
-								]
+					isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) : /* @__PURE__ */ jsxs("div", {
+						className: "text-foreground text-sm font-semibold",
+						children: [
+							availablePoints.toLocaleString(),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground font-normal",
+								children: t("points_available").toLowerCase()
 							})
-						}), /* @__PURE__ */ jsx("div", {
-							className: "flex flex-col space-y-0",
-							children: pointsLedger.length > 0 ? pointsLedger.map((ledger) => /* @__PURE__ */ jsxs("div", {
-								className: "relative flex flex-row items-start justify-between py-3",
-								children: [
-									/* @__PURE__ */ jsxs("div", {
-										className: "absolute top-3 left-0",
-										children: [/* @__PURE__ */ jsx("div", { className: "mt-1.5 h-2 w-2 flex-shrink-0 rounded-full border border-gray-300" }), /* @__PURE__ */ jsx("div", { className: "mr-1 h-10 border-r border-gray-200" })]
-									}),
-									/* @__PURE__ */ jsx("div", {
-										className: "ml-6 flex flex-row items-start space-x-3",
-										children: /* @__PURE__ */ jsxs("div", {
+						]
+					}),
+					pointsLedger.length > 0 && /* @__PURE__ */ jsx(AnimatedExpand, {
+						open: isExpanded,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col",
+							children: pointsLedger.map((ledger, index) => {
+								return /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-row items-stretch gap-3",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "relative flex w-2 flex-col items-center",
+										children: [!(index === pointsLedger.length - 1) && /* @__PURE__ */ jsx("div", { className: "bg-muted-foreground absolute top-3 -bottom-3 left-1/2 w-px -translate-x-1/2" }), /* @__PURE__ */ jsx("div", { className: "border-muted-foreground bg-card relative mt-3 h-2 w-2 shrink-0 rounded-full border" })]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-1 flex-row items-start justify-between py-1.5",
+										children: [/* @__PURE__ */ jsxs("div", {
 											className: "flex flex-col",
 											children: [/* @__PURE__ */ jsx("div", {
-												className: "text-sm font-medium text-gray-900",
+												className: "text-foreground text-sm font-medium",
 												children: formatTransactionType(ledger, t)
 											}), /* @__PURE__ */ jsx("div", {
-												className: "text-sm text-gray-500",
+												className: "text-muted-foreground text-sm",
 												children: formatDateTime(ledger.created_at)
 											})]
-										})
-									}),
-									/* @__PURE__ */ jsx("div", {
-										className: cn("text-sm font-medium", ledger.amount >= 0 ? "text-green-500" : "text-red-500"),
-										children: formatPoints(ledger.amount)
-									})
-								]
-							}, ledger.id)) : /* @__PURE__ */ jsx("div", {
-								className: "text-sm text-gray-500",
-								children: t("no_points_history_found")
+										}), /* @__PURE__ */ jsx("div", {
+											className: cn("text-sm font-medium", ledger.amount >= 0 ? "text-primary" : "text-destructive"),
+											children: formatPoints(ledger.amount)
+										})]
+									})]
+								}, ledger.id);
 							})
-						})]
+						})
+					}),
+					!isLoading && pointsLedger.length === 0 && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground text-sm",
+						children: t("no_points_history_found")
 					})
 				]
-			})
+			})] })
 		})
 	});
 }
@@ -524,10 +564,10 @@ function FormTextField$1({ control, name, label, containerClassName, ...props })
 				...props,
 				id: name,
 				value: field.value ?? "",
-				className: cn(error && "ring-1 ring-red-500", props.className)
+				className: cn(error && "ring-destructive ring-1", props.className)
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-red-500",
+				className: "text-destructive text-sm",
 				children: error.message
 			})
 		]
@@ -553,7 +593,7 @@ function FormSelectField$1({ control, name, label, options, placeholder, contain
 					onChange?.(val);
 				},
 				children: [/* @__PURE__ */ jsx(SelectTrigger, {
-					className: cn(error && "ring-1 ring-red-500"),
+					className: cn(error && "ring-destructive ring-1"),
 					children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 				}), /* @__PURE__ */ jsx(SelectContent, { children: options?.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
 					value: opt.value.toString(),
@@ -561,7 +601,7 @@ function FormSelectField$1({ control, name, label, options, placeholder, contain
 				}, `${opt.name}-${opt.value}`)) })]
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-red-500",
+				className: "text-destructive text-sm",
 				children: error.message
 			})
 		]
@@ -610,12 +650,9 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 		open: isOpen,
 		onOpenChange: (open) => !open && handleDialogClose(),
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "max-w-sm rounded md:max-w-lg",
+			className: "max-w-sm md:max-w-lg",
 			children: [
-				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
-					className: "text-md font-medium text-gray-900",
-					children: t("edit_profile")
-				}) }),
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("edit_profile") }) }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "space-y-4",
 					children: [
@@ -671,7 +708,7 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 								autoFocus: true
 							}),
 							emailError && /* @__PURE__ */ jsx("p", {
-								className: "text-xs text-red-500",
+								className: "text-destructive text-xs",
 								children: emailError
 							}),
 							/* @__PURE__ */ jsxs("div", {
@@ -688,14 +725,12 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 									variant: "outline",
 									size: "sm",
 									onClick: handleCancelEmailEdit,
-									className: "cursor-pointer",
 									children: "Cancel"
 								}), /* @__PURE__ */ jsxs(Button, {
 									type: "button",
 									size: "sm",
 									onClick: handleEmailSubmit,
 									disabled: !newEmail.trim() || isChangingEmail,
-									className: "cursor-pointer",
 									children: [isChangingEmail && /* @__PURE__ */ jsx("div", { className: "mr-2 h-3.5 w-3.5 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isChangingEmail ? "Sending..." : "Send verification"]
 								})]
 							})
@@ -730,13 +765,13 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 							variant: "outline",
 							size: "sm",
 							onClick: () => setIsEditingEmail(true),
-							className: "shrink-0 cursor-pointer",
+							className: "shrink-0",
 							children: "Change"
 						})]
 					})]
 				}),
 				errorMsg && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-red-500",
+					className: "text-destructive text-sm",
 					children: errorMsg
 				}),
 				/* @__PURE__ */ jsx(DialogFooter, {
@@ -746,7 +781,6 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 						children: /* @__PURE__ */ jsxs(Button, {
 							type: "button",
 							onClick: onSubmit,
-							className: "cursor-pointer",
 							children: [isSubmitting && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isSubmitting ? t("saving") : t("save_changes")]
 						})
 					})
@@ -810,29 +844,27 @@ function CustomerInfo({ customerAccount, languages, onUpdateCustomer, isUpdating
 		}
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "mb-6 flex flex-row items-center justify-between space-x-2 border-b border-gray-300 pb-4",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-row items-center space-x-2",
-				children: [/* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: userInitial }) }), /* @__PURE__ */ jsx("div", {
-					className: "flex flex-col",
-					children: first_name ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm font-medium",
-						children: customerAccount.customer.full_name
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-sm text-gray-500",
-						children: customerAccount.customer.email
-					})] }) : /* @__PURE__ */ jsx("p", {
-						className: "text-sm font-medium",
-						children: customerAccount.customer.email
-					})
+		/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, { children: "Personal Information" }), /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "link",
+			size: "sm",
+			onClick: handleOpenEditDialog,
+			children: "Edit"
+		}) })] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row items-center space-x-2",
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				className: "border-border border",
+				children: /* @__PURE__ */ jsx(AvatarFallback, { children: userInitial })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [customerAccount.customer.full_name.trim() && /* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium",
+					children: customerAccount.customer.full_name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: customerAccount.customer.email
 				})]
-			}), /* @__PURE__ */ jsx("button", {
-				className: "cursor-pointer rounded-md border border-gray-300 p-1 hover:bg-gray-50 disabled:opacity-50",
-				onClick: handleOpenEditDialog,
-				children: /* @__PURE__ */ jsx(Pencil, { className: "h-2.5 w-2.5 text-gray-400" })
 			})]
-		}),
+		}) })] }),
 		pendingEmailChange && /* @__PURE__ */ jsxs("div", {
 			className: "bg-muted mb-6 flex items-start gap-2.5 rounded-md px-3 py-3",
 			children: [/* @__PURE__ */ jsx(Info, { className: "text-primary mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ jsxs("div", {
@@ -892,9 +924,62 @@ function CustomerInfo({ customerAccount, languages, onUpdateCustomer, isUpdating
 function formatAddressName(address) {
 	return address.name ?? "";
 }
-function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick, onEditAddress, onDeleteAddress, accordionItemValue, addAddressLabel, showAddButton = true, borderStyle = "border-b border-gray-300 pb-4 mb-6", className = "", showActions = true, isLoading = false }) {
-	const [addressesValue, setAddressesValue] = useState("");
+function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick, onEditAddress, onDeleteAddress, onMakeDefaultAddress, accordionItemValue, addAddressLabel, showAddButton = true, borderStyle = "border-b border-border pb-4 mb-6", className = "", showActions = true, isLoading = false, value, onValueChange, hideTrigger = false }) {
+	const [internalValue, setInternalValue] = useState("");
+	const addressesValue = value ?? internalValue;
+	const setAddressesValue = onValueChange ?? setInternalValue;
 	const { t } = useProfileUI();
+	const addressListContent = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col justify-between space-y-4 px-0.5",
+		children: isLoading ? /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })]
+		}) : addressList.length > 0 ? addressList.map((address, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-full flex-row items-start justify-between space-x-2 px-2", { "border-border border-b p-3": addressList.length - 1 !== index }),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-foreground text-sm",
+					children: [
+						formatAddressName(address),
+						" ",
+						/* @__PURE__ */ jsx("br", {}),
+						address.address1,
+						" ",
+						/* @__PURE__ */ jsx("br", {}),
+						address.city,
+						", ",
+						address.state,
+						" ",
+						address.postal_code
+					]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [address.default && /* @__PURE__ */ jsx("p", {
+					className: "bg-secondary text-secondary-foreground w-fit rounded px-2 py-0.5 text-xs font-medium",
+					children: t("default")
+				}), showActions && /* @__PURE__ */ jsx(EllipsesDropdown, {
+					onDelete: () => onDeleteAddress?.(address),
+					onEdit: () => onEditAddress?.(address),
+					onMakeDefault: !address.default && onMakeDefaultAddress ? () => onMakeDefaultAddress(address) : void 0,
+					editLabel: t("edit"),
+					deleteLabel: t("delete")
+				})]
+			})]
+		}, address.id)) : /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground text-sm",
+			children: t("no_saved_addresses_found")
+		})
+	});
+	if (hideTrigger) return /* @__PURE__ */ jsxs("div", {
+		className: `${borderStyle} ${className}`,
+		children: [addressListContent, showAddButton && /* @__PURE__ */ jsx("button", {
+			className: "text-foreground mt-3 text-left text-sm",
+			onClick: onAddAddressClick,
+			children: addAddressLabel
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${borderStyle} ${className}`,
 		children: [/* @__PURE__ */ jsx(Accordion, {
@@ -909,15 +994,11 @@ function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ jsx("div", {
+						children: [title && /* @__PURE__ */ jsx("div", {
 							className: "text-muted-foreground mt-4 mb-1 text-sm",
 							children: title
 						}), /* @__PURE__ */ jsx(AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
 					}),
-					isLoading && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })]
-					}),
 					!isLoading && !addressesValue && displayAddress && /* @__PURE__ */ jsxs("div", {
 						className: "mb-2 flex w-full cursor-pointer flex-col",
 						onClick: () => setAddressesValue(accordionItemValue),
@@ -941,45 +1022,7 @@ function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick
 					}),
 					/* @__PURE__ */ jsx(AccordionContent, {
 						className: "max-h-[400px] overflow-y-auto pt-2",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "mt-2 flex flex-col justify-between space-y-4 px-0.5",
-							children: addressList.length > 0 ? addressList.map((address, index) => /* @__PURE__ */ jsxs("div", {
-								className: cn("flex min-h-[48px] w-full flex-row items-center justify-between space-x-2 px-2", { "items-center border-b border-gray-300 p-3": addressList.length - 1 !== index }),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "flex flex-col",
-									children: /* @__PURE__ */ jsxs("div", {
-										className: "text-foreground text-sm",
-										children: [
-											formatAddressName(address),
-											" ",
-											/* @__PURE__ */ jsx("br", {}),
-											address.address1,
-											" ",
-											/* @__PURE__ */ jsx("br", {}),
-											address.city,
-											", ",
-											address.state,
-											" ",
-											address.postal_code
-										]
-									})
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [address.default && /* @__PURE__ */ jsx("p", {
-										className: "mt-1 w-fit rounded bg-gray-500 px-2 py-0.5 text-xs font-medium text-white",
-										children: t("default")
-									}), showActions && /* @__PURE__ */ jsx(EllipsesDropdown, {
-										onDelete: () => onDeleteAddress?.(address),
-										onEdit: () => onEditAddress?.(address),
-										editLabel: t("edit"),
-										deleteLabel: t("delete")
-									})]
-								})]
-							}, address.id)) : /* @__PURE__ */ jsx("div", {
-								className: "text-muted-foreground text-sm",
-								children: t("no_saved_addresses_found")
-							})
-						})
+						children: addressListContent
 					})
 				]
 			})
@@ -992,13 +1035,16 @@ function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick
 }
 //#endregion
 //#region ../../profile/ui/src/components/addresses.tsx
-function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddress, isDeletingAddress = false, renderAddressDialog }) {
-	const [openAddressDialog, setOpenAddressDialog] = useState(false);
+function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddress, isDeletingAddress = false, onMakeDefaultAddress, renderAddressDialog }) {
+	const [accordionValue, setAccordionValue] = useState("");
 	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
 	const [selectedAddress, setSelectedAddress] = useState(null);
 	const [deleteAddressError, setDeleteAddressError] = useState(void 0);
+	const [openAddressDialog, setOpenAddressDialog] = useState(false);
 	const { t } = useProfileUI();
 	const defaultAddress = addresses.find((addr) => addr.default) ?? addresses[0] ?? null;
+	const extraAddresses = defaultAddress ? addresses.filter((a) => a.id !== defaultAddress.id) : addresses;
+	const isExpanded = accordionValue === "addresses";
 	const handleDeleteClick = (address) => {
 		setSelectedAddress(address);
 		setDeleteAddressError(void 0);
@@ -1019,8 +1065,9 @@ function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddr
 			setDeleteAddressError(void 0);
 			setOpenDeleteDialog(false);
 			setSelectedAddress(null);
-		} catch {
-			setDeleteAddressError("We were unable to delete this address. Please try again.");
+		} catch (error) {
+			console.error("Failed to delete address:", error);
+			setDeleteAddressError(parseApiErrors(error) || (error instanceof Error ? error.message : "We were unable to delete this address. Please try again."));
 		}
 	};
 	const handleAddClick = () => {
@@ -1033,19 +1080,65 @@ function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddr
 		setSelectedAddress(null);
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(AddressDropdown, {
-			title: t("shipping_addresses"),
-			displayAddress: defaultAddress,
-			addressList: addresses,
-			onAddAddressClick: handleAddClick,
-			onEditAddress: handleEditClick,
-			onDeleteAddress: handleDeleteClick,
-			accordionItemValue: "addresses",
-			addAddressLabel: `+ ${t("add_an_address")}`,
-			showAddButton: true,
-			borderStyle: "border-b border-gray-300 pb-4 mb-6",
-			showActions: true,
-			isLoading
+		/* @__PURE__ */ jsx(Accordion, {
+			type: "single",
+			collapsible: true,
+			value: accordionValue,
+			onValueChange: setAccordionValue,
+			children: /* @__PURE__ */ jsx(AccordionItem, {
+				value: "addresses",
+				className: "border-0",
+				children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, { children: "Shipping Addresses" }), extraAddresses.length > 0 && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(AccordionTrigger, { className: "[&>svg]:text-muted-foreground" }) })] }), /* @__PURE__ */ jsxs(CardContent, {
+					className: "flex flex-col gap-3",
+					children: [
+						defaultAddress && /* @__PURE__ */ jsx(AddressDropdown, {
+							title: "",
+							displayAddress: defaultAddress,
+							addressList: [defaultAddress],
+							onAddAddressClick: handleAddClick,
+							onEditAddress: handleEditClick,
+							onDeleteAddress: handleDeleteClick,
+							onMakeDefaultAddress: onMakeDefaultAddress ? (addr) => onMakeDefaultAddress(addr.id) : void 0,
+							accordionItemValue: "addresses-preview",
+							addAddressLabel: "",
+							showAddButton: false,
+							borderStyle: "",
+							showActions: true,
+							isLoading,
+							hideTrigger: true,
+							value: "addresses-preview"
+						}),
+						extraAddresses.length > 0 && /* @__PURE__ */ jsx(AnimatedExpand, {
+							open: isExpanded,
+							children: /* @__PURE__ */ jsx(AddressDropdown, {
+								title: "",
+								displayAddress: null,
+								addressList: extraAddresses,
+								onAddAddressClick: handleAddClick,
+								onEditAddress: handleEditClick,
+								onDeleteAddress: handleDeleteClick,
+								onMakeDefaultAddress: onMakeDefaultAddress ? (addr) => onMakeDefaultAddress(addr.id) : void 0,
+								accordionItemValue: "addresses-inner",
+								addAddressLabel: "",
+								showAddButton: false,
+								borderStyle: "",
+								showActions: true,
+								isLoading,
+								hideTrigger: true,
+								value: "addresses-inner"
+							})
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "link",
+							size: "sm",
+							className: "text-foreground mt-3 h-auto w-fit justify-start p-0 text-left",
+							onClick: handleAddClick,
+							children: ["+ ", t("add_an_address")]
+						})
+					]
+				})] })
+			})
 		}),
 		/* @__PURE__ */ jsx(ConfirmActionDialog, {
 			title: t("delete_address"),
@@ -1096,8 +1189,10 @@ function getCardExpiry(paymentMethod) {
 }
 //#endregion
 //#region ../../profile/ui/src/components/payment-method-dropdown.tsx
-function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, onAddPaymentMethodClick, onEditPaymentMethod, onDeletePaymentMethod, accordionItemValue = "paymentMethods", addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, borderStyle = "border-b border-border pb-4 mb-6", className = "", showActions = true, isLoading = false }) {
-	const [paymentsValue, setPaymentsValue] = useState("");
+function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, onAddPaymentMethodClick, onEditPaymentMethod, onDeletePaymentMethod, onMakeDefaultPaymentMethod, accordionItemValue = "paymentMethods", addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, borderStyle = "border-b border-border pb-4 mb-6", className = "", showActions = true, isLoading = false, value, onValueChange, hideTrigger = false }) {
+	const [internalValue, setInternalValue] = useState("");
+	const paymentsValue = value ?? internalValue;
+	const setPaymentsValue = onValueChange ?? setInternalValue;
 	const renderPaymentMethod = (paymentMethod) => /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-row items-center space-x-2",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1118,6 +1213,64 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 			})]
 		})]
 	});
+	const paymentMethodListContent = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col justify-between space-y-4 px-0.5",
+		children: isLoading ? /* @__PURE__ */ jsx(Fragment$1, { children: [1, 2].map((i) => /* @__PURE__ */ jsx("div", {
+			className: "bg-muted items-center rounded p-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-row items-center space-x-2",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col space-y-1",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
+					})]
+				}), /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-6" })]
+			})
+		}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-h-[48px] w-full flex-row items-center justify-between space-x-2 px-2", { "border-border items-center border-b p-3": paymentMethodList.length - 1 !== index }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ jsx(PaymentIcon, {
+						logoUrl: paymentMethod.details.logo_url,
+						brand: paymentMethod.details.card_type,
+						alt: paymentMethod.details.card_type ?? "Payment Method"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-foreground flex items-center text-sm font-medium capitalize",
+						children: getCardDisplayName(paymentMethod)
+					}), getCardExpiry(paymentMethod) && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground text-sm",
+						children: getCardExpiry(paymentMethod)
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [paymentMethod.default && /* @__PURE__ */ jsx("p", {
+					className: "bg-secondary text-secondary-foreground mt-1 w-fit rounded px-2 py-0.5 text-xs font-medium",
+					children: "Default"
+				}), showActions && /* @__PURE__ */ jsx(EllipsesDropdown, {
+					onDelete: () => onDeletePaymentMethod?.(paymentMethod),
+					deleteLabel: "Delete",
+					onEdit: () => onEditPaymentMethod?.(paymentMethod),
+					editLabel: "Edit",
+					onMakeDefault: !paymentMethod.default && onMakeDefaultPaymentMethod ? () => onMakeDefaultPaymentMethod(paymentMethod) : void 0
+				})]
+			})]
+		}, paymentMethod.id))
+	});
+	if (hideTrigger) return /* @__PURE__ */ jsxs("div", {
+		className: `${borderStyle} ${className}`,
+		children: [paymentMethodListContent, showAddButton && /* @__PURE__ */ jsx("button", {
+			className: "text-foreground mt-3 text-left text-sm",
+			onClick: onAddPaymentMethodClick,
+			children: addPaymentMethodLabel
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${borderStyle} ${className}`,
 		children: [/* @__PURE__ */ jsx(Accordion, {
@@ -1132,7 +1285,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ jsx("div", {
+						children: [title && /* @__PURE__ */ jsx("div", {
 							className: "text-muted-foreground mt-4 mb-1 text-sm",
 							children: title
 						}), /* @__PURE__ */ jsx(AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
@@ -1150,55 +1303,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 					}),
 					/* @__PURE__ */ jsx(AccordionContent, {
 						className: "max-h-[400px] overflow-y-auto pt-2",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "mt-2 flex flex-col justify-between space-y-4 px-0.5",
-							children: isLoading ? /* @__PURE__ */ jsx(Fragment$1, { children: [1, 2].map((i) => /* @__PURE__ */ jsx("div", {
-								className: "bg-muted items-center rounded p-3",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-row items-center justify-between",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex flex-row items-center space-x-2",
-										children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ jsxs("div", {
-											className: "flex flex-col space-y-1",
-											children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
-										})]
-									}), /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-6" })]
-								})
-							}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod, index) => /* @__PURE__ */ jsxs("div", {
-								className: cn("flex min-h-[48px] w-full flex-row items-center justify-between space-x-2 px-2", { "border-border items-center border-b p-3": paymentMethodList.length - 1 !== index }),
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-										children: /* @__PURE__ */ jsx(PaymentIcon, {
-											logoUrl: paymentMethod.details.logo_url,
-											brand: paymentMethod.details.card_type,
-											alt: paymentMethod.details.card_type ?? "Payment Method"
-										})
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "flex flex-col",
-										children: [/* @__PURE__ */ jsx("div", {
-											className: "text-foreground flex items-center text-sm font-medium capitalize",
-											children: getCardDisplayName(paymentMethod)
-										}), getCardExpiry(paymentMethod) && /* @__PURE__ */ jsx("div", {
-											className: "text-muted-foreground text-sm",
-											children: getCardExpiry(paymentMethod)
-										})]
-									})]
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [paymentMethod.default && /* @__PURE__ */ jsx("p", {
-										className: "bg-secondary text-secondary-foreground mt-1 w-fit rounded px-2 py-0.5 text-xs font-medium",
-										children: "Default"
-									}), showActions && /* @__PURE__ */ jsx(EllipsesDropdown, {
-										onDelete: () => onDeletePaymentMethod?.(paymentMethod),
-										deleteLabel: "Delete",
-										onEdit: () => onEditPaymentMethod?.(paymentMethod),
-										editLabel: "Edit"
-									})]
-								})]
-							}, paymentMethod.id))
-						})
+						children: paymentMethodListContent
 					})
 				]
 			})
@@ -1223,16 +1328,13 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "max-w-sm rounded md:max-w-lg",
+			className: "max-w-sm md:max-w-lg",
 			children: [
-				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
-					className: "text-md font-medium",
-					children: t("edit_card")
-				}) }),
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("edit_card") }) }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "space-y-4",
 					children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
-						className: "rounded-lg bg-gray-50 p-4",
+						className: "bg-muted rounded-lg p-4",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center space-x-3",
 							children: [details.logo_url && /* @__PURE__ */ jsx("div", {
@@ -1247,14 +1349,14 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "flex flex-col",
 								children: [/* @__PURE__ */ jsxs("span", {
-									className: "text-sm font-medium text-gray-900",
+									className: "text-foreground text-sm font-medium",
 									children: [
 										cardBrand,
 										" •••• ",
 										lastFour
 									]
 								}), expMonth != null && expYear != null && /* @__PURE__ */ jsxs("span", {
-									className: "text-sm text-gray-500",
+									className: "text-muted-foreground text-sm",
 									children: [
 										t("card_expires"),
 										" ",
@@ -1265,25 +1367,24 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 								})]
 							})]
 						}), paymentMethod.default && /* @__PURE__ */ jsx("span", {
-							className: "mt-2 inline-block rounded bg-gray-500 px-2 py-0.5 text-xs font-medium text-white",
+							className: "bg-secondary text-secondary-foreground mt-2 inline-block rounded px-2 py-0.5 text-xs font-medium",
 							children: t("default")
 						})]
 					}) }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 						className: "mb-2 flex items-center justify-between",
 						children: [/* @__PURE__ */ jsx("h3", {
-							className: "text-sm font-medium text-gray-900",
+							className: "text-foreground text-sm font-medium",
 							children: t("billing_address")
 						}), onEdit && /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
+							variant: "link",
 							size: "sm",
-							className: "h-auto p-0 text-sm text-gray-600 underline hover:bg-transparent",
 							onClick: onEdit,
 							children: t("edit")
 						})]
 					}), /* @__PURE__ */ jsx("div", {
-						className: "rounded-lg bg-gray-50 p-4",
+						className: "bg-muted rounded-lg p-4",
 						children: billingAddress ? /* @__PURE__ */ jsxs("div", {
-							className: "space-y-1 text-sm text-gray-900",
+							className: "text-foreground space-y-1 text-sm",
 							children: [
 								billingAddress.name && /* @__PURE__ */ jsx("p", { children: billingAddress.name }),
 								/* @__PURE__ */ jsx("p", { children: billingAddress.address1 }),
@@ -1298,7 +1399,7 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 								/* @__PURE__ */ jsx("p", { children: billingAddress.country_code })
 							]
 						}) : /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-gray-500 italic",
+							className: "text-muted-foreground text-sm italic",
 							children: t("no_billing_address")
 						})
 					})] })]
@@ -1306,7 +1407,7 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 				/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(DialogClose, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Button, {
-						className: "rounded bg-gray-50 p-3 text-gray-900 ring-1 ring-gray-300 hover:bg-gray-100",
+						variant: "secondary",
 						onClick: onClose,
 						children: t("close")
 					})
@@ -1400,16 +1501,13 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "max-h-[90vh] max-w-sm overflow-y-auto rounded md:max-w-lg",
+			className: "max-h-[90vh] max-w-sm overflow-y-auto md:max-w-lg",
 			children: [
-				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
-					className: "text-md font-medium",
-					children: t("edit_card")
-				}) }),
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("edit_card") }) }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "space-y-4",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "rounded-lg bg-gray-50 p-4",
+						className: "bg-muted rounded-lg p-4",
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex items-center space-x-3",
 							children: [details.logo_url && /* @__PURE__ */ jsx("div", {
@@ -1424,14 +1522,14 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "flex flex-col",
 								children: [/* @__PURE__ */ jsxs("span", {
-									className: "text-sm font-medium text-gray-900",
+									className: "text-foreground text-sm font-medium",
 									children: [
 										cardBrand,
 										" •••• ",
 										lastFour
 									]
 								}), expMonth != null && expYear != null && /* @__PURE__ */ jsxs("span", {
-									className: "text-sm text-gray-500",
+									className: "text-muted-foreground text-sm",
 									children: [
 										t("card_expires"),
 										" ",
@@ -1443,7 +1541,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 							})]
 						})
 					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-						className: "mb-1 text-sm font-medium text-gray-900",
+						className: "text-foreground mb-1 text-sm font-medium",
 						children: t("billing_address")
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "space-y-0",
@@ -1516,7 +1614,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					})]
 				}),
 				error && /* @__PURE__ */ jsx("div", {
-					className: "text-sm text-red-500",
+					className: "text-destructive text-sm",
 					children: error
 				}),
 				/* @__PURE__ */ jsxs(DialogFooter, {
@@ -1525,19 +1623,18 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 						className: "flex-2",
 						children: /* @__PURE__ */ jsx(Button, {
 							type: "button",
-							className: "rounded bg-gray-50 p-3 text-gray-900 ring-1 ring-gray-300 hover:bg-gray-100",
+							variant: "secondary",
 							onClick: onClose,
 							disabled: isSubmitting,
 							children: t("cancel")
 						})
 					}), /* @__PURE__ */ jsx("div", {
 						className: "flex-1 text-right",
-						children: /* @__PURE__ */ jsx(Button, {
-							type: "submit",
+						children: /* @__PURE__ */ jsxs(Button, {
+							type: "button",
 							onClick: handleFormSubmit,
 							disabled: isSubmitting,
-							className: "rounded bg-gray-900 p-3 text-white hover:bg-gray-800",
-							children: isSubmitting ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-white border-t-transparent" }) : t("save")
+							children: [isSubmitting && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isSubmitting ? t("saving") : t("save_changes")]
 						})
 					})]
 				})
@@ -1547,7 +1644,8 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 }
 //#endregion
 //#region ../../profile/ui/src/components/payment-methods.tsx
-function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMethod, isDeletingPaymentMethod = false, onUpdatePaymentMethod, isUpdatingPaymentMethod = false, getBillingAddress, countries, renderCreditCardDialog }) {
+function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMethod, isDeletingPaymentMethod = false, onMakeDefaultPaymentMethod, onUpdatePaymentMethod, isUpdatingPaymentMethod = false, getBillingAddress, countries, renderCreditCardDialog }) {
+	const [accordionValue, setAccordionValue] = useState("");
 	const [isOpen, setIsOpen] = useState(false);
 	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
 	const [deleteCardError, setDeleteCardError] = useState(void 0);
@@ -1558,6 +1656,7 @@ function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMeth
 	const [editError, setEditError] = useState(void 0);
 	const { t } = useProfileUI();
 	const defaultPaymentMethod = paymentMethods.find((method) => method.default) ?? paymentMethods[0] ?? null;
+	const extraPaymentMethods = defaultPaymentMethod ? paymentMethods.filter((m) => m.id !== defaultPaymentMethod.id) : paymentMethods;
 	const handleDeleteCard = async (cardId) => {
 		if (!cardId) return;
 		try {
@@ -1565,8 +1664,9 @@ function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMeth
 			setSelectedCreditCard(void 0);
 			setDeleteCardError(void 0);
 			setOpenDeleteDialog(false);
-		} catch {
-			setDeleteCardError("Unable to delete payment method. Please try again.");
+		} catch (error) {
+			console.error("Failed to delete payment method:", error);
+			setDeleteCardError(parseApiErrors(error) || (error instanceof Error ? error.message : "Unable to delete payment method. Please try again."));
 		}
 	};
 	const handleDeletePaymentMethod = (paymentMethod) => {
@@ -1617,27 +1717,70 @@ function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMeth
 			else setEditError("An unexpected error occurred. Please try again.");
 		}
 	};
-	const handleOpenDialog = () => {
-		setIsOpen(true);
-	};
-	const handleCloseDialog = () => {
-		setIsOpen(false);
-	};
 	const selectedBillingAddress = selectedPaymentMethod ? getBillingAddress?.(selectedPaymentMethod) ?? null : null;
+	const isExpanded = accordionValue === "paymentMethods";
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(PaymentMethodDropdown, {
-			title: t("payment_methods"),
-			displayPaymentMethod: defaultPaymentMethod,
-			paymentMethodList: paymentMethods,
-			onAddPaymentMethodClick: handleOpenDialog,
-			onEditPaymentMethod: handleViewPaymentMethod,
-			onDeletePaymentMethod: handleDeletePaymentMethod,
-			addPaymentMethodLabel: `+ ${t("add_payment_method")}`,
-			isLoading
+		/* @__PURE__ */ jsx(Accordion, {
+			type: "single",
+			collapsible: true,
+			value: accordionValue,
+			onValueChange: setAccordionValue,
+			children: /* @__PURE__ */ jsx(AccordionItem, {
+				value: "paymentMethods",
+				className: "border-0",
+				children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, { children: "Payment Methods" }), extraPaymentMethods.length > 0 && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(AccordionTrigger, { className: "[&>svg]:text-muted-foreground" }) })] }), /* @__PURE__ */ jsxs(CardContent, {
+					className: "flex flex-col gap-3",
+					children: [
+						defaultPaymentMethod && /* @__PURE__ */ jsx(PaymentMethodDropdown, {
+							title: "",
+							displayPaymentMethod: defaultPaymentMethod,
+							paymentMethodList: [defaultPaymentMethod],
+							onAddPaymentMethodClick: () => setIsOpen(true),
+							onEditPaymentMethod: handleViewPaymentMethod,
+							onDeletePaymentMethod: handleDeletePaymentMethod,
+							onMakeDefaultPaymentMethod: onMakeDefaultPaymentMethod ? (pm) => onMakeDefaultPaymentMethod(pm.id) : void 0,
+							accordionItemValue: "paymentMethods-preview",
+							addPaymentMethodLabel: "",
+							showAddButton: false,
+							isLoading,
+							borderStyle: "",
+							hideTrigger: true,
+							value: "paymentMethods-preview"
+						}),
+						extraPaymentMethods.length > 0 && /* @__PURE__ */ jsx(AnimatedExpand, {
+							open: isExpanded,
+							children: /* @__PURE__ */ jsx(PaymentMethodDropdown, {
+								title: "",
+								displayPaymentMethod: null,
+								paymentMethodList: extraPaymentMethods,
+								onAddPaymentMethodClick: () => setIsOpen(true),
+								onEditPaymentMethod: handleViewPaymentMethod,
+								onDeletePaymentMethod: handleDeletePaymentMethod,
+								onMakeDefaultPaymentMethod: onMakeDefaultPaymentMethod ? (pm) => onMakeDefaultPaymentMethod(pm.id) : void 0,
+								accordionItemValue: "paymentMethods-inner",
+								addPaymentMethodLabel: "",
+								showAddButton: false,
+								isLoading,
+								borderStyle: "",
+								hideTrigger: true,
+								value: "paymentMethods-inner"
+							})
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "link",
+							size: "sm",
+							className: "text-foreground mt-3 h-auto w-fit justify-start p-0 text-left",
+							onClick: () => setIsOpen(true),
+							children: ["+ ", t("add_payment_method")]
+						})
+					]
+				})] })
+			})
 		}),
 		renderCreditCardDialog?.({
 			isOpen,
-			onClose: handleCloseDialog
+			onClose: () => setIsOpen(false)
 		}),
 		/* @__PURE__ */ jsx(ConfirmActionDialog, {
 			title: t("delete_credit_card"),
@@ -1670,48 +1813,187 @@ function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMeth
 }
 //#endregion
 //#region ../../profile/ui/src/components/profile.tsx
-function Profile({ customerAccount, languages, onUpdateCustomer, isUpdatingCustomer, onChangeEmail, isChangingEmail, pendingEmailChange, onCancelEmailChange, pendingEmail, rewardsPointsEnabled = false, pointsLedger, isLoadingPointsLedger, addresses, isLoadingAddresses, onDeleteAddress, isDeletingAddress, renderAddressDialog, paymentMethods, isLoadingPaymentMethods, onDeletePaymentMethod, isDeletingPaymentMethod, onUpdatePaymentMethod, isUpdatingPaymentMethod, getBillingAddress, countries, renderCreditCardDialog }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(CustomerInfo, {
-			customerAccount,
-			languages,
-			onUpdateCustomer,
-			isUpdating: isUpdatingCustomer,
-			onChangeEmail,
-			isChangingEmail,
-			pendingEmailChange,
-			onCancelEmailChange,
-			pendingEmail
-		}),
-		rewardsPointsEnabled && /* @__PURE__ */ jsx(CustomerPointsLedger, {
-			pointsLedger: pointsLedger ?? [],
-			isLoading: isLoadingPointsLedger
-		}),
-		/* @__PURE__ */ jsx("div", {
-			id: "profile-addresses",
-			children: /* @__PURE__ */ jsx(Addresses, {
+function Profile({ customerAccount, languages, onUpdateCustomer, isUpdatingCustomer, onChangeEmail, isChangingEmail, pendingEmailChange, onCancelEmailChange, pendingEmail, rewardsPointsEnabled = false, pointsLedger, isLoadingPointsLedger, addresses, isLoadingAddresses, onDeleteAddress, isDeletingAddress, onMakeDefaultAddress, renderAddressDialog, paymentMethods, isLoadingPaymentMethods, onDeletePaymentMethod, isDeletingPaymentMethod, onMakeDefaultPaymentMethod, onUpdatePaymentMethod, isUpdatingPaymentMethod, getBillingAddress, countries, renderCreditCardDialog, children, footer }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			children,
+			/* @__PURE__ */ jsx(CustomerInfo, {
+				customerAccount,
+				languages,
+				onUpdateCustomer,
+				isUpdating: isUpdatingCustomer,
+				onChangeEmail,
+				isChangingEmail,
+				pendingEmailChange,
+				onCancelEmailChange,
+				pendingEmail
+			}),
+			rewardsPointsEnabled && /* @__PURE__ */ jsx(CustomerPointsLedger, {
+				pointsLedger: pointsLedger ?? [],
+				isLoading: isLoadingPointsLedger
+			}),
+			/* @__PURE__ */ jsx(Addresses, {
 				addresses,
 				isLoading: isLoadingAddresses,
 				onDeleteAddress,
 				isDeletingAddress,
+				onMakeDefaultAddress,
 				renderAddressDialog
-			})
-		}),
-		/* @__PURE__ */ jsx("div", {
-			id: "profile-payment-methods",
-			children: /* @__PURE__ */ jsx(PaymentMethods, {
+			}),
+			/* @__PURE__ */ jsx(PaymentMethods, {
 				paymentMethods,
 				isLoading: isLoadingPaymentMethods,
 				onDeletePaymentMethod,
 				isDeletingPaymentMethod,
+				onMakeDefaultPaymentMethod,
 				onUpdatePaymentMethod,
 				isUpdatingPaymentMethod,
 				getBillingAddress,
 				countries,
 				renderCreditCardDialog
+			}),
+			footer
+		]
+	});
+}
+//#endregion
+//#region ../../profile/ui/src/components/my-site-profile-section.tsx
+function normalizeUrl(value) {
+	const trimmed = value.trim();
+	if (!trimmed) return "";
+	if (/^https?:\/\//i.test(trimmed)) return trimmed;
+	return `https://${trimmed}`;
+}
+const urlField = z.string().transform(normalizeUrl).pipe(z.string().url().or(z.literal("")));
+const mySiteProfileSchema = z.object({
+	bio: z.string().optional(),
+	linkedin: urlField,
+	facebook: urlField,
+	twitter: urlField,
+	instagram: urlField,
+	youtube: urlField,
+	pinterest: urlField,
+	tiktok: urlField,
+	whatsapp: z.string().optional(),
+	wechat: z.string().optional()
+});
+const socialFields = [
+	{
+		name: "linkedin",
+		label: "LinkedIn",
+		placeholder: "linkedin.com/in/username"
+	},
+	{
+		name: "facebook",
+		label: "Facebook",
+		placeholder: "facebook.com/username"
+	},
+	{
+		name: "twitter",
+		label: "X (Twitter)",
+		placeholder: "x.com/username"
+	},
+	{
+		name: "instagram",
+		label: "Instagram",
+		placeholder: "instagram.com/username"
+	},
+	{
+		name: "youtube",
+		label: "YouTube",
+		placeholder: "youtube.com/@channel"
+	},
+	{
+		name: "pinterest",
+		label: "Pinterest",
+		placeholder: "pinterest.com/username"
+	},
+	{
+		name: "tiktok",
+		label: "TikTok",
+		placeholder: "tiktok.com/@username"
+	},
+	{
+		name: "whatsapp",
+		label: "WhatsApp",
+		placeholder: "Phone number or link"
+	},
+	{
+		name: "wechat",
+		label: "WeChat",
+		placeholder: "WeChat ID"
+	}
+];
+function BioField({ control }) {
+	const { field, fieldState: { error } } = useController({
+		name: "bio",
+		control
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "mysite-bio",
+				className: "block text-sm font-medium",
+				children: "Bio"
+			}),
+			/* @__PURE__ */ jsx(Textarea, {
+				id: "mysite-bio",
+				rows: 4,
+				placeholder: "Tell people a little about yourself...",
+				className: cn(error && "ring-destructive ring-1"),
+				...field,
+				value: field.value ?? ""
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-sm",
+				children: error.message
+			})
+		]
+	});
+}
+function MySiteProfileSection({ avatarUrl, initial, control }) {
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "About Me" }) }), /* @__PURE__ */ jsxs(CardContent, {
+		className: "flex flex-col gap-6 lg:flex-row lg:gap-10",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted relative h-[120px] w-[120px] shrink-0 self-center overflow-hidden rounded-full lg:self-auto",
+			children: avatarUrl ? /* @__PURE__ */ jsx("img", {
+				src: avatarUrl,
+				alt: "Profile",
+				className: "h-full w-full object-cover"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "bg-background text-foreground flex h-full w-full items-center justify-center text-xl font-semibold",
+				children: initial ?? "U"
 			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(BioField, { control })
+		})]
+	})] });
+}
+function MySiteProfileSocialSection({ control }) {
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Social Media Links" }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: socialFields.map((field) => /* @__PURE__ */ jsx(FormTextField$1, {
+			control,
+			name: field.name,
+			label: field.label,
+			placeholder: field.placeholder
+		}, field.name))
+	}) })] });
+}
+function MySiteProfileSaveButton({ isDirty, isPending, onSubmit }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-end pb-6",
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			onClick: onSubmit,
+			disabled: !isDirty || isPending,
+			className: "w-full sm:w-auto",
+			children: [isPending && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isPending ? "Saving..." : "Save"]
 		})
-	] });
+	});
 }
 //#endregion
 //#region ../../fluid-pay/ui/src/components/form-fields/FormTextField.tsx
@@ -1732,7 +2014,7 @@ function FormTextField({ control, name, placeholder, containerClassName, type, d
 			placeholder,
 			"aria-invalid": !!error
 		}), error?.message && /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-red-500",
+			className: "text-destructive text-sm",
 			children: error.message
 		})]
 	});
@@ -1751,7 +2033,7 @@ function FormSelectField({ control, name, placeholder = "Select", options, conta
 				disabled,
 				children: [/* @__PURE__ */ jsx(SelectTrigger, {
 					"aria-invalid": !!error,
-					className: cn("w-full", error && "border-red-500 ring-1 ring-red-500"),
+					className: "w-full",
 					children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 				}), /* @__PURE__ */ jsx(SelectContent, { children: options && options.length > 0 ? options.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
 					value: opt.value.toString(),
@@ -1762,7 +2044,7 @@ function FormSelectField({ control, name, placeholder = "Select", options, conta
 					children: "No available options"
 				}) })]
 			}), error?.message && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-red-500",
+				className: "text-destructive text-sm",
 				children: error.message
 			})] })
 		})
@@ -1967,16 +2249,15 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 							className: "text-sm",
 							children: t("set_as_default_address")
 						})]
-					}), /* @__PURE__ */ jsx(Button, {
+					}), /* @__PURE__ */ jsxs(Button, {
 						type: "submit",
 						onClick: handleFormSubmit,
 						disabled: isSubmitting,
-						className: "rounded bg-gray-900 px-5 py-2.5 text-white hover:bg-gray-800",
-						children: isSubmitting ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-white border-t-transparent" }) : t("save_address")
+						children: [isSubmitting && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isSubmitting ? t("saving") : t("save_address")]
 					})]
 				}),
 				error && /* @__PURE__ */ jsx("div", {
-					className: "mt-2 text-sm text-red-500",
+					className: "text-destructive mt-2 text-sm",
 					children: error
 				})
 			]
@@ -2015,6 +2296,7 @@ function useVgsCollect() {
 	const [isFormReady, setIsFormReady] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 	const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+	const [scriptLoadError, setScriptLoadError] = useState(void 0);
 	const [vgsFieldState, setVgsFieldState] = useState(DEFAULT_FIELD_STATE);
 	const formRef = useRef(null);
 	const onSuccessRef = useRef(null);
@@ -2032,7 +2314,11 @@ function useVgsCollect() {
 		script.src = "https://js.verygoodvault.com/vgs-collect/3.3.0/vgs-collect.js";
 		script.async = true;
 		script.onload = () => setIsScriptLoaded(true);
-		script.onerror = () => onErrorRef.current?.("Failed to load payment form");
+		script.onerror = () => {
+			const message = "Failed to load payment form";
+			setScriptLoadError(message);
+			onErrorRef.current?.(message);
+		};
 		document.head.appendChild(script);
 	}, [isScriptLoaded]);
 	const updateFieldState = useCallback((state) => {
@@ -2100,20 +2386,25 @@ function useVgsCollect() {
 				return waitForDom();
 			};
 			if (!await waitForDom()) throw new Error("Payment form elements not ready");
+			const themedNode = document.getElementById("vgs-card-number");
+			const probeStyle = themedNode ? getComputedStyle(themedNode) : null;
+			const foregroundColor = probeStyle?.getPropertyValue("--color-foreground").trim() || "#0a0a0a";
+			const mutedForegroundColor = probeStyle?.getPropertyValue("--color-muted-foreground").trim() || "#737373";
 			const css = {
 				fontSize: "14px",
 				fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-				color: "#1f2937",
+				color: foregroundColor,
+				background: "transparent",
 				paddingTop: "0px",
 				paddingBottom: "0px",
 				paddingLeft: "0px",
 				paddingRight: "0px",
 				boxSizing: "border-box",
-				lineHeight: "38px",
+				lineHeight: "26px",
 				height: "100%",
 				width: "100%",
 				"&::placeholder": {
-					color: "#9ca3af",
+					color: mutedForegroundColor,
 					opacity: 1
 				},
 				"&:focus": { outline: "none" }
@@ -2196,6 +2487,7 @@ function useVgsCollect() {
 		isFormReady,
 		isLoading,
 		isScriptLoaded,
+		scriptLoadError,
 		initializeForm,
 		submitCard,
 		vgsFieldState,
@@ -2216,24 +2508,25 @@ const billingAddressSchema = z.object({
 	country_code: z.string().min(1, "Country is required"),
 	set_as_default: z.boolean()
 });
-function VgsInputWrapper({ id, fieldState, className }) {
+function VgsInputWrapper({ id, label, fieldState, className }) {
 	const isInvalid = fieldState?.isValid === false && !fieldState?.isFocused && !fieldState?.isEmpty;
-	const isFocused = fieldState?.isFocused;
+	const isFocused = !!fieldState?.isFocused;
 	return /* @__PURE__ */ jsx("div", {
-		className: "w-full",
-		children: /* @__PURE__ */ jsx("div", {
-			id,
-			className: cn("relative flex h-10 w-full items-center rounded-md border border-gray-300 bg-white px-3 shadow-sm transition-all duration-200 ease-in-out", "[&_iframe]:block! [&_iframe]:h-full! [&_iframe]:w-full!", isFocused && "border-blue-600 ring-1 ring-blue-600", isInvalid && "border-red-500 ring-1 ring-red-500", className)
-		})
+		id,
+		role: "group",
+		"aria-label": label,
+		"data-invalid": isInvalid ? "" : void 0,
+		className: cn("border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "data-[invalid]:border-destructive data-[invalid]:ring-destructive/20", "[&_iframe]:block! [&_iframe]:h-full! [&_iframe]:w-full! [&_iframe]:border-0!", isFocused && "border-ring ring-ring/50 ring-[3px]", isFocused && isInvalid && "border-destructive ring-destructive/20", className)
 	});
 }
-function VgsCardForm({ isLoading, isFormReady, vgsFieldState, networkError, t }) {
+function VgsCardForm({ vgsFieldState, networkError }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		"aria-label": "Credit card form",
 		children: [
 			/* @__PURE__ */ jsx(VgsInputWrapper, {
 				id: "vgs-card-number",
+				label: "Card number",
 				fieldState: vgsFieldState["card_number"]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -2242,22 +2535,25 @@ function VgsCardForm({ isLoading, isFormReady, vgsFieldState, networkError, t })
 					className: "flex-1",
 					children: /* @__PURE__ */ jsx(VgsInputWrapper, {
 						id: "vgs-expiration-date",
+						label: "Expiration date",
 						fieldState: vgsFieldState["card_exp"]
 					})
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex-1",
 					children: /* @__PURE__ */ jsx(VgsInputWrapper, {
 						id: "vgs-cvc",
+						label: "CVC",
 						fieldState: vgsFieldState["card_cvc"]
 					})
 				})]
 			}),
 			/* @__PURE__ */ jsx(VgsInputWrapper, {
 				id: "vgs-card-holder",
+				label: "Cardholder name",
 				fieldState: vgsFieldState["card_holder"]
 			}),
 			networkError && networkError.trim().length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "rounded-md bg-red-50 p-3 text-sm text-red-600",
+				className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
 				children: networkError
 			})
 		]
@@ -2267,7 +2563,7 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 	const api = useFluidPayApi();
 	const [cardError, setCardError] = useState(void 0);
 	const [isVgsSubmitting, setIsVgsSubmitting] = useState(false);
-	const { isFormReady, isLoading: isVgsLoading, isScriptLoaded, initializeForm, submitCard, vgsFieldState, resetVgs, onSuccessRef, onErrorRef } = useVgsCollect();
+	const { isFormReady, isLoading: isVgsLoading, isScriptLoaded, scriptLoadError, initializeForm, submitCard, vgsFieldState, resetVgs, onSuccessRef, onErrorRef } = useVgsCollect();
 	const { control, handleSubmit, reset, setValue } = useZodForm(billingAddressSchema, { defaultValues: {
 		name: "",
 		address1: "",
@@ -2369,6 +2665,9 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 				}
 			});
 			setIsVgsSubmitting(false);
+		}, () => {
+			setCardError("Please fix the errors in the billing address.");
+			setIsVgsSubmitting(false);
 		})();
 	}, [handleSubmit, onSubmit]);
 	const handleVgsError = useCallback((err) => {
@@ -2401,37 +2700,31 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 		open: isOpen,
 		onOpenChange: (open) => !open && handleClose(),
 		children: /* @__PURE__ */ jsx(DialogContent, {
-			className: "max-h-[90vh] max-w-md overflow-y-auto rounded p-0 md:max-w-xl",
+			className: "max-h-[90vh] max-w-md overflow-y-auto p-0 md:max-w-xl",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "relative p-6",
 				children: [
-					(isVgsLoading || !isFormReady) && /* @__PURE__ */ jsx("div", {
-						className: "absolute inset-0 z-10 flex items-center justify-center rounded bg-white/80 backdrop-blur-[1px]",
+					(isVgsLoading || !isFormReady) && !scriptLoadError && /* @__PURE__ */ jsx("div", {
+						className: "bg-background/80 absolute inset-0 z-10 flex items-center justify-center rounded backdrop-blur-[1px]",
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-center",
-							children: [/* @__PURE__ */ jsx("div", { className: "mr-3 h-5 w-5 animate-spin rounded-full border-2 border-t-2 border-blue-600 border-t-transparent" }), /* @__PURE__ */ jsx("p", {
-								className: "text-sm font-medium text-gray-600",
+							children: [/* @__PURE__ */ jsx("div", { className: "border-primary mr-3 h-5 w-5 animate-spin rounded-full border-2 border-t-2 border-t-transparent" }), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-sm font-medium",
 								children: t("securing")
 							})]
 						})
 					}),
-					/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
-						className: "text-lg font-medium",
-						children: t("add_credit_card")
-					}) }),
+					/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("add_credit_card") }) }),
 					/* @__PURE__ */ jsxs("div", {
 						className: "space-y-4 pt-6",
 						children: [/* @__PURE__ */ jsx(VgsCardForm, {
-							isLoading: isVgsLoading,
-							isFormReady,
 							vgsFieldState,
-							networkError: cardError ?? error,
-							t
+							networkError: cardError ?? scriptLoadError ?? error
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "space-y-3 pt-2",
 							children: [
 								/* @__PURE__ */ jsx("h3", {
-									className: "text-sm font-medium text-gray-500",
+									className: "text-muted-foreground text-sm font-medium",
 									children: t("billing_address")
 								}),
 								/* @__PURE__ */ jsx(FormSelectField, {
@@ -2509,12 +2802,11 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 								className: "text-sm",
 								children: t("set_as_default_payment_method")
 							})]
-						}), /* @__PURE__ */ jsx(Button, {
-							type: "submit",
+						}), /* @__PURE__ */ jsxs(Button, {
+							type: "button",
 							onClick: handleFormSubmit,
 							disabled: isBusy,
-							className: "rounded bg-gray-900 px-5 py-2.5 text-white hover:bg-gray-800",
-							children: isBusy ? /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-white border-t-transparent" }) : t("save_card")
+							children: [isBusy && /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isBusy ? t("saving") : t("save_card")]
 						})]
 					})
 				]
@@ -2602,6 +2894,6 @@ function createFluidPayApiAdapter(payApi) {
 	};
 }
 //#endregion
-export { Profile as a, getCardExpiry as c, AddressFormDialog as i, FluidPayCoreProvider as l, mapToFluidPayPaymentMethod as n, PaymentIcon as o, CreditCardFormDialog as r, getCardDisplayName as s, createFluidPayApiAdapter as t, ProfileUIProvider as u };
+export { MySiteProfileSaveButton as a, mySiteProfileSchema as c, PaymentIcon as d, getCardDisplayName as f, ProfileUIProvider as h, AddressFormDialog as i, socialFields as l, FluidPayCoreProvider as m, mapToFluidPayPaymentMethod as n, MySiteProfileSection as o, getCardExpiry as p, CreditCardFormDialog as r, MySiteProfileSocialSection as s, createFluidPayApiAdapter as t, Profile as u };
 
-//# sourceMappingURL=fluid-pay-api-adapter-eNT8m0xB.mjs.map
+//# sourceMappingURL=fluid-pay-api-adapter-CJ7-I8k-.mjs.map