@fluid-app/portal-sdk 0.1.243 → 0.1.245

package/dist/{fluid-pay-api-adapter-BszgrFL6.cjs → fluid-pay-api-adapter-D63KLi5c.cjs}

@@ -287,15 +287,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__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 		variant: "ghost",
 		disabled: true,
-		className: "cursor-not-allowed opacity-50",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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" })
 		})
 	});
@@ -306,37 +305,74 @@ function EllipsesDropdown({ onDelete, onEdit, editLabel = "Edit", deleteLabel =
 			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
-		className: "min-w-20 space-y-1 text-sm text-gray-900",
-		children: [onEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)("span", { children: editLabel }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)("span", { children: deleteLabel }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: editLabel })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {})] }),
+			onMakeDefault && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "m4.5 12.75 6 6 9-13.5"
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: makeDefaultLabel })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, {})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: deleteLabel })]
+			})
+		]
 	})] });
 }
 //#endregion
@@ -347,24 +383,24 @@ function ConfirmActionDialog({ title, description, onAction, openDialog, setOpen
 		open: openDialog,
 		onOpenChange: setOpenDialog,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
-			className: "max-w-sm rounded md:w-90",
+			className: "max-w-sm md:w-90",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, {
 					className: "flex flex-row justify-between",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
-						className: "text-md w-full text-left font-medium",
+						className: "w-full text-left",
 						children: title
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "space-y-4",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-left text-sm text-gray-500",
+						className: "text-muted-foreground text-left text-sm",
 						children: description
 					})
 				}),
 				errorMsg && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-sm text-red-500",
+					className: "text-destructive text-sm",
 					children: errorMsg
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -372,16 +408,18 @@ function ConfirmActionDialog({ title, description, onAction, openDialog, setOpen
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogClose, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary-foreground h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-t-transparent" }) : actionText
 					})]
 				}) })
 			]
@@ -389,6 +427,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] = (0, react.useState)(() => typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false);
+	(0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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;
@@ -417,91 +483,65 @@ function CustomerPointsLedger({ pointsLedger, isLoading = false }) {
 	const [accordionValue, setAccordionValue] = (0, react.useState)("");
 	const { t } = useProfileUI();
 	const availablePoints = pointsLedger[0]?.total_balance ?? 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "mb-6 border-b border-gray-300 pb-4",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
-			type: "single",
-			collapsible: true,
-			value: accordionValue,
-			onValueChange: setAccordionValue,
-			className: "w-full",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AccordionItem, {
-				value: "points-history",
-				className: "border-b-0",
+	const isExpanded = accordionValue === "points-history";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
+		type: "single",
+		collapsible: true,
+		value: accordionValue,
+		onValueChange: setAccordionValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionItem, {
+			value: "points-history",
+			className: "border-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: t("points_history") }), pointsLedger.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardAction, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "[&>svg]:text-muted-foreground" }) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
+				className: "flex flex-col gap-3",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-4 mb-1 text-sm text-gray-400",
-							children: t("points_history")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
-					}),
-					isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-full" }),
-					!isLoading && !accordionValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mb-2 flex w-full cursor-pointer flex-col",
-						onClick: () => setAccordionValue("points-history"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "text-sm font-semibold text-gray-900",
-							children: [
-								availablePoints.toLocaleString(),
-								" ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "font-normal text-gray-500",
-									children: t("points_available").toLowerCase()
-								})
-							]
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AccordionContent, {
-						className: "max-h-[400px] overflow-y-auto pt-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mb-3 flex w-full flex-col",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "text-sm font-semibold text-gray-900",
-								children: [
-									availablePoints.toLocaleString(),
-									" ",
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "font-normal text-gray-500",
-										children: t("points_available").toLowerCase()
-									})
-								]
+					isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-full" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-foreground text-sm font-semibold",
+						children: [
+							availablePoints.toLocaleString(),
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground font-normal",
+								children: t("points_available").toLowerCase()
 							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "flex flex-col space-y-0",
-							children: pointsLedger.length > 0 ? pointsLedger.map((ledger) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "relative flex flex-row items-start justify-between py-3",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "absolute top-3 left-0",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mt-1.5 h-2 w-2 flex-shrink-0 rounded-full border border-gray-300" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mr-1 h-10 border-r border-gray-200" })]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "ml-6 flex flex-row items-start space-x-3",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						]
+					}),
+					pointsLedger.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedExpand, {
+						open: isExpanded,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex flex-col",
+							children: pointsLedger.map((ledger, index) => {
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-row items-stretch gap-3",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "relative flex w-2 flex-col items-center",
+										children: [!(index === pointsLedger.length - 1) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted-foreground absolute top-3 -bottom-3 left-1/2 w-px -translate-x-1/2" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-muted-foreground bg-card relative mt-3 h-2 w-2 shrink-0 rounded-full border" })]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex flex-1 flex-row items-start justify-between py-1.5",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											className: "flex flex-col",
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "text-sm font-medium text-gray-900",
+												className: "text-foreground text-sm font-medium",
 												children: formatTransactionType(ledger, t)
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "text-sm text-gray-500",
+												className: "text-muted-foreground text-sm",
 												children: formatDateTime(ledger.created_at)
 											})]
