@stackframe/tanstack-start 0.0.1 → 2.8.91

package/dist/esm/components-page/account-settings/payments/payments-panel.js

@@ -0,0 +1,464 @@
+'use client';
+
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { ActionDialog, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography, toast } from "@stackframe/stack-ui";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { Result } from "@stackframe/stack-shared/dist/utils/results";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+import { useStackApp } from "../../../index.js";
+import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { envVars } from "../../../lib/env.js";
+
+//#region src/components-page/account-settings/payments/payments-panel.tsx
+function formatPaymentMethod(pm) {
+	return [
+		pm.brand ? pm.brand.toUpperCase() : null,
+		pm.last4 ? `•••• ${pm.last4}` : null,
+		pm.exp_month && pm.exp_year ? `exp ${pm.exp_month}/${pm.exp_year}` : null
+	].filter(Boolean).join(" · ");
+}
+const formatInvoiceStatus = (status, t) => {
+	if (!status) return t("Unknown");
+	switch (status) {
+		case "draft": return t("Draft");
+		case "open": return t("Open");
+		case "paid": return t("Paid");
+		case "uncollectible": return t("Uncollectible");
+		case "void": return t("Void");
+		default: return t("Unknown");
+	}
+};
+const formatInvoiceAmount = (amountTotal, t) => {
+	if (typeof amountTotal !== "number" || Number.isNaN(amountTotal)) return t("Unknown");
+	const normalized = amountTotal / 100;
+	return `$${new Intl.NumberFormat(void 0, {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(normalized)}`;
+};
+const formatInvoiceDate = (date, t) => {
+	if (!date || Number.isNaN(date.getTime())) return t("Unknown");
+	return new Intl.DateTimeFormat(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}).format(date);
+};
+function SetDefaultPaymentMethodForm(props) {
+	const stripe = useStripe();
+	const elements = useElements();
+	const [errorMessage, setErrorMessage] = useState(null);
+	const darkMode = "color-scheme" in document.documentElement.style && document.documentElement.style["color-scheme"] === "dark";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					className: "font-medium",
+					children: "Card details"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "rounded-md border border-input p-3",
+					children: /* @__PURE__ */ jsx(CardElement, { options: {
+						hidePostalCode: true,
+						style: { base: { color: darkMode ? "white" : "black" } }
+					} })
+				})]
+			}),
+			errorMessage && /* @__PURE__ */ jsx(Typography, {
+				variant: "secondary",
+				type: "footnote",
+				children: errorMessage
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: async () => {
+					if (!stripe || !elements) {
+						setErrorMessage("Stripe is still loading. Please try again.");
+						return;
+					}
+					const card = elements.getElement(CardElement);
+					if (!card) {
+						setErrorMessage("Card element not found.");
+						return;
+					}
+					const result = await stripe.confirmCardSetup(props.clientSecret, { payment_method: { card } });
+					if (result.error) {
+						setErrorMessage(result.error.message ?? "Failed to save payment method.");
+						return;
+					}
+					if (!result.setupIntent.id) {
+						setErrorMessage("No setup intent returned from Stripe.");
+						return;
+					}
+					await props.onSetupIntentSucceeded(result.setupIntent.id);
+				},
+				children: "Save payment method"
+			})
+		]
+	});
+}
+function PaymentsPanel(props) {
+	if (props.mockMode) return /* @__PURE__ */ jsx(MockPaymentsPanel, { title: props.title });
+	if (!props.customer) return null;
+	return /* @__PURE__ */ jsx(RealPaymentsPanel, {
+		title: props.title,
+		customer: props.customer,
+		customerType: props.customerType ?? "user"
+	});
+}
+function MockPaymentsPanel(props) {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			props.title && /* @__PURE__ */ jsx(Typography, {
+				className: "font-medium",
+				children: props.title
+			}),
+			/* @__PURE__ */ jsxs(Section, {
+				title: t("Payment method"),
+				description: t("Manage the default payment method used for subscriptions and invoices."),
+				children: [/* @__PURE__ */ jsx(Typography, { children: formatPaymentMethod({
+					id: "pm_mock",
+					brand: "visa",
+					last4: "4242",
+					exp_month: 12,
+					exp_year: 2030
+				}) }), /* @__PURE__ */ jsx(Button, {
+					disabled: true,
+					children: t("Update payment method")
+				})]
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: t("Active plans"),
+				description: t("View your active plans and purchases."),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								className: "truncate",
+								children: t("Pro")
+							}), /* @__PURE__ */ jsxs(Typography, {
+								variant: "secondary",
+								type: "footnote",
+								children: [t("Renews on"), " Jan 1, 2030"]
+							})]
+						}), /* @__PURE__ */ jsx(Button, {
+							disabled: true,
+							variant: "secondary",
+							color: "neutral",
+							children: t("Cancel subscription")
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex items-start justify-between gap-4",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								className: "truncate",
+								children: t("Credits pack")
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "secondary",
+								type: "footnote",
+								children: t("One-time purchase")
+							})]
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+function RealPaymentsPanel(props) {
+	const { t } = useTranslation();
+	const stackApp = useStackApp();
+	const defaultPaymentMethod = props.customer.useBilling().defaultPaymentMethod;
+	const products = props.customer.useProducts();
+	const invoices = props.customer.useInvoices({ limit: 10 });
+	const productsForCustomerType = products.filter((product) => product.customerType === props.customerType);
+	const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+	const [setupIntentClientSecret, setSetupIntentClientSecret] = useState(null);
+	const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState(null);
+	const [cancelTarget, setCancelTarget] = useState(null);
+	const [switchFromProductId, setSwitchFromProductId] = useState(null);
+	const [switchToProductId, setSwitchToProductId] = useState(null);
+	const stripePromise = useMemo(() => {
+		if (!setupIntentStripeAccountId) return null;
+		const publishableKey = envVars.NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY;
+		if (!publishableKey) return null;
+		return loadStripe(publishableKey, { stripeAccount: setupIntentStripeAccountId });
+	}, [setupIntentStripeAccountId]);
+	const handleAsyncError = (error) => {
+		if (error instanceof KnownErrors.DefaultPaymentMethodRequired) {
+			toast({
+				title: t("No default payment method"),
+				description: t("Add a payment method before switching plans."),
+				variant: "destructive"
+			});
+			return;
+		}
+		alert(`An unhandled error occurred. Please ${envVars.NODE_ENV === "development" ? "check the browser console for the full error." : "report this to the developer."}\n\n${error}`);
+	};
+	const openPaymentDialog = () => {
+		runAsynchronously(async () => {
+			setPaymentDialogOpen(true);
+			const res = await props.customer.createPaymentMethodSetupIntent();
+			setSetupIntentClientSecret(res.clientSecret);
+			setSetupIntentStripeAccountId(res.stripeAccountId);
+		}, { onError: handleAsyncError });
+	};
+	const closePaymentDialog = () => {
+		setPaymentDialogOpen(false);
+		setSetupIntentClientSecret(null);
+		setSetupIntentStripeAccountId(null);
+	};
+	const openSwitchDialog = (productId, firstOptionId) => {
+		setSwitchFromProductId(productId);
+		setSwitchToProductId(firstOptionId);
+	};
+	const closeSwitchDialog = () => {
+		setSwitchFromProductId(null);
+		setSwitchToProductId(null);
+	};
+	const switchOptions = (switchFromProductId ? productsForCustomerType.find((product) => product.id === switchFromProductId) ?? null : null)?.switchOptions ?? [];
+	const selectedSwitchOption = switchOptions.find((option) => option.productId === switchToProductId) ?? null;
+	const selectedPriceId = selectedSwitchOption ? Object.keys(selectedSwitchOption.prices)[0] ?? null : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			props.title && /* @__PURE__ */ jsx(Typography, {
+				className: "font-medium",
+				children: props.title
+			}),
+			defaultPaymentMethod && /* @__PURE__ */ jsxs(Section, {
+				title: t("Payment method"),
+				description: t("Manage the default payment method used for subscriptions and invoices."),
+				children: [
+					/* @__PURE__ */ jsx(Typography, { children: formatPaymentMethod(defaultPaymentMethod) }),
+					/* @__PURE__ */ jsx(Button, {
+						onClick: openPaymentDialog,
+						children: t("Update payment method")
+					}),
+					/* @__PURE__ */ jsx(ActionDialog, {
+						open: paymentDialogOpen,
+						onOpenChange: (open) => {
+							if (!open) closePaymentDialog();
+							else setPaymentDialogOpen(true);
+						},
+						title: t("Update payment method"),
+						children: !setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }) : /* @__PURE__ */ jsx(Elements, {
+							stripe: stripePromise,
+							options: { clientSecret: setupIntentClientSecret },
+							children: /* @__PURE__ */ jsx(SetDefaultPaymentMethodForm, {
+								clientSecret: setupIntentClientSecret,
+								onSetupIntentSucceeded: async (setupIntentId) => {
+									await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);
+									closePaymentDialog();
+								}
+							})
+						})
+					})
+				]
+			}),
+			productsForCustomerType.length > 0 && /* @__PURE__ */ jsxs(Section, {
+				title: t("Active plans"),
+				description: t("View your active plans and purchases."),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "space-y-3",
+						children: productsForCustomerType.map((product, index) => {
+							const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
+							const isSubscription = product.type === "subscription";
+							const isCancelable = isSubscription && !!product.subscription?.isCancelable;
+							const canSwitchPlans = isSubscription && defaultPaymentMethod && !!product.id && (product.switchOptions?.length ?? 0) > 0;
+							const renewsAt = isSubscription ? product.subscription?.currentPeriodEnd ?? null : null;
+							const subtitle = product.type === "one_time" ? t("One-time purchase") : renewsAt ? `${t("Renews on")} ${new Intl.DateTimeFormat(void 0, {
+								year: "numeric",
+								month: "short",
+								day: "numeric"
+							}).format(renewsAt)}` : t("Subscription");
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start justify-between gap-4",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ jsxs(Typography, {
+										className: "truncate",
+										children: [product.displayName, quantitySuffix]
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "secondary",
+										type: "footnote",
+										children: subtitle
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col items-end gap-2",
+									children: [canSwitchPlans && /* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										color: "neutral",
+										onClick: () => openSwitchDialog(product.id, product.switchOptions?.[0]?.productId ?? null),
+										children: t("Change plan")
+									}), isCancelable && /* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										color: "neutral",
+										onClick: () => setCancelTarget({
+											productId: product.id ?? "_inline",
+											subscriptionId: product.subscription?.subscriptionId ?? void 0
+										}),
+										children: t("Cancel subscription")
+									})]
+								})]
+							}, product.id ?? `${product.displayName}-${index}`);
+						})
+					}),
+					/* @__PURE__ */ jsx(ActionDialog, {
+						open: cancelTarget !== null,
+						onOpenChange: (open) => {
+							if (!open) setCancelTarget(null);
+						},
+						title: t("Cancel subscription"),
+						description: t("Canceling will stop future renewals for this subscription."),
+						danger: true,
+						cancelButton: true,
+						okButton: {
+							label: t("Cancel subscription"),
+							onClick: async () => {
+								if (!cancelTarget) return;
+								const { productId, subscriptionId } = cancelTarget;
+								if (props.customerType === "team") await stackApp.cancelSubscription({
+									teamId: props.customer.id,
+									productId,
+									subscriptionId
+								});
+								else await stackApp.cancelSubscription({
+									productId,
+									subscriptionId
+								});
+								setCancelTarget(null);
+							}
+						}
+					}),
+					/* @__PURE__ */ jsx(ActionDialog, {
+						open: switchFromProductId !== null,
+						onOpenChange: (open) => {
+							if (!open) closeSwitchDialog();
+						},
+						title: t("Change plan"),
+						description: t("Select a new plan from the same product line."),
+						cancelButton: true,
+						okButton: {
+							label: t("Switch plan"),
+							onClick: async () => {
+								const fromProductId = switchFromProductId;
+								const toProductId = switchToProductId;
+								if (!fromProductId || !toProductId) return;
+								if (!selectedPriceId) return;
+								const result = await Result.fromThrowingAsync(() => props.customer.switchSubscription({
+									fromProductId,
+									toProductId,
+									priceId: selectedPriceId
+								}));
+								if (result.status === "error") {
+									handleAsyncError(result.error);
+									return "prevent-close";
+								}
+								closeSwitchDialog();
+							},
+							props: { disabled: !switchFromProductId || !switchToProductId || !selectedPriceId }
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: "space-y-2",
+							children: switchOptions.length === 0 ? /* @__PURE__ */ jsx(Typography, {
+								variant: "secondary",
+								type: "footnote",
+								children: t("No other plans available for this subscription.")
+							}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
+								type: "footnote",
+								children: t("Choose a plan")
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: switchToProductId ?? void 0,
+								onValueChange: (value) => setSwitchToProductId(value || null),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "w-full",
+									children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("Choose a plan") })
+								}), /* @__PURE__ */ jsx(SelectContent, { children: switchOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+									value: option.productId,
+									children: option.displayName
+								}, option.productId)) })]
+							})] })
+						})
+					})
+				]
+			}),
+			invoices.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx(Typography, {
+						className: "font-medium",
+						children: t("Invoices")
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "secondary",
+						type: "footnote",
+						children: t("Review past invoices and receipts.")
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border rounded-md",
+					children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+						/* @__PURE__ */ jsx(TableHead, {
+							className: "w-[140px]",
+							children: t("Date")
+						}),
+						/* @__PURE__ */ jsx(TableHead, {
+							className: "w-[120px]",
+							children: t("Status")
+						}),
+						/* @__PURE__ */ jsx(TableHead, {
+							className: "w-[120px]",
+							children: t("Amount")
+						}),
+						/* @__PURE__ */ jsx(TableHead, {
+							className: "w-[120px] text-right",
+							children: t("Invoice")
+						})
+					] }) }), /* @__PURE__ */ jsx(TableBody, { children: invoices.map((invoice, index) => {
+						const createdAtTime = invoice.createdAt.getTime();
+						const invoiceKey = Number.isNaN(createdAtTime) ? `invoice-${index}` : `invoice-${createdAtTime}-${index}`;
+						return /* @__PURE__ */ jsxs(TableRow, { children: [
+							/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: formatInvoiceDate(invoice.createdAt, t) }) }),
+							/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: formatInvoiceStatus(invoice.status, t) }) }),
+							/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: formatInvoiceAmount(invoice.amountTotal, t) }) }),
+							/* @__PURE__ */ jsx(TableCell, {
+								align: "right",
+								children: invoice.hostedInvoiceUrl ? /* @__PURE__ */ jsx(Button, {
+									asChild: true,
+									variant: "secondary",
+									color: "neutral",
+									size: "sm",
+									children: /* @__PURE__ */ jsx("a", {
+										href: invoice.hostedInvoiceUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										children: t("View")
+									})
+								}) : /* @__PURE__ */ jsx(Typography, {
+									variant: "secondary",
+									type: "footnote",
+									children: t("Unavailable")
+								})
+							})
+						] }, invoiceKey);
+					}) })] })
+				})]
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { PaymentsPanel };
+//# sourceMappingURL=payments-panel.js.map

