@stackframe/stack 2.8.58 → 2.8.60

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

@@ -0,0 +1,350 @@
+"use client";
+"use client";
+
+// src/components-page/account-settings/payments/payments-panel.tsx
+import { KnownErrors } from "@stackframe/stack-shared";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { Result } from "@stackframe/stack-shared/dist/utils/results";
+import { ActionDialog, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton, toast, Typography } from "@stackframe/stack-ui";
+import { CardElement, Elements, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { useMemo, useState } from "react";
+import { useStackApp } from "../../../index.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function formatPaymentMethod(pm) {
+  const details = [
+    pm.brand ? pm.brand.toUpperCase() : null,
+    pm.last4 ? `\u2022\u2022\u2022\u2022 ${pm.last4}` : null,
+    pm.exp_month && pm.exp_year ? `exp ${pm.exp_month}/${pm.exp_year}` : null
+  ].filter(Boolean);
+  return details.join(" \xB7 ");
+}
+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();
+  const defaultPaymentMethod = {
+    id: "pm_mock",
+    brand: "visa",
+    last4: "4242",
+    exp_month: 12,
+    exp_year: 2030
+  };
+  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(defaultPaymentMethod) }),
+          /* @__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 billing = props.customer.useBilling();
+  const defaultPaymentMethod = billing.defaultPaymentMethod;
+  const products = props.customer.useProducts();
+  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 [cancelProductId, setCancelProductId] = useState(null);
+  const [switchFromProductId, setSwitchFromProductId] = useState(null);
+  const [switchToProductId, setSwitchToProductId] = useState(null);
+  const stripePromise = useMemo(() => {
+    if (!setupIntentStripeAccountId) return null;
+    const publishableKey = process.env.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 ${process.env.NODE_ENV === "development" ? "check the browser console for the full error." : "report this to the developer."}
+
+${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 switchSourceProduct = switchFromProductId ? productsForCustomerType.find((product) => product.id === switchFromProductId) ?? null : null;
+  const switchOptions = switchSourceProduct?.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 ? ` \xD7${product.quantity}` : "";
+            const isSubscription = product.type === "subscription";
+            const isCancelable = isSubscription && !!product.id && !!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: () => setCancelProductId(product.id),
+                    children: t("Cancel subscription")
+                  }
+                )
+              ] })
+            ] }, product.id ?? `${product.displayName}-${index}`);
+          }) }),
+          /* @__PURE__ */ jsx(
+            ActionDialog,
+            {
+              open: cancelProductId !== null,
+              onOpenChange: (open) => {
+                if (!open) setCancelProductId(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 () => {
+                  const productId = cancelProductId;
+                  if (!productId) return;
+                  if (props.customerType === "team") {
+                    await stackApp.cancelSubscription({ teamId: props.customer.id, productId });
+                  } else {
+                    await stackApp.cancelSubscription({ productId });
+                  }
+                  setCancelProductId(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)) })
+                    ]
+                  }
+                )
+              ] }) })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PaymentsPanel
+};
+//# sourceMappingURL=payments-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"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 { Result } from \"@stackframe/stack-shared/dist/utils/results\";\nimport { ActionDialog, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton, 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 { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\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\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      currentPeriodEnd: Date | null,\n      cancelAtPeriodEnd: boolean,\n      isCancelable: boolean,\n    },\n  }>,\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 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 [cancelProductId, setCancelProductId] = useState<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 = process.env.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 ${process.env.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.id && !!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\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={() => setCancelProductId(product.id)}\n                      >\n                        {t(\"Cancel subscription\")}\n                      </Button>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n\n          <ActionDialog\n            open={cancelProductId !== null}\n            onOpenChange={(open) => {\n              if (!open) setCancelProductId(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                const productId = cancelProductId;\n                if (!productId) return;\n                if (props.customerType === \"team\") {\n                  await stackApp.cancelSubscription({ teamId: props.customer.id, productId });\n                } else {\n                  await stackApp.cancelSubscription({ productId });\n                }\n                setCancelProductId(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    </div >\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1 +1 @@
-{"version":3,"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\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":";AAIA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AA0BpB,SAKI,KALJ;AAxBG,SAAS,YAAY,OAKzB;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,eAAe,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AAGjF,QAAM,OAAO,OAAO,WAAW;AAAA,IAC7B,aAAa,MAAM,SAAS,eAAe;AAAA,IAC3C,iBAAiB,MAAM,SAAS,mBAAmB;AAAA,IACnD,QAAQ,YAAY;AAElB,cAAQ,IAAI,oBAAoB;AAAA,IAClC;AAAA,EACF,IAAI;AAEJ,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,cACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW;AAAA,QACpB,aAAa,EAAE,2DAA2D;AAAA,QAE1E;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,KAAK,eAAe;AAAA,YAC3B,QAAQ,OAAO,mBAAmB;AAChC,oBAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA,YACnD;AAAA;AAAA,QAAE;AAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe;AAAA,QACxB,aAAa,EAAE,sCAAsC;AAAA,QAErD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,yBAAyB,OAAO,oBAAmC;AACjE,oBAAM,KAAK,OAAO,EAAE,gBAAgB,CAAC;AAAA,YACvC;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"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":";AAIA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AA0BpB,SAKI,KALJ;AAxBG,SAAS,YAAY,OAKzB;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,eAAe,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AAGjF,QAAM,OAAO,OAAO,WAAW;AAAA,IAC7B,aAAa,MAAM,SAAS,eAAe;AAAA,IAC3C,iBAAiB,MAAM,SAAS,mBAAmB;AAAA,IACnD,QAAQ,YAAY;AAElB,cAAQ,IAAI,oBAAoB;AAAA,IAClC;AAAA,EACF,IAAI;AAEJ,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,cACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW;AAAA,QACpB,aAAa,EAAE,2DAA2D;AAAA,QAE1E;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,KAAK,eAAe;AAAA,YAC3B,QAAQ,OAAO,mBAAmB;AAChC,oBAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA,YACnD;AAAA;AAAA,QAAE;AAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe;AAAA,QACxB,aAAa,EAAE,sCAAsC;AAAA,QAErD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,yBAAyB,OAAO,oBAAmC;AACjE,oBAAM,KAAK,OAAO,EAAE,gBAAgB,CAAC;AAAA,YACvC;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components-page/account-settings/section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\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":";AAIA,SAAS,WAAW,kBAAkB;AAIlC,mBACE,KAEE,YAHJ;AAFG,SAAS,QAAQ,OAA2E;AACjG,SACE,iCACE;AAAA,wBAAC,aAAU;AAAA,IACX,qBAAC,SAAI,WAAU,mCACb;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,cAAW,WAAU,eACnB,gBAAM,OACT;AAAA,QACC,MAAM,eAAe,oBAAC,cAAW,SAAQ,aAAY,MAAK,YACxD,gBAAM,aACT;AAAA,SACF;AAAA,MACA,oBAAC,SAAI,WAAU,+CACZ,gBAAM,UACT;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"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":";AAIA,SAAS,WAAW,kBAAkB;AAIlC,mBACE,KAEE,YAHJ;AAFG,SAAS,QAAQ,OAA2E;AACjG,SACE,iCACE;AAAA,wBAAC,aAAU;AAAA,IACX,qBAAC,SAAI,WAAU,mCACb;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,cAAW,WAAU,eACnB,gBAAM,OACT;AAAA,QACC,MAAM,eAAe,oBAAC,cAAW,SAAQ,aAAY,MAAK,YACxD,gBAAM,aACT;AAAA,SACF;AAAA,MACA,oBAAC,SAAI,WAAU,+CACZ,gBAAM,UACT;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/delete-account-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function DeleteAccountSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const app = useStackApp();\n  const project = app.useProject();\n  const [deleting, setDeleting] = useState(false);\n\n  // In mock mode, always show the delete section\n  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;\n\n  if (!showDeleteSection) {\n    return null;\n  }\n\n  const handleDeleteAccount = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Account deletion clicked\");\n      setDeleting(false);\n      return;\n    }\n\n    if (user) {\n      await user.delete();\n      await app.redirectToHome();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Delete Account\")}\n      description={t(\"Permanently remove your account and all associated data\")}\n    >\n      <div className='stack-scope flex flex-col items-stretch'>\n        <Accordion type=\"single\" collapsible className=\"w-full\">\n          <AccordionItem value=\"item-1\">\n            <AccordionTrigger>{t(\"Danger zone\")}</AccordionTrigger>\n            <AccordionContent>\n              {!deleting ? (\n                <div>\n                  <Button\n                    variant='destructive'\n                    onClick={() => setDeleting(true)}\n                  >\n                    {t(\"Delete account\")}\n                  </Button>\n                </div>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDeleteAccount}\n                    >\n                      {t(\"Delete Account\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDeleting(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,WAAW,kBAAkB,eAAe,kBAAkB,QAAQ,kBAAkB;AACjG,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAsCZ,cAgBM,YAhBN;AApCL,SAAS,qBAAqB,OAAgC;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AACzE,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAG9C,QAAM,oBAAoB,OAAO,YAAY,QAAQ,OAAO;AAE5D,MAAI,CAAC,mBAAmB;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,sBAAsB,YAAY;AACtC,QAAI,OAAO,UAAU;AAEnB,YAAM,qCAAqC;AAC3C,kBAAY,KAAK;AACjB;AAAA,IACF;AAEA,QAAI,MAAM;AACR,YAAM,KAAK,OAAO;AAClB,YAAM,IAAI,eAAe;AAAA,IAC3B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,gBAAgB;AAAA,MACzB,aAAa,EAAE,yDAAyD;AAAA,MAExE,8BAAC,SAAI,WAAU,2CACb,8BAAC,aAAU,MAAK,UAAS,aAAW,MAAC,WAAU,UAC7C,+BAAC,iBAAc,OAAM,UACnB;AAAA,4BAAC,oBAAkB,YAAE,aAAa,GAAE;AAAA,QACpC,oBAAC,oBACE,WAAC,WACA,oBAAC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,YAAY,IAAI;AAAA,YAE9B,YAAE,gBAAgB;AAAA;AAAA,QACrB,GACF,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,cAAW,SAAQ,eACjB,YAAE,gHAAgH,GACrH;AAAA,UACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAER,YAAE,gBAAgB;AAAA;AAAA,YACrB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS,MAAM,YAAY,KAAK;AAAA,gBAE/B,YAAE,QAAQ;AAAA;AAAA,YACb;AAAA,aACF;AAAA,WACF,GAEJ;AAAA,SACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/delete-account-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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function DeleteAccountSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const app = useStackApp();\n  const project = app.useProject();\n  const [deleting, setDeleting] = useState(false);\n\n  // In mock mode, always show the delete section\n  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;\n\n  if (!showDeleteSection) {\n    return null;\n  }\n\n  const handleDeleteAccount = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Account deletion clicked\");\n      setDeleting(false);\n      return;\n    }\n\n    if (user) {\n      await user.delete();\n      await app.redirectToHome();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Delete Account\")}\n      description={t(\"Permanently remove your account and all associated data\")}\n    >\n      <div className='stack-scope flex flex-col items-stretch'>\n        <Accordion type=\"single\" collapsible className=\"w-full\">\n          <AccordionItem value=\"item-1\">\n            <AccordionTrigger>{t(\"Danger zone\")}</AccordionTrigger>\n            <AccordionContent>\n              {!deleting ? (\n                <div>\n                  <Button\n                    variant='destructive'\n                    onClick={() => setDeleting(true)}\n                  >\n                    {t(\"Delete account\")}\n                  </Button>\n                </div>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDeleteAccount}\n                    >\n                      {t(\"Delete Account\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDeleting(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,WAAW,kBAAkB,eAAe,kBAAkB,QAAQ,kBAAkB;AACjG,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAsCZ,cAgBM,YAhBN;AApCL,SAAS,qBAAqB,OAAgC;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AACzE,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAG9C,QAAM,oBAAoB,OAAO,YAAY,QAAQ,OAAO;AAE5D,MAAI,CAAC,mBAAmB;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,sBAAsB,YAAY;AACtC,QAAI,OAAO,UAAU;AAEnB,YAAM,qCAAqC;AAC3C,kBAAY,KAAK;AACjB;AAAA,IACF;AAEA,QAAI,MAAM;AACR,YAAM,KAAK,OAAO;AAClB,YAAM,IAAI,eAAe;AAAA,IAC3B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,gBAAgB;AAAA,MACzB,aAAa,EAAE,yDAAyD;AAAA,MAExE,8BAAC,SAAI,WAAU,2CACb,8BAAC,aAAU,MAAK,UAAS,aAAW,MAAC,WAAU,UAC7C,+BAAC,iBAAc,OAAM,UACnB;AAAA,4BAAC,oBAAkB,YAAE,aAAa,GAAE;AAAA,QACpC,oBAAC,oBACE,WAAC,WACA,oBAAC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,YAAY,IAAI;AAAA,YAE9B,YAAE,gBAAgB;AAAA;AAAA,QACrB,GACF,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,cAAW,SAAQ,eACjB,YAAE,gHAAgH,GACrH;AAAA,UACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAER,YAAE,gBAAgB;AAAA;AAAA,YACrB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS,MAAM,YAAY,KAAK;AAAA,gBAE/B,YAAE,QAAQ;AAAA;AAAA,YACb;AAAA,aACF;AAAA,WACF,GAEJ;AAAA,SACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/settings-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { DeleteAccountSection } from \"./delete-account-section\";\nimport { SignOutSection } from \"./sign-out-section\";\n\n\nexport function SettingsPage(props?: {\n  mockMode?: boolean,\n}) {\n  return (\n    <PageLayout>\n      <DeleteAccountSection mockMode={props?.mockMode} />\n      <SignOutSection mockMode={props?.mockMode} />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAO3B,SACE,KADF;AAJG,SAAS,aAAa,OAE1B;AACD,SACE,qBAAC,cACC;AAAA,wBAAC,wBAAqB,UAAU,OAAO,UAAU;AAAA,IACjD,oBAAC,kBAAe,UAAU,OAAO,UAAU;AAAA,KAC7C;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/settings-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 { PageLayout } from \"../page-layout\";\nimport { DeleteAccountSection } from \"./delete-account-section\";\nimport { SignOutSection } from \"./sign-out-section\";\n\n\nexport function SettingsPage(props?: {\n  mockMode?: boolean,\n}) {\n  return (\n    <PageLayout>\n      <DeleteAccountSection mockMode={props?.mockMode} />\n      <SignOutSection mockMode={props?.mockMode} />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAO3B,SACE,KADF;AAJG,SAAS,aAAa,OAE1B;AACD,SACE,qBAAC,cACC;AAAA,wBAAC,wBAAqB,UAAU,OAAO,UAAU;AAAA,IACjD,oBAAC,kBAAe,UAAU,OAAO,UAAU;AAAA,KAC7C;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/sign-out-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function SignOutSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? \"return-null\" : \"throw\" });\n\n  const handleSignOut = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert or do nothing\n      alert(\"Mock mode: Sign out clicked\");\n      return;\n    }\n    if (user) {\n      await user.signOut();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Sign out\")}\n      description={t(\"End your current session\")}\n    >\n      <div>\n        <Button\n          variant='secondary'\n          onClick={handleSignOut}\n        >\n          {t(\"Sign out\")}\n        </Button>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAuBhB;AArBD,SAAS,eAAe,OAAgC;AAC7D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAEtE,QAAM,gBAAgB,YAAY;AAChC,QAAI,OAAO,UAAU;AAEnB,YAAM,6BAA6B;AACnC;AAAA,IACF;AACA,QAAI,MAAM;AACR,YAAM,KAAK,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU;AAAA,MACnB,aAAa,EAAE,0BAA0B;AAAA,MAEzC,8BAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,YAAE,UAAU;AAAA;AAAA,MACf,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/sign-out-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 { Button } from \"@stackframe/stack-ui\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function SignOutSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? \"return-null\" : \"throw\" });\n\n  const handleSignOut = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert or do nothing\n      alert(\"Mock mode: Sign out clicked\");\n      return;\n    }\n    if (user) {\n      await user.signOut();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Sign out\")}\n      description={t(\"End your current session\")}\n    >\n      <div>\n        <Button\n          variant='secondary'\n          onClick={handleSignOut}\n        >\n          {t(\"Sign out\")}\n        </Button>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAuBhB;AArBD,SAAS,eAAe,OAAgC;AAC7D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAEtE,QAAM,gBAAgB,YAAY;AAChC,QAAI,OAAO,UAAU;AAEnB,YAAM,6BAA6B;AACnC;AAAA,IACF;AACA,QAAI,MAAM;AACR,YAAM,KAAK,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU;AAAA,MACnB,aAAa,EAAE,0BAA0B;AAAA,MAEzC,8BAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,YAAE,UAAU;AAAA;AAAA,MACf,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/leave-team-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function LeaveTeamSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <Section\n      title={t(\"Leave Team\")}\n      description={t(\"leave this team and remove your team profile\")}\n    >\n      {!leaving ? (\n        <div>\n          <Button\n            variant='secondary'\n            onClick={() => setLeaving(true)}\n          >\n            {t(\"Leave team\")}\n          </Button>\n        </div>\n      ) : (\n        <div className='flex flex-col gap-2'>\n          <Typography variant='destructive'>\n            {t(\"Are you sure you want to leave the team?\")}\n          </Typography>\n          <div className='flex gap-2'>\n            <Button\n              variant='destructive'\n              onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}\n            >\n              {t(\"Leave\")}\n            </Button>\n            <Button\n              variant='secondary'\n              onClick={() => setLeaving(false)}\n            >\n              {t(\"Cancel\")}\n            </Button>\n          </div>\n        </div>\n      )}\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AAEzB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAcd,cAYA,YAZA;AAZH,SAAS,iBAAiB,OAAuB;AACtD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,YAAY;AAAA,MACrB,aAAa,EAAE,8CAA8C;AAAA,MAE5D,WAAC,UACA,oBAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,WAAW,IAAI;AAAA,UAE7B,YAAE,YAAY;AAAA;AAAA,MACjB,GACF,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,cAAW,SAAQ,eACjB,YAAE,0CAA0C,GAC/C;AAAA,QACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,YAAY;AACnB,sBAAM,KAAK,UAAU,MAAM,IAAI;AAC/B,uBAAO,SAAS,OAAO;AAAA,cACzB;AAAA,cAEC,YAAE,OAAO;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MAAM,WAAW,KAAK;AAAA,cAE9B,YAAE,QAAQ;AAAA;AAAA,UACb;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/leave-team-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 { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function LeaveTeamSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <Section\n      title={t(\"Leave Team\")}\n      description={t(\"leave this team and remove your team profile\")}\n    >\n      {!leaving ? (\n        <div>\n          <Button\n            variant='secondary'\n            onClick={() => setLeaving(true)}\n          >\n            {t(\"Leave team\")}\n          </Button>\n        </div>\n      ) : (\n        <div className='flex flex-col gap-2'>\n          <Typography variant='destructive'>\n            {t(\"Are you sure you want to leave the team?\")}\n          </Typography>\n          <div className='flex gap-2'>\n            <Button\n              variant='destructive'\n              onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}\n            >\n              {t(\"Leave\")}\n            </Button>\n            <Button\n              variant='secondary'\n              onClick={() => setLeaving(false)}\n            >\n              {t(\"Cancel\")}\n            </Button>\n          </div>\n        </div>\n      )}\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AAEzB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAcd,cAYA,YAZA;AAZH,SAAS,iBAAiB,OAAuB;AACtD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,YAAY;AAAA,MACrB,aAAa,EAAE,8CAA8C;AAAA,MAE5D,WAAC,UACA,oBAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,WAAW,IAAI;AAAA,UAE7B,YAAE,YAAY;AAAA;AAAA,MACjB,GACF,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,cAAW,SAAQ,eACjB,YAAE,0CAA0C,GAC/C;AAAA,QACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,YAAY;AACnB,sBAAM,KAAK,UAAU,MAAM,IAAI;AAC/B,uBAAO,SAAS,OAAO;AAAA,cACzB;AAAA,cAEC,YAAE,OAAO;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MAAM,WAAW,KAAK;AAAA,cAE9B,YAAE,QAAQ;AAAA;AAAA,UACb;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-api-keys-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { CreateApiKeyDialog, ShowApiKeyDialog } from \"../../../components/api-key-dialogs\";\nimport { ApiKeyTable } from \"../../../components/api-key-table\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { TeamApiKeyFirstView } from \"../../../lib/stack-app/api-keys\";\nimport { Team } from \"../../../lib/stack-app/teams\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function TeamApiKeysSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const team = user.useTeam(props.team.id);\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n\n  if (!team) {\n    throw new StackAssertionError(\"Team not found\");\n  }\n\n  const teamApiKeysEnabled = project.config.allowTeamApiKeys;\n  const manageApiKeysPermission = user.usePermission(props.team, '$manage_api_keys');\n  if (!manageApiKeysPermission || !teamApiKeysEnabled) {\n    return null;\n  }\n\n  return <TeamApiKeysSectionInner team={props.team} />;\n}\n\nfunction TeamApiKeysSectionInner(props: { team: Team }) {\n  const { t } = useTranslation();\n\n  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);\n  const [returnedApiKey, setReturnedApiKey] = useState<TeamApiKeyFirstView | null>(null);\n\n  const apiKeys = props.team.useApiKeys();\n\n  const CreateDialog = CreateApiKeyDialog<\"team\">;\n  const ShowDialog = ShowApiKeyDialog<\"team\">;\n\n  return (\n    <>\n      <Section\n        title={t(\"API Keys\")}\n        description={t(\"API keys grant programmatic access to your team.\")}\n      >\n        <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>\n          {t(\"Create API Key\")}\n        </Button>\n      </Section>\n      <ApiKeyTable apiKeys={apiKeys} />\n\n      <CreateDialog\n        open={isNewApiKeyDialogOpen}\n        onOpenChange={setIsNewApiKeyDialogOpen}\n        onKeyCreated={setReturnedApiKey}\n        createApiKey={async (data) => {\n          const apiKey = await props.team.createApiKey(data);\n          return apiKey;\n        }}\n      />\n      <ShowDialog\n        apiKey={returnedApiKey}\n        onClose={() => setReturnedApiKey(null)}\n      />\n    </>\n  );\n}\n"],"mappings":";AAIA,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AAGrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAmBf,SAeL,UAfK,KAeL,YAfK;AAhBF,SAAS,mBAAmB,OAAuB;AACxD,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,OAAO,KAAK,QAAQ,MAAM,KAAK,EAAE;AACvC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,SAAS,WAAW;AAEpC,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,oBAAoB,gBAAgB;AAAA,EAChD;AAEA,QAAM,qBAAqB,QAAQ,OAAO;AAC1C,QAAM,0BAA0B,KAAK,cAAc,MAAM,MAAM,kBAAkB;AACjF,MAAI,CAAC,2BAA2B,CAAC,oBAAoB;AACnD,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,2BAAwB,MAAM,MAAM,MAAM;AACpD;AAEA,SAAS,wBAAwB,OAAuB;AACtD,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAqC,IAAI;AAErF,QAAM,UAAU,MAAM,KAAK,WAAW;AAEtC,QAAM,eAAe;AACrB,QAAM,aAAa;AAEnB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,UAAU;AAAA,QACnB,aAAa,EAAE,kDAAkD;AAAA,QAEjE,8BAAC,UAAO,SAAS,MAAM,yBAAyB,IAAI,GACjD,YAAE,gBAAgB,GACrB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,eAAY,SAAkB;AAAA,IAE/B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;AAC5B,gBAAM,SAAS,MAAM,MAAM,KAAK,aAAa,IAAI;AACjD,iBAAO;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,kBAAkB,IAAI;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-api-keys-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 { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { CreateApiKeyDialog, ShowApiKeyDialog } from \"../../../components/api-key-dialogs\";\nimport { ApiKeyTable } from \"../../../components/api-key-table\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { TeamApiKeyFirstView } from \"../../../lib/stack-app/api-keys\";\nimport { Team } from \"../../../lib/stack-app/teams\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function TeamApiKeysSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const team = user.useTeam(props.team.id);\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n\n  if (!team) {\n    throw new StackAssertionError(\"Team not found\");\n  }\n\n  const teamApiKeysEnabled = project.config.allowTeamApiKeys;\n  const manageApiKeysPermission = user.usePermission(props.team, '$manage_api_keys');\n  if (!manageApiKeysPermission || !teamApiKeysEnabled) {\n    return null;\n  }\n\n  return <TeamApiKeysSectionInner team={props.team} />;\n}\n\nfunction TeamApiKeysSectionInner(props: { team: Team }) {\n  const { t } = useTranslation();\n\n  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);\n  const [returnedApiKey, setReturnedApiKey] = useState<TeamApiKeyFirstView | null>(null);\n\n  const apiKeys = props.team.useApiKeys();\n\n  const CreateDialog = CreateApiKeyDialog<\"team\">;\n  const ShowDialog = ShowApiKeyDialog<\"team\">;\n\n  return (\n    <>\n      <Section\n        title={t(\"API Keys\")}\n        description={t(\"API keys grant programmatic access to your team.\")}\n      >\n        <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>\n          {t(\"Create API Key\")}\n        </Button>\n      </Section>\n      <ApiKeyTable apiKeys={apiKeys} />\n\n      <CreateDialog\n        open={isNewApiKeyDialogOpen}\n        onOpenChange={setIsNewApiKeyDialogOpen}\n        onKeyCreated={setReturnedApiKey}\n        createApiKey={async (data) => {\n          const apiKey = await props.team.createApiKey(data);\n          return apiKey;\n        }}\n      />\n      <ShowDialog\n        apiKey={returnedApiKey}\n        onClose={() => setReturnedApiKey(null)}\n      />\n    </>\n  );\n}\n"],"mappings":";AAIA,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AAGrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAmBf,SAeL,UAfK,KAeL,YAfK;AAhBF,SAAS,mBAAmB,OAAuB;AACxD,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,OAAO,KAAK,QAAQ,MAAM,KAAK,EAAE;AACvC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,SAAS,WAAW;AAEpC,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,oBAAoB,gBAAgB;AAAA,EAChD;AAEA,QAAM,qBAAqB,QAAQ,OAAO;AAC1C,QAAM,0BAA0B,KAAK,cAAc,MAAM,MAAM,kBAAkB;AACjF,MAAI,CAAC,2BAA2B,CAAC,oBAAoB;AACnD,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,2BAAwB,MAAM,MAAM,MAAM;AACpD;AAEA,SAAS,wBAAwB,OAAuB;AACtD,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAqC,IAAI;AAErF,QAAM,UAAU,MAAM,KAAK,WAAW;AAEtC,QAAM,eAAe;AACrB,QAAM,aAAa;AAEnB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,UAAU;AAAA,QACnB,aAAa,EAAE,kDAAkD;AAAA,QAEjE,8BAAC,UAAO,SAAS,MAAM,yBAAyB,IAAI,GACjD,YAAE,gBAAgB,GACrB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,eAAY,SAAkB;AAAA,IAE/B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;AAC5B,gBAAM,SAAS,MAAM,MAAM,KAAK,aAAa,IAAI;AACjD,iBAAO;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,kBAAkB,IAAI;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-creation-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-creation-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { MessageCard } from \"../../../components/message-cards/message-card\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function TeamCreationPage(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n\n  const teamCreationSchema = yupObject({\n    displayName: yupString().defined().nonEmpty(t(\"Please enter a team name\")),\n  });\n\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const navigate = app.useNavigate();\n  const [loading, setLoading] = useState(false);\n\n  // In mock mode, show that team creation is disabled\n  if (props?.mockMode) {\n    return (\n      <PageLayout>\n        <MessageCard title={t(\"Team creation is disabled in demo mode\")} />\n      </PageLayout>\n    );\n  }\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title={t(\"Team creation is not enabled\")} />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Team creation clicked\");\n      return;\n    }\n\n    setLoading(true);\n\n    let team;\n    try {\n      team = await user?.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n\n    if (team) {\n      navigate(`#team-${team.id}`);\n    }\n  };\n\n  return (\n    <PageLayout>\n      <Section title={t(\"Create a Team\")} description={t(\"Enter a display name for your new team\")}>\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='flex gap-2 flex-col sm:flex-row'\n        >\n          <div className='flex flex-col flex-1'>\n            <Input\n              id=\"displayName\"\n              type=\"text\"\n              {...register(\"displayName\")}\n            />\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n          </div>\n          <Button type=\"submit\" loading={loading}>{t(\"Create\")}</Button>\n        </form>\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,iBAAiB;AACrC,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,aAAa;AAC9B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAwBhB,cAsCE,YAtCF;AAtBD,SAAS,iBAAiB,OAE9B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,qBAAqB,UAAU;AAAA,IACnC,aAAa,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAA0B,CAAC;AAAA,EAC3E,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,EAAE,IAAI,QAAQ;AAAA,IAChE,UAAU,YAAY,kBAAkB;AAAA,EAC1C,CAAC;AACD,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AACzE,QAAM,WAAW,IAAI,YAAY;AACjC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,MAAI,OAAO,UAAU;AACnB,WACE,oBAAC,cACC,8BAAC,eAAY,OAAO,EAAE,wCAAwC,GAAG,GACnE;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO,oBAAC,eAAY,OAAO,EAAE,8BAA8B,GAAG;AAAA,EAChE;AAEA,QAAM,WAAW,OAAO,SAAmD;AACzE,QAAI,OAAO,UAAU;AAEnB,YAAM,kCAAkC;AACxC;AAAA,IACF;AAEA,eAAW,IAAI;AAEf,QAAI;AACJ,QAAI;AACF,aAAO,MAAM,MAAM,WAAW,EAAE,aAAa,KAAK,YAAY,CAAC;AAAA,IACjE,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAEA,QAAI,MAAM;AACR,eAAS,SAAS,KAAK,EAAE,EAAE;AAAA,IAC7B;AAAA,EACF;AAEA,SACE,oBAAC,cACC,8BAAC,WAAQ,OAAO,EAAE,eAAe,GAAG,aAAa,EAAE,wCAAwC,GACzF;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,wBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACJ,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,UACA,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,WAClE;AAAA,QACA,oBAAC,UAAO,MAAK,UAAS,SAAmB,YAAE,QAAQ,GAAE;AAAA;AAAA;AAAA,EACvD,GACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-creation-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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { MessageCard } from \"../../../components/message-cards/message-card\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function TeamCreationPage(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n\n  const teamCreationSchema = yupObject({\n    displayName: yupString().defined().nonEmpty(t(\"Please enter a team name\")),\n  });\n\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const navigate = app.useNavigate();\n  const [loading, setLoading] = useState(false);\n\n  // In mock mode, show that team creation is disabled\n  if (props?.mockMode) {\n    return (\n      <PageLayout>\n        <MessageCard title={t(\"Team creation is disabled in demo mode\")} />\n      </PageLayout>\n    );\n  }\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title={t(\"Team creation is not enabled\")} />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Team creation clicked\");\n      return;\n    }\n\n    setLoading(true);\n\n    let team;\n    try {\n      team = await user?.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n\n    if (team) {\n      navigate(`#team-${team.id}`);\n    }\n  };\n\n  return (\n    <PageLayout>\n      <Section title={t(\"Create a Team\")} description={t(\"Enter a display name for your new team\")}>\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='flex gap-2 flex-col sm:flex-row'\n        >\n          <div className='flex flex-col flex-1'>\n            <Input\n              id=\"displayName\"\n              type=\"text\"\n              {...register(\"displayName\")}\n            />\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n          </div>\n          <Button type=\"submit\" loading={loading}>{t(\"Create\")}</Button>\n        </form>\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,iBAAiB;AACrC,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,aAAa;AAC9B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAwBhB,cAsCE,YAtCF;AAtBD,SAAS,iBAAiB,OAE9B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,QAAM,qBAAqB,UAAU;AAAA,IACnC,aAAa,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAA0B,CAAC;AAAA,EAC3E,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,EAAE,IAAI,QAAQ;AAAA,IAChE,UAAU,YAAY,kBAAkB;AAAA,EAC1C,CAAC;AACD,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AACzE,QAAM,WAAW,IAAI,YAAY;AACjC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,MAAI,OAAO,UAAU;AACnB,WACE,oBAAC,cACC,8BAAC,eAAY,OAAO,EAAE,wCAAwC,GAAG,GACnE;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO,oBAAC,eAAY,OAAO,EAAE,8BAA8B,GAAG;AAAA,EAChE;AAEA,QAAM,WAAW,OAAO,SAAmD;AACzE,QAAI,OAAO,UAAU;AAEnB,YAAM,kCAAkC;AACxC;AAAA,IACF;AAEA,eAAW,IAAI;AAEf,QAAI;AACJ,QAAI;AACF,aAAO,MAAM,MAAM,WAAW,EAAE,aAAa,KAAK,YAAY,CAAC;AAAA,IACjE,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAEA,QAAI,MAAM;AACR,eAAS,SAAS,KAAK,EAAE,EAAE;AAAA,IAC7B;AAAA,EACF;AAEA,SACE,oBAAC,cACC,8BAAC,WAAQ,OAAO,EAAE,eAAe,GAAG,aAAa,EAAE,wCAAwC,GACzF;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,wBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACJ,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,UACA,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,WAClE;AAAA,QACA,oBAAC,UAAO,MAAK,UAAS,SAAmB,YAAE,QAAQ,GAAE;AAAA;AAAA;AAAA,EACvD,GACF,GACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-display-name-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-display-name-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { Section } from \"../section\";\n\nexport function TeamDisplayNameSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Team display name\")}\n      description={t(\"Change the display name of your team\")}\n    >\n      <EditableText\n        value={props.team.displayName}\n        onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n      />\n    </Section>\n  );\n}\n"],"mappings":";AAKA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAgBlB;AAdC,SAAS,uBAAuB,OAAuB;AAC5D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,uBAAuB,KAAK,cAAc,MAAM,MAAM,cAAc;AAE1E,MAAI,CAAC,sBAAsB;AACzB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,mBAAmB;AAAA,MAC5B,aAAa,EAAE,sCAAsC;AAAA,MAErD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,KAAK;AAAA,UAClB,QAAQ,OAAO,mBAAmB,MAAM,MAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA;AAAA,MAC3F;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-display-name-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 { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { Section } from \"../section\";\n\nexport function TeamDisplayNameSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Team display name\")}\n      description={t(\"Change the display name of your team\")}\n    >\n      <EditableText\n        value={props.team.displayName}\n        onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n      />\n    </Section>\n  );\n}\n"],"mappings":";AAKA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAgBlB;AAdC,SAAS,uBAAuB,OAAuB;AAC5D,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,uBAAuB,KAAK,cAAc,MAAM,MAAM,cAAc;AAE1E,MAAI,CAAC,sBAAsB;AACzB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,mBAAmB;AAAA,MAC5B,aAAa,EAAE,sCAAsC;AAAA,MAErD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,KAAK;AAAA,UAClB,QAAQ,OAAO,mBAAmB,MAAM,MAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA;AAAA,MAC3F;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-member-invitation-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { Trash } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { Team } from \"../../..\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function TeamMemberInvitationSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!inviteMemberPermission) {\n    return null;\n  }\n\n  return <MemberInvitationSectionInner team={props.team} />;\n}\n\nfunction MemberInvitationsSectionInvitationsList(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const invitationsToShow = props.team.useInvitations();\n  const removeMemberPermission = user.usePermission(props.team, '$remove_members');\n\n  return <>\n    <Table className='mt-6'>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[200px]\">{t(\"Outstanding invitations\")}</TableHead>\n          <TableHead className=\"w-[60px]\">{t(\"Expires\")}</TableHead>\n          <TableHead className=\"w-[36px] max-w-[36px]\"></TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invitationsToShow.map((invitation, i) => (\n          <TableRow key={invitation.id}>\n            <TableCell>\n              <Typography>{invitation.recipientEmail}</Typography>\n            </TableCell>\n            <TableCell>\n              <Typography variant='secondary'>{invitation.expiresAt.toLocaleString()}</Typography>\n            </TableCell>\n            <TableCell align='right' className='max-w-[36px]'>\n              {removeMemberPermission && (\n                <Button onClick={async () => await invitation.revoke()} size='icon' variant='ghost'>\n                  <Trash className=\"w-4 h-4\" />\n                </Button>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n        {invitationsToShow.length === 0 && <TableRow>\n          <TableCell colSpan={3}>\n            <Typography variant='secondary'>{t(\"No outstanding invitations\")}</Typography>\n          </TableCell>\n        </TableRow>}\n      </TableBody>\n    </Table>\n  </>;\n}\n\nfunction MemberInvitationSectionInner(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n\n  const invitationSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address')).defined().nonEmpty(t('Please enter an email address')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <>\n      <Section\n        title={t(\"Invite member\")}\n        description={t(\"Invite a user to your team through email\")}\n      >\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='w-full'\n        >\n          <div className=\"flex flex-col gap-4 sm:flex-row w-full\">\n            <Input\n              placeholder={t(\"Email\")}\n              {...register(\"email\")}\n            />\n            <Button type=\"submit\" loading={loading}>{t(\"Invite User\")}</Button>\n          </div>\n          <FormWarningText text={errors.email?.message?.toString()} />\n          {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n        </form>\n      </Section>\n      {readMemberPermission && <MemberInvitationsSectionInvitationsList team={props.team} />}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/teams/team-member-invitation-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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { Trash } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { Team } from \"../../..\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function TeamMemberInvitationSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!inviteMemberPermission) {\n    return null;\n  }\n\n  return <MemberInvitationSectionInner team={props.team} />;\n}\n\nfunction MemberInvitationsSectionInvitationsList(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const invitationsToShow = props.team.useInvitations();\n  const removeMemberPermission = user.usePermission(props.team, '$remove_members');\n\n  return <>\n    <Table className='mt-6'>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[200px]\">{t(\"Outstanding invitations\")}</TableHead>\n          <TableHead className=\"w-[60px]\">{t(\"Expires\")}</TableHead>\n          <TableHead className=\"w-[36px] max-w-[36px]\"></TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invitationsToShow.map((invitation, i) => (\n          <TableRow key={invitation.id}>\n            <TableCell>\n              <Typography>{invitation.recipientEmail}</Typography>\n            </TableCell>\n            <TableCell>\n              <Typography variant='secondary'>{invitation.expiresAt.toLocaleString()}</Typography>\n            </TableCell>\n            <TableCell align='right' className='max-w-[36px]'>\n              {removeMemberPermission && (\n                <Button onClick={async () => await invitation.revoke()} size='icon' variant='ghost'>\n                  <Trash className=\"w-4 h-4\" />\n                </Button>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n        {invitationsToShow.length === 0 && <TableRow>\n          <TableCell colSpan={3}>\n            <Typography variant='secondary'>{t(\"No outstanding invitations\")}</Typography>\n          </TableCell>\n        </TableRow>}\n      </TableBody>\n    </Table>\n  </>;\n}\n\nfunction MemberInvitationSectionInner(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n\n  const invitationSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address')).defined().nonEmpty(t('Please enter an email address')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <>\n      <Section\n        title={t(\"Invite member\")}\n        description={t(\"Invite a user to your team through email\")}\n      >\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='w-full'\n        >\n          <div className=\"flex flex-col gap-4 sm:flex-row w-full\">\n            <Input\n              placeholder={t(\"Email\")}\n              {...register(\"email\")}\n            />\n            <Button type=\"submit\" loading={loading}>{t(\"Invite User\")}</Button>\n          </div>\n          <FormWarningText text={errors.email?.message?.toString()} />\n          {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n        </form>\n      </Section>\n      {readMemberPermission && <MemberInvitationsSectionInvitationsList team={props.team} />}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}