-										})
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: require_src.cn("text-sm font-medium", ledger.amount >= 0 ? "text-green-500" : "text-red-500"),
-										children: formatPoints(ledger.amount)
-									})
-								]
-							}, ledger.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-sm text-gray-500",
-								children: t("no_points_history_found")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: require_src.cn("text-sm font-medium", ledger.amount >= 0 ? "text-primary" : "text-destructive"),
+											children: formatPoints(ledger.amount)
+										})]
+									})]
+								}, ledger.id);
 							})
-						})]
+						})
+					}),
+					!isLoading && pointsLedger.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground text-sm",
+						children: t("no_points_history_found")
 					})
 				]
-			})
+			})] })
 		})
 	});
 }
@@ -525,10 +565,10 @@ function FormTextField$1({ control, name, label, containerClassName, ...props })
 				...props,
 				id: name,
 				value: field.value ?? "",
-				className: require_src.cn(error && "ring-1 ring-red-500", props.className)
+				className: require_src.cn(error && "ring-destructive ring-1", props.className)
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-sm text-red-500",
+				className: "text-destructive text-sm",
 				children: error.message
 			})
 		]
@@ -554,7 +594,7 @@ function FormSelectField$1({ control, name, label, options, placeholder, contain
 					onChange?.(val);
 				},
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectTrigger, {
-					className: require_src.cn(error && "ring-1 ring-red-500"),
+					className: require_src.cn(error && "ring-destructive ring-1"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectValue, { placeholder })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, { children: options?.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectItem, {
 					value: opt.value.toString(),
@@ -562,7 +602,7 @@ function FormSelectField$1({ control, name, label, options, placeholder, contain
 				}, `${opt.name}-${opt.value}`)) })]
 			}),
 			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-sm text-red-500",
+				className: "text-destructive text-sm",
 				children: error.message
 			})
 		]
@@ -611,12 +651,9 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 		open: isOpen,
 		onOpenChange: (open) => !open && handleDialogClose(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
-			className: "max-w-sm rounded md:max-w-lg",
+			className: "max-w-sm md:max-w-lg",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
-					className: "text-md font-medium text-gray-900",
-					children: t("edit_profile")
-				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("edit_profile") }) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "space-y-4",
 					children: [
@@ -672,7 +709,7 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 								autoFocus: true
 							}),
 							emailError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-xs text-red-500",
+								className: "text-destructive text-xs",
 								children: emailError
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -689,14 +726,12 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 									variant: "outline",
 									size: "sm",
 									onClick: handleCancelEmailEdit,