package/dist/esm/components-page/account-settings/payments/payments-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-panel.js","names":[],"sources":["../../../../../src/components-page/account-settings/payments/payments-panel.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionDialog, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, Typography } from \"@stackframe/stack-ui\";\nimport { CardElement, Elements, useElements, useStripe } from \"@stripe/react-stripe-js\";\nimport { loadStripe } from \"@stripe/stripe-js\";\nimport { useMemo, useState } from \"react\";\nimport { useStackApp } from \"../../..\";\nimport { envVars } from \"../../../lib/env\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\nimport { Result } from \"@stackframe/stack-shared/dist/utils/results\";\nimport type { CustomerInvoiceStatus, CustomerInvoicesList, CustomerInvoicesListOptions } from \"../../../lib/stack-app/customers\";\n\ntype PaymentMethodSummary = {\n  id: string,\n  brand: string | null,\n  last4: string | null,\n  exp_month: number | null,\n  exp_year: number | null,\n} | null;\n\nfunction formatPaymentMethod(pm: NonNullable<PaymentMethodSummary>) {\n  const details = [\n    pm.brand ? pm.brand.toUpperCase() : null,\n    pm.last4 ? `•••• ${pm.last4}` : null,\n    pm.exp_month && pm.exp_year ? `exp ${pm.exp_month}/${pm.exp_year}` : null,\n  ].filter(Boolean);\n  return details.join(\" · \");\n}\n\nconst formatInvoiceStatus = (status: CustomerInvoiceStatus, t: (value: string) => string) => {\n  if (!status) {\n    return t(\"Unknown\");\n  }\n  switch (status) {\n    case \"draft\": {\n      return t(\"Draft\");\n    }\n    case \"open\": {\n      return t(\"Open\");\n    }\n    case \"paid\": {\n      return t(\"Paid\");\n    }\n    case \"uncollectible\": {\n      return t(\"Uncollectible\");\n    }\n    case \"void\": {\n      return t(\"Void\");\n    }\n    default: {\n      return t(\"Unknown\");\n    }\n  }\n};\n\nconst formatInvoiceAmount = (amountTotal: number | null | undefined, t: (value: string) => string) => {\n  if (typeof amountTotal !== \"number\" || Number.isNaN(amountTotal)) {\n    return t(\"Unknown\");\n  }\n  const normalized = amountTotal / 100;\n  const formatted = new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(normalized);\n  return `$${formatted}`;\n};\n\nconst formatInvoiceDate = (date: Date | null | undefined, t: (value: string) => string) => {\n  if (!date || Number.isNaN(date.getTime())) {\n    return t(\"Unknown\");\n  }\n  return new Intl.DateTimeFormat(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" }).format(date);\n};\n\ntype CustomerBilling = {\n  hasCustomer: boolean,\n  defaultPaymentMethod: PaymentMethodSummary,\n};\n\ntype CustomerPaymentMethodSetupIntent = {\n  clientSecret: string,\n  stripeAccountId: string,\n};\n\ntype CustomerLike = {\n  id: string,\n  useBilling: () => CustomerBilling,\n  useProducts: () => Array<{\n    id: string | null,\n    quantity: number,\n    displayName: string,\n    customerType: \"user\" | \"team\" | \"custom\",\n    type?: \"one_time\" | \"subscription\",\n    switchOptions?: Array<{\n      productId: string,\n      displayName: string,\n      prices: Record<string, { interval?: [number, \"day\" | \"week\" | \"month\" | \"year\"] }>,\n    }>,\n    subscription: null | {\n      subscriptionId: string | null,\n      currentPeriodEnd: Date | null,\n      cancelAtPeriodEnd: boolean,\n      isCancelable: boolean,\n    },\n  }>,\n  useInvoices: (options?: CustomerInvoicesListOptions) => CustomerInvoicesList,\n  createPaymentMethodSetupIntent: () => Promise<CustomerPaymentMethodSetupIntent>,\n  setDefaultPaymentMethodFromSetupIntent: (setupIntentId: string) => Promise<PaymentMethodSummary>,\n  switchSubscription: (options: { fromProductId: string, toProductId: string, priceId?: string, quantity?: number }) => Promise<void>,\n};\n\nfunction SetDefaultPaymentMethodForm(props: {\n  clientSecret: string,\n  onSetupIntentSucceeded: (setupIntentId: string) => Promise<void>,\n}) {\n  const stripe = useStripe();\n  const elements = useElements();\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const darkMode = \"color-scheme\" in document.documentElement.style && document.documentElement.style[\"color-scheme\"] === \"dark\";\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"space-y-2\">\n        <Typography className=\"font-medium\">Card details</Typography>\n        <div className=\"rounded-md border border-input p-3\">\n          <CardElement options={{ hidePostalCode: true, style: { base: { color: darkMode ? \"white\" : \"black\" } } }} />\n        </div>\n      </div>\n      {errorMessage && (\n        <Typography variant=\"secondary\" type=\"footnote\">\n          {errorMessage}\n        </Typography>\n      )}\n      <Button\n        onClick={async () => {\n          if (!stripe || !elements) {\n            setErrorMessage(\"Stripe is still loading. Please try again.\");\n            return;\n          }\n          const card = elements.getElement(CardElement);\n          if (!card) {\n            setErrorMessage(\"Card element not found.\");\n            return;\n          }\n\n          const result = await stripe.confirmCardSetup(props.clientSecret, {\n            payment_method: { card },\n          });\n          if (result.error) {\n            setErrorMessage(result.error.message ?? \"Failed to save payment method.\");\n            return;\n          }\n          if (!result.setupIntent.id) {\n            setErrorMessage(\"No setup intent returned from Stripe.\");\n            return;\n          }\n          await props.onSetupIntentSucceeded(result.setupIntent.id);\n        }}\n      >\n        Save payment method\n      </Button>\n    </div>\n  );\n}\n\nexport function PaymentsPanel(props: {\n  title?: string,\n  customer?: CustomerLike,\n  customerType?: \"user\" | \"team\",\n  mockMode?: boolean,\n}) {\n  if (props.mockMode) {\n    return <MockPaymentsPanel title={props.title} />;\n  }\n  if (!props.customer) {\n    return null;\n  }\n  return <RealPaymentsPanel title={props.title} customer={props.customer} customerType={props.customerType ?? \"user\"} />;\n}\n\nfunction MockPaymentsPanel(props: { title?: string }) {\n  const { t } = useTranslation();\n  const defaultPaymentMethod: PaymentMethodSummary = {\n    id: \"pm_mock\",\n    brand: \"visa\",\n    last4: \"4242\",\n    exp_month: 12,\n    exp_year: 2030,\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {props.title && <Typography className=\"font-medium\">{props.title}</Typography>}\n      <Section\n        title={t(\"Payment method\")}\n        description={t(\"Manage the default payment method used for subscriptions and invoices.\")}\n      >\n        <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>\n        <Button disabled>\n          {t(\"Update payment method\")}\n        </Button>\n      </Section>\n\n      <Section\n        title={t(\"Active plans\")}\n        description={t(\"View your active plans and purchases.\")}\n      >\n        <div className=\"space-y-3\">\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"min-w-0\">\n              <Typography className=\"truncate\">{t(\"Pro\")}</Typography>\n              <Typography variant=\"secondary\" type=\"footnote\">{t(\"Renews on\")} Jan 1, 2030</Typography>\n            </div>\n            <Button disabled variant=\"secondary\" color=\"neutral\">\n              {t(\"Cancel subscription\")}\n            </Button>\n          </div>\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"min-w-0\">\n              <Typography className=\"truncate\">{t(\"Credits pack\")}</Typography>\n              <Typography variant=\"secondary\" type=\"footnote\">{t(\"One-time purchase\")}</Typography>\n            </div>\n          </div>\n        </div>\n      </Section>\n    </div>\n  );\n}\n\nfunction RealPaymentsPanel(props: { title?: string, customer: CustomerLike, customerType: \"user\" | \"team\" }) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const billing = props.customer.useBilling();\n  const defaultPaymentMethod = billing.defaultPaymentMethod;\n  const products = props.customer.useProducts();\n  const invoices = props.customer.useInvoices({ limit: 10 });\n  const productsForCustomerType = products.filter(product => product.customerType === props.customerType);\n\n  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);\n  const [setupIntentClientSecret, setSetupIntentClientSecret] = useState<string | null>(null);\n  const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = useState<string | null>(null);\n  const [cancelTarget, setCancelTarget] = useState<{ productId: string, subscriptionId?: string } | null>(null);\n  const [switchFromProductId, setSwitchFromProductId] = useState<string | null>(null);\n  const [switchToProductId, setSwitchToProductId] = useState<string | null>(null);\n\n  const stripePromise = useMemo(() => {\n    if (!setupIntentStripeAccountId) return null;\n    const publishableKey = envVars.NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY;\n    if (!publishableKey) return null;\n    return loadStripe(publishableKey, { stripeAccount: setupIntentStripeAccountId });\n  }, [setupIntentStripeAccountId]);\n\n  const handleAsyncError = (error: unknown) => {\n    if (error instanceof KnownErrors.DefaultPaymentMethodRequired) {\n      toast({\n        title: t(\"No default payment method\"),\n        description: t(\"Add a payment method before switching plans.\"),\n        variant: \"destructive\",\n      });\n      return;\n    }\n    alert(`An unhandled error occurred. Please ${envVars.NODE_ENV === \"development\" ? \"check the browser console for the full error.\" : \"report this to the developer.\"}\\n\\n${error}`);\n  };\n\n  const openPaymentDialog = () => {\n    runAsynchronously(async () => {\n      setPaymentDialogOpen(true);\n      const res = await props.customer.createPaymentMethodSetupIntent();\n      setSetupIntentClientSecret(res.clientSecret);\n      setSetupIntentStripeAccountId(res.stripeAccountId);\n    }, { onError: handleAsyncError });\n  };\n\n  const closePaymentDialog = () => {\n    setPaymentDialogOpen(false);\n    setSetupIntentClientSecret(null);\n    setSetupIntentStripeAccountId(null);\n  };\n\n  const openSwitchDialog = (productId: string, firstOptionId: string | null) => {\n    setSwitchFromProductId(productId);\n    setSwitchToProductId(firstOptionId);\n  };\n\n  const closeSwitchDialog = () => {\n    setSwitchFromProductId(null);\n    setSwitchToProductId(null);\n  };\n\n  const switchSourceProduct = switchFromProductId\n    ? productsForCustomerType.find((product) => product.id === switchFromProductId) ?? null\n    : null;\n  const switchOptions = switchSourceProduct?.switchOptions ?? [];\n  const selectedSwitchOption = switchOptions.find((option) => option.productId === switchToProductId) ?? null;\n  const selectedPriceId = selectedSwitchOption ? (Object.keys(selectedSwitchOption.prices)[0] ?? null) : null;\n\n  return (\n    <div className=\"space-y-4\">\n      {props.title && <Typography className=\"font-medium\">{props.title}</Typography>}\n\n      {defaultPaymentMethod && (\n        <Section\n          title={t(\"Payment method\")}\n          description={t(\"Manage the default payment method used for subscriptions and invoices.\")}\n        >\n          <Typography>{formatPaymentMethod(defaultPaymentMethod)}</Typography>\n\n          <Button onClick={openPaymentDialog}>\n            {t(\"Update payment method\")}\n          </Button>\n\n          <ActionDialog\n            open={paymentDialogOpen}\n            onOpenChange={(open) => {\n              if (!open) {\n                closePaymentDialog();\n              } else {\n                setPaymentDialogOpen(true);\n              }\n            }}\n            title={t(\"Update payment method\")}\n          >\n            {!setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? (\n              <Skeleton className=\"h-10 w-full\" />\n            ) : (\n              <Elements\n                stripe={stripePromise}\n                options={{\n                  clientSecret: setupIntentClientSecret,\n                }}\n              >\n                <SetDefaultPaymentMethodForm\n                  clientSecret={setupIntentClientSecret}\n                  onSetupIntentSucceeded={async (setupIntentId) => {\n                    await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);\n                    closePaymentDialog();\n                  }}\n                />\n              </Elements>\n            )}\n          </ActionDialog>\n        </Section>\n      )}\n\n      {productsForCustomerType.length > 0 && (\n        <Section\n          title={t(\"Active plans\")}\n          description={t(\"View your active plans and purchases.\")}\n        >\n          <div className=\"space-y-3\">\n            {productsForCustomerType.map((product, index) => {\n              const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : \"\";\n              const isSubscription = product.type === \"subscription\";\n              const isCancelable = isSubscription && !!product.subscription?.isCancelable;\n              const canSwitchPlans = isSubscription && defaultPaymentMethod && !!product.id && (product.switchOptions?.length ?? 0) > 0;\n              const renewsAt = isSubscription ? (product.subscription?.currentPeriodEnd ?? null) : null;\n              const subtitle =\n                product.type === \"one_time\"\n                  ? t(\"One-time purchase\")\n                  : renewsAt\n                    ? `${t(\"Renews on\")} ${new Intl.DateTimeFormat(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" }).format(renewsAt)}`\n                    : t(\"Subscription\");\n\n              return (\n                <div key={product.id ?? `${product.displayName}-${index}`} className=\"flex items-start justify-between gap-4\">\n                  <div className=\"min-w-0\">\n                    <Typography className=\"truncate\">{product.displayName}{quantitySuffix}</Typography>\n                    <Typography variant=\"secondary\" type=\"footnote\">{subtitle}</Typography>\n                  </div>\n\n                  <div className=\"flex flex-col items-end gap-2\">\n                    {canSwitchPlans && (\n                      <Button\n                        variant=\"secondary\"\n                        color=\"neutral\"\n                        onClick={() => openSwitchDialog(product.id!, product.switchOptions?.[0]?.productId ?? null)}\n                      >\n                        {t(\"Change plan\")}\n                      </Button>\n                    )}\n                    {isCancelable && (\n                      <Button\n                        variant=\"secondary\"\n                        color=\"neutral\"\n                        onClick={() => setCancelTarget({ productId: product.id ?? \"_inline\", subscriptionId: product.subscription?.subscriptionId ?? undefined })}\n                      >\n                        {t(\"Cancel subscription\")}\n                      </Button>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          <ActionDialog\n            open={cancelTarget !== null}\n            onOpenChange={(open) => {\n              if (!open) setCancelTarget(null);\n            }}\n            title={t(\"Cancel subscription\")}\n            description={t(\"Canceling will stop future renewals for this subscription.\")}\n            danger\n            cancelButton\n            okButton={{\n              label: t(\"Cancel subscription\"),\n              onClick: async () => {\n                if (!cancelTarget) return;\n                const { productId, subscriptionId } = cancelTarget;\n                if (props.customerType === \"team\") {\n                  await stackApp.cancelSubscription({ teamId: props.customer.id, productId, subscriptionId });\n                } else {\n                  await stackApp.cancelSubscription({ productId, subscriptionId });\n                }\n                setCancelTarget(null);\n              },\n            }}\n          />\n\n          <ActionDialog\n            open={switchFromProductId !== null}\n            onOpenChange={(open) => {\n              if (!open) closeSwitchDialog();\n            }}\n            title={t(\"Change plan\")}\n            description={t(\"Select a new plan from the same product line.\")}\n            cancelButton\n            okButton={{\n              label: t(\"Switch plan\"),\n              onClick: async () => {\n                const fromProductId = switchFromProductId;\n                const toProductId = switchToProductId;\n                if (!fromProductId || !toProductId) return;\n                if (!selectedPriceId) return;\n                const result = await Result.fromThrowingAsync(() => props.customer.switchSubscription({\n                  fromProductId,\n                  toProductId,\n                  priceId: selectedPriceId,\n                }));\n                if (result.status === \"error\") {\n                  handleAsyncError(result.error);\n                  return \"prevent-close\";\n                }\n                closeSwitchDialog();\n              },\n              props: {\n                disabled: !switchFromProductId || !switchToProductId || !selectedPriceId,\n              },\n            }}\n          >\n            <div className=\"space-y-2\">\n              {switchOptions.length === 0 ? (\n                <Typography variant=\"secondary\" type=\"footnote\">\n                  {t(\"No other plans available for this subscription.\")}\n                </Typography>\n              ) : (\n                <>\n                  <Typography type=\"footnote\">{t(\"Choose a plan\")}</Typography>\n                  <Select\n                    value={switchToProductId ?? undefined}\n                    onValueChange={(value) => setSwitchToProductId(value || null)}\n                  >\n                    <SelectTrigger className=\"w-full\">\n                      <SelectValue placeholder={t(\"Choose a plan\")} />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {switchOptions.map((option: NonNullable<typeof switchOptions>[number]) => (\n                        <SelectItem key={option.productId} value={option.productId}>\n                          {option.displayName}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </>\n              )}\n            </div>\n          </ActionDialog>\n        </Section>\n      )\n      }\n      {invoices.length > 0 && (\n        <>\n          <Separator />\n          <div className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Typography className=\"font-medium\">{t(\"Invoices\")}</Typography>\n              <Typography variant=\"secondary\" type=\"footnote\">{t(\"Review past invoices and receipts.\")}</Typography>\n            </div>\n            <div className=\"border rounded-md\">\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead className=\"w-[140px]\">{t(\"Date\")}</TableHead>\n                    <TableHead className=\"w-[120px]\">{t(\"Status\")}</TableHead>\n                    <TableHead className=\"w-[120px]\">{t(\"Amount\")}</TableHead>\n                    <TableHead className=\"w-[120px] text-right\">{t(\"Invoice\")}</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  {invoices.map((invoice, index) => {\n                    const createdAtTime = invoice.createdAt.getTime();\n                    const invoiceKey = Number.isNaN(createdAtTime) ? `invoice-${index}` : `invoice-${createdAtTime}-${index}`;\n                    return (\n                      <TableRow key={invoiceKey}>\n                        <TableCell>\n                          <Typography>{formatInvoiceDate(invoice.createdAt, t)}</Typography>\n                        </TableCell>\n                        <TableCell>\n                          <Typography>{formatInvoiceStatus(invoice.status, t)}</Typography>\n                        </TableCell>\n                        <TableCell>\n                          <Typography>{formatInvoiceAmount(invoice.amountTotal, t)}</Typography>\n                        </TableCell>\n                        <TableCell align=\"right\">\n                          {invoice.hostedInvoiceUrl ? (\n                            <Button asChild variant=\"secondary\" color=\"neutral\" size=\"sm\">\n                              <a href={invoice.hostedInvoiceUrl} target=\"_blank\" rel=\"noreferrer\">\n                                {t(\"View\")}\n                              </a>\n                            </Button>\n                          ) : (\n                            <Typography variant=\"secondary\" type=\"footnote\">\n                              {t(\"Unavailable\")}\n                            </Typography>\n                          )}\n                        </TableCell>\n                      </TableRow>\n                    );\n                  })}\n                </TableBody>\n              </Table>\n            </div>\n          </div>\n        </>\n      )}\n    </div >\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components-page/account-settings/profile-page/profile-page.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/profile-page/profile-page.d.ts
+declare function ProfilePage(props?: {
+  mockUser?: {
+    displayName?: string;
+    profileImageUrl?: string;
+  };
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ProfilePage };
+//# sourceMappingURL=profile-page.d.ts.map

package/dist/esm/components-page/account-settings/profile-page/profile-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/profile-page/profile-page.tsx"],"mappings":";;;iBAWgB,WAAA,CAAY,KAAA;EAC1B,QAAA;IACE,WAAA;IACA,eAAA;EAAA;AAAA,IAEH,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/profile-page/profile-page.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
+import { Section } from "../section.js";
+import { ProfileImageEditor } from "../../../components/profile-image-editor.js";
+import { EditableText } from "../editable-text.js";
+
+//#region src/components-page/account-settings/profile-page/profile-page.tsx
+function ProfilePage(props) {
+	const { t } = useTranslation();
+	const userFromHook = useUser({ or: props?.mockUser ? "return-null" : "redirect" });
+	const user = props?.mockUser ? {
+		displayName: props.mockUser.displayName || "John Doe",
+		profileImageUrl: props.mockUser.profileImageUrl || null,
+		update: async () => {
+			console.log("Mock update called");
+		}
+	} : userFromHook;
+	if (!user) return null;
+	return /* @__PURE__ */ jsxs(PageLayout, { children: [/* @__PURE__ */ jsx(Section, {
+		title: t("User name"),
+		description: t("This is a display name and is not used for authentication"),
+		children: /* @__PURE__ */ jsx(EditableText, {
+			value: user.displayName || "",
+			onSave: async (newDisplayName) => {
+				await user.update({ displayName: newDisplayName });
+			}
+		})
+	}), /* @__PURE__ */ jsx(Section, {
+		title: t("Profile image"),
+		description: t("Upload your own image as your avatar"),
+		children: /* @__PURE__ */ jsx(ProfileImageEditor, {
+			user,
+			onProfileImageUrlChange: async (profileImageUrl) => {
+				await user.update({ profileImageUrl });
+			}
+		})
+	})] });
+}
+
+//#endregion
+export { ProfilePage };
+//# sourceMappingURL=profile-page.js.map

package/dist/esm/components-page/account-settings/profile-page/profile-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/profile-page/profile-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { ProfileImageEditor } from \"../../../components/profile-image-editor\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function ProfilePage(props?: {\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props?.mockUser ? 'return-null' : 'redirect' });\n\n  // Use mock data if provided, otherwise use real user\n  const user = props?.mockUser ? {\n    displayName: props.mockUser.displayName || 'John Doe',\n    profileImageUrl: props.mockUser.profileImageUrl || null,\n    update: async () => {\n      // Mock update - do nothing in demo mode\n      console.log('Mock update called');\n    }\n  } : userFromHook;\n\n  if (!user) {\n    return null; // This shouldn't happen in practice\n  }\n\n  return (\n    <PageLayout>\n      <Section\n        title={t(\"User name\")}\n        description={t(\"This is a display name and is not used for authentication\")}\n      >\n        <EditableText\n          value={user.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await user.update({ displayName: newDisplayName });\n          }}/>\n      </Section>\n\n      <Section\n        title={t(\"Profile image\")}\n        description={t(\"Upload your own image as your avatar\")}\n      >\n        <ProfileImageEditor\n          user={user as any}\n          onProfileImageUrlChange={async (profileImageUrl: string | null) => {\n            await user.update({ profileImageUrl });\n          }}\n        />\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,YAAY,OAKzB;CACD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,eAAe,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,YAAY,CAAC;CAGlF,MAAM,OAAO,OAAO,WAAW;EAC7B,aAAa,MAAM,SAAS,eAAe;EAC3C,iBAAiB,MAAM,SAAS,mBAAmB;EACnD,QAAQ,YAAY;AAElB,WAAQ,IAAI,qBAAqB;;EAEpC,GAAG;AAEJ,KAAI,CAAC,KACH,QAAO;AAGT,QACE,qBAAC,yBACC,oBAAC;EACC,OAAO,EAAE,YAAY;EACrB,aAAa,EAAE,4DAA4D;YAE3E,oBAAC;GACC,OAAO,KAAK,eAAe;GAC3B,QAAQ,OAAO,mBAAmB;AAChC,UAAM,KAAK,OAAO,EAAE,aAAa,gBAAgB,CAAC;;IAChD;GACE,EAEV,oBAAC;EACC,OAAO,EAAE,gBAAgB;EACzB,aAAa,EAAE,uCAAuC;YAEtD,oBAAC;GACO;GACN,yBAAyB,OAAO,oBAAmC;AACjE,UAAM,KAAK,OAAO,EAAE,iBAAiB,CAAC;;IAExC;GACM,IACC"}

package/dist/esm/components-page/account-settings/section.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/section.d.ts
+declare function Section(props: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Section };
+//# sourceMappingURL=section.d.ts.map

package/dist/esm/components-page/account-settings/section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/section.tsx"],"mappings":";;;iBAMgB,OAAA,CAAQ,KAAA;EAAS,KAAA;EAAe,WAAA;EAAsB,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/section.js

@@ -0,0 +1,27 @@
+import { Separator, Typography } from "@stackframe/stack-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/section.tsx
+function Section(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col sm:flex-row gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sm:flex-1 flex flex-col justify-center",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				className: "font-medium",
+				children: props.title
+			}), props.description && /* @__PURE__ */ jsx(Typography, {
+				variant: "secondary",
+				type: "footnote",
+				children: props.description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sm:flex-1 sm:items-end flex flex-col gap-2 ",
+			children: props.children
+		})]
+	})] });
+}
+
+//#endregion
+export { Section };
+//# sourceMappingURL=section.js.map

package/dist/esm/components-page/account-settings/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","names":[],"sources":["../../../../src/components-page/account-settings/section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Separator, Typography } from \"@stackframe/stack-ui\";\n\nexport function Section(props: { title: string, description?: string, children: React.ReactNode }) {\n  return (\n    <>\n      <Separator />\n      <div className='flex flex-col sm:flex-row gap-2'>\n        <div className='sm:flex-1 flex flex-col justify-center'>\n          <Typography className='font-medium'>\n            {props.title}\n          </Typography>\n          {props.description && <Typography variant='secondary' type='footnote'>\n            {props.description}\n          </Typography>}\n        </div>\n        <div className='sm:flex-1 sm:items-end flex flex-col gap-2 '>\n          {props.children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;AAMA,SAAgB,QAAQ,OAA2E;AACjG,QACE,4CACE,oBAAC,cAAY,EACb,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAW,WAAU;cACnB,MAAM;KACI,EACZ,MAAM,eAAe,oBAAC;IAAW,SAAQ;IAAY,MAAK;cACxD,MAAM;KACI;IACT,EACN,oBAAC;GAAI,WAAU;aACZ,MAAM;IACH;GACF,IACL"}