@kerne/react 1.0.0 → 1.2.0

package/dist/ui/index.cjs

@@ -17,7 +17,7 @@
 
 
 
-var _chunkIMZFZ3P5cjs = require('../chunk-IMZFZ3P5.cjs');
+var _chunkN6VPGJ36cjs = require('../chunk-N6VPGJ36.cjs');
 
 // src/ui/AuthFlow.tsx
 var _react = require('react');
@@ -903,7 +903,7 @@ function Field({
   const id = _react.useId.call(void 0, );
   const errorId = `${id}-error`;
   const noteId = `${id}-note`;
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const isPassword = type === "password";
   const [revealed, setRevealed] = _react.useState.call(void 0, false);
   const [capsLock, setCapsLock] = _react.useState.call(void 0, false);
@@ -1031,11 +1031,11 @@ function PasswordStrength({
   password,
   policy
 }) {
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const resolved = _nullishCoalesce(policy, () => ( resolvePolicy(null)));
   if (!meetsPolicy(password, resolved)) {
     const labels2 = {
-      min_length: _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.common.passwordHint, { count: resolved.min_length }),
+      min_length: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.common.passwordHint, { count: resolved.min_length }),
       require_uppercase: l10n.common.passwordRequireUppercase,
       require_number: l10n.common.passwordRequireNumber,
       require_symbol: l10n.common.passwordRequireSymbol
@@ -1231,10 +1231,10 @@ function OAuthButtons({
   disabled,
   onSelect
 }) {
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   if (providers.length === 0) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-oauth-group", children: providers.map((provider) => {
-    const label = _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.common.continueWith, {
+    const label = _chunkN6VPGJ36cjs.fill.call(void 0, l10n.common.continueWith, {
       provider: _nullishCoalesce(OAUTH_LABELS[provider], () => ( provider))
     });
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -1255,12 +1255,12 @@ function OAuthButtons({
   }) });
 }
 function KerneBranding({ show }) {
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   if (!show) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "kerne-branding", href: "https://kerne.io", target: "_blank", rel: "noopener noreferrer", children: l10n.common.securedByKerne });
 }
 function FormSkeleton() {
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-form", "aria-busy": "true", "aria-label": l10n.common.loading, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton" })
@@ -1285,11 +1285,11 @@ function LoginForm({
   logo,
   className
 }) {
-  const client = _chunkIMZFZ3P5cjs.useClient.call(void 0, );
-  const { login, startPasswordless } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
+  const { login, startPasswordless } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -1353,7 +1353,7 @@ function LoginForm({
   const signUpLine = canSignUp && (signUpUrl || onSignUpClick) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signIn.signUpPrompt,
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
     "."
   ] }) : void 0;
   const submitLabel = submitting ? usePassword ? l10n.signIn.submitting : l10n.signIn.magicSubmitting : usePassword ? l10n.signIn.submit : l10n.signIn.magicSubmit;
@@ -1362,7 +1362,7 @@ function LoginForm({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( signUpLine)) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
         error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkIMZFZ3P5cjs.fillNode.call(void 0, l10n.signIn.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkN6VPGJ36cjs.fillNode.call(void 0, l10n.signIn.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Field,
             {
@@ -1438,13 +1438,13 @@ function RegisterForm({
   logo,
   className
 }) {
-  const client = _chunkIMZFZ3P5cjs.useClient.call(void 0, );
-  const { register, startPasswordless } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
+  const { register, startPasswordless } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
   const invitationToken = useUrlToken("token", invitationTokenProp) || void 0;
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [name, setName] = _react.useState.call(void 0, "");
@@ -1455,7 +1455,7 @@ function RegisterForm({
   const [passwordMode, setPasswordMode] = _react.useState.call(void 0, false);
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children });
   const appName = _optionalChain([config, 'optionalAccess', _13 => _13.app_name]);
-  const heading = _nullishCoalesce(title, () => ( (appName ? _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
+  const heading = _nullishCoalesce(title, () => ( (appName ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
   const signInLine = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signUp.signInPrompt,
     " ",
@@ -1482,7 +1482,7 @@ function RegisterForm({
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: l10n.signUp.closedTitle, subtitle: signInLine }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: config.show_kerne_branding })
       ] })
     );
@@ -1544,7 +1544,7 @@ function RegisterForm({
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
         error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkIMZFZ3P5cjs.fillNode.call(void 0, l10n.signUp.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkN6VPGJ36cjs.fillNode.call(void 0, l10n.signUp.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
           needsCode ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Field,
             {
@@ -1649,10 +1649,10 @@ function ForgotPasswordForm({
   logo,
   className
 }) {
-  const { requestPasswordReset } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const { requestPasswordReset } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
@@ -1688,7 +1688,7 @@ function ForgotPasswordForm({
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
       error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkIMZFZ3P5cjs.fillNode.call(void 0, l10n.resetPassword.requestSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: sentTo }) }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkN6VPGJ36cjs.fillNode.call(void 0, l10n.resetPassword.requestSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: sentTo }) }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Field,
           {
@@ -1725,12 +1725,12 @@ function ResetPasswordForm({
   logo,
   className
 }) {
-  const { confirmPasswordReset } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const { confirmPasswordReset } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [confirm, setConfirm] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -1845,12 +1845,12 @@ function MagicLinkCallback({
   logo,
   className
 }) {
-  const client = _chunkIMZFZ3P5cjs.useClient.call(void 0, );
-  const { loginWithMagicLink } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
+  const { loginWithMagicLink } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [state, setState] = _react.useState.call(void 0, "pending");
   const [message, setMessage] = _react.useState.call(void 0, null);
   const consumed = _react.useRef.call(void 0, false);
@@ -1904,11 +1904,11 @@ function VerifyEmailForm({
   logo,
   className
 }) {
-  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [code, setCode] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
@@ -2030,13 +2030,13 @@ function ActivateAccountForm({
   logo,
   className
 }) {
-  const client = _chunkIMZFZ3P5cjs.useClient.call(void 0, );
-  const { getActivationContext, completeActivation } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
+  const { getActivationContext, completeActivation } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [context, setContext] = _react.useState.call(void 0, null);
   const [loadError, setLoadError] = _react.useState.call(void 0, null);
   const [password, setPassword] = _react.useState.call(void 0, "");
@@ -2106,7 +2106,7 @@ function ActivateAccountForm({
       {
         logo,
         title: heading,
-        subtitle: _chunkIMZFZ3P5cjs.fillNode.call(void 0, 
+        subtitle: _chunkN6VPGJ36cjs.fillNode.call(void 0, 
           credentialsMode ? l10n.activate.credentialsSubtitle : l10n.activate.magicSubtitle,
           { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: context.email }) }
         )
@@ -2178,7 +2178,7 @@ function AuthFlow({
   logo,
   className
 }) {
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token");
   const [internalStep, setInternalStep] = _react.useState.call(void 0, null);
   const go = (next) => {
@@ -2265,11 +2265,11 @@ function ChangePasswordForm({
   appearance,
   className
 }) {
-  const { updatePassword } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
+  const { updatePassword } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.security.submit));
   const [currentPassword, setCurrentPassword] = _react.useState.call(void 0, "");
   const [newPassword, setNewPassword] = _react.useState.call(void 0, "");
@@ -2375,10 +2375,10 @@ function WaitlistForm({
   logo,
   className
 }) {
-  const { join } = _chunkIMZFZ3P5cjs.useWaitlist.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const { join } = _chunkN6VPGJ36cjs.useWaitlist.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [name, setName] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -2459,8 +2459,8 @@ function SignOutButton({
   appearance
 }) {
   ensureStylesInjected();
-  const { logout } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const { logout } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const handle = () => {
     logout();
     _optionalChain([onSignedOut, 'optionalCall', _36 => _36()]);
@@ -2494,9 +2494,9 @@ function UserButton({
   className
 }) {
   ensureStylesInjected();
-  const { logout, isAuthenticated } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunkIMZFZ3P5cjs.useUser.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const { logout, isAuthenticated } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunkN6VPGJ36cjs.useUser.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const wrapRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
@@ -2587,10 +2587,10 @@ function UserButton({
 
 
 function ProfileSection({ verificationCallbackUrl, onSaved }) {
-  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunkIMZFZ3P5cjs.useUser.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunkN6VPGJ36cjs.useUser.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [firstName, setFirstName] = _react.useState.call(void 0, "");
   const [lastName, setLastName] = _react.useState.call(void 0, "");
   const [saving, setSaving] = _react.useState.call(void 0, false);
@@ -2701,10 +2701,10 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
 
 
 function SecuritySection({ showDeleteAccount = true, onDeleted }) {
-  const { requestAccountDeletion } = _chunkIMZFZ3P5cjs.useAuth.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const { requestAccountDeletion } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [error, setError] = _react.useState.call(void 0, null);
   const [confirmingDelete, setConfirmingDelete] = _react.useState.call(void 0, false);
   const [deleting, setDeleting] = _react.useState.call(void 0, false);
@@ -2822,6 +2822,44 @@ function resolvePriceDisplay(price, displayInterval) {
     displayInterval
   };
 }
+function collectPriceLabels(plans) {
+  const bySlug = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    for (const price of plan.prices) {
+      if (!bySlug.has(price.label.slug)) bySlug.set(price.label.slug, price.label);
+    }
+  }
+  return Array.from(bySlug.values()).sort(
+    (a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name)
+  );
+}
+function resolveLabelSavings(plans, labels) {
+  if (labels.length < 2) return null;
+  const priceFor = (labelSlug) => {
+    for (const plan of plans) {
+      const price = plan.prices.find((p) => p.label.slug === labelSlug);
+      if (price) return price;
+    }
+    return void 0;
+  };
+  const sorted = [...labels].sort(
+    (a, b) => approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _51 => _51(a.slug), 'optionalAccess', _52 => _52.interval]), () => ( "1M"))) - approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _53 => _53(b.slug), 'optionalAccess', _54 => _54.interval]), () => ( "1M")))
+  );
+  const shortest = sorted[0];
+  const longest = sorted[sorted.length - 1];
+  if (shortest.slug === longest.slug) return null;
+  for (const plan of plans) {
+    const shortPrice = plan.prices.find((p) => p.label.slug === shortest.slug);
+    const longPrice = plan.prices.find((p) => p.label.slug === longest.slug);
+    if (!_optionalChain([shortPrice, 'optionalAccess', _55 => _55.amount]) || !longPrice) continue;
+    const shortMonths = approxMonths(shortPrice.interval);
+    const longMonths = approxMonths(longPrice.interval);
+    if (!shortMonths || !longMonths) continue;
+    const savings = 1 - longPrice.amount / longMonths / (shortPrice.amount / shortMonths);
+    if (savings > 0.01) return { labelSlug: longest.slug, percent: Math.round(savings * 100) };
+  }
+  return null;
+}
 
 // src/ui/UsageMeters.tsx
 
@@ -2848,13 +2886,13 @@ function UsageMeters({
   appearance,
   className
 }) {
-  const { entitlements, isLoading, error } = _chunkIMZFZ3P5cjs.useEntitlements.call(void 0, );
-  const { subscription } = _chunkIMZFZ3P5cjs.useSubscription.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const { entitlements, isLoading, error } = _chunkN6VPGJ36cjs.useEntitlements.call(void 0, );
+  const { subscription } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.usage.title));
   const nameFor = (key) => {
-    if (_optionalChain([labels, 'optionalAccess', _51 => _51[key]])) return labels[key];
-    const fromPlan = _optionalChain([subscription, 'optionalAccess', _52 => _52.entitlements, 'access', _53 => _53.find, 'call', _54 => _54((e) => e.feature_key === key), 'optionalAccess', _55 => _55.feature_name]);
+    if (_optionalChain([labels, 'optionalAccess', _56 => _56[key]])) return labels[key];
+    const fromPlan = _optionalChain([subscription, 'optionalAccess', _57 => _57.entitlements, 'access', _58 => _58.find, 'call', _59 => _59((e) => e.feature_key === key), 'optionalAccess', _60 => _60.feature_name]);
     return _nullishCoalesce(fromPlan, () => ( humanizeFeatureKey(key)));
   };
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
@@ -2896,12 +2934,12 @@ function UsageMeters({
       const ratio = unlimited ? 0 : quotaRatio(e.used, e.limit);
       const level = unlimited ? "normal" : levelFor(ratio, softOverage);
       const over = !unlimited && e.used > e.limit;
-      const standing = billed ? _optionalChain([subscription, 'optionalAccess', _56 => _56.entitlements, 'access', _57 => _57.find, 'call', _58 => _58((se) => se.feature_key === e.feature_key)]) : void 0;
-      const capReached = billed && (_nullishCoalesce(_optionalChain([standing, 'optionalAccess', _59 => _59.cap_reached]), () => ( false)));
+      const standing = billed ? _optionalChain([subscription, 'optionalAccess', _61 => _61.entitlements, 'access', _62 => _62.find, 'call', _63 => _63((se) => se.feature_key === e.feature_key)]) : void 0;
+      const capReached = billed && (_nullishCoalesce(_optionalChain([standing, 'optionalAccess', _64 => _64.cap_reached]), () => ( false)));
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-meter", "data-level": level, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-meter-head", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-name", children: nameFor(e.feature_key) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-value", children: unlimited ? _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-value", children: unlimited ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
         ] }),
         !unlimited ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
@@ -2916,14 +2954,14 @@ function UsageMeters({
           }
         ) : null,
         over && softOverage ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunkIMZFZ3P5cjs.fill.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunkN6VPGJ36cjs.fill.call(void 0, 
             // capReached inverts overageBilled's meaning (billing stopped,
             // access didn't) - a variant string would say the opposite of
             // the truth for the one plan that just stopped costing money.
             capReached ? l10n.usage.capReached : billed ? l10n.usage.overageBilled : l10n.usage.overage,
             { count: formatNumber(e.used - e.limit) }
           ) }),
-          billed && _optionalChain([standing, 'optionalAccess', _60 => _60.billed_amount]) != null && standing.currency ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note kerne-meter-cost", children: _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.usage.billedAmount, {
+          billed && _optionalChain([standing, 'optionalAccess', _65 => _65.billed_amount]) != null && standing.currency ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note kerne-meter-cost", children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.usage.billedAmount, {
             amount: formatMoney(standing.billed_amount, standing.currency)
           }) }) : null
         ] }) : over ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
@@ -2954,11 +2992,11 @@ function SubscriptionCard({
   appearance,
   className
 }) {
-  const { subscription, isLoading, error, refetch } = _chunkIMZFZ3P5cjs.useSubscription.call(void 0, productSlug);
-  const { openPortal } = _chunkIMZFZ3P5cjs.usePortal.call(void 0, );
-  const { cancelSubscription, isCanceling } = _chunkIMZFZ3P5cjs.useCancelSubscription.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const { subscription, isLoading, error, refetch } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, productSlug);
+  const { openPortal } = _chunkN6VPGJ36cjs.usePortal.call(void 0, );
+  const { cancelSubscription, isCanceling } = _chunkN6VPGJ36cjs.useCancelSubscription.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.billing.plan));
   const statusLabels = {
     ACTIVE: l10n.billing.statusActive,
@@ -3105,31 +3143,37 @@ function BillingSection({
   usageFeatureKeys,
   usageLabels
 }) {
-  const { subscription } = _chunkIMZFZ3P5cjs.useSubscription.call(void 0, productSlug);
-  const { plans, isLoading: plansLoading } = _chunkIMZFZ3P5cjs.usePlans.call(void 0, pricingProductIdOrSlug);
-  const { openCheckout } = _chunkIMZFZ3P5cjs.useCheckout.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
-  const [busy, setBusy] = _react.useState.call(void 0, null);
-  const [error, setError] = _react.useState.call(void 0, null);
+  const { subscription, refetch: refetchSubscription } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, productSlug);
+  const { plans, isLoading: plansLoading } = _chunkN6VPGJ36cjs.usePlans.call(void 0, pricingProductIdOrSlug);
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const {
+    pending: pendingPlan,
+    switching,
+    switchError,
+    checkoutPriceId: busy,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  } = _chunkN6VPGJ36cjs.usePlanSwitch.call(void 0, subscription, refetchSubscription, {
+    successUrl: checkoutSuccessUrl,
+    cancelUrl: checkoutCancelUrl
+  });
+  const error = _nullishCoalesce(checkoutError, () => ( switchError));
   const intervals = _react.useMemo.call(void 0, () => intervalsOf(plans), [plans]);
   const [interval, setInterval] = _react.useState.call(void 0, null);
-  const activeInterval = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(interval, () => ( _optionalChain([subscription, 'optionalAccess', _61 => _61.plan_price, 'access', _62 => _62.interval]))), () => ( intervals[0])), () => ( null));
-  const handleSwitch = async (planPriceId) => {
-    setError(null);
-    setBusy(planPriceId);
-    try {
-      await openCheckout(planPriceId, {
-        successUrl: checkoutSuccessUrl,
-        cancelUrl: checkoutCancelUrl
-      });
-    } catch (e) {
-      setError(showError(e));
-      setBusy(null);
-    }
-  };
+  const activeInterval = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(interval, () => ( _optionalChain([subscription, 'optionalAccess', _66 => _66.plan_price, 'access', _67 => _67.interval]))), () => ( intervals[0])), () => ( null));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
+    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(error) }) : null,
+    pendingPlan ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingPlan.plan.name }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: dismissSwitch, disabled: switching, children: l10n.billing.switchConfirmDismiss }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+      ] })
+    ] }) : null,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       SubscriptionCard,
       {
@@ -3168,7 +3212,7 @@ function BillingSection({
       ) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-plan-list", children: plans.map((plan) => {
         const price = _nullishCoalesce(plan.prices.find((p) => p.interval === activeInterval), () => ( plan.prices[0]));
-        const isCurrent = _optionalChain([subscription, 'optionalAccess', _63 => _63.plan, 'access', _64 => _64.slug]) === plan.slug;
+        const isCurrent = _optionalChain([subscription, 'optionalAccess', _68 => _68.plan, 'access', _69 => _69.slug]) === plan.slug;
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
           {
@@ -3187,7 +3231,7 @@ function BillingSection({
                 {
                   variant: "outline",
                   type: "button",
-                  onClick: () => handleSwitch(price.id),
+                  onClick: () => selectPlan(plan, price),
                   loading: busy === price.id,
                   disabled: busy !== null,
                   children: busy === price.id ? l10n.billing.opening : l10n.billing.switchTo
@@ -3226,7 +3270,7 @@ function UserProfile({
   appearance,
   className
 }) {
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const builtins = {
     profile: {
       label: l10n.profile.tabProfile,
@@ -3253,15 +3297,15 @@ function UserProfile({
       description: t.description
     }))
   ];
-  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _65 => _65[0], 'optionalAccess', _66 => _66.id]))), () => ( "profile")));
+  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _70 => _70[0], 'optionalAccess', _71 => _71.id]))), () => ( "profile")));
   const current = _nullishCoalesce(controlledTab, () => ( internalTab));
   const select = (id) => {
     if (controlledTab === void 0) setInternalTab(id);
-    _optionalChain([onTabChange, 'optionalCall', _67 => _67(id)]);
+    _optionalChain([onTabChange, 'optionalCall', _72 => _72(id)]);
   };
   const active = _nullishCoalesce(allTabs.find((t) => t.id === current), () => ( allTabs[0]));
   const renderPane = () => {
-    switch (_optionalChain([active, 'optionalAccess', _68 => _68.id])) {
+    switch (_optionalChain([active, 'optionalAccess', _73 => _73.id])) {
       case "profile":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProfileSection, { verificationCallbackUrl, onSaved });
       case "security":
@@ -3282,7 +3326,7 @@ function UserProfile({
           }
         );
       default:
-        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _69 => _69.find, 'call', _70 => _70((t) => t.id === _optionalChain([active, 'optionalAccess', _71 => _71.id])), 'optionalAccess', _72 => _72.content]), () => ( null));
+        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _74 => _74.find, 'call', _75 => _75((t) => t.id === _optionalChain([active, 'optionalAccess', _76 => _76.id])), 'optionalAccess', _77 => _77.content]), () => ( null));
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-profile", children: [
@@ -3291,7 +3335,7 @@ function UserProfile({
       {
         type: "button",
         className: "kerne-nav-item",
-        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _73 => _73.id]) ? "page" : void 0,
+        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _78 => _78.id]) ? "page" : void 0,
         onClick: () => select(tab.id),
         children: tab.label
       },
@@ -3318,50 +3362,6 @@ function formatEntitlement(e, unlimitedLabel) {
   if (e.limit === -1) return `${unlimitedLabel} ${e.feature_name.toLowerCase()}`;
   return `${formatNumber(e.limit)} ${e.feature_name.toLowerCase()}`;
 }
-function collectLabels(plans) {
-  const bySlug = /* @__PURE__ */ new Map();
-  for (const plan of plans) {
-    for (const price of plan.prices) {
-      if (!bySlug.has(price.label.slug)) bySlug.set(price.label.slug, price.label);
-    }
-  }
-  return Array.from(bySlug.values()).sort(
-    (a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name)
-  );
-}
-var ENCODED_INTERVAL_MONTHS = { D: 12 / 365, M: 1, Y: 12 };
-function approxMonths2(value) {
-  const match = /^([1-9]\d*)([DMY])$/.exec(value);
-  if (!match) return 0;
-  return parseInt(match[1], 10) * ENCODED_INTERVAL_MONTHS[match[2]];
-}
-function labelSavings(plans, labels) {
-  if (labels.length < 2) return null;
-  const priceFor = (labelSlug) => {
-    for (const plan of plans) {
-      const price = plan.prices.find((p) => p.label.slug === labelSlug);
-      if (price) return price;
-    }
-    return void 0;
-  };
-  const sorted = [...labels].sort(
-    (a, b) => approxMonths2(_nullishCoalesce(_optionalChain([priceFor, 'call', _74 => _74(a.slug), 'optionalAccess', _75 => _75.interval]), () => ( "1M"))) - approxMonths2(_nullishCoalesce(_optionalChain([priceFor, 'call', _76 => _76(b.slug), 'optionalAccess', _77 => _77.interval]), () => ( "1M")))
-  );
-  const shortest = sorted[0];
-  const longest = sorted[sorted.length - 1];
-  if (shortest.slug === longest.slug) return null;
-  for (const plan of plans) {
-    const shortPrice = plan.prices.find((p) => p.label.slug === shortest.slug);
-    const longPrice = plan.prices.find((p) => p.label.slug === longest.slug);
-    if (!_optionalChain([shortPrice, 'optionalAccess', _78 => _78.amount]) || !longPrice) continue;
-    const shortMonths = approxMonths2(shortPrice.interval);
-    const longMonths = approxMonths2(longPrice.interval);
-    if (!shortMonths || !longMonths) continue;
-    const savings = 1 - longPrice.amount / longMonths / (shortPrice.amount / shortMonths);
-    if (savings > 0.01) return { labelSlug: longest.slug, percent: Math.round(savings * 100) };
-  }
-  return null;
-}
 var PricingTableContext = _react.createContext.call(void 0, null);
 function usePricingTable() {
   const ctx = _react.useContext.call(void 0, PricingTableContext);
@@ -3380,39 +3380,39 @@ function PricingTable({
   className,
   children
 }) {
-  const { plans, isLoading, error } = _chunkIMZFZ3P5cjs.usePlans.call(void 0, product);
-  const { subscription } = _chunkIMZFZ3P5cjs.useSubscription.call(void 0, product);
-  const { openCheckout } = _chunkIMZFZ3P5cjs.useCheckout.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
-  const showError = _chunkIMZFZ3P5cjs.useErrorResolver.call(void 0, );
+  const { plans, isLoading, error } = _chunkN6VPGJ36cjs.usePlans.call(void 0, product);
+  const { subscription, refetch: refetchSubscription } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, product);
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
   const [selectedLabelSlug, setSelectedLabelSlug] = _react.useState.call(void 0, _nullishCoalesce(defaultLabel, () => ( null)));
-  const [busyPriceId, setBusyPriceId] = _react.useState.call(void 0, null);
-  const [checkoutError, setCheckoutError] = _react.useState.call(void 0, null);
-  const labels = _react.useMemo.call(void 0, () => collectLabels(plans), [plans]);
-  const savings = _react.useMemo.call(void 0, () => labelSavings(plans, labels), [plans, labels]);
+  const {
+    pending: pendingSwitch,
+    switching,
+    switchError,
+    checkoutPriceId: busyPriceId,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  } = _chunkN6VPGJ36cjs.usePlanSwitch.call(void 0, subscription, refetchSubscription, {
+    successUrl: checkoutSuccessUrl,
+    cancelUrl: checkoutCancelUrl
+  });
+  const labels = _react.useMemo.call(void 0, () => collectPriceLabels(plans), [plans]);
+  const savings = _react.useMemo.call(void 0, () => resolveLabelSavings(plans, labels), [plans, labels]);
   _react.useEffect.call(void 0, () => {
     if (labels.length === 0) return;
     if (selectedLabelSlug && labels.some((l) => l.slug === selectedLabelSlug)) return;
     setSelectedLabelSlug(labels[0].slug);
   }, [labels]);
-  const handleSelectPlan = async (plan) => {
+  const handleSelectPlan = (plan) => {
     const price = _nullishCoalesce(plan.prices.find((p) => p.label.slug === selectedLabelSlug), () => ( plan.prices[0]));
     if (!price) return;
     if (onSelectPlan) {
       onSelectPlan(plan, price);
       return;
     }
-    setCheckoutError(null);
-    setBusyPriceId(price.id);
-    try {
-      await openCheckout(price.id, {
-        successUrl: checkoutSuccessUrl,
-        cancelUrl: checkoutCancelUrl
-      });
-    } catch (e) {
-      setCheckoutError(showError(e));
-      setBusyPriceId(null);
-    }
+    void selectPlan(plan, price);
   };
   const ctx = {
     plans,
@@ -3425,13 +3425,31 @@ function PricingTable({
     onSelectPlan: handleSelectPlan
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-skeleton", "aria-busy": "true", "aria-label": l10n.pricing.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 320 } }) }) : error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.pricing.loadFailed }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PricingTableContext.Provider, { value: ctx, children: [
-    checkoutError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: checkoutError }) : null,
+    checkoutError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(checkoutError) }) : null,
+    pendingSwitch ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingSwitch.plan.name }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
+      switchError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(switchError) }) : null,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            variant: "outline",
+            type: "button",
+            onClick: dismissSwitch,
+            disabled: switching,
+            children: l10n.billing.switchConfirmDismiss
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+      ] })
+    ] }) : null,
     children
   ] }) });
 }
 function LabelSwitch() {
   const { labels, selectedLabelSlug, setSelectedLabelSlug, savings } = usePricingTable();
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const containerRef = _react.useRef.call(void 0, null);
   const buttonRefs = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
   const [thumb, setThumb] = _react.useState.call(void 0, null);
@@ -3478,7 +3496,7 @@ function LabelSwitch() {
             onClick: () => setSelectedLabelSlug(label.slug),
             children: [
               label.name,
-              savings && savings.labelSlug === label.slug ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-switch-save", children: _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.pricing.save, { percent: savings.percent }) }) : null
+              savings && savings.labelSlug === label.slug ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-switch-save", children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.pricing.save, { percent: savings.percent }) }) : null
             ]
           },
           label.slug
@@ -3518,7 +3536,7 @@ function useAnimatedAmount(target, durationMs = 420) {
 }
 function Plan({ slug, featured, badge, maxFeatures }) {
   const { plans, selectedLabelSlug, currentPlanId, busyPriceId, onSelectPlan } = usePricingTable();
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const plan = plans.find((p) => p.slug === slug);
   _react.useEffect.call(void 0, () => {
     if (!plan && process.env.NODE_ENV === "development") {
@@ -3535,7 +3553,7 @@ function Plan({ slug, featured, badge, maxFeatures }) {
   const isBusy = !!price && busyPriceId === price.id;
   const shownEntitlements = maxFeatures ? plan.entitlements.slice(0, maxFeatures) : plan.entitlements;
   const remaining = plan.entitlements.length - shownEntitlements.length;
-  const billedCaption = resolved && resolved.displayInterval !== resolved.billedInterval ? _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.pricing.billedAt, {
+  const billedCaption = resolved && resolved.displayInterval !== resolved.billedInterval ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.pricing.billedAt, {
     amount: formatMoney(resolved.billedAmount, price.currency),
     interval: formatInterval(resolved.billedInterval, l10n.billing)
   }) : null;
@@ -3566,7 +3584,7 @@ function Plan({ slug, featured, badge, maxFeatures }) {
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckIcon2, {}),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: formatEntitlement(e, l10n.pricing.unlimited) })
           ] }, e.feature_key)),
-          remaining > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "kerne-pricing-feature-more", children: _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.pricing.moreFeatures, { count: remaining }) }) : null
+          remaining > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "kerne-pricing-feature-more", children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.pricing.moreFeatures, { count: remaining }) }) : null
         ] }) : null,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-cta", children: isCurrent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", disabled: true, children: l10n.billing.current }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Button,
@@ -3632,9 +3650,9 @@ function CheckoutResult({
   logo,
   className
 }) {
-  const client = _chunkIMZFZ3P5cjs.useClient.call(void 0, );
-  const { config } = _chunkIMZFZ3P5cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
+  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   const [state, setState] = _react.useState.call(void 0, "checking");
   const confirmed = _react.useRef.call(void 0, false);
   _react.useEffect.call(void 0, () => {
@@ -3718,8 +3736,8 @@ function UpgradePrompt({
   appearance,
   className
 }) {
-  const { details, allowed, isLoading } = _chunkIMZFZ3P5cjs.useAccess.call(void 0, featureKey, requested);
-  const l10n = _chunkIMZFZ3P5cjs.useLocalization.call(void 0, );
+  const { details, allowed, isLoading } = _chunkN6VPGJ36cjs.useAccess.call(void 0, featureKey, requested);
+  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
   if (isLoading) {
     if (hideWhileLoading) return null;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 80 }, "aria-label": l10n.upgrade.checking }) });