-									className: "cursor-pointer",
 									children: "Cancel"
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 									type: "button",
 									size: "sm",
 									onClick: handleEmailSubmit,
 									disabled: !newEmail.trim() || isChangingEmail,
-									className: "cursor-pointer",
 									children: [isChangingEmail && /* @__PURE__ */ (0, react_jsx_runtime.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"]
 								})]
 							})
@@ -731,13 +766,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__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-sm text-red-500",
+					className: "text-destructive text-sm",
 					children: errorMsg
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, {
@@ -747,7 +782,6 @@ function UserInfoDialog({ control, isOpen, onSubmit, handleClose, languageOption
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 							type: "button",
 							onClick: onSubmit,
-							className: "cursor-pointer",
 							children: [isSubmitting && /* @__PURE__ */ (0, react_jsx_runtime.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")]
 						})
 					})
@@ -811,29 +845,27 @@ function CustomerInfo({ customerAccount, languages, onUpdateCustomer, isUpdating
 		}
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mb-6 flex flex-row items-center justify-between space-x-2 border-b border-gray-300 pb-4",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-row items-center space-x-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Avatar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarFallback, { children: userInitial }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex flex-col",
-					children: first_name ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-sm font-medium",
-						children: customerAccount.customer.full_name
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-sm text-gray-500",
-						children: customerAccount.customer.email
-					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-sm font-medium",
-						children: customerAccount.customer.email
-					})
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: "Personal Information" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardAction, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+			variant: "link",
+			size: "sm",
+			onClick: handleOpenEditDialog,
+			children: "Edit"
+		}) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-row items-center space-x-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Avatar, {
+				className: "border-border border",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarFallback, { children: userInitial })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [customerAccount.customer.full_name.trim() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium",
+					children: customerAccount.customer.full_name
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground text-sm",
+					children: customerAccount.customer.email
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				className: "cursor-pointer rounded-md border border-gray-300 p-1 hover:bg-gray-50 disabled:opacity-50",
-				onClick: handleOpenEditDialog,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-2.5 w-2.5 text-gray-400" })
 			})]
