@stackframe/stack 2.5.29 → 2.5.31

package/dist/components-page/stack-handler.d.mts

@@ -1,5 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StackServerApp } from '../lib/stack-app.mjs';
+import { SignIn } from './sign-in.mjs';
+import { SignUp } from './sign-up.mjs';
+import { EmailVerification } from './email-verification.mjs';
+import { PasswordReset } from './password-reset.mjs';
+import { ForgotPassword } from './forgot-password.mjs';
+import { AccountSettings } from './account-settings.mjs';
+import { ErrorPage } from './error-page.mjs';
+import { MagicLinkCallback } from './magic-link-callback.mjs';
+import { OAuthCallback } from './oauth-callback.mjs';
+import { SignOut } from './sign-out.mjs';
+import { TeamInvitation } from './team-invitation.mjs';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/helpers/production-mode';
 import '@stackframe/stack-shared/dist/interface/crud/api-keys';
@@ -10,14 +21,31 @@ import '@stackframe/stack-shared/dist/sessions';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/utils/oauth';
 import '@stackframe/stack-shared/dist/utils/results';
+import 'lucide-react';
 
-declare function StackHandler<HasTokenStore extends boolean>({ app, params: { stack }, searchParams, fullPage, }: {
+type Components = {
+    SignIn: typeof SignIn;
+    SignUp: typeof SignUp;
+    EmailVerification: typeof EmailVerification;
+    PasswordReset: typeof PasswordReset;
+    ForgotPassword: typeof ForgotPassword;
+    SignOut: typeof SignOut;
+    OAuthCallback: typeof OAuthCallback;
+    MagicLinkCallback: typeof MagicLinkCallback;
+    TeamInvitation: typeof TeamInvitation;
+    ErrorPage: typeof ErrorPage;
+    AccountSettings: typeof AccountSettings;
+};
+declare function StackHandler<HasTokenStore extends boolean>(props: {
     app: StackServerApp<HasTokenStore>;
     params?: {
         stack?: string[];
     };
     searchParams?: Record<string, string>;
-    fullPage?: boolean;
+    fullPage: boolean;
+    componentProps?: {
+        [K in keyof Components]?: Parameters<Components[K]>;
+    };
 }): Promise<react_jsx_runtime.JSX.Element>;
 
 export { StackHandler as default };

package/dist/components-page/stack-handler.d.ts

@@ -1,5 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StackServerApp } from '../lib/stack-app.js';
+import { SignIn } from './sign-in.js';
+import { SignUp } from './sign-up.js';
+import { EmailVerification } from './email-verification.js';
+import { PasswordReset } from './password-reset.js';
+import { ForgotPassword } from './forgot-password.js';
+import { AccountSettings } from './account-settings.js';
+import { ErrorPage } from './error-page.js';
+import { MagicLinkCallback } from './magic-link-callback.js';
+import { OAuthCallback } from './oauth-callback.js';
+import { SignOut } from './sign-out.js';
+import { TeamInvitation } from './team-invitation.js';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/helpers/production-mode';
 import '@stackframe/stack-shared/dist/interface/crud/api-keys';
@@ -10,14 +21,31 @@ import '@stackframe/stack-shared/dist/sessions';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/utils/oauth';
 import '@stackframe/stack-shared/dist/utils/results';
+import 'lucide-react';
 
-declare function StackHandler<HasTokenStore extends boolean>({ app, params: { stack }, searchParams, fullPage, }: {
+type Components = {
+    SignIn: typeof SignIn;
+    SignUp: typeof SignUp;
+    EmailVerification: typeof EmailVerification;
+    PasswordReset: typeof PasswordReset;
+    ForgotPassword: typeof ForgotPassword;
+    SignOut: typeof SignOut;
+    OAuthCallback: typeof OAuthCallback;
+    MagicLinkCallback: typeof MagicLinkCallback;
+    TeamInvitation: typeof TeamInvitation;
+    ErrorPage: typeof ErrorPage;
+    AccountSettings: typeof AccountSettings;
+};
+declare function StackHandler<HasTokenStore extends boolean>(props: {
     app: StackServerApp<HasTokenStore>;
     params?: {
         stack?: string[];
     };
     searchParams?: Record<string, string>;
-    fullPage?: boolean;
+    fullPage: boolean;
+    componentProps?: {
+        [K in keyof Components]?: Parameters<Components[K]>;
+    };
 }): Promise<react_jsx_runtime.JSX.Element>;
 
 export { StackHandler as default };

package/dist/components-page/stack-handler.js

@@ -36,28 +36,20 @@ var import_oauth_callback = require("./oauth-callback");
 var import_password_reset = require("./password-reset");
 var import_sign_out = require("./sign-out");
 var import_team_invitation = require("./team-invitation");
+var import_objects = require("@stackframe/stack-shared/dist/utils/objects");
 var import_jsx_runtime = require("react/jsx-runtime");
-async function StackHandler({
-  app,
-  params: { stack } = {},
-  searchParams = {},
-  fullPage
-}) {
-  if (fullPage === void 0) {
-    console.warn("Not specifying `fullPage` in the StackHandler options is deprecated; the default value will change to `false` in the next major version. Please specify `fullPage={true}` in your `app/[...stack]/handler/page.tsx` file to retain the current behavior.");
-    fullPage = true;
-  }
-  if (!stack) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.MessageCard, { title: "Invalid Stack Handler Setup", fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack]." }) });
+async function StackHandler(props) {
+  if (!props.params?.stack) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.MessageCard, { title: "Invalid Stack Handler Setup", fullPage: props.fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack]." }) });
   }
   function redirectIfNotHandler(name) {
-    const url = app.urls[name];
-    const handlerUrl = app.urls.handler;
+    const url = props.app.urls[name];
+    const handlerUrl = props.app.urls.handler;
     if (url !== handlerUrl && url.startsWith(handlerUrl + "/")) {
       return;
     }
     const urlObj = new URL(url, "http://example.com");
-    for (const [key, value] of Object.entries(searchParams)) {
+    for (const [key, value] of Object.entries(props.searchParams || {})) {
       urlObj.searchParams.set(key, value);
     }
     (0, import_navigation.redirect)((0, import_urls.getRelativePart)(urlObj), import_navigation.RedirectType.replace);
@@ -75,58 +67,134 @@ async function StackHandler({
     teamInvitation: "team-invitation",
     error: "error"
   };
-  const path = stack.join("/");
+  const path = props.params.stack.join("/");
   if (path.startsWith("account-settings")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_account_settings.AccountSettings, { fullPage });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_account_settings.AccountSettings,
+      {
+        fullPage: props.fullPage,
+        ...filterUndefinedINU(props.componentProps?.AccountSettings)
+      }
+    );
   }
   switch (path) {
     case availablePaths.signIn: {
       redirectIfNotHandler("signIn");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AuthPage, { fullPage, type: "sign-in", automaticRedirect: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.SignIn,
+        {
+          fullPage: props.fullPage,
+          automaticRedirect: true,
+          ...filterUndefinedINU(props.componentProps?.SignIn)
+        }
+      );
     }
     case availablePaths.signUp: {
       redirectIfNotHandler("signUp");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AuthPage, { fullPage, type: "sign-up", automaticRedirect: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.SignUp,
+        {
+          fullPage: props.fullPage,
+          automaticRedirect: true,
+          ...filterUndefinedINU(props.componentProps?.SignUp)
+        }
+      );
     }
     case availablePaths.emailVerification: {
       redirectIfNotHandler("emailVerification");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_email_verification.EmailVerification, { searchParams, fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_email_verification.EmailVerification,
+        {
+          searchParams: props.searchParams,
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.EmailVerification)
+        }
+      );
     }
     case availablePaths.passwordReset: {
       redirectIfNotHandler("passwordReset");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_password_reset.PasswordReset, { searchParams, fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_password_reset.PasswordReset,
+        {
+          searchParams: props.searchParams || {},
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.PasswordReset)
+        }
+      );
     }
     case availablePaths.forgotPassword: {
       redirectIfNotHandler("forgotPassword");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_forgot_password.ForgotPassword, { fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_forgot_password.ForgotPassword,
+        {
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.ForgotPassword)
+        }
+      );
     }
     case availablePaths.signOut: {
       redirectIfNotHandler("signOut");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sign_out.SignOut, { fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_sign_out.SignOut,
+        {
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.SignOut)
+        }
+      );
     }
     case availablePaths.oauthCallback: {
       redirectIfNotHandler("oauthCallback");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_oauth_callback.OAuthCallback, { fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_oauth_callback.OAuthCallback,
+        {
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.OAuthCallback)
+        }
+      );
     }
     case availablePaths.magicLinkCallback: {
       redirectIfNotHandler("magicLinkCallback");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_magic_link_callback.MagicLinkCallback, { searchParams, fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_magic_link_callback.MagicLinkCallback,
+        {
+          searchParams: props.searchParams || {},
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.MagicLinkCallback)
+        }
+      );
     }
     case availablePaths.teamInvitation: {
       redirectIfNotHandler("teamInvitation");
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_invitation.TeamInvitation, { searchParams, fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_team_invitation.TeamInvitation,
+        {
+          searchParams: props.searchParams || {},
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.TeamInvitation)
+        }
+      );
     }
     case availablePaths.error: {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_error_page.ErrorPage, { searchParams, fullPage });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_error_page.ErrorPage,
+        {
+          searchParams: props.searchParams || {},
+          fullPage: props.fullPage,
+          ...filterUndefinedINU(props.componentProps?.ErrorPage)
+        }
+      );
     }
     default: {
       for (const [key, value] of Object.entries(availablePaths)) {
         if (path === value.replaceAll("-", "")) {
-          (0, import_navigation.redirect)(`${app.urls.handler}/${value}`, import_navigation.RedirectType.replace);
+          (0, import_navigation.redirect)(`${props.app.urls.handler}/${value}`, import_navigation.RedirectType.replace);
         }
       }
       return (0, import_navigation.notFound)();
     }
   }
 }
+function filterUndefinedINU(value) {
+  return value === void 0 ? value : (0, import_objects.filterUndefined)(value);
+}
 //# sourceMappingURL=stack-handler.js.map

package/dist/components-page/stack-handler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/stack-handler.tsx"],"sourcesContent":["import { getRelativePart } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport { AuthPage, StackServerApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport { AccountSettings } from \"./account-settings\";\nimport { EmailVerification } from \"./email-verification\";\nimport { ErrorPage } from \"./error-page\";\nimport { ForgotPassword } from \"./forgot-password\";\nimport { MagicLinkCallback } from \"./magic-link-callback\";\nimport { OAuthCallback } from \"./oauth-callback\";\nimport { PasswordReset } from \"./password-reset\";\nimport { SignOut } from \"./sign-out\";\nimport { TeamCreation } from \"./team-creation\";\nimport { TeamInvitation } from \"./team-invitation\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n  fullPage,\n}: {\n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] },\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  if (fullPage === undefined) {\n    console.warn(\"Not specifying `fullPage` in the StackHandler options is deprecated; the default value will change to `false` in the next major version. Please specify `fullPage={true}` in your `app/[...stack]/handler/page.tsx` file to retain the current behavior.\");\n    fullPage = true;\n  }\n\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" fullPage={fullPage}>\n        <p>Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack].</p>\n      </MessageCard>\n    );\n  }\n\n  function redirectIfNotHandler(name: keyof HandlerUrls) {\n    const url = app.urls[name];\n    const handlerUrl = app.urls.handler;\n\n    if (url !== handlerUrl && url.startsWith(handlerUrl + \"/\")) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    const urlObj = new URL(url, \"http://example.com\");\n    for (const [key, value] of Object.entries(searchParams)) {\n      urlObj.searchParams.set(key, value);\n    }\n\n    redirect(getRelativePart(urlObj), RedirectType.replace);\n  };\n\n  const availablePaths = {\n    signIn: 'sign-in',\n    signUp: 'sign-up',\n    emailVerification: 'email-verification',\n    passwordReset: 'password-reset',\n    forgotPassword: 'forgot-password',\n    signOut: 'sign-out',\n    oauthCallback: 'oauth-callback',\n    magicLinkCallback: 'magic-link-callback',\n    teamInvitation: 'team-invitation',\n    error: 'error',\n  };\n\n  const path = stack.join('/');\n\n  if (path.startsWith('account-settings')) {\n    return <AccountSettings fullPage={fullPage} />;\n  }\n\n\n  switch (path) {\n    case availablePaths.signIn: {\n      redirectIfNotHandler('signIn');\n      return <AuthPage fullPage={fullPage} type='sign-in' automaticRedirect />;\n    }\n    case availablePaths.signUp: {\n      redirectIfNotHandler('signUp');\n      return <AuthPage fullPage={fullPage} type='sign-up' automaticRedirect />;\n    }\n    case availablePaths.emailVerification: {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.passwordReset: {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.forgotPassword: {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage={fullPage} />;\n    }\n    case availablePaths.signOut: {\n      redirectIfNotHandler('signOut');\n      return <SignOut fullPage={fullPage} />;\n    }\n    case availablePaths.oauthCallback: {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback fullPage={fullPage} />;\n    }\n    case availablePaths.magicLinkCallback: {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamInvitation: {\n      redirectIfNotHandler('teamInvitation');\n      return <TeamInvitation searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.error: {\n      return <ErrorPage searchParams={searchParams} fullPage={fullPage} />;\n    }\n    default: {\n      for (const [key, value] of Object.entries(availablePaths)) {\n        if (path === value.replaceAll('-', '')) {\n          redirect(`${app.urls.handler}/${value}`, RedirectType.replace);\n        }\n      }\n      return notFound();\n    }\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components-page/stack-handler.tsx"],"sourcesContent":["import { getRelativePart } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport { SignIn, SignUp, StackServerApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport { AccountSettings } from \"./account-settings\";\nimport { EmailVerification } from \"./email-verification\";\nimport { ErrorPage } from \"./error-page\";\nimport { ForgotPassword } from \"./forgot-password\";\nimport { MagicLinkCallback } from \"./magic-link-callback\";\nimport { OAuthCallback } from \"./oauth-callback\";\nimport { PasswordReset } from \"./password-reset\";\nimport { SignOut } from \"./sign-out\";\nimport { TeamInvitation } from \"./team-invitation\";\nimport { FilterUndefined, filterUndefined } from \"@stackframe/stack-shared/dist/utils/objects\";\n\ntype Components = {\n  SignIn: typeof SignIn,\n  SignUp: typeof SignUp,\n  EmailVerification: typeof EmailVerification,\n  PasswordReset: typeof PasswordReset,\n  ForgotPassword: typeof ForgotPassword,\n  SignOut: typeof SignOut,\n  OAuthCallback: typeof OAuthCallback,\n  MagicLinkCallback: typeof MagicLinkCallback,\n  TeamInvitation: typeof TeamInvitation,\n  ErrorPage: typeof ErrorPage,\n  AccountSettings: typeof AccountSettings,\n};\n\n\nexport default async function StackHandler<HasTokenStore extends boolean>(props: {\n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] },\n  searchParams?: Record<string, string>,\n  fullPage: boolean,\n  componentProps?: {\n    [K in keyof Components]?: Parameters<Components[K]>;\n  },\n}) {\n  if (!props.params?.stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" fullPage={props.fullPage}>\n        <p>Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack].</p>\n      </MessageCard>\n    );\n  }\n\n  function redirectIfNotHandler(name: keyof HandlerUrls) {\n    const url = props.app.urls[name];\n    const handlerUrl = props.app.urls.handler;\n\n    if (url !== handlerUrl && url.startsWith(handlerUrl + \"/\")) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    const urlObj = new URL(url, \"http://example.com\");\n    for (const [key, value] of Object.entries(props.searchParams || {})) {\n      urlObj.searchParams.set(key, value);\n    }\n\n    redirect(getRelativePart(urlObj), RedirectType.replace);\n  };\n\n  const availablePaths = {\n    signIn: 'sign-in',\n    signUp: 'sign-up',\n    emailVerification: 'email-verification',\n    passwordReset: 'password-reset',\n    forgotPassword: 'forgot-password',\n    signOut: 'sign-out',\n    oauthCallback: 'oauth-callback',\n    magicLinkCallback: 'magic-link-callback',\n    teamInvitation: 'team-invitation',\n    error: 'error',\n  };\n\n  const path = props.params.stack.join('/');\n\n  if (path.startsWith('account-settings')) {\n    return <AccountSettings\n      fullPage={props.fullPage}\n      {...filterUndefinedINU(props.componentProps?.AccountSettings)}\n    />;\n  }\n\n  switch (path) {\n    case availablePaths.signIn: {\n      redirectIfNotHandler('signIn');\n      return <SignIn\n        fullPage={props.fullPage}\n        automaticRedirect\n        {...filterUndefinedINU(props.componentProps?.SignIn)}\n      />;\n    }\n    case availablePaths.signUp: {\n      redirectIfNotHandler('signUp');\n      return <SignUp\n        fullPage={props.fullPage}\n        automaticRedirect\n        {...filterUndefinedINU(props.componentProps?.SignUp)}\n      />;\n    }\n    case availablePaths.emailVerification: {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification\n        searchParams={props.searchParams}\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.EmailVerification)}\n      />;\n    }\n    case availablePaths.passwordReset: {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset\n        searchParams={props.searchParams || {}}\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.PasswordReset)}\n      />;\n    }\n    case availablePaths.forgotPassword: {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.ForgotPassword)}\n      />;\n    }\n    case availablePaths.signOut: {\n      redirectIfNotHandler('signOut');\n      return <SignOut\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.SignOut)}\n      />;\n    }\n    case availablePaths.oauthCallback: {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.OAuthCallback)}\n      />;\n    }\n    case availablePaths.magicLinkCallback: {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback\n        searchParams={props.searchParams || {}}\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.MagicLinkCallback)}\n      />;\n    }\n    case availablePaths.teamInvitation: {\n      redirectIfNotHandler('teamInvitation');\n      return <TeamInvitation\n        searchParams={props.searchParams || {}}\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.TeamInvitation)}\n      />;\n    }\n    case availablePaths.error: {\n      return <ErrorPage\n        searchParams={props.searchParams || {}}\n        fullPage={props.fullPage}\n        {...filterUndefinedINU(props.componentProps?.ErrorPage)}\n      />;\n    }\n    default: {\n      for (const [key, value] of Object.entries(availablePaths)) {\n        if (path === value.replaceAll('-', '')) {\n          redirect(`${props.app.urls.handler}/${value}`, RedirectType.replace);\n        }\n      }\n      return notFound();\n    }\n  }\n}\n\n\nfunction filterUndefinedINU<T extends {}>(value: T | undefined): FilterUndefined<T> | undefined {\n  return value === undefined ? value : filterUndefined(value);\n}\n"],"mappings":"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","names":[]}

package/dist/components-page/team-creation.js

@@ -29,12 +29,12 @@ var import_yup = require("@hookform/resolvers/yup");
 var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
 var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
+var import_navigation = require("next/navigation");
 var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import__ = require("..");
 var import_form_warning = require("../components/elements/form-warning");
 var import_maybe_full_page = require("../components/elements/maybe-full-page");
-var import_navigation = require("next/navigation");
 var import_jsx_runtime = require("react/jsx-runtime");
 var schema = (0, import_schema_fields.yupObject)({
   displayName: (0, import_schema_fields.yupString)().required("Please enter a team name")
@@ -69,12 +69,11 @@ function TeamCreation(props) {
         onSubmit: (e) => (0, import_promises.runAsynchronously)(handleSubmit(onSubmit)(e)),
         noValidate: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "email", className: "mb-1", children: "Display name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "display-name", className: "mb-1", children: "Display name" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.Input,
             {
-              id: "email",
-              type: "email",
+              id: "display-name",
               ...register("displayName")
             }
           ),

package/dist/components-page/team-creation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/team-creation.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { MessageCard, useStackApp, useUser } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { useRouter } from \"next/navigation\";\n\nconst schema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation(props: { fullPage?: boolean }) {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n  const router = useRouter();\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title='Team creation is not enabled' />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n      router.push(`${app.urls.handler}/team-settings/${team.id}`);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ width: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            Create a Team\n          </Typography>\n        </div>\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            {...register('displayName')}\n          />\n          <FormWarningText text={errors.displayName?.message?.toString()} />\n\n          <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n            Create\n          </Button>\n        </form>\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAA4B;AAC5B,2BAAqC;AACrC,sBAAkC;AAClC,sBAAiD;AACjD,mBAAyB;AACzB,6BAAwB;AAExB,eAAkD;AAClD,0BAAgC;AAChC,6BAA8B;AAC9B,wBAA0B;AAiBf;AAfX,IAAM,aAAS,gCAAU;AAAA,EACvB,iBAAa,gCAAU,EAAE,SAAS,0BAA0B;AAC9D,CAAC;AAEM,SAAS,aAAa,OAA+B;AAC1D,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,EAAE,QAAI,gCAAQ;AAAA,IAChE,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,WAAO,kBAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,aAAS,6BAAU;AAEzB,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO,4CAAC,wBAAY,OAAM,gCAA+B;AAAA,EAC3D;AAEA,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AAEf,QAAI;AACF,YAAM,OAAO,MAAM,KAAK,WAAW,EAAE,aAAa,KAAK,YAAY,CAAC;AACpE,aAAO,KAAK,GAAG,IAAI,KAAK,OAAO,kBAAkB,KAAK,EAAE,EAAE;AAAA,IAC5D,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,4CAAC,wCAAc,UAAU,CAAC,CAAC,MAAM,UAC/B,uDAAC,SAAI,WAAU,2CAA0C,OAAO,EAAE,OAAO,SAAS,SAAS,MAAM,WAAW,SAAS,EAAE,GACrH;AAAA,gDAAC,SAAI,WAAU,oBACb,sDAAC,8BAAW,MAAK,MAAK,2BAEtB,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAU,WAAK,mCAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,QAC1D,YAAU;AAAA,QAEV;AAAA,sDAAC,yBAAM,SAAQ,SAAQ,WAAU,QAAO,0BAAY;AAAA,UACpD;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACJ,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,UACA,4CAAC,uCAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,UAEhE,4CAAC,0BAAO,MAAK,UAAS,WAAU,QAAO,SAAkB,oBAEzD;AAAA;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components-page/team-creation.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useRouter } from \"next/navigation\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { MessageCard, useStackApp, useUser } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\n\nconst schema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation(props: { fullPage?: boolean }) {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n  const router = useRouter();\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title='Team creation is not enabled' />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n      router.push(`${app.urls.handler}/team-settings/${team.id}`);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ width: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            Create a Team\n          </Typography>\n        </div>\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <Label htmlFor=\"display-name\" className=\"mb-1\">Display name</Label>\n          <Input\n            id=\"display-name\"\n            {...register('displayName')}\n          />\n          <FormWarningText text={errors.displayName?.message?.toString()} />\n\n          <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n            Create\n          </Button>\n        </form>\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAA4B;AAC5B,2BAAqC;AACrC,sBAAkC;AAClC,sBAAiD;AACjD,wBAA0B;AAC1B,mBAAyB;AACzB,6BAAwB;AAExB,eAAkD;AAClD,0BAAgC;AAChC,6BAA8B;AAiBnB;AAfX,IAAM,aAAS,gCAAU;AAAA,EACvB,iBAAa,gCAAU,EAAE,SAAS,0BAA0B;AAC9D,CAAC;AAEM,SAAS,aAAa,OAA+B;AAC1D,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,EAAE,QAAI,gCAAQ;AAAA,IAChE,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,UAAM,sBAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,WAAO,kBAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,aAAS,6BAAU;AAEzB,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO,4CAAC,wBAAY,OAAM,gCAA+B;AAAA,EAC3D;AAEA,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AAEf,QAAI;AACF,YAAM,OAAO,MAAM,KAAK,WAAW,EAAE,aAAa,KAAK,YAAY,CAAC;AACpE,aAAO,KAAK,GAAG,IAAI,KAAK,OAAO,kBAAkB,KAAK,EAAE,EAAE;AAAA,IAC5D,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,4CAAC,wCAAc,UAAU,CAAC,CAAC,MAAM,UAC/B,uDAAC,SAAI,WAAU,2CAA0C,OAAO,EAAE,OAAO,SAAS,SAAS,MAAM,WAAW,SAAS,EAAE,GACrH;AAAA,gDAAC,SAAI,WAAU,oBACb,sDAAC,8BAAW,MAAK,MAAK,2BAEtB,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAU,WAAK,mCAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,QAC1D,YAAU;AAAA,QAEV;AAAA,sDAAC,yBAAM,SAAQ,gBAAe,WAAU,QAAO,0BAAY;AAAA,UAC3D;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACF,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,UACA,4CAAC,uCAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,UAEhE,4CAAC,0BAAO,MAAK,UAAS,WAAU,QAAO,SAAkB,oBAEzD;AAAA;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/esm/components/oauth-button.js

@@ -49,56 +49,47 @@ function GitlabIcon({ iconSize: iconSize2 }) {
       version: "1.1",
       preserveAspectRatio: "xMidYMid",
       children: /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M128.07485,236.074667 L128.07485,236.074667 L175.17885,91.1043048 L80.9708495,91.1043048 L128.07485,236.074667 L128.07485,236.074667 Z",
-            fill: "#E24329"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M128.07485,236.074423 L80.9708495,91.104061 L14.9557638,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z",
-            fill: "#FC6D26"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14.9558857,91.1044267 L14.9558857,91.1044267 L0.641828571,135.159589 C-0.663771429,139.17757 0.766171429,143.57955 4.18438095,146.06275 L128.074971,236.074789 L14.9558857,91.1044267 L14.9558857,91.1044267 Z",
-            fill: "#FCA326"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14.9558857,91.1045486 L80.9709714,91.1045486 L52.6000762,3.79026286 C51.1408762,-0.703146667 44.7847619,-0.701927619 43.3255619,3.79026286 L14.9558857,91.1045486 L14.9558857,91.1045486 Z",
-            fill: "#E24329"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M128.07485,236.074423 L175.17885,91.104061 L241.193935,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z",
-            fill: "#FC6D26"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
+        /* @__PURE__ */ jsx("path", { d: "M128.07485,236.074667 L128.07485,236.074667 L175.17885,91.1043048 L80.9708495,91.1043048 L128.07485,236.074667 L128.07485,236.074667 Z", fill: "#E24329" }),
+        /* @__PURE__ */ jsx("path", { d: "M128.07485,236.074423 L80.9708495,91.104061 L14.9557638,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z", fill: "#FC6D26" }),
+        /* @__PURE__ */ jsx("path", { d: "M14.9558857,91.1044267 L14.9558857,91.1044267 L0.641828571,135.159589 C-0.663771429,139.17757 0.766171429,143.57955 4.18438095,146.06275 L128.074971,236.074789 L14.9558857,91.1044267 L14.9558857,91.1044267 Z", fill: "#FCA326" }),
+        /* @__PURE__ */ jsx("path", { d: "M14.9558857,91.1045486 L80.9709714,91.1045486 L52.6000762,3.79026286 C51.1408762,-0.703146667 44.7847619,-0.701927619 43.3255619,3.79026286 L14.9558857,91.1045486 L14.9558857,91.1045486 Z", fill: "#E24329" }),
+        /* @__PURE__ */ jsx("path", { d: "M128.07485,236.074423 L175.17885,91.104061 L241.193935,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z", fill: "#FC6D26" }),
+        /* @__PURE__ */ jsx("path", { d: "M241.193935,91.1044267 L241.193935,91.1044267 L255.507992,135.159589 C256.813592,139.17757 255.38365,143.57955 251.96544,146.06275 L128.07485,236.074789 L241.193935,91.1044267 L241.193935,91.1044267 Z", fill: "#FCA326" }),
+        /* @__PURE__ */ jsx("path", { d: "M241.193935,91.1045486 L175.17885,91.1045486 L203.549745,3.79026286 C205.008945,-0.703146667 211.365059,-0.701927619 212.824259,3.79026286 L241.193935,91.1045486 L241.193935,91.1045486 Z", fill: "#E24329" })
+      ] })
+    }
+  );
+}
+function BitbucketIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      preserveAspectRatio: "xMidYMid",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "-0.9662264221278978 -0.5824607696358868 257.93281329857973 230.8324730411935",
+      width: iconSize2,
+      height: iconSize2,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "linearGradient",
           {
-            d: "M241.193935,91.1044267 L241.193935,91.1044267 L255.507992,135.159589 C256.813592,139.17757 255.38365,143.57955 251.96544,146.06275 L128.07485,236.074789 L241.193935,91.1044267 L241.193935,91.1044267 Z",
-            fill: "#FCA326"
+            id: "a",
+            x1: "108.633%",
+            x2: "46.927%",
+            y1: "13.818%",
+            y2: "78.776%",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: ".18", stopColor: "#0052cc" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#2684ff" })
+            ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M241.193935,91.1045486 L175.17885,91.1045486 L203.549745,3.79026286 C205.008945,-0.703146667 211.365059,-0.701927619 212.824259,3.79026286 L241.193935,91.1045486 L241.193935,91.1045486 Z",
-            fill: "#E24329"
-          }
-        )
-      ] })
+        /* @__PURE__ */ jsxs("g", { fill: "none", children: [
+          /* @__PURE__ */ jsx("path", { d: "M101.272 152.561h53.449l12.901-75.32H87.06z" }),
+          /* @__PURE__ */ jsx("path", { d: "M8.308 0A8.202 8.202 0 0 0 .106 9.516l34.819 211.373a11.155 11.155 0 0 0 10.909 9.31h167.04a8.202 8.202 0 0 0 8.201-6.89l34.82-213.752a8.202 8.202 0 0 0-8.203-9.514zm146.616 152.768h-53.315l-14.436-75.42h80.67z", fill: "#2684ff" }),
+          /* @__PURE__ */ jsx("path", { d: "M244.61 77.242h-76.916l-12.909 75.36h-53.272l-62.902 74.663a11.105 11.105 0 0 0 7.171 2.704H212.73a8.196 8.196 0 0 0 8.196-6.884z", fill: "url(#a)" })
+        ] })
+      ]
     }
   );
 }
@@ -182,6 +173,16 @@ function OAuthButton({
       };
       break;
     }
+    case "bitbucket": {
+      style = {
+        backgroundColor: "#fff",
+        textColor: "#000",
+        border: "1px solid #ddd",
+        name: "Bitbucket",
+        icon: /* @__PURE__ */ jsx(BitbucketIcon, { iconSize })
+      };
+      break;
+    }
     default: {
       style = {
         name: provider,

package/dist/esm/components/oauth-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport { useId } from 'react';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\nfunction DiscordIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 127.14 96.36\">\n      <path fill=\"#fff\" d=\"M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z\"/>\n    </svg>\n  );\n}\nfunction GitlabIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={iconSize}\n      height={iconSize}\n      viewBox=\"0 -10 256 256\"\n      version=\"1.1\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <g>\n        <path\n          d=\"M128.07485,236.074667 L128.07485,236.074667 L175.17885,91.1043048 L80.9708495,91.1043048 L128.07485,236.074667 L128.07485,236.074667 Z\"\n          fill=\"#E24329\"\n        ></path>\n        <path\n          d=\"M128.07485,236.074423 L80.9708495,91.104061 L14.9557638,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z\"\n          fill=\"#FC6D26\"\n        ></path>\n        <path\n          d=\"M14.9558857,91.1044267 L14.9558857,91.1044267 L0.641828571,135.159589 C-0.663771429,139.17757 0.766171429,143.57955 4.18438095,146.06275 L128.074971,236.074789 L14.9558857,91.1044267 L14.9558857,91.1044267 Z\"\n          fill=\"#FCA326\"\n        ></path>\n        <path\n          d=\"M14.9558857,91.1045486 L80.9709714,91.1045486 L52.6000762,3.79026286 C51.1408762,-0.703146667 44.7847619,-0.701927619 43.3255619,3.79026286 L14.9558857,91.1045486 L14.9558857,91.1045486 Z\"\n          fill=\"#E24329\"\n        ></path>\n        <path\n          d=\"M128.07485,236.074423 L175.17885,91.104061 L241.193935,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z\"\n          fill=\"#FC6D26\"\n        ></path>\n        <path\n          d=\"M241.193935,91.1044267 L241.193935,91.1044267 L255.507992,135.159589 C256.813592,139.17757 255.38365,143.57955 251.96544,146.06275 L128.07485,236.074789 L241.193935,91.1044267 L241.193935,91.1044267 Z\"\n          fill=\"#FCA326\"\n        ></path>\n        <path\n          d=\"M241.193935,91.1045486 L175.17885,91.1045486 L203.549745,3.79026286 C205.008945,-0.703146667 211.365059,-0.701927619 212.824259,3.79026286 L241.193935,91.1045486 L241.193935,91.1045486 Z\"\n          fill=\"#E24329\"\n        ></path>\n      </g>\n    </svg>\n  );\n}\n\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <DiscordIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <GitlabIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <Button\n        onClick={() => stackApp.signInWithOAuth(provider)}\n        className={`stack-oauth-button-${styleId}`}\n      >\n        <div className='flex items-center w-full gap-4'>\n          {style.icon}\n          <span className='flex-1'>\n            {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":["iconSize"]}
+{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport { useId } from 'react';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\nfunction DiscordIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 127.14 96.36\">\n      <path fill=\"#fff\" d=\"M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z\"/>\n    </svg>\n  );\n}\nfunction GitlabIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={iconSize}\n      height={iconSize}\n      viewBox=\"0 -10 256 256\"\n      version=\"1.1\"\n      preserveAspectRatio=\"xMidYMid\"\n    >\n      <g>\n        <path d=\"M128.07485,236.074667 L128.07485,236.074667 L175.17885,91.1043048 L80.9708495,91.1043048 L128.07485,236.074667 L128.07485,236.074667 Z\" fill=\"#E24329\"></path>\n        <path d=\"M128.07485,236.074423 L80.9708495,91.104061 L14.9557638,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z\" fill=\"#FC6D26\"></path>\n        <path d=\"M14.9558857,91.1044267 L14.9558857,91.1044267 L0.641828571,135.159589 C-0.663771429,139.17757 0.766171429,143.57955 4.18438095,146.06275 L128.074971,236.074789 L14.9558857,91.1044267 L14.9558857,91.1044267 Z\" fill=\"#FCA326\"></path>\n        <path d=\"M14.9558857,91.1045486 L80.9709714,91.1045486 L52.6000762,3.79026286 C51.1408762,-0.703146667 44.7847619,-0.701927619 43.3255619,3.79026286 L14.9558857,91.1045486 L14.9558857,91.1045486 Z\" fill=\"#E24329\"></path>\n        <path d=\"M128.07485,236.074423 L175.17885,91.104061 L241.193935,91.104061 L128.07485,236.074423 L128.07485,236.074423 Z\" fill=\"#FC6D26\"></path>\n        <path d=\"M241.193935,91.1044267 L241.193935,91.1044267 L255.507992,135.159589 C256.813592,139.17757 255.38365,143.57955 251.96544,146.06275 L128.07485,236.074789 L241.193935,91.1044267 L241.193935,91.1044267 Z\" fill=\"#FCA326\"></path>\n        <path d=\"M241.193935,91.1045486 L175.17885,91.1045486 L203.549745,3.79026286 C205.008945,-0.703146667 211.365059,-0.701927619 212.824259,3.79026286 L241.193935,91.1045486 L241.193935,91.1045486 Z\" fill=\"#E24329\"></path>\n      </g>\n    </svg>\n  );\n}\n\nfunction BitbucketIcon({ iconSize }: { iconSize: number }) {\n  return (\n    <svg\n      preserveAspectRatio=\"xMidYMid\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"-0.9662264221278978 -0.5824607696358868 257.93281329857973 230.8324730411935\"\n      width={iconSize}\n      height={iconSize}\n    >\n      <linearGradient\n        id=\"a\"\n        x1=\"108.633%\"\n        x2=\"46.927%\"\n        y1=\"13.818%\"\n        y2=\"78.776%\"\n      >\n        <stop offset=\".18\" stopColor=\"#0052cc\" />\n        <stop offset=\"1\" stopColor=\"#2684ff\" />\n      </linearGradient>\n      <g fill=\"none\">\n        <path d=\"M101.272 152.561h53.449l12.901-75.32H87.06z\" />\n        <path d=\"M8.308 0A8.202 8.202 0 0 0 .106 9.516l34.819 211.373a11.155 11.155 0 0 0 10.909 9.31h167.04a8.202 8.202 0 0 0 8.201-6.89l34.82-213.752a8.202 8.202 0 0 0-8.203-9.514zm146.616 152.768h-53.315l-14.436-75.42h80.67z\" fill=\"#2684ff\"/>\n        <path d=\"M244.61 77.242h-76.916l-12.909 75.36h-53.272l-62.902 74.663a11.105 11.105 0 0 0 7.171 2.704H212.73a8.196 8.196 0 0 0 8.196-6.884z\" fill=\"url(#a)\"/>\n      </g>\n    </svg>\n  );\n}\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <DiscordIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <GitlabIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BitbucketIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <Button\n        onClick={() => stackApp.signInWithOAuth(provider)}\n        className={`stack-oauth-button-${styleId}`}\n      >\n        <div className='flex items-center w-full gap-4'>\n          {style.icon}\n          <span className='flex-1'>\n            {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":["iconSize"]}

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

@@ -24,12 +24,12 @@ import { ProfileImageEditor } from "../components/profile-image-editor";
 import { TeamIcon } from "../components/team-icon";
 import { MaybeFullPage } from "../components/elements/maybe-full-page";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function AccountSettings({ fullPage = false }) {
+function AccountSettings(props) {
   const user = useUser({ or: "redirect" });
   const teams = user.useTeams();
   const stackApp = useStackApp();
   const project = stackApp.useProject();
-  return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage, children: /* @__PURE__ */ jsx("div", { style: { alignSelf: "stretch", flexGrow: 1 }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage: !!props.fullPage, children: /* @__PURE__ */ jsx("div", { style: { alignSelf: "stretch", flexGrow: 1 }, children: /* @__PURE__ */ jsx(
     SidebarLayout,
     {
       items: [
@@ -58,6 +58,13 @@ function AccountSettings({ fullPage = false }) {
           icon: LogOut,
           content: /* @__PURE__ */ jsx(SignOutSection, {})
         },
+        ...props.extraItems?.map((item) => ({
+          title: item.title,
+          type: "item",
+          subpath: item.subpath,
+          icon: item.icon,
+          content: item.content
+        })) || [],
         ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
           title: "Teams",
           type: "divider"