@@ -3727,14 +3745,14 @@ function UpgradePrompt({
   if (allowed) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
   const name = _nullishCoalesce(featureName, () => ( humanizeFeatureKey(featureKey).toLowerCase()));
   const quotaExhausted = _optionalChain([details, 'optionalAccess', _92 => _92.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
-  const heading = _nullishCoalesce(title, () => ( _chunkIMZFZ3P5cjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
-  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.upgrade.quotaBody, {
+  const heading = _nullishCoalesce(title, () => ( _chunkN6VPGJ36cjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
+  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.upgrade.quotaBody, {
     used: formatNumber(details.used),
     // `access_limit` is where access actually stops; `limit` is only the
     // included allocation and can understate it past an overage ceiling.
     // Falls back to `limit` defensively - should never be needed here.
     limit: formatNumber(_nullishCoalesce(details.access_limit, () => ( details.limit)))
-  }) : _chunkIMZFZ3P5cjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
+  }) : _chunkN6VPGJ36cjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-status", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-heading", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", style: { fontSize: 17 }, children: heading }),
@@ -3777,4 +3795,12 @@ function UpgradePrompt({
 
 
 
-exports.ActivateAccountForm = ActivateAccountForm; exports.AuthFlow = AuthFlow; exports.BillingSection = BillingSection; exports.ChangePasswordForm = ChangePasswordForm; exports.CheckoutResult = CheckoutResult; exports.ForgotPasswordForm = ForgotPasswordForm; exports.LoginForm = LoginForm; exports.MagicLinkCallback = MagicLinkCallback; exports.PricingTable = PricingTable; exports.ProfileSection = ProfileSection; exports.RegisterForm = RegisterForm; exports.ResetPasswordForm = ResetPasswordForm; exports.SecuritySection = SecuritySection; exports.SignOutButton = SignOutButton; exports.SubscriptionCard = SubscriptionCard; exports.UpgradePrompt = UpgradePrompt; exports.UsageMeters = UsageMeters; exports.UserButton = UserButton; exports.UserProfile = UserProfile; exports.VerifyEmailForm = VerifyEmailForm; exports.WaitlistForm = WaitlistForm; exports.defaultLocalization = _chunkIMZFZ3P5cjs.defaultLocalization; exports.useLocalization = _chunkIMZFZ3P5cjs.useLocalization; exports.usePricingTable = usePricingTable;
+
+
+
+
+
+
+
+
+exports.ActivateAccountForm = ActivateAccountForm; exports.AuthFlow = AuthFlow; exports.BillingSection = BillingSection; exports.ChangePasswordForm = ChangePasswordForm; exports.CheckoutResult = CheckoutResult; exports.ForgotPasswordForm = ForgotPasswordForm; exports.LoginForm = LoginForm; exports.MagicLinkCallback = MagicLinkCallback; exports.PricingTable = PricingTable; exports.ProfileSection = ProfileSection; exports.RegisterForm = RegisterForm; exports.ResetPasswordForm = ResetPasswordForm; exports.SecuritySection = SecuritySection; exports.SignOutButton = SignOutButton; exports.SubscriptionCard = SubscriptionCard; exports.UpgradePrompt = UpgradePrompt; exports.UsageMeters = UsageMeters; exports.UserButton = UserButton; exports.UserProfile = UserProfile; exports.VerifyEmailForm = VerifyEmailForm; exports.WaitlistForm = WaitlistForm; exports.collectPriceLabels = collectPriceLabels; exports.defaultLocalization = _chunkN6VPGJ36cjs.defaultLocalization; exports.formatDate = formatDate; exports.formatInterval = formatInterval; exports.formatMoney = formatMoney; exports.formatNumber = formatNumber; exports.humanizeFeatureKey = humanizeFeatureKey; exports.resolveLabelSavings = resolveLabelSavings; exports.resolvePriceDisplay = resolvePriceDisplay; exports.useLocalization = _chunkN6VPGJ36cjs.useLocalization; exports.usePricingTable = usePricingTable;