-		}),
+		}) })] }),
 		pendingEmailChange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "bg-muted mb-6 flex items-start gap-2.5 rounded-md px-3 py-3",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { className: "text-primary mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -893,9 +925,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] = (0, react.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] = (0, react.useState)("");
+	const addressesValue = value ?? internalValue;
+	const setAddressesValue = onValueChange ?? setInternalValue;
 	const { t } = useProfileUI();
+	const addressListContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col justify-between space-y-4 px-0.5",
+		children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-2/3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-1/2" })]
+		}) : addressList.length > 0 ? addressList.map((address, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_src.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-col",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-foreground text-sm",
+					children: [
+						formatAddressName(address),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						address.address1,
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						address.city,
+						", ",
+						address.state,
+						" ",
+						address.postal_code
+					]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [address.default && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-muted-foreground text-sm",
+			children: t("no_saved_addresses_found")
+		})
+	});
+	if (hideTrigger) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${borderStyle} ${className}`,
+		children: [addressListContent, showAddButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "text-foreground mt-3 text-left text-sm",
+			onClick: onAddAddressClick,
+			children: addAddressLabel
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `${borderStyle} ${className}`,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
@@ -910,15 +995,11 @@ function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "text-muted-foreground mt-4 mb-1 text-sm",
 							children: title
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
 					}),
-					isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-2/3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-1/2" })]
-					}),
 					!isLoading && !addressesValue && displayAddress && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mb-2 flex w-full cursor-pointer flex-col",
 						onClick: () => setAddressesValue(accordionItemValue),
@@ -942,45 +1023,7 @@ function AddressDropdown({ title, displayAddress, addressList, onAddAddressClick
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionContent, {
 						className: "max-h-[400px] overflow-y-auto pt-2",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_src.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__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "flex flex-col",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "text-foreground text-sm",
-										children: [
-											formatAddressName(address),
-											" ",
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-											address.address1,
-											" ",
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-											address.city,
-											", ",
-											address.state,
-											" ",
-											address.postal_code
-										]
-									})
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [address.default && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(EllipsesDropdown, {
-										onDelete: () => onDeleteAddress?.(address),
-										onEdit: () => onEditAddress?.(address),
-										editLabel: t("edit"),
-										deleteLabel: t("delete")
-									})]
-								})]
-							}, address.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-muted-foreground text-sm",
-								children: t("no_saved_addresses_found")
-							})
-						})
+						children: addressListContent
 					})
 				]
 			})
@@ -993,13 +1036,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] = (0, react.useState)(false);
+function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddress, isDeletingAddress = false, onMakeDefaultAddress, renderAddressDialog }) {
+	const [accordionValue, setAccordionValue] = (0, react.useState)("");
 	const [openDeleteDialog, setOpenDeleteDialog] = (0, react.useState)(false);
 	const [selectedAddress, setSelectedAddress] = (0, react.useState)(null);
 	const [deleteAddressError, setDeleteAddressError] = (0, react.useState)(void 0);
+	const [openAddressDialog, setOpenAddressDialog] = (0, react.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);
@@ -1020,8 +1066,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(require_parse_api_errors.parseApiErrors(error) || (error instanceof Error ? error.message : "We were unable to delete this address. Please try again."));
 		}
 	};
 	const handleAddClick = () => {
@@ -1034,19 +1081,65 @@ function Addresses({ addresses, isLoading = false, onCreateAddress, onDeleteAddr
 		setSelectedAddress(null);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
+			type: "single",
+			collapsible: true,
+			value: accordionValue,
+			onValueChange: setAccordionValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionItem, {
+				value: "addresses",
+				className: "border-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: "Shipping Addresses" }), extraAddresses.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardAction, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "[&>svg]:text-muted-foreground" }) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
+					className: "flex flex-col gap-3",
+					children: [
+						defaultAddress && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(AnimatedExpand, {
+							open: isExpanded,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)(ConfirmActionDialog, {
 			title: t("delete_address"),
@@ -1097,8 +1190,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] = (0, react.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] = (0, react.useState)("");
+	const paymentsValue = value ?? internalValue;
+	const setPaymentsValue = onValueChange ?? setInternalValue;
 	const renderPaymentMethod = (paymentMethod) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-row items-center space-x-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1119,6 +1214,64 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 			})]
 		})]
 	});
+	const paymentMethodListContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col justify-between space-y-4 px-0.5",
+		children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-muted items-center rounded p-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-row items-center space-x-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col space-y-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-6" })]
+			})
+		}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_src.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentIcon, {
+						logoUrl: paymentMethod.details.logo_url,
+						brand: paymentMethod.details.card_type,
+						alt: paymentMethod.details.card_type ?? "Payment Method"
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-foreground flex items-center text-sm font-medium capitalize",
+						children: getCardDisplayName(paymentMethod)
+					}), getCardExpiry(paymentMethod) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground text-sm",
+						children: getCardExpiry(paymentMethod)
+					})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row items-center space-x-2",
+				children: [paymentMethod.default && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${borderStyle} ${className}`,
+		children: [paymentMethodListContent, showAddButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "text-foreground mt-3 text-left text-sm",
+			onClick: onAddPaymentMethodClick,
+			children: addPaymentMethodLabel
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `${borderStyle} ${className}`,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
@@ -1133,7 +1286,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "text-muted-foreground mt-4 mb-1 text-sm",
 							children: title
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
@@ -1151,55 +1304,7 @@ function PaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList,
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionContent, {
 						className: "max-h-[400px] overflow-y-auto pt-2",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-2 flex flex-col justify-between space-y-4 px-0.5",
-							children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "bg-muted items-center rounded p-3",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-row items-center justify-between",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-row items-center space-x-2",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "flex flex-col space-y-1",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })]
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-6" })]
-								})
-							}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_src.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentIcon, {
-											logoUrl: paymentMethod.details.logo_url,
-											brand: paymentMethod.details.card_type,
-											alt: paymentMethod.details.card_type ?? "Payment Method"
-										})
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-col",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "text-foreground flex items-center text-sm font-medium capitalize",
-											children: getCardDisplayName(paymentMethod)
-										}), getCardExpiry(paymentMethod) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											className: "text-muted-foreground text-sm",
-											children: getCardExpiry(paymentMethod)
-										})]
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [paymentMethod.default && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(EllipsesDropdown, {
-										onDelete: () => onDeletePaymentMethod?.(paymentMethod),
-										deleteLabel: "Delete",
-										onEdit: () => onEditPaymentMethod?.(paymentMethod),
-										editLabel: "Edit"
-									})]
-								})]
-							}, paymentMethod.id))
-						})
+						children: paymentMethodListContent
 					})
 				]
 			})
@@ -1224,16 +1329,13 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
-			className: "max-w-sm rounded md:max-w-lg",
+			className: "max-w-sm md:max-w-lg",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
-					className: "text-md font-medium",
-					children: t("edit_card")
-				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("edit_card") }) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "space-y-4",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "rounded-lg bg-gray-50 p-4",
+						className: "bg-muted rounded-lg p-4",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex items-center space-x-3",
 							children: [details.logo_url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1248,14 +1350,14 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex flex-col",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "text-sm text-gray-500",
+									className: "text-muted-foreground text-sm",
 									children: [
 										t("card_expires"),
 										" ",
@@ -1266,25 +1368,24 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 								})]
 							})]
 						}), paymentMethod.default && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mb-2 flex items-center justify-between",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-							className: "text-sm font-medium text-gray-900",
+							className: "text-foreground text-sm font-medium",
 							children: t("billing_address")
 						}), onEdit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "rounded-lg bg-gray-50 p-4",
+						className: "bg-muted rounded-lg p-4",
 						children: billingAddress ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "space-y-1 text-sm text-gray-900",
+							className: "text-foreground space-y-1 text-sm",
 							children: [
 								billingAddress.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: billingAddress.name }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: billingAddress.address1 }),
@@ -1299,7 +1400,7 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: billingAddress.country_code })
 							]
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "text-sm text-gray-500 italic",
+							className: "text-muted-foreground text-sm italic",
 							children: t("no_billing_address")
 						})
 					})] })]
@@ -1307,7 +1408,7 @@ function ViewPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogClose, {
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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")
 					})
@@ -1401,16 +1502,13 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
-					className: "text-md font-medium",
-					children: t("edit_card")
-				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("edit_card") }) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "space-y-4",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "rounded-lg bg-gray-50 p-4",
+						className: "bg-muted rounded-lg p-4",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex items-center space-x-3",
 							children: [details.logo_url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1425,14 +1523,14 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex flex-col",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "text-sm text-gray-500",
+									className: "text-muted-foreground text-sm",
 									children: [
 										t("card_expires"),
 										" ",
@@ -1444,7 +1542,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 							})]
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "space-y-0",
@@ -1517,7 +1615,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					})]
 				}),
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-sm text-red-500",
+					className: "text-destructive text-sm",
 					children: error
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogFooter, {
@@ -1526,19 +1624,18 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 						className: "flex-2",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "flex-1 text-right",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-							type: "submit",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+							type: "button",
 							onClick: handleFormSubmit,
 							disabled: isSubmitting,
-							className: "rounded bg-gray-900 p-3 text-white hover:bg-gray-800",
-							children: isSubmitting ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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")]
 						})
 					})]
 				})
@@ -1548,7 +1645,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] = (0, react.useState)("");
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const [openDeleteDialog, setOpenDeleteDialog] = (0, react.useState)(false);
 	const [deleteCardError, setDeleteCardError] = (0, react.useState)(void 0);
@@ -1559,6 +1657,7 @@ function PaymentMethods({ paymentMethods, isLoading = false, onDeletePaymentMeth
 	const [editError, setEditError] = (0, react.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 {
@@ -1566,8 +1665,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(require_parse_api_errors.parseApiErrors(error) || (error instanceof Error ? error.message : "Unable to delete payment method. Please try again."));
 		}
 	};
 	const handleDeletePaymentMethod = (paymentMethod) => {
@@ -1618,27 +1718,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentMethodDropdown, {
-			title: t("payment_methods"),
-			displayPaymentMethod: defaultPaymentMethod,
-			paymentMethodList: paymentMethods,
-			onAddPaymentMethodClick: handleOpenDialog,
-			onEditPaymentMethod: handleViewPaymentMethod,
-			onDeletePaymentMethod: handleDeletePaymentMethod,
-			addPaymentMethodLabel: `+ ${t("add_payment_method")}`,
-			isLoading
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
+			type: "single",
+			collapsible: true,
+			value: accordionValue,
+			onValueChange: setAccordionValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionItem, {
+				value: "paymentMethods",
+				className: "border-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: "Payment Methods" }), extraPaymentMethods.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardAction, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "[&>svg]:text-muted-foreground" }) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
+					className: "flex flex-col gap-3",
+					children: [
+						defaultPaymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(AnimatedExpand, {
+							open: isExpanded,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)(ConfirmActionDialog, {
 			title: t("delete_credit_card"),
@@ -1671,48 +1814,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomerInfo, {
-			customerAccount,
-			languages,
-			onUpdateCustomer,
-			isUpdating: isUpdatingCustomer,
-			onChangeEmail,
-			isChangingEmail,
-			pendingEmailChange,
-			onCancelEmailChange,
-			pendingEmail
-		}),
-		rewardsPointsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomerPointsLedger, {
-			pointsLedger: pointsLedger ?? [],
-			isLoading: isLoadingPointsLedger
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			id: "profile-addresses",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-6",
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomerInfo, {
+				customerAccount,
+				languages,
+				onUpdateCustomer,
+				isUpdating: isUpdatingCustomer,
+				onChangeEmail,
+				isChangingEmail,
+				pendingEmailChange,
+				onCancelEmailChange,
+				pendingEmail
+			}),
+			rewardsPointsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomerPointsLedger, {
+				pointsLedger: pointsLedger ?? [],
+				isLoading: isLoadingPointsLedger
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Addresses, {
 				addresses,
 				isLoading: isLoadingAddresses,
 				onDeleteAddress,
 				isDeletingAddress,
+				onMakeDefaultAddress,
 				renderAddressDialog
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			id: "profile-payment-methods",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentMethods, {
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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 = zod.z.string().transform(normalizeUrl).pipe(zod.z.string().url().or(zod.z.literal("")));
+const mySiteProfileSchema = zod.z.object({
+	bio: zod.z.string().optional(),
+	linkedin: urlField,
+	facebook: urlField,
+	twitter: urlField,
+	instagram: urlField,
+	youtube: urlField,
+	pinterest: urlField,
+	tiktok: urlField,
+	whatsapp: zod.z.string().optional(),
+	wechat: zod.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 } } = (0, react_hook_form.useController)({
+		name: "bio",
+		control
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+				htmlFor: "mysite-bio",
+				className: "block text-sm font-medium",
+				children: "Bio"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Textarea, {
+				id: "mysite-bio",
+				rows: 4,
+				placeholder: "Tell people a little about yourself...",
+				className: require_src.cn(error && "ring-destructive ring-1"),
+				...field,
+				value: field.value ?? ""
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-destructive text-sm",
+				children: error.message
+			})
+		]
+	});
+}
+function MySiteProfileSection({ avatarUrl, initial, control }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: "About Me" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.CardContent, {
+		className: "flex flex-col gap-6 lg:flex-row lg:gap-10",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-muted relative h-[120px] w-[120px] shrink-0 self-center overflow-hidden rounded-full lg:self-auto",
+			children: avatarUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: avatarUrl,
+				alt: "Profile",
+				className: "h-full w-full object-cover"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-background text-foreground flex h-full w-full items-center justify-center text-xl font-semibold",
+				children: initial ?? "U"
 			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BioField, { control })
+		})]
+	})] });
+}
+function MySiteProfileSocialSection({ control }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: "Social Media Links" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "space-y-4",
+		children: socialFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
+			control,
+			name: field.name,
+			label: field.label,
+			placeholder: field.placeholder
+		}, field.name))
+	}) })] });
+}
+function MySiteProfileSaveButton({ isDirty, isPending, onSubmit }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-end pb-6",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+			type: "button",
+			onClick: onSubmit,
+			disabled: !isDirty || isPending,
+			className: "w-full sm:w-auto",
+			children: [isPending && /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -1733,7 +2015,7 @@ function FormTextField({ control, name, placeholder, containerClassName, type, d
 			placeholder,
 			"aria-invalid": !!error
 		}), error?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-sm text-red-500",
+			className: "text-destructive text-sm",
 			children: error.message
 		})]
 	});
@@ -1752,7 +2034,7 @@ function FormSelectField({ control, name, placeholder = "Select", options, conta
 				disabled,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectTrigger, {
 					"aria-invalid": !!error,
-					className: require_src.cn("w-full", error && "border-red-500 ring-1 ring-red-500"),
+					className: "w-full",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectValue, { placeholder })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, { children: options && options.length > 0 ? options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectItem, {
 					value: opt.value.toString(),
@@ -1763,7 +2045,7 @@ function FormSelectField({ control, name, placeholder = "Select", options, conta
 					children: "No available options"
 				}) })]
 			}), error?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-sm text-red-500",
+				className: "text-destructive text-sm",
 				children: error.message
 			})] })
 		})
@@ -1968,16 +2250,15 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 							className: "text-sm",
 							children: t("set_as_default_address")
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mt-2 text-sm text-red-500",
+					className: "text-destructive mt-2 text-sm",
 					children: error
 				})
 			]
@@ -2016,6 +2297,7 @@ function useVgsCollect() {
 	const [isFormReady, setIsFormReady] = (0, react.useState)(false);
 	const [isLoading, setIsLoading] = (0, react.useState)(false);
 	const [isScriptLoaded, setIsScriptLoaded] = (0, react.useState)(false);
+	const [scriptLoadError, setScriptLoadError] = (0, react.useState)(void 0);
 	const [vgsFieldState, setVgsFieldState] = (0, react.useState)(DEFAULT_FIELD_STATE);
 	const formRef = (0, react.useRef)(null);
 	const onSuccessRef = (0, react.useRef)(null);
@@ -2033,7 +2315,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 = (0, react.useCallback)((state) => {
@@ -2101,20 +2387,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" }
@@ -2197,6 +2488,7 @@ function useVgsCollect() {
 		isFormReady,
 		isLoading,
 		isScriptLoaded,
+		scriptLoadError,
 		initializeForm,
 		submitCard,
 		vgsFieldState,
@@ -2217,24 +2509,25 @@ const billingAddressSchema = zod.z.object({
 	country_code: zod.z.string().min(1, "Country is required"),
 	set_as_default: zod.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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "w-full",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			id,
-			className: require_src.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: require_src.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
 		"aria-label": "Credit card form",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VgsInputWrapper, {
 				id: "vgs-card-number",
+				label: "Card number",
 				fieldState: vgsFieldState["card_number"]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2243,22 +2536,25 @@ function VgsCardForm({ isLoading, isFormReady, vgsFieldState, networkError, t })
 					className: "flex-1",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VgsInputWrapper, {
 						id: "vgs-expiration-date",
+						label: "Expiration date",
 						fieldState: vgsFieldState["card_exp"]
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex-1",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VgsInputWrapper, {
 						id: "vgs-cvc",
+						label: "CVC",
 						fieldState: vgsFieldState["card_cvc"]
 					})
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VgsInputWrapper, {
 				id: "vgs-card-holder",
+				label: "Cardholder name",
 				fieldState: vgsFieldState["card_holder"]
 			}),
 			networkError && networkError.trim().length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.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
 			})
 		]
@@ -2268,7 +2564,7 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 	const api = useFluidPayApi();
 	const [cardError, setCardError] = (0, react.useState)(void 0);
 	const [isVgsSubmitting, setIsVgsSubmitting] = (0, react.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 } = require_src.useZodForm(billingAddressSchema, { defaultValues: {
 		name: "",
 		address1: "",
@@ -2370,6 +2666,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 = (0, react.useCallback)((err) => {
@@ -2402,37 +2701,31 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 		open: isOpen,
 		onOpenChange: (open) => !open && handleClose(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative p-6",
 				children: [
-					(isVgsLoading || !isFormReady) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-0 z-10 flex items-center justify-center rounded bg-white/80 backdrop-blur-[1px]",
+					(isVgsLoading || !isFormReady) && !scriptLoadError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "bg-background/80 absolute inset-0 z-10 flex items-center justify-center rounded backdrop-blur-[1px]",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex items-center justify-center",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-sm font-medium text-gray-600",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary mr-3 h-5 w-5 animate-spin rounded-full border-2 border-t-2 border-t-transparent" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm font-medium",
 								children: t("securing")
 							})]
 						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
-						className: "text-lg font-medium",
-						children: t("add_credit_card")
-					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("add_credit_card") }) }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "space-y-4 pt-6",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VgsCardForm, {
-							isLoading: isVgsLoading,
-							isFormReady,
 							vgsFieldState,
-							networkError: cardError ?? error,
-							t
+							networkError: cardError ?? scriptLoadError ?? error
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "space-y-3 pt-2",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-									className: "text-sm font-medium text-gray-500",
+									className: "text-muted-foreground text-sm font-medium",
 									children: t("billing_address")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
@@ -2510,12 +2803,11 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 								className: "text-sm",
 								children: t("set_as_default_payment_method")
 							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-							type: "submit",
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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")]
 						})]
 					})
 				]
@@ -2621,6 +2913,24 @@ Object.defineProperty(exports, "FluidPayCoreProvider", {
 		return FluidPayCoreProvider;
 	}
 });
+Object.defineProperty(exports, "MySiteProfileSaveButton", {
+	enumerable: true,
+	get: function() {
+		return MySiteProfileSaveButton;
+	}
+});
+Object.defineProperty(exports, "MySiteProfileSection", {
+	enumerable: true,
+	get: function() {
+		return MySiteProfileSection;
+	}
+});
+Object.defineProperty(exports, "MySiteProfileSocialSection", {
+	enumerable: true,
+	get: function() {
+		return MySiteProfileSocialSection;
+	}
+});
 Object.defineProperty(exports, "PaymentIcon", {
 	enumerable: true,
 	get: function() {
@@ -2663,5 +2973,17 @@ Object.defineProperty(exports, "mapToFluidPayPaymentMethod", {
 		return mapToFluidPayPaymentMethod;
 	}
 });
+Object.defineProperty(exports, "mySiteProfileSchema", {
+	enumerable: true,
+	get: function() {
+		return mySiteProfileSchema;
+	}
+});
+Object.defineProperty(exports, "socialFields", {
+	enumerable: true,
+	get: function() {
+		return socialFields;
+	}
+});
 
-//# sourceMappingURL=fluid-pay-api-adapter-BszgrFL6.cjs.map
+//# sourceMappingURL=fluid-pay-api-adapter-D63KLi5c.cjs.map