@stackframe/stack 2.4.27 → 2.5.0

package/dist/esm/components/{password-reset-inner.js → password-reset-form.js}

@@ -1,20 +1,19 @@
 "use client";
 "use client";
 
-// src/components/password-reset-inner.tsx
+// src/components/password-reset-form.tsx
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { useStackApp } from "..";
-import PasswordField from "./password-field";
-import FormWarningText from "./form-warning";
-import PredefinedMessageCard from "./message-cards/predefined-message-card";
-import MessageCard from "./message-cards/message-card";
-import MaybeFullPage from "./maybe-full-page";
-import { Button, Label, Text } from "../components-core";
+import { FormWarningText } from "./elements/form-warning";
+import { PredefinedMessageCard } from "./message-cards/predefined-message-card";
+import { MessageCard } from "./message-cards/message-card";
+import { MaybeFullPage } from "./elements/maybe-full-page";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var schema = yup.object().shape({
   password: yup.string().required("Please enter your password").test({
@@ -30,30 +29,36 @@ var schema = yup.object().shape({
   }),
   passwordRepeat: yup.string().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
 });
-function PasswordResetInner({ code, fullPage = false }) {
+function PasswordResetForm({ code, fullPage = false }) {
   const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
     resolver: yupResolver(schema)
   });
   const stackApp = useStackApp();
   const [finished, setFinished] = useState(false);
   const [resetError, setResetError] = useState(false);
+  const [loading, setLoading] = useState(false);
   const onSubmit = async (data) => {
-    const { password } = data;
-    const errorCode = await stackApp.resetPassword({ password, code });
-    if (errorCode) {
-      setResetError(true);
-      return;
+    setLoading(true);
+    try {
+      const { password } = data;
+      const errorCode = await stackApp.resetPassword({ password, code });
+      if (errorCode) {
+        setResetError(true);
+        return;
+      }
+      setFinished(true);
+    } finally {
+      setLoading(false);
     }
-    setFinished(true);
   };
   if (finished) {
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "passwordReset", fullPage });
   }
   if (resetError) {
-    return /* @__PURE__ */ jsx(MessageCard, { title: "Failed to reset password", fullPage, children: /* @__PURE__ */ jsx(Text, { children: "Failed to reset password. Please request a new password reset link" }) });
+    return /* @__PURE__ */ jsx(MessageCard, { title: "Failed to reset password", fullPage, children: "Failed to reset password. Please request a new password reset link" });
   }
   return /* @__PURE__ */ jsxs(MaybeFullPage, { fullPage, children: [
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", children: "Reset Your Password" }) }),
+    /* @__PURE__ */ jsx("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Reset Your Password" }) }),
     /* @__PURE__ */ jsxs(
       "form",
       {
@@ -61,9 +66,9 @@ function PasswordResetInner({ code, fullPage = false }) {
         onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
         noValidate: true,
         children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "New Password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "password", className: "mb-1", children: "New Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "password",
               ...register("password"),
@@ -74,9 +79,9 @@ function PasswordResetInner({ code, fullPage = false }) {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
-          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat New Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "repeat-password",
               ...register("passwordRepeat"),
@@ -87,13 +92,13 @@ function PasswordResetInner({ code, fullPage = false }) {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
-          /* @__PURE__ */ jsx(Button, { style: { marginTop: "1.5rem" }, type: "submit", children: "Reset Password" })
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Reset Password" })
         ]
       }
     )
   ] });
 }
 export {
-  PasswordResetInner as default
+  PasswordResetForm as default
 };
-//# sourceMappingURL=password-reset-inner.js.map
+//# sourceMappingURL=password-reset-form.js.map

package/dist/esm/components/password-reset-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/password-reset-form.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport { FormWarningText } from \"./elements/form-warning\";\nimport { PredefinedMessageCard } from \"./message-cards/predefined-message-card\";\nimport { MessageCard } from \"./message-cards/message-card\";\nimport { MaybeFullPage } from \"./elements/maybe-full-page\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Label, PasswordInput, Typography } from \"@stackframe/stack-ui\";\n\nconst schema = yup.object().shape({\n  password: yup.string().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  passwordRepeat: yup.string().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport default function PasswordResetForm(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { password } = data;\n      const errorCode = await stackApp.resetPassword({ password, code });\n      if (errorCode) {\n        setResetError(true);\n        return;\n      }\n\n      setFinished(true);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (finished) {\n    return <PredefinedMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        Failed to reset password. Please request a new password reset link\n      </MessageCard>\n    );\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center mb-6\">\n        <Typography type='h2'>Reset Your Password</Typography>\n      </div>\n\n      <form \n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"password\" className=\"mb-1\">New Password</Label>\n        <PasswordInput\n          id=\"password\"\n          {...register('password')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.password?.message?.toString()} />\n\n        <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat New Password</Label>\n        <PasswordInput\n          id=\"repeat-password\"\n          {...register('passwordRepeat')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          Reset Password\n        </Button>\n      </form>\n    </MaybeFullPage>\n  ); \n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/selected-team-switcher.js

@@ -2,62 +2,67 @@
 "use client";
 
 // src/components/selected-team-switcher.tsx
-import {
-  useUser,
-  Text,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuLabel
-} from "..";
+import { useUser } from "..";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Check } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  Typography
+} from "@stackframe/stack-ui";
+import { useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TeamIcon(props) {
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginRight: "0.5rem", borderRadius: "0.25rem", backgroundColor: "rgb(228 228 231)" }, children: /* @__PURE__ */ jsx(Text, { style: { color: "black", fontWeight: 400 }, children: props.displayName.slice(0, 1).toUpperCase() }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200", children: /* @__PURE__ */ jsx(Typography, { children: props.displayName.slice(0, 1).toUpperCase() }) });
 }
 function SelectedTeamSwitcher(props) {
   const user = useUser();
   const router = useRouter();
-  const selectedTeam = user?.selectedTeam;
+  const selectedTeam = user?.selectedTeam || props.selectedTeam;
   const rawTeams = user?.useTeams();
   const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(TeamIcon, { displayName: selectedTeam?.displayName || "" }),
-      /* @__PURE__ */ jsx(Text, { children: selectedTeam?.displayName || "Select team" })
-    ] }) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Teams" }),
-      teams && teams.map((team) => /* @__PURE__ */ jsxs(
-        DropdownMenuItem,
-        {
-          onClick: () => {
-            runAsynchronouslyWithAlert(async () => {
-              await user?.setSelectedTeam(team);
-              if (props.projectUrlMap) {
-                router.push(props.projectUrlMap(team.id));
-              }
-            });
-          },
-          style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-          children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx(TeamIcon, { displayName: team.displayName }),
-              /* @__PURE__ */ jsx(Text, { children: team.displayName })
-            ] }),
-            /* @__PURE__ */ jsx(Check, { style: { marginLeft: "0.5rem", visibility: team.id === selectedTeam?.id ? "visible" : "hidden", height: "1rem", width: "1rem" } })
-          ]
-        },
-        team.id
-      ))
-    ] })
-  ] });
+  useEffect(() => {
+    if (!props.noUpdateSelectedTeam && props.selectedTeam) {
+      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));
+    }
+  }, [props.noUpdateSelectedTeam, props.selectedTeam]);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: selectedTeam?.id,
+      onValueChange: (value) => {
+        runAsynchronouslyWithAlert(async () => {
+          const team = teams?.find((team2) => team2.id === value);
+          if (!team) {
+            throw new Error("Team not found, this should not happen");
+          }
+          if (!props.noUpdateSelectedTeam) {
+            await user?.setSelectedTeam(team);
+          }
+          if (props.urlMap) {
+            router.push(props.urlMap(team));
+          }
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "stack-scope", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select team" }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { className: "stack-scope", children: [
+          teams && teams.map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(TeamIcon, { displayName: team.displayName }),
+            /* @__PURE__ */ jsx(Typography, { children: team.displayName })
+          ] }) }, team.id)),
+          teams?.length === 0 && /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: "No teams" }) })
+        ] })
+      ]
+    }
+  );
 }
 export {
-  SelectedTeamSwitcher as default
+  SelectedTeamSwitcher
 };
 //# sourceMappingURL=selected-team-switcher.js.map

package/dist/esm/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useUser,\n  Text,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  DropdownMenuLabel,\n  useStackApp,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Check } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useMemo } from \"react\";\n\ntype SelectedTeamSwitcherProps = {\n  projectUrlMap?: (projectId: string) => string,\n};\n\nfunction TeamIcon(props: { displayName: string }) {\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '1.5rem', height: '1.5rem', marginRight: '0.5rem', borderRadius: '0.25rem', backgroundColor: 'rgb(228 228 231)' }}>\n      <Text style={{ color: 'black', fontWeight: 400 }}>{props.displayName.slice(0, 1).toUpperCase()}</Text>\n    </div>\n  );\n}\n\nexport default function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const user = useUser();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <TeamIcon displayName={selectedTeam?.displayName || ''} />\n          <Text>{selectedTeam?.displayName || 'Select team'}</Text>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent style={{ zIndex: 1500 }}>\n        <DropdownMenuLabel>Teams</DropdownMenuLabel>\n        {teams && teams.map(team => (\n          <DropdownMenuItem\n            key={team.id}\n            onClick={() => {\n              runAsynchronouslyWithAlert(async () => {\n                await user?.setSelectedTeam(team);\n                if (props.projectUrlMap) {\n                  router.push(props.projectUrlMap(team.id));\n                }\n              });\n            }}\n            style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center' }}>\n              <TeamIcon displayName={team.displayName} />\n              <Text>{team.displayName}</Text>\n            </div>\n            <Check style={{ marginLeft: '0.5rem', visibility: team.id === selectedTeam?.id ? 'visible' : 'hidden', height: '1rem', width: '1rem' }} />\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AASlB,cAeE,YAfF;AAHN,SAAS,SAAS,OAAgC;AAChD,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,UAAU,OAAO,UAAU,QAAQ,UAAU,aAAa,UAAU,cAAc,WAAW,iBAAiB,mBAAmB,GACpM,8BAAC,QAAK,OAAO,EAAE,OAAO,SAAS,YAAY,IAAI,GAAI,gBAAM,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GACjG;AAEJ;AAEe,SAAR,qBAAsC,OAAkC;AAC7E,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,MAAM;AAC3B,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,QAAQ,QAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,SACE,qBAAC,gBACC;AAAA,wBAAC,uBACC,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,0BAAC,YAAS,aAAa,cAAc,eAAe,IAAI;AAAA,MACxD,oBAAC,QAAM,wBAAc,eAAe,eAAc;AAAA,OACpD,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAO,EAAE,QAAQ,KAAK,GACzC;AAAA,0BAAC,qBAAkB,mBAAK;AAAA,MACvB,SAAS,MAAM,IAAI,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,uCAA2B,YAAY;AACrC,oBAAM,MAAM,gBAAgB,IAAI;AAChC,kBAAI,MAAM,eAAe;AACvB,uBAAO,KAAK,MAAM,cAAc,KAAK,EAAE,CAAC;AAAA,cAC1C;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,gBAAgB;AAAA,UAEhF;AAAA,iCAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,kCAAC,YAAS,aAAa,KAAK,aAAa;AAAA,cACzC,oBAAC,QAAM,eAAK,aAAY;AAAA,eAC1B;AAAA,YACA,oBAAC,SAAM,OAAO,EAAE,YAAY,UAAU,YAAY,KAAK,OAAO,cAAc,KAAK,YAAY,UAAU,QAAQ,QAAQ,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA,QAfnI,KAAK;AAAA,MAgBZ,CACD;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { Team, useUser } from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { useRouter } from \"next/navigation\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n  Typography,\n} from \"@stackframe/stack-ui\";\nimport { useEffect, useMemo } from \"react\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nfunction TeamIcon(props: { displayName: string }) {\n  return (\n    <div className=\"flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200\">\n      <Typography>{props.displayName.slice(0, 1).toUpperCase()}</Typography>\n    </div>\n  );\n}\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const user = useUser();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select \n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {teams && teams.map(team => (\n          <SelectItem value={team.id} key={team.id}>\n            <div className=\"flex items-center\">\n              <TeamIcon displayName={team.displayName} />\n              <Typography>{team.displayName}</Typography>\n            </div>\n          </SelectItem>\n        ))}\n\n        {teams?.length === 0 && (\n          <SelectGroup>\n            <SelectLabel>No teams</SelectLabel>\n          </SelectGroup>\n        )}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;AACA,SAAe,eAAe;AAC9B,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,eAAe;AAW7B,cA2CM,YA3CN;AAHN,SAAS,SAAS,OAAgC;AAChD,SACE,oBAAC,SAAI,WAAU,qEACb,8BAAC,cAAY,gBAAM,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC3D;AAEJ;AAEO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,MAAM,gBAAgB,MAAM;AACjD,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,QAAQ,QAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,wBAAwB,MAAM,cAAc;AACrD,iCAA2B,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,MAAM,sBAAsB,MAAM,YAAY,CAAC;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,cAAc;AAAA,MACrB,eAAe,CAAC,UAAU;AACxB,mCAA2B,YAAY;AACrC,gBAAM,OAAO,OAAO,KAAK,CAAAA,UAAQA,MAAK,OAAO,KAAK;AAClD,cAAI,CAAC,MAAM;AACT,kBAAM,IAAI,MAAM,wCAAwC;AAAA,UAC1D;AAEA,cAAI,CAAC,MAAM,sBAAsB;AAC/B,kBAAM,MAAM,gBAAgB,IAAI;AAAA,UAClC;AACA,cAAI,MAAM,QAAQ;AAChB,mBAAO,KAAK,MAAM,OAAO,IAAI,CAAC;AAAA,UAChC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEA;AAAA,4BAAC,iBAAc,WAAU,eACvB,8BAAC,eAAY,aAAY,eAAa,GACxC;AAAA,QACA,qBAAC,iBAAc,WAAU,eACtB;AAAA,mBAAS,MAAM,IAAI,UAClB,oBAAC,cAAW,OAAO,KAAK,IACtB,+BAAC,SAAI,WAAU,qBACb;AAAA,gCAAC,YAAS,aAAa,KAAK,aAAa;AAAA,YACzC,oBAAC,cAAY,eAAK,aAAY;AAAA,aAChC,KAJ+B,KAAK,EAKtC,CACD;AAAA,UAEA,OAAO,WAAW,KACjB,oBAAC,eACC,8BAAC,eAAY,sBAAQ,GACvB;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["team"]}

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

@@ -2,51 +2,26 @@
 "use client";
 
 // src/components/user-button.tsx
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import {
   useUser,
-  Text,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  useStackApp,
-  Skeleton
+  useStackApp
 } from "..";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import UserAvatar from "./user-avatar";
+import { UserAvatar } from "./elements/user-avatar";
 import { useRouter } from "next/navigation";
-import { typedEntries, typedFromEntries } from "@stackframe/stack-shared/dist/utils/objects";
-import styled from "styled-components";
 import { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-var icons = typedFromEntries(typedEntries({
-  CircleUser,
-  UserPlus,
-  SunMoon,
-  LogIn,
-  LogOut
-}).map(([key, value]) => {
-  const styledComponent = styled(value)`
-    height: 1rem;
-    width: 1rem;
-  `;
-  return [
-    key,
-    React.createElement(styledComponent, { size: 20 })
-  ];
-}));
 function Item(props) {
   return /* @__PURE__ */ jsxs(
     DropdownMenuItem,
     {
       onClick: () => runAsynchronouslyWithAlert(props.onClick),
-      style: { display: "flex", gap: "0.5rem", alignItems: "center" },
+      className: "flex gap-2 items-center",
       children: [
         props.icon,
-        /* @__PURE__ */ jsx(Text, { children: props.text })
+        /* @__PURE__ */ jsx(Typography, { children: props.text })
       ]
     }
   );
@@ -68,27 +43,23 @@ function UserButtonInnerInner(props) {
   const user = props.user;
   const app = useStackApp();
   const router = useRouter();
-  const textStyles = {
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    margin: 0
-  };
+  const iconProps = { size: 20, className: "h-4 w-4" };
+  const textClasses = "text-ellipsis whitespace-nowrap overflow-hidden";
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "outline-none stack-scope", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
       /* @__PURE__ */ jsx(UserAvatar, { user }),
-      user && props.showUserInfo && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx(Text, { style: textStyles, children: user.displayName }),
-        /* @__PURE__ */ jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })
+      user && props.showUserInfo && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+        /* @__PURE__ */ jsx(Typography, { className: textClasses, children: user.displayName }),
+        /* @__PURE__ */ jsx(Typography, { className: textClasses, variant: "secondary", type: "label", children: user.primaryEmail })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "stack-scope", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
         /* @__PURE__ */ jsx(UserAvatar, { user }),
         /* @__PURE__ */ jsxs("div", { children: [
-          user && /* @__PURE__ */ jsx(Text, { children: user.displayName }),
-          user && /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }),
-          !user && /* @__PURE__ */ jsx(Text, { children: "Not signed in" })
+          user && /* @__PURE__ */ jsx(Typography, { children: user.displayName }),
+          user && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: user.primaryEmail }),
+          !user && /* @__PURE__ */ jsx(Typography, { children: "Not signed in" })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
@@ -97,7 +68,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Account settings",
           onClick: () => router.push(app.urls.accountSettings),
-          icon: icons.CircleUser
+          icon: /* @__PURE__ */ jsx(CircleUser, { ...iconProps })
         }
       ),
       !user && /* @__PURE__ */ jsx(
@@ -105,7 +76,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign in",
           onClick: () => router.push(app.urls.signIn),
-          icon: icons.LogIn
+          icon: /* @__PURE__ */ jsx(LogIn, { ...iconProps })
         }
       ),
       !user && /* @__PURE__ */ jsx(
@@ -113,7 +84,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign up",
           onClick: () => router.push(app.urls.signUp),
-          icon: icons.UserPlus
+          icon: /* @__PURE__ */ jsx(UserPlus, { ...iconProps })
         }
       ),
       user && props.extraItems && props.extraItems.map((item, index) => /* @__PURE__ */ jsx(Item, { ...item }, index)),
@@ -122,7 +93,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Toggle theme",
           onClick: props.colorModeToggle,
-          icon: icons.SunMoon
+          icon: /* @__PURE__ */ jsx(SunMoon, { ...iconProps })
         }
       ),
       user && /* @__PURE__ */ jsx(
@@ -130,13 +101,13 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign out",
           onClick: () => user.signOut(),
-          icon: icons.LogOut
+          icon: /* @__PURE__ */ jsx(LogOut, { ...iconProps })
         }
       )
     ] })
   ] });
 }
 export {
-  UserButton as default
+  UserButton
 };
 //# sourceMappingURL=user-button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport {\n  useUser,\n  Text,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  useStackApp,\n  Skeleton,\n  CurrentUser,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\nimport { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from \"lucide-react\";\n\nconst icons = typedFromEntries(typedEntries({\n  CircleUser,\n  UserPlus,\n  SunMoon,\n  LogIn,\n  LogOut,\n} as const).map(([key, value]) => {\n  const styledComponent = styled(value)`\n    height: 1rem;\n    width: 1rem;\n  `;\n  return [\n    key,\n    React.createElement(styledComponent, { size: 20 })\n  ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem \n      onClick={() => runAsynchronouslyWithAlert(props.onClick)}\n      style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n    >\n      {props.icon}\n      <Text>{props.text}</Text>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport default function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense\n      fallback={\n        <Skeleton>\n          <UserButtonInnerInner {...props} user={null} />\n        </Skeleton>\n      }\n    >\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const user = props.user;\n  const app = useStackApp();\n  const router = useRouter();\n\n  const textStyles = {\n    textOverflow: 'ellipsis', \n    whiteSpace: 'nowrap', \n    overflow: 'hidden',\n    margin: 0,\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n          <UserAvatar user={user} />\n          {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n            <Text style={textStyles}>{user.displayName}</Text>\n            <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n          </div>}\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent style={{ zIndex: 1500 }}>\n        <DropdownMenuLabel>\n          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n            <UserAvatar user={user} />\n            <div>\n              {user && <Text>{user.displayName}</Text>}\n              {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n              {!user && <Text>Not signed in</Text>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => router.push(app.urls.accountSettings)}\n          icon={icons.CircleUser}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => router.push(app.urls.signIn)}\n          icon={icons.LogIn}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => router.push(app.urls.signUp)}\n          icon={icons.UserPlus}\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item \n            text=\"Toggle theme\" \n            onClick={props.colorModeToggle} \n            icon={icons.SunMoon}\n          />\n        )}\n        {user && <Item \n          text=\"Sign out\" \n          onClick={() => user.signOut()} \n          icon={icons.LogOut}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;AACA,OAAO,SAAS,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kCAAkC;AAC3C,OAAO,gBAAgB;AACvB,SAAS,iBAAiB;AAC1B,SAAS,cAAc,wBAAwB;AAC/C,OAAO,YAAY;AACnB,SAAS,YAAY,OAAO,SAAS,UAAU,cAAc;AAqBzD,SAKE,KALF;AAnBJ,IAAM,QAAQ,iBAAiB,aAAa;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAU,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAChC,QAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;AAAA;AAIpC,SAAO;AAAA,IACL;AAAA,IACA,MAAM,cAAc,iBAAiB,EAAE,MAAM,GAAG,CAAC;AAAA,EACnD;AACF,CAAC,CAAC;AAEF,SAAS,KAAK,OAAqF;AACjG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,2BAA2B,MAAM,OAAO;AAAA,MACvD,OAAO,EAAE,SAAS,QAAQ,KAAK,UAAU,YAAY,SAAS;AAAA,MAE7D;AAAA,cAAM;AAAA,QACP,oBAAC,QAAM,gBAAM,MAAK;AAAA;AAAA;AAAA,EACpB;AAEJ;AAYe,SAAR,WAA4B,OAAwB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UACE,oBAAC,YACC,8BAAC,wBAAsB,GAAG,OAAO,MAAM,MAAM,GAC/C;AAAA,MAGF,8BAAC,mBAAiB,GAAG,OAAO;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,gBAAgB,OAAwB;AAC/C,QAAM,OAAO,QAAQ;AACrB,SAAO,oBAAC,wBAAsB,GAAG,OAAO,MAAY;AACtD;AAGA,SAAS,qBAAqB,OAAuD;AACnF,QAAM,OAAO,MAAM;AACnB,QAAM,MAAM,YAAY;AACxB,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa;AAAA,IACjB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,uBACC,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,UAAU,YAAY,SAAS,GACjE;AAAA,0BAAC,cAAW,MAAY;AAAA,MACvB,QAAQ,MAAM,gBAAgB,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,SAAS,GAC9G;AAAA,4BAAC,QAAK,OAAO,YAAa,eAAK,aAAY;AAAA,QAC3C,oBAAC,QAAK,OAAO,EAAE,GAAG,YAAY,YAAY,IAAI,GAAG,SAAQ,aAAY,MAAK,MAAM,eAAK,cAAa;AAAA,SACpG;AAAA,OACF,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAO,EAAE,QAAQ,KAAK,GACzC;AAAA,0BAAC,qBACC,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,UAAU,YAAY,SAAS,GACjE;AAAA,4BAAC,cAAW,MAAY;AAAA,QACxB,qBAAC,SACE;AAAA,kBAAQ,oBAAC,QAAM,eAAK,aAAY;AAAA,UAChC,QAAQ,oBAAC,QAAK,SAAQ,aAAY,MAAK,MAAK,OAAO,EAAE,YAAY,IAAI,GAAI,eAAK,cAAa;AAAA,UAC3F,CAAC,QAAQ,oBAAC,QAAK,2BAAa;AAAA,WAC/B;AAAA,SACF,GACF;AAAA,MACA,oBAAC,yBAAsB;AAAA,MACtB,QAAQ;AAAA,QAAC;AAAA;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,IAAI,KAAK,eAAe;AAAA,UACnD,MAAM,MAAM;AAAA;AAAA,MACd;AAAA,MACC,CAAC,QAAQ;AAAA,QAAC;AAAA;AAAA,UACT,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,IAAI,KAAK,MAAM;AAAA,UAC1C,MAAM,MAAM;AAAA;AAAA,MACd;AAAA,MACC,CAAC,QAAQ;AAAA,QAAC;AAAA;AAAA,UACT,MAAK;AAAA,UACL,SAAS,MAAM,OAAO,KAAK,IAAI,KAAK,MAAM;AAAA,UAC1C,MAAM,MAAM;AAAA;AAAA,MACd;AAAA,MACC,QAAQ,MAAM,cAAc,MAAM,WAAW,IAAI,CAAC,MAAM,UACvD,oBAAC,QAAkB,GAAG,QAAX,KAAiB,CAC7B;AAAA,MACA,MAAM,mBACL;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM;AAAA,UACf,MAAM,MAAM;AAAA;AAAA,MACd;AAAA,MAED,QAAQ;AAAA,QAAC;AAAA;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,KAAK,QAAQ;AAAA,UAC5B,MAAM,MAAM;AAAA;AAAA,MACd;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport React, { Suspense } from \"react\";\nimport {\n  useUser,\n  useStackApp,\n  CurrentUser,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { UserAvatar } from \"./elements/user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from \"lucide-react\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem \n      onClick={() => runAsynchronouslyWithAlert(props.onClick)}\n      className=\"flex gap-2 items-center\"\n    >\n      {props.icon}\n      <Typography>{props.text}</Typography>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense\n      fallback={\n        <Skeleton>\n          <UserButtonInnerInner {...props} user={null} />\n        </Skeleton>\n      }\n    >\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const user = props.user;\n  const app = useStackApp();\n  const router = useRouter();\n  \n  const iconProps = { size: 20, className: 'h-4 w-4' };\n  const textClasses = 'text-ellipsis whitespace-nowrap overflow-hidden';\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo && \n            <div className=\"flex flex-col justify-center\">\n              <Typography className={textClasses}>{user.displayName}</Typography>\n              <Typography className={textClasses} variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography>{user.displayName}</Typography>}\n              {user && <Typography variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>Not signed in</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => router.push(app.urls.accountSettings)}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => router.push(app.urls.signIn)}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => router.push(app.urls.signUp)}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item \n            text=\"Toggle theme\" \n            onClick={props.colorModeToggle} \n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item \n          text=\"Sign out\" \n          onClick={() => user.signOut()} \n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,22 +2,22 @@
 "use client";
 
 // src/components-page/account-settings.tsx
-import { PasswordField, useUser } from "..";
-import PredefinedMessageCard from "../components/message-cards/predefined-message-card";
-import { Text, Label, Input, Button, Card, CardHeader, CardContent, CardFooter, Container } from "../components-core";
-import UserAvatar from "../components/user-avatar";
+import { useUser } from "..";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { UserAvatar } from "../components/elements/user-avatar";
 import { useState } from "react";
-import FormWarningText from "../components/form-warning";
+import { FormWarningText } from "../components/elements/form-warning";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography, cn } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function SettingSection(props) {
   return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(Text, { as: "h3", style: { fontWeight: 500 }, children: props.title }),
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", children: props.desc })
-    ] }),
-    props.children && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: props.children }) }),
-    props.buttonText && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", width: "100%" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "h4", children: props.title }),
+      /* @__PURE__ */ jsx(Typography, { type: "label", variant: "secondary", children: props.desc })
+    ] }) }),
+    props.children && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: props.children }) }),
+    props.buttonText && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx(
       Button,
       {
         disabled: props.buttonDisabled,
@@ -44,15 +44,15 @@ function ProfileSection() {
         setChanged(false);
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-center", children: [
           /* @__PURE__ */ jsx(UserAvatar, { user, size: 50 }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-            /* @__PURE__ */ jsx(Text, { children: user?.displayName }),
-            /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", children: user?.primaryEmail })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(Typography, { children: user?.displayName }),
+            /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: user?.primaryEmail })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "display-name", children: "Display Name" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "display-name", className: "mb-1", children: "Display Name" }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -83,7 +83,7 @@ function EmailVerificationSection() {
         await user?.sendVerificationEmail();
         setEmailSent(true);
       },
-      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Text, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ jsx(Text, { variant: "warning", children: "Your email has not been verified" })
+      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified" })
     }
   );
 }
@@ -124,10 +124,10 @@ function PasswordSection() {
         }
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", children: "Old Password" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: "Old Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "old-password",
               value: oldPassword,
@@ -139,10 +139,10 @@ function PasswordSection() {
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: oldPasswordError })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", children: "New Password" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mb-1", children: "New Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "new-password",
               value: newPassword,
@@ -176,10 +176,10 @@ function AccountSettings({ fullPage = false }) {
   if (!user) {
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signedOut", fullPage });
   }
-  const inner = /* @__PURE__ */ jsxs("div", { style: { padding: fullPage ? "1rem" : 0, display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+  const inner = /* @__PURE__ */ jsxs("div", { className: cn(fullPage ? "p-4" : "", "flex flex-col gap-4"), children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Text, { size: "xl", as: "h1", style: { fontWeight: "600" }, children: "Account Settings" }),
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", children: "Manage your account" })
+      /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Account Settings" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: "Manage your account" })
     ] }),
     /* @__PURE__ */ jsx(ProfileSection, {}),
     /* @__PURE__ */ jsx(EmailVerificationSection, {}),
@@ -187,12 +187,12 @@ function AccountSettings({ fullPage = false }) {
     /* @__PURE__ */ jsx(SignOutSection, {})
   ] });
   if (fullPage) {
-    return /* @__PURE__ */ jsx(Container, { size: "sm", children: inner });
+    return /* @__PURE__ */ jsx(Container, { size: 600, className: "stack-scope", children: inner });
   } else {
     return inner;
   }
 }
 export {
-  AccountSettings as default
+  AccountSettings
 };
 //# sourceMappingURL=account-settings.js.map