@stackframe/stack 2.4.4 → 2.4.7

package/dist/components/card-frame.d.mts

@@ -4,6 +4,6 @@ import React__default from 'react';
 declare function CardFrame({ children, fullPage }: {
     children: React__default.ReactNode;
     fullPage?: boolean;
-}): string | number | boolean | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> | null | undefined;
 
 export { CardFrame as default };

package/dist/components/card-frame.d.ts

@@ -4,6 +4,6 @@ import React__default from 'react';
 declare function CardFrame({ children, fullPage }: {
     children: React__default.ReactNode;
     fullPage?: boolean;
-}): string | number | boolean | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React__default.ReactNode> | Promise<React__default.AwaitedReactNode> | null | undefined;
 
 export { CardFrame as default };

package/dist/components/user-avatar.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/user-avatar.tsx
@@ -25,12 +35,20 @@ __export(user_avatar_exports, {
 module.exports = __toCommonJS(user_avatar_exports);
 var import_rx = require("react-icons/rx");
 var import__ = require("..");
+var import_constants = require("../utils/constants");
+var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var StyledIcon = (0, import_styled_components.default)(import_rx.RxPerson)`
+  color: ${import_constants.SECONDARY_FONT_COLORS.light};
+  html[data-stack-theme='dark'] & {
+    color: ${import_constants.SECONDARY_FONT_COLORS.dark};
+  }
+`;
 function UserAvatar(props) {
   const user = props.user;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Avatar, { style: { height: props.size, width: props.size }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarImage, { src: user?.profileImageUrl || "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rx.RxPerson, { size: props.size }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledIcon, { size: props.size }) })
   ] });
 }
 //# sourceMappingURL=user-avatar.js.map

package/dist/components/user-avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <RxPerson size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AACzB,eAA0D;AAMtD;AAHW,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,mBAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,gDAAC,wBAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,2BACE,iBACC,4CAAC,iBAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,4CAAC,sBAAS,MAAM,MAAM,MAAM,GAChC;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\n\n\nconst StyledIcon = styled(RxPerson)`\n  color: ${SECONDARY_FONT_COLORS.light};\n  html[data-stack-theme='dark'] & {\n    color: ${SECONDARY_FONT_COLORS.dark};\n  }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <StyledIcon size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAyB;AACzB,eAA0D;AAE1D,uBAAsC;AACtC,+BAAmB;AAaf;AAVJ,IAAM,iBAAa,yBAAAA,SAAO,kBAAQ;AAAA,WACvB,uCAAsB,KAAK;AAAA;AAAA,aAEzB,uCAAsB,IAAI;AAAA;AAAA;AAIxB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,mBAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,gDAAC,wBAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,2BACE,iBACC,4CAAC,iBAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,4CAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":["styled"]}

package/dist/components-core/button.js

@@ -130,7 +130,7 @@ var StyledButton = import_styled_components.default.button`
   font-family: ${import_constants.FONT_FAMILY};
   font-size: ${import_constants.FONT_SIZES.md};
   opacity: ${(props) => props.disabled ? 0.5 : 1};
-  transition: background-color 0.2s;
+  transition: background-color 0.05s;
   cursor: pointer;
   position: relative;
   &:disabled {

package/dist/components-core/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n  propsColor, \n  colors, \n  variant, \n}: {\n  propsColor?: string, \n  colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n  variant: 'primary' | 'secondary' | 'warning',\n}): { \n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n} {\n  let bgColor;\n  switch (variant) {\n    case 'primary': {\n      bgColor = colors.primaryColor;\n      break;\n    }\n    case 'secondary': {\n      bgColor = colors.secondaryColor;\n      break;\n    }\n    case 'warning': {\n      bgColor = '#ff4500';\n      break;\n    }\n  }\n  if (propsColor) {\n    bgColor = propsColor;\n  }\n\n  const c = Color(bgColor);\n  const pc = Color(colors.primaryColor);\n\n  const changeColor = (value: number) => {\n    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n  };\n  \n  const getAlpha = (alpha: number) => {\n    return Color(\n      pc.isDark() ? 'white' : 'black'\n    ).alpha(alpha).toString();\n  };\n\n  if (c.alpha() === 0) {\n    return {\n      bgColor: 'transparent',\n      hoverBgColor: getAlpha(0.1),\n      activeBgColor: getAlpha(0.2),\n      textColor: colors.primaryColor,\n    };\n  } else if (c.isLight()) {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(-10),\n      activeBgColor: changeColor(-20),\n      textColor: 'black',\n    };\n  } else {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(10),\n      activeBgColor: changeColor(20),\n      textColor: 'white',\n    };\n  }\n}\n\nexport type ButtonProps = {\n  variant?: 'primary' | 'secondary' | 'warning',\n  color?: string,\n  size?: 'sm' | 'md' | 'lg',\n  loading?: boolean,\n  onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n}\n\nconst StyledButton = styled.button<{\n  $size: 'sm' | 'md' | 'lg',\n  $loading: boolean,\n  $colors: {\n    dark: ButtonColors,\n    light: ButtonColors,\n  },\n}>`\n  border: 0;\n  border-radius: ${BORDER_RADIUS};\n  padding: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '0rem 0.75rem'; }\n      case 'md': { return '0rem 1rem'; }\n      case 'lg': { return '0rem 2rem'; }\n    }\n  }};\n  height: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '2rem'; }\n      case 'md': { return '2.5rem'; }\n      case 'lg': { return '3rem'; }\n    }\n  }};\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  opacity: ${props => props.disabled ? 0.5 : 1};\n  transition: background-color 0.2s;\n  cursor: pointer;\n  position: relative;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n\n  background-color: ${props => props.$colors.light.bgColor};\n  color: ${props => props.$colors.light.textColor};\n  &:not([disabled]) {\n    &:active,&:hover:active {\n      background-color: ${props => props.$colors.light.activeBgColor};\n    }\n    &:hover {\n      background-color: ${props => props.$colors.light.hoverBgColor};\n    }\n  }\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${props => props.$colors.dark.bgColor};\n    color: ${props => props.$colors.dark.textColor};\n    &:not([disabled]) {\n      &:active,&:hover:active {\n        background-color: ${props => props.$colors.dark.activeBgColor};\n      }\n      &:hover {\n        background-color: ${props => props.$colors.dark.hoverBgColor};\n      }\n    }\n  }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    variant='primary',\n    size='md',\n    loading=false,\n    ...props\n  }, ref) => {\n    const { colors } = useDesign();\n\n    const { dark, light } = useMemo(() => {\n      return {\n        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n        light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n      };\n    }, [props.color, colors, variant]);\n\n    return (\n      <StyledButton\n        ref={ref}\n        $size={size}\n        $loading={loading}\n        $colors={{ dark, light }}\n        {...props}\n      >\n        <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>\n          <LoadingIndicator color={{ light: light.textColor, dark: dark.textColor }}/>\n        </span>\n        <span style={{ visibility: loading ? 'hidden' : 'visible', whiteSpace: 'nowrap' }}>\n          {props.children}\n        </span>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport {\n  Button,\n};\n"],"mappings":"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","names":["Color","styled","React","LoadingIndicator"]}
+{"version":3,"sources":["../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n  propsColor, \n  colors, \n  variant, \n}: {\n  propsColor?: string, \n  colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n  variant: 'primary' | 'secondary' | 'warning',\n}): { \n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n} {\n  let bgColor;\n  switch (variant) {\n    case 'primary': {\n      bgColor = colors.primaryColor;\n      break;\n    }\n    case 'secondary': {\n      bgColor = colors.secondaryColor;\n      break;\n    }\n    case 'warning': {\n      bgColor = '#ff4500';\n      break;\n    }\n  }\n  if (propsColor) {\n    bgColor = propsColor;\n  }\n\n  const c = Color(bgColor);\n  const pc = Color(colors.primaryColor);\n\n  const changeColor = (value: number) => {\n    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n  };\n  \n  const getAlpha = (alpha: number) => {\n    return Color(\n      pc.isDark() ? 'white' : 'black'\n    ).alpha(alpha).toString();\n  };\n\n  if (c.alpha() === 0) {\n    return {\n      bgColor: 'transparent',\n      hoverBgColor: getAlpha(0.1),\n      activeBgColor: getAlpha(0.2),\n      textColor: colors.primaryColor,\n    };\n  } else if (c.isLight()) {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(-10),\n      activeBgColor: changeColor(-20),\n      textColor: 'black',\n    };\n  } else {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(10),\n      activeBgColor: changeColor(20),\n      textColor: 'white',\n    };\n  }\n}\n\nexport type ButtonProps = {\n  variant?: 'primary' | 'secondary' | 'warning',\n  color?: string,\n  size?: 'sm' | 'md' | 'lg',\n  loading?: boolean,\n  onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n}\n\nconst StyledButton = styled.button<{\n  $size: 'sm' | 'md' | 'lg',\n  $loading: boolean,\n  $colors: {\n    dark: ButtonColors,\n    light: ButtonColors,\n  },\n}>`\n  border: 0;\n  border-radius: ${BORDER_RADIUS};\n  padding: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '0rem 0.75rem'; }\n      case 'md': { return '0rem 1rem'; }\n      case 'lg': { return '0rem 2rem'; }\n    }\n  }};\n  height: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '2rem'; }\n      case 'md': { return '2.5rem'; }\n      case 'lg': { return '3rem'; }\n    }\n  }};\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  opacity: ${props => props.disabled ? 0.5 : 1};\n  transition: background-color 0.05s;\n  cursor: pointer;\n  position: relative;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n\n  background-color: ${props => props.$colors.light.bgColor};\n  color: ${props => props.$colors.light.textColor};\n  &:not([disabled]) {\n    &:active,&:hover:active {\n      background-color: ${props => props.$colors.light.activeBgColor};\n    }\n    &:hover {\n      background-color: ${props => props.$colors.light.hoverBgColor};\n    }\n  }\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${props => props.$colors.dark.bgColor};\n    color: ${props => props.$colors.dark.textColor};\n    &:not([disabled]) {\n      &:active,&:hover:active {\n        background-color: ${props => props.$colors.dark.activeBgColor};\n      }\n      &:hover {\n        background-color: ${props => props.$colors.dark.hoverBgColor};\n      }\n    }\n  }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    variant='primary',\n    size='md',\n    loading=false,\n    ...props\n  }, ref) => {\n    const { colors } = useDesign();\n\n    const { dark, light } = useMemo(() => {\n      return {\n        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n        light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n      };\n    }, [props.color, colors, variant]);\n\n    return (\n      <StyledButton\n        ref={ref}\n        $size={size}\n        $loading={loading}\n        $colors={{ dark, light }}\n        {...props}\n      >\n        <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>\n          <LoadingIndicator color={{ light: light.textColor, dark: dark.textColor }}/>\n        </span>\n        <span style={{ visibility: loading ? 'hidden' : 'visible', whiteSpace: 'nowrap' }}>\n          {props.children}\n        </span>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport {\n  Button,\n};\n"],"mappings":"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","names":["Color","styled","React","LoadingIndicator"]}

package/dist/components-core/index.d.mts

@@ -12,18 +12,18 @@ import React__default from 'react';
 declare const Button: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 declare const Input: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.InputHTMLAttributes<HTMLInputElement> & Pick<React__default.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React__default.RefAttributes<HTMLInputElement>, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 declare const Container: React__default.ForwardRefExoticComponent<Omit<{
-    size?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    size?: number | "sm" | "md" | "lg" | "xs" | "xl" | undefined;
 } & Omit<React__default.HTMLProps<HTMLDivElement>, "size">, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 declare const Separator: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_separator.SeparatorProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 declare const Label: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_label.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
 declare const Link: React__default.ForwardRefExoticComponent<Omit<Omit<{
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     href: string | url.Url;
 } & Omit<React__default.HTMLProps<HTMLLinkElement>, "size" | "href">, "ref"> & React__default.RefAttributes<HTMLAnchorElement>, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
 declare const Text: React__default.ForwardRefExoticComponent<Omit<Omit<{
     variant?: "primary" | "secondary" | "warning" | "success" | undefined;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    as?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
 } & Omit<React__default.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
 declare const Popover: React__default.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverProps & React__default.RefAttributes<never>>;
 declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverTriggerProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;

package/dist/components-core/index.d.ts

@@ -12,18 +12,18 @@ import React__default from 'react';
 declare const Button: React__default.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 declare const Input: React__default.ForwardRefExoticComponent<Omit<Omit<React__default.InputHTMLAttributes<HTMLInputElement> & Pick<React__default.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React__default.RefAttributes<HTMLInputElement>, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 declare const Container: React__default.ForwardRefExoticComponent<Omit<{
-    size?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    size?: number | "sm" | "md" | "lg" | "xs" | "xl" | undefined;
 } & Omit<React__default.HTMLProps<HTMLDivElement>, "size">, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 declare const Separator: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_separator.SeparatorProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 declare const Label: React__default.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_label.LabelProps & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
 declare const Link: React__default.ForwardRefExoticComponent<Omit<Omit<{
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     href: string | url.Url;
 } & Omit<React__default.HTMLProps<HTMLLinkElement>, "size" | "href">, "ref"> & React__default.RefAttributes<HTMLAnchorElement>, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
 declare const Text: React__default.ForwardRefExoticComponent<Omit<Omit<{
     variant?: "primary" | "secondary" | "warning" | "success" | undefined;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    as?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
 } & Omit<React__default.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
 declare const Popover: React__default.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverProps & React__default.RefAttributes<never>>;
 declare const PopoverTrigger: React__default.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverTriggerProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;

package/dist/components-core/loading-indicator.d.mts

@@ -1,13 +1,11 @@
-import * as styled_components from 'styled-components';
-import * as styled_components_dist_types from 'styled-components/dist/types';
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const LoadingIndicator: styled_components.IStyledComponent<"web", styled_components_dist_types.Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+declare function LoadingIndicator(props: {
+    size?: number;
     color: {
         light: string;
         dark: string;
     };
-    size?: number | undefined;
-}>>;
+}): react_jsx_runtime.JSX.Element;
 
 export { LoadingIndicator as default };

package/dist/components-core/loading-indicator.d.ts

@@ -1,13 +1,11 @@
-import * as styled_components from 'styled-components';
-import * as styled_components_dist_types from 'styled-components/dist/types';
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const LoadingIndicator: styled_components.IStyledComponent<"web", styled_components_dist_types.Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+declare function LoadingIndicator(props: {
+    size?: number;
     color: {
         light: string;
         dark: string;
     };
-    size?: number | undefined;
-}>>;
+}): react_jsx_runtime.JSX.Element;
 
 export { LoadingIndicator as default };

package/dist/components-core/loading-indicator.js

@@ -30,17 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components-core/loading-indicator.tsx
 var loading_indicator_exports = {};
 __export(loading_indicator_exports, {
-  default: () => loading_indicator_default
+  default: () => LoadingIndicator
 });
 module.exports = __toCommonJS(loading_indicator_exports);
 var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var l7 = import_styled_components.keyframes`
   33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }
   50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }
   66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }
 `;
-var LoadingIndicator = import_styled_components.default.div`
-  width: ${(props) => props.size || 36}px;
+var StyledLoadingIndicator = import_styled_components.default.div`
+  width: ${(props) => props.$size || 36}px;
   aspect-ratio: 4;
   background: 
     var(--_g) 0% 50%, 
@@ -49,11 +50,13 @@ var LoadingIndicator = import_styled_components.default.div`
   background-size: calc(100%/3) 100%;
   animation: ${l7} 1s infinite linear;
 
-  --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.light} 90%, #0000);
+  --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.$color.light} 90%, #0000);
 
   html[data-stack-theme='dark'] & {
-    --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.dark} 90%, #0000);
+    --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.$color.dark} 90%, #0000);
   }
 `;
-var loading_indicator_default = LoadingIndicator;
+function LoadingIndicator(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoadingIndicator, { $size: props.size, $color: props.color });
+}
 //# sourceMappingURL=loading-indicator.js.map

package/dist/components-core/loading-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-core/loading-indicator.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst l7 = keyframes`\n  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }\n  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }\n  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }\n`;\n\nconst LoadingIndicator = styled.div<{ color: { light: string, dark: string }, size?: number }>`\n  width: ${props => props.size || 36}px;\n  aspect-ratio: 4;\n  background: \n    var(--_g) 0% 50%, \n    var(--_g) 50% 50%, \n    var(--_g) 100% 50%;\n  background-size: calc(100%/3) 100%;\n  animation: ${l7} 1s infinite linear;\n\n  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.light} 90%, #0000);\n\n  html[data-stack-theme='dark'] & {\n    --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.dark} 90%, #0000);\n  }\n`;\nexport default LoadingIndicator;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,IAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMX,IAAM,mBAAmB,yBAAAA,QAAO;AAAA,WACrB,WAAS,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOrB,EAAE;AAAA;AAAA,yDAEwC,WAAS,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,2DAGxB,WAAS,MAAM,MAAM,IAAI;AAAA;AAAA;AAGpF,IAAO,4BAAQ;","names":["styled"]}
+{"version":3,"sources":["../../src/components-core/loading-indicator.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst l7 = keyframes`\n  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }\n  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }\n  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }\n`;\n\nconst StyledLoadingIndicator = styled.div<{ $color: { light: string, dark: string }, $size?: number }>`\n  width: ${props => props.$size || 36}px;\n  aspect-ratio: 4;\n  background: \n    var(--_g) 0% 50%, \n    var(--_g) 50% 50%, \n    var(--_g) 100% 50%;\n  background-size: calc(100%/3) 100%;\n  animation: ${l7} 1s infinite linear;\n\n  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.$color.light} 90%, #0000);\n\n  html[data-stack-theme='dark'] & {\n    --_g: no-repeat radial-gradient(circle closest-side, ${props => props.$color.dark} 90%, #0000);\n  }\n`;\n\nexport default function LoadingIndicator(props: { size?: number, color: { light: string, dark: string } }) {\n  return <StyledLoadingIndicator $size={props.size} $color={props.color} />;\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAkC;AA0BzB;AAxBT,IAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMX,IAAM,yBAAyB,yBAAAA,QAAO;AAAA,WAC3B,WAAS,MAAM,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOtB,EAAE;AAAA;AAAA,yDAEwC,WAAS,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,2DAGzB,WAAS,MAAM,OAAO,IAAI;AAAA;AAAA;AAItE,SAAR,iBAAkC,OAAkE;AACzG,SAAO,4CAAC,0BAAuB,OAAO,MAAM,MAAM,QAAQ,MAAM,OAAO;AACzE;","names":["styled"]}

package/dist/components-core-joy/text.d.mts

@@ -2,8 +2,8 @@ import React__default from 'react';
 
 declare const Text: React__default.ForwardRefExoticComponent<Omit<Omit<Omit<{
     variant?: "primary" | "secondary" | "warning" | "success" | undefined;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    as?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
 } & Omit<React__default.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
 
 export { Text };

package/dist/components-core-joy/text.d.ts

@@ -2,8 +2,8 @@ import React__default from 'react';
 
 declare const Text: React__default.ForwardRefExoticComponent<Omit<Omit<Omit<{
     variant?: "primary" | "secondary" | "warning" | "success" | undefined;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    as?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
 } & Omit<React__default.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>, "ref"> & React__default.RefAttributes<HTMLParagraphElement>>;
 
 export { Text };

package/dist/components-page/oauth-callback.js

@@ -44,20 +44,35 @@ function OAuthCallback() {
   const app = (0, import__.useStackApp)();
   const called = (0, import_react.useRef)(false);
   const [error, setError] = (0, import_react.useState)(null);
+  const [showRedirectLink, setShowRedirectLink] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => (0, import_promises.runAsynchronously)(async () => {
     if (called.current)
       return;
     called.current = true;
+    let hasRedirected = false;
     try {
-      await app.callOAuthCallback();
+      hasRedirected = await app.callOAuthCallback();
     } catch (e) {
       setError(e);
     }
+    if (!hasRedirected) {
+      await app.redirectToSignIn();
+    }
   }), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.default, { title: "Redirecting...", fullPage: true, children: error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Something went wrong while processing the OAuth callback:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(error, null, 2) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "This is most likely an error in Stack. Please report it." })
-  ] }) : null });
+  (0, import_react.useEffect)(() => {
+    setTimeout(() => setShowRedirectLink(true), 3e3);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_message_card.default, { title: "Redirecting...", fullPage: true, children: [
+    showRedirectLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+      "If you are not redirected automatically, ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: app.urls.home, children: "click here" }),
+      "."
+    ] }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Something went wrong while processing the OAuth callback:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(error, null, 2) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "This is most likely an error in Stack. Please report it." })
+    ] }) : null
+  ] });
 }
 //# sourceMappingURL=oauth-callback.js.map

package/dist/components-page/oauth-callback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/oauth-callback.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useEffect, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport MessageCard from \"../components/message-card\";\n\nexport default function OAuthCallback () {\n  const app = useStackApp();\n  const called = useRef(false);\n  const [error, setError] = useState<unknown>(null);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    try {\n      await app.callOAuthCallback();\n    } catch (e: any) {\n      setError(e);\n    }\n  }), []);\n\n  return <MessageCard title='Redirecting...' fullPage>\n    {error ? <div>\n      <p>Something went wrong while processing the OAuth callback:</p>\n      <pre>{JSON.stringify(error, null, 2)}</pre>\n      <p>This is most likely an error in Stack. Please report it.</p>\n    </div> : null}\n  </MessageCard>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAC5C,eAA4B;AAC5B,sBAAkC;AAClC,0BAAwB;AAkBX;AAhBE,SAAR,gBAAkC;AACvC,QAAM,UAAM,sBAAY;AACxB,QAAM,aAAS,qBAAO,KAAK;AAC3B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAkB,IAAI;AAEhD,8BAAU,UAAM,mCAAkB,YAAY;AAC5C,QAAI,OAAO;AAAS;AACpB,WAAO,UAAU;AACjB,QAAI;AACF,YAAM,IAAI,kBAAkB;AAAA,IAC9B,SAAS,GAAQ;AACf,eAAS,CAAC;AAAA,IACZ;AAAA,EACF,CAAC,GAAG,CAAC,CAAC;AAEN,SAAO,4CAAC,oBAAAA,SAAA,EAAY,OAAM,kBAAiB,UAAQ,MAChD,kBAAQ,6CAAC,SACR;AAAA,gDAAC,OAAE,uEAAyD;AAAA,IAC5D,4CAAC,SAAK,eAAK,UAAU,OAAO,MAAM,CAAC,GAAE;AAAA,IACrC,4CAAC,OAAE,sEAAwD;AAAA,KAC7D,IAAS,MACX;AACF;","names":["MessageCard"]}
+{"version":3,"sources":["../../src/components-page/oauth-callback.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useEffect, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport MessageCard from \"../components/message-card\";\n\nexport default function OAuthCallback () {\n  const app = useStackApp();\n  const called = useRef(false);\n  const [error, setError] = useState<unknown>(null);\n  const [showRedirectLink, setShowRedirectLink] = useState(false);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    let hasRedirected = false;\n    try {\n      hasRedirected = await app.callOAuthCallback();\n    } catch (e: any) {\n      setError(e);\n    }\n    if (!hasRedirected) {\n      await app.redirectToSignIn();\n    }\n  }), []);\n\n  useEffect(() => {\n    setTimeout(() => setShowRedirectLink(true), 3000);\n  }, []);\n\n  return <MessageCard title='Redirecting...' fullPage>\n    {showRedirectLink ? <p>If you are not redirected automatically, <a href={app.urls.home}>click here</a>.</p> : null}\n    {error ? <div>\n      <p>Something went wrong while processing the OAuth callback:</p>\n      <pre>{JSON.stringify(error, null, 2)}</pre>\n      <p>This is most likely an error in Stack. Please report it.</p>\n    </div> : null}\n  </MessageCard>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAC5C,eAA4B;AAC5B,sBAAkC;AAClC,0BAAwB;AA2BA;AAzBT,SAAR,gBAAkC;AACvC,QAAM,UAAM,sBAAY;AACxB,QAAM,aAAS,qBAAO,KAAK;AAC3B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAkB,IAAI;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,KAAK;AAE9D,8BAAU,UAAM,mCAAkB,YAAY;AAC5C,QAAI,OAAO;AAAS;AACpB,WAAO,UAAU;AACjB,QAAI,gBAAgB;AACpB,QAAI;AACF,sBAAgB,MAAM,IAAI,kBAAkB;AAAA,IAC9C,SAAS,GAAQ;AACf,eAAS,CAAC;AAAA,IACZ;AACA,QAAI,CAAC,eAAe;AAClB,YAAM,IAAI,iBAAiB;AAAA,IAC7B;AAAA,EACF,CAAC,GAAG,CAAC,CAAC;AAEN,8BAAU,MAAM;AACd,eAAW,MAAM,oBAAoB,IAAI,GAAG,GAAI;AAAA,EAClD,GAAG,CAAC,CAAC;AAEL,SAAO,6CAAC,oBAAAA,SAAA,EAAY,OAAM,kBAAiB,UAAQ,MAChD;AAAA,uBAAmB,6CAAC,OAAE;AAAA;AAAA,MAAyC,4CAAC,OAAE,MAAM,IAAI,KAAK,MAAM,wBAAU;AAAA,MAAI;AAAA,OAAC,IAAO;AAAA,IAC7G,QAAQ,6CAAC,SACR;AAAA,kDAAC,OAAE,uEAAyD;AAAA,MAC5D,4CAAC,SAAK,eAAK,UAAU,OAAO,MAAM,CAAC,GAAE;AAAA,MACrC,4CAAC,OAAE,sEAAwD;AAAA,OAC7D,IAAS;AAAA,KACX;AACF;","names":["MessageCard"]}

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

@@ -61,14 +61,22 @@ async function StackHandler({
     }
     (0, import_navigation.redirect)(url, import_navigation.RedirectType.replace);
   }
+  async function redirectIfHasUser() {
+    const user = await app.getServerUser();
+    if (user) {
+      (0, import_navigation.redirect)(app.urls.afterSignIn);
+    }
+  }
   const path = stack.join("/");
   switch (path) {
     case "signin": {
       redirectIfNotHandler("signIn");
+      await redirectIfHasUser();
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sign_in.default, { fullPage: true });
     }
     case "signup": {
       redirectIfNotHandler("signUp");
+      await redirectIfHasUser();
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sign_up.default, { fullPage: true });
     }
     case "email-verification": {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/stack-handler.tsx"],"sourcesContent":["import SignUp from \"./sign-up\";\nimport SignIn from \"./sign-in\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport EmailVerification from \"./email-verification\";\nimport { PasswordReset, StackServerApp } from \"..\";\nimport MessageCard from \"../components/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport Signout from \"./sign-out\";\nimport ForgotPassword from \"./forgot-password\";\nimport OAuthCallback from \"./oauth-callback\";\nimport AccountSettings from \"./account-settings\";\nimport MagicLinkCallback from \"./magic-link-callback\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n}: { \n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] }, \n  searchParams?: Record<string, string>,\n}) {\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" 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.startsWith(handlerUrl)) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    redirect(url, RedirectType.replace);\n  }\n\n  const path = stack.join('/');\n  switch (path) {\n    case 'signin': {\n      redirectIfNotHandler('signIn');\n      return <SignIn fullPage/>;\n    }\n    case 'signup': {\n      redirectIfNotHandler('signUp');\n      return <SignUp fullPage/>;\n    }\n    case 'email-verification': {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage/>;\n    }\n    case 'password-reset': {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage />;\n    }\n    case 'forgot-password': {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage />;\n    }\n    case 'signout': {\n      redirectIfNotHandler('signOut');\n      return <Signout/>;\n    }\n    case 'oauth-callback': {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback />;\n    }\n    case 'account-settings': {\n      redirectIfNotHandler('accountSettings');\n      return <AccountSettings fullPage />;\n    }\n    case 'magic-link-callback': {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage />;\n    }\n    default: {\n      return notFound();\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmB;AACnB,qBAAmB;AACnB,wBAAiD;AACjD,gCAA8B;AAC9B,eAA8C;AAC9C,0BAAwB;AAExB,sBAAoB;AACpB,6BAA2B;AAC3B,4BAA0B;AAC1B,8BAA4B;AAC5B,iCAA8B;AActB;AAZR,eAAO,aAAmE;AAAA,EACxE;AAAA,EACA,QAAQ,EAAE,MAAM,IAAI,CAAC;AAAA,EACrB,eAAe,CAAC;AAClB,GAIG;AACD,MAAI,CAAC,OAAO;AACV,WACE,4CAAC,oBAAAA,SAAA,EAAY,OAAM,+BAA8B,UAAQ,MACvD,sDAAC,OAAE,iHAAmG,GACxG;AAAA,EAEJ;AAEA,WAAS,qBAAqB,MAAyB;AACrD,UAAM,MAAM,IAAI,KAAK,IAAI;AACzB,UAAM,aAAa,IAAI,KAAK;AAE5B,QAAI,IAAI,WAAW,UAAU,GAAG;AAE9B;AAAA,IACF;AAEA,oCAAS,KAAK,+BAAa,OAAO;AAAA,EACpC;AAEA,QAAM,OAAO,MAAM,KAAK,GAAG;AAC3B,UAAQ,MAAM;AAAA,IACZ,KAAK,UAAU;AACb,2BAAqB,QAAQ;AAC7B,aAAO,4CAAC,eAAAC,SAAA,EAAO,UAAQ;AAAA,IACzB;AAAA,IACA,KAAK,UAAU;AACb,2BAAqB,QAAQ;AAC7B,aAAO,4CAAC,eAAAC,SAAA,EAAO,UAAQ;AAAA,IACzB;AAAA,IACA,KAAK,sBAAsB;AACzB,2BAAqB,mBAAmB;AACxC,aAAO,4CAAC,0BAAAC,SAAA,EAAkB,cAA4B,UAAQ;AAAA,IAChE;AAAA,IACA,KAAK,kBAAkB;AACrB,2BAAqB,eAAe;AACpC,aAAO,4CAAC,0BAAc,cAA4B,UAAQ,MAAC;AAAA,IAC7D;AAAA,IACA,KAAK,mBAAmB;AACtB,2BAAqB,gBAAgB;AACrC,aAAO,4CAAC,uBAAAC,SAAA,EAAe,UAAQ,MAAC;AAAA,IAClC;AAAA,IACA,KAAK,WAAW;AACd,2BAAqB,SAAS;AAC9B,aAAO,4CAAC,gBAAAC,SAAA,EAAO;AAAA,IACjB;AAAA,IACA,KAAK,kBAAkB;AACrB,2BAAqB,eAAe;AACpC,aAAO,4CAAC,sBAAAC,SAAA,EAAc;AAAA,IACxB;AAAA,IACA,KAAK,oBAAoB;AACvB,2BAAqB,iBAAiB;AACtC,aAAO,4CAAC,wBAAAC,SAAA,EAAgB,UAAQ,MAAC;AAAA,IACnC;AAAA,IACA,KAAK,uBAAuB;AAC1B,2BAAqB,mBAAmB;AACxC,aAAO,4CAAC,2BAAAC,SAAA,EAAkB,cAA4B,UAAQ,MAAC;AAAA,IACjE;AAAA,IACA,SAAS;AACP,iBAAO,4BAAS;AAAA,IAClB;AAAA,EACF;AACF;","names":["MessageCard","SignIn","SignUp","EmailVerification","ForgotPassword","Signout","OAuthCallback","AccountSettings","MagicLinkCallback"]}
+{"version":3,"sources":["../../src/components-page/stack-handler.tsx"],"sourcesContent":["import SignUp from \"./sign-up\";\nimport SignIn from \"./sign-in\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport EmailVerification from \"./email-verification\";\nimport { PasswordReset, StackServerApp } from \"..\";\nimport MessageCard from \"../components/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport SignOut from \"./sign-out\";\nimport ForgotPassword from \"./forgot-password\";\nimport OAuthCallback from \"./oauth-callback\";\nimport AccountSettings from \"./account-settings\";\nimport MagicLinkCallback from \"./magic-link-callback\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n}: { \n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] }, \n  searchParams?: Record<string, string>,\n}) {\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" 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.startsWith(handlerUrl)) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    redirect(url, RedirectType.replace);\n  }\n\n  async function redirectIfHasUser() {\n    const user = await app.getServerUser();\n    if (user) {\n      redirect(app.urls.afterSignIn);\n    }\n  }\n\n  const path = stack.join('/');\n  switch (path) {\n    case 'signin': {\n      redirectIfNotHandler('signIn');\n      await redirectIfHasUser();\n      return <SignIn fullPage/>;\n    }\n    case 'signup': {\n      redirectIfNotHandler('signUp');\n      await redirectIfHasUser();\n      return <SignUp fullPage/>;\n    }\n    case 'email-verification': {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage/>;\n    }\n    case 'password-reset': {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage />;\n    }\n    case 'forgot-password': {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage />;\n    }\n    case 'signout': {\n      redirectIfNotHandler('signOut');\n      return <SignOut/>;\n    }\n    case 'oauth-callback': {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback />;\n    }\n    case 'account-settings': {\n      redirectIfNotHandler('accountSettings');\n      return <AccountSettings fullPage />;\n    }\n    case 'magic-link-callback': {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage />;\n    }\n    default: {\n      return notFound();\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmB;AACnB,qBAAmB;AACnB,wBAAiD;AACjD,gCAA8B;AAC9B,eAA8C;AAC9C,0BAAwB;AAExB,sBAAoB;AACpB,6BAA2B;AAC3B,4BAA0B;AAC1B,8BAA4B;AAC5B,iCAA8B;AActB;AAZR,eAAO,aAAmE;AAAA,EACxE;AAAA,EACA,QAAQ,EAAE,MAAM,IAAI,CAAC;AAAA,EACrB,eAAe,CAAC;AAClB,GAIG;AACD,MAAI,CAAC,OAAO;AACV,WACE,4CAAC,oBAAAA,SAAA,EAAY,OAAM,+BAA8B,UAAQ,MACvD,sDAAC,OAAE,iHAAmG,GACxG;AAAA,EAEJ;AAEA,WAAS,qBAAqB,MAAyB;AACrD,UAAM,MAAM,IAAI,KAAK,IAAI;AACzB,UAAM,aAAa,IAAI,KAAK;AAE5B,QAAI,IAAI,WAAW,UAAU,GAAG;AAE9B;AAAA,IACF;AAEA,oCAAS,KAAK,+BAAa,OAAO;AAAA,EACpC;AAEA,iBAAe,oBAAoB;AACjC,UAAM,OAAO,MAAM,IAAI,cAAc;AACrC,QAAI,MAAM;AACR,sCAAS,IAAI,KAAK,WAAW;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,OAAO,MAAM,KAAK,GAAG;AAC3B,UAAQ,MAAM;AAAA,IACZ,KAAK,UAAU;AACb,2BAAqB,QAAQ;AAC7B,YAAM,kBAAkB;AACxB,aAAO,4CAAC,eAAAC,SAAA,EAAO,UAAQ;AAAA,IACzB;AAAA,IACA,KAAK,UAAU;AACb,2BAAqB,QAAQ;AAC7B,YAAM,kBAAkB;AACxB,aAAO,4CAAC,eAAAC,SAAA,EAAO,UAAQ;AAAA,IACzB;AAAA,IACA,KAAK,sBAAsB;AACzB,2BAAqB,mBAAmB;AACxC,aAAO,4CAAC,0BAAAC,SAAA,EAAkB,cAA4B,UAAQ;AAAA,IAChE;AAAA,IACA,KAAK,kBAAkB;AACrB,2BAAqB,eAAe;AACpC,aAAO,4CAAC,0BAAc,cAA4B,UAAQ,MAAC;AAAA,IAC7D;AAAA,IACA,KAAK,mBAAmB;AACtB,2BAAqB,gBAAgB;AACrC,aAAO,4CAAC,uBAAAC,SAAA,EAAe,UAAQ,MAAC;AAAA,IAClC;AAAA,IACA,KAAK,WAAW;AACd,2BAAqB,SAAS;AAC9B,aAAO,4CAAC,gBAAAC,SAAA,EAAO;AAAA,IACjB;AAAA,IACA,KAAK,kBAAkB;AACrB,2BAAqB,eAAe;AACpC,aAAO,4CAAC,sBAAAC,SAAA,EAAc;AAAA,IACxB;AAAA,IACA,KAAK,oBAAoB;AACvB,2BAAqB,iBAAiB;AACtC,aAAO,4CAAC,wBAAAC,SAAA,EAAgB,UAAQ,MAAC;AAAA,IACnC;AAAA,IACA,KAAK,uBAAuB;AAC1B,2BAAqB,mBAAmB;AACxC,aAAO,4CAAC,2BAAAC,SAAA,EAAkB,cAA4B,UAAQ,MAAC;AAAA,IACjE;AAAA,IACA,SAAS;AACP,iBAAO,4BAAS;AAAA,IAClB;AAAA,EACF;AACF;","names":["MessageCard","SignIn","SignUp","EmailVerification","ForgotPassword","SignOut","OAuthCallback","AccountSettings","MagicLinkCallback"]}

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

@@ -1,12 +1,20 @@
 // src/components/user-avatar.tsx
 import { RxPerson } from "react-icons/rx";
 import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
+import { SECONDARY_FONT_COLORS } from "../utils/constants";
+import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+var StyledIcon = styled(RxPerson)`
+  color: ${SECONDARY_FONT_COLORS.light};
+  html[data-stack-theme='dark'] & {
+    color: ${SECONDARY_FONT_COLORS.dark};
+  }
+`;
 function UserAvatar(props) {
   const user = props.user;
   return /* @__PURE__ */ jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [
     /* @__PURE__ */ jsx(AvatarImage, { src: user?.profileImageUrl || "" }),
-    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(RxPerson, { size: props.size }) })
+    /* @__PURE__ */ jsx(AvatarFallback, { children: user ? /* @__PURE__ */ jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx(StyledIcon, { size: props.size }) })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <RxPerson size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB,aAAa,YAAY;AAMtD,SACE,KADF;AAHW,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,QAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,oBAAC,YAAS,MAAM,MAAM,MAAM,GAChC;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/user-avatar.tsx"],"sourcesContent":["import { RxPerson } from \"react-icons/rx\";\nimport { Avatar, AvatarFallback, AvatarImage, Text } from \"..\";\nimport { User } from \"../lib/stack-app\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport styled from \"styled-components\";\n\n\nconst StyledIcon = styled(RxPerson)`\n  color: ${SECONDARY_FONT_COLORS.light};\n  html[data-stack-theme='dark'] & {\n    color: ${SECONDARY_FONT_COLORS.dark};\n  }\n`;\n\nexport default function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size, width: props.size }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ? \n          <Text style={{ fontWeight: 500 }}>\n            {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </Text> :\n          <StyledIcon size={props.size} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB,aAAa,YAAY;AAE1D,SAAS,6BAA6B;AACtC,OAAO,YAAY;AAaf,SACE,KADF;AAVJ,IAAM,aAAa,OAAO,QAAQ;AAAA,WACvB,sBAAsB,KAAK;AAAA;AAAA,aAEzB,sBAAsB,IAAI;AAAA;AAAA;AAIxB,SAAR,WAA4B,OAA6C;AAC9E,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,MAAM,OAAO,MAAM,KAAK,GACrD;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,QAAK,OAAO,EAAE,YAAY,IAAI,GAC3B,iBAAM,eAAe,MAAM,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACtE,IACA,oBAAC,cAAW,MAAM,MAAM,MAAM,GAClC;AAAA,KACF;AAEJ;","names":[]}

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

@@ -97,7 +97,7 @@ var StyledButton = styled.button`
   font-family: ${FONT_FAMILY};
   font-size: ${FONT_SIZES.md};
   opacity: ${(props) => props.disabled ? 0.5 : 1};
-  transition: background-color 0.2s;
+  transition: background-color 0.05s;
   cursor: pointer;
   position: relative;
   &:disabled {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n  propsColor, \n  colors, \n  variant, \n}: {\n  propsColor?: string, \n  colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n  variant: 'primary' | 'secondary' | 'warning',\n}): { \n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n} {\n  let bgColor;\n  switch (variant) {\n    case 'primary': {\n      bgColor = colors.primaryColor;\n      break;\n    }\n    case 'secondary': {\n      bgColor = colors.secondaryColor;\n      break;\n    }\n    case 'warning': {\n      bgColor = '#ff4500';\n      break;\n    }\n  }\n  if (propsColor) {\n    bgColor = propsColor;\n  }\n\n  const c = Color(bgColor);\n  const pc = Color(colors.primaryColor);\n\n  const changeColor = (value: number) => {\n    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n  };\n  \n  const getAlpha = (alpha: number) => {\n    return Color(\n      pc.isDark() ? 'white' : 'black'\n    ).alpha(alpha).toString();\n  };\n\n  if (c.alpha() === 0) {\n    return {\n      bgColor: 'transparent',\n      hoverBgColor: getAlpha(0.1),\n      activeBgColor: getAlpha(0.2),\n      textColor: colors.primaryColor,\n    };\n  } else if (c.isLight()) {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(-10),\n      activeBgColor: changeColor(-20),\n      textColor: 'black',\n    };\n  } else {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(10),\n      activeBgColor: changeColor(20),\n      textColor: 'white',\n    };\n  }\n}\n\nexport type ButtonProps = {\n  variant?: 'primary' | 'secondary' | 'warning',\n  color?: string,\n  size?: 'sm' | 'md' | 'lg',\n  loading?: boolean,\n  onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n}\n\nconst StyledButton = styled.button<{\n  $size: 'sm' | 'md' | 'lg',\n  $loading: boolean,\n  $colors: {\n    dark: ButtonColors,\n    light: ButtonColors,\n  },\n}>`\n  border: 0;\n  border-radius: ${BORDER_RADIUS};\n  padding: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '0rem 0.75rem'; }\n      case 'md': { return '0rem 1rem'; }\n      case 'lg': { return '0rem 2rem'; }\n    }\n  }};\n  height: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '2rem'; }\n      case 'md': { return '2.5rem'; }\n      case 'lg': { return '3rem'; }\n    }\n  }};\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  opacity: ${props => props.disabled ? 0.5 : 1};\n  transition: background-color 0.2s;\n  cursor: pointer;\n  position: relative;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n\n  background-color: ${props => props.$colors.light.bgColor};\n  color: ${props => props.$colors.light.textColor};\n  &:not([disabled]) {\n    &:active,&:hover:active {\n      background-color: ${props => props.$colors.light.activeBgColor};\n    }\n    &:hover {\n      background-color: ${props => props.$colors.light.hoverBgColor};\n    }\n  }\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${props => props.$colors.dark.bgColor};\n    color: ${props => props.$colors.dark.textColor};\n    &:not([disabled]) {\n      &:active,&:hover:active {\n        background-color: ${props => props.$colors.dark.activeBgColor};\n      }\n      &:hover {\n        background-color: ${props => props.$colors.dark.hoverBgColor};\n      }\n    }\n  }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    variant='primary',\n    size='md',\n    loading=false,\n    ...props\n  }, ref) => {\n    const { colors } = useDesign();\n\n    const { dark, light } = useMemo(() => {\n      return {\n        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n        light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n      };\n    }, [props.color, colors, variant]);\n\n    return (\n      <StyledButton\n        ref={ref}\n        $size={size}\n        $loading={loading}\n        $colors={{ dark, light }}\n        {...props}\n      >\n        <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>\n          <LoadingIndicator color={{ light: light.textColor, dark: dark.textColor }}/>\n        </span>\n        <span style={{ visibility: loading ? 'hidden' : 'visible', whiteSpace: 'nowrap' }}>\n          {props.children}\n        </span>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport {\n  Button,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components-core/button.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from \"react\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES } from \"../utils/constants\";\nimport LoadingIndicator from \"./loading-indicator\";\n\nfunction getColors({\n  propsColor, \n  colors, \n  variant, \n}: {\n  propsColor?: string, \n  colors: { primaryColor: string, secondaryColor: string, backgroundColor: string },\n  variant: 'primary' | 'secondary' | 'warning',\n}): { \n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n} {\n  let bgColor;\n  switch (variant) {\n    case 'primary': {\n      bgColor = colors.primaryColor;\n      break;\n    }\n    case 'secondary': {\n      bgColor = colors.secondaryColor;\n      break;\n    }\n    case 'warning': {\n      bgColor = '#ff4500';\n      break;\n    }\n  }\n  if (propsColor) {\n    bgColor = propsColor;\n  }\n\n  const c = Color(bgColor);\n  const pc = Color(colors.primaryColor);\n\n  const changeColor = (value: number) => {\n    return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n  };\n  \n  const getAlpha = (alpha: number) => {\n    return Color(\n      pc.isDark() ? 'white' : 'black'\n    ).alpha(alpha).toString();\n  };\n\n  if (c.alpha() === 0) {\n    return {\n      bgColor: 'transparent',\n      hoverBgColor: getAlpha(0.1),\n      activeBgColor: getAlpha(0.2),\n      textColor: colors.primaryColor,\n    };\n  } else if (c.isLight()) {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(-10),\n      activeBgColor: changeColor(-20),\n      textColor: 'black',\n    };\n  } else {\n    return {\n      bgColor,\n      hoverBgColor: changeColor(10),\n      activeBgColor: changeColor(20),\n      textColor: 'white',\n    };\n  }\n}\n\nexport type ButtonProps = {\n  variant?: 'primary' | 'secondary' | 'warning',\n  color?: string,\n  size?: 'sm' | 'md' | 'lg',\n  loading?: boolean,\n  onClick?: (() => void) | (() => Promise<void>),\n} & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>\n\ntype ButtonColors = {\n  bgColor: string, \n  hoverBgColor: string,\n  activeBgColor: string,\n  textColor: string,\n}\n\nconst StyledButton = styled.button<{\n  $size: 'sm' | 'md' | 'lg',\n  $loading: boolean,\n  $colors: {\n    dark: ButtonColors,\n    light: ButtonColors,\n  },\n}>`\n  border: 0;\n  border-radius: ${BORDER_RADIUS};\n  padding: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '0rem 0.75rem'; }\n      case 'md': { return '0rem 1rem'; }\n      case 'lg': { return '0rem 2rem'; }\n    }\n  }};\n  height: ${props => {\n    switch (props.$size) {\n      case 'sm': { return '2rem'; }\n      case 'md': { return '2.5rem'; }\n      case 'lg': { return '3rem'; }\n    }\n  }};\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  opacity: ${props => props.disabled ? 0.5 : 1};\n  transition: background-color 0.05s;\n  cursor: pointer;\n  position: relative;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n\n  background-color: ${props => props.$colors.light.bgColor};\n  color: ${props => props.$colors.light.textColor};\n  &:not([disabled]) {\n    &:active,&:hover:active {\n      background-color: ${props => props.$colors.light.activeBgColor};\n    }\n    &:hover {\n      background-color: ${props => props.$colors.light.hoverBgColor};\n    }\n  }\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${props => props.$colors.dark.bgColor};\n    color: ${props => props.$colors.dark.textColor};\n    &:not([disabled]) {\n      &:active,&:hover:active {\n        background-color: ${props => props.$colors.dark.activeBgColor};\n      }\n      &:hover {\n        background-color: ${props => props.$colors.dark.hoverBgColor};\n      }\n    }\n  }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    variant='primary',\n    size='md',\n    loading=false,\n    ...props\n  }, ref) => {\n    const { colors } = useDesign();\n\n    const { dark, light } = useMemo(() => {\n      return {\n        dark: getColors({ propsColor: props.color, colors: colors.dark, variant }),\n        light: getColors({ propsColor: props.color, colors: colors.light, variant }),\n      };\n    }, [props.color, colors, variant]);\n\n    return (\n      <StyledButton\n        ref={ref}\n        $size={size}\n        $loading={loading}\n        $colors={{ dark, light }}\n        {...props}\n      >\n        <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', visibility: loading ? 'visible' : 'hidden' }}>\n          <LoadingIndicator color={{ light: light.textColor, dark: dark.textColor }}/>\n        </span>\n        <span style={{ visibility: loading ? 'hidden' : 'visible', whiteSpace: 'nowrap' }}>\n          {props.children}\n        </span>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport {\n  Button,\n};\n"],"mappings":"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","names":[]}

package/dist/esm/components-core/loading-indicator.js

@@ -1,12 +1,13 @@
 // src/components-core/loading-indicator.tsx
 import styled, { keyframes } from "styled-components";
+import { jsx } from "react/jsx-runtime";
 var l7 = keyframes`
   33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }
   50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }
   66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }
 `;
-var LoadingIndicator = styled.div`
-  width: ${(props) => props.size || 36}px;
+var StyledLoadingIndicator = styled.div`
+  width: ${(props) => props.$size || 36}px;
   aspect-ratio: 4;
   background: 
     var(--_g) 0% 50%, 
@@ -15,14 +16,16 @@ var LoadingIndicator = styled.div`
   background-size: calc(100%/3) 100%;
   animation: ${l7} 1s infinite linear;
 
-  --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.light} 90%, #0000);
+  --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.$color.light} 90%, #0000);
 
   html[data-stack-theme='dark'] & {
-    --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.dark} 90%, #0000);
+    --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.$color.dark} 90%, #0000);
   }
 `;
-var loading_indicator_default = LoadingIndicator;
+function LoadingIndicator(props) {
+  return /* @__PURE__ */ jsx(StyledLoadingIndicator, { $size: props.size, $color: props.color });
+}
 export {
-  loading_indicator_default as default
+  LoadingIndicator as default
 };
 //# sourceMappingURL=loading-indicator.js.map

package/dist/esm/components-core/loading-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-core/loading-indicator.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst l7 = keyframes`\n  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }\n  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }\n  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }\n`;\n\nconst LoadingIndicator = styled.div<{ color: { light: string, dark: string }, size?: number }>`\n  width: ${props => props.size || 36}px;\n  aspect-ratio: 4;\n  background: \n    var(--_g) 0% 50%, \n    var(--_g) 50% 50%, \n    var(--_g) 100% 50%;\n  background-size: calc(100%/3) 100%;\n  animation: ${l7} 1s infinite linear;\n\n  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.light} 90%, #0000);\n\n  html[data-stack-theme='dark'] & {\n    --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color.dark} 90%, #0000);\n  }\n`;\nexport default LoadingIndicator;"],"mappings":";AAAA,OAAO,UAAU,iBAAiB;AAElC,IAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMX,IAAM,mBAAmB,OAAO;AAAA,WACrB,WAAS,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOrB,EAAE;AAAA;AAAA,yDAEwC,WAAS,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,2DAGxB,WAAS,MAAM,MAAM,IAAI;AAAA;AAAA;AAGpF,IAAO,4BAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components-core/loading-indicator.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nconst l7 = keyframes`\n  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }\n  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }\n  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }\n`;\n\nconst StyledLoadingIndicator = styled.div<{ $color: { light: string, dark: string }, $size?: number }>`\n  width: ${props => props.$size || 36}px;\n  aspect-ratio: 4;\n  background: \n    var(--_g) 0% 50%, \n    var(--_g) 50% 50%, \n    var(--_g) 100% 50%;\n  background-size: calc(100%/3) 100%;\n  animation: ${l7} 1s infinite linear;\n\n  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.$color.light} 90%, #0000);\n\n  html[data-stack-theme='dark'] & {\n    --_g: no-repeat radial-gradient(circle closest-side, ${props => props.$color.dark} 90%, #0000);\n  }\n`;\n\nexport default function LoadingIndicator(props: { size?: number, color: { light: string, dark: string } }) {\n  return <StyledLoadingIndicator $size={props.size} $color={props.color} />;\n}"],"mappings":";AAAA,OAAO,UAAU,iBAAiB;AA0BzB;AAxBT,IAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMX,IAAM,yBAAyB,OAAO;AAAA,WAC3B,WAAS,MAAM,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOtB,EAAE;AAAA;AAAA,yDAEwC,WAAS,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,2DAGzB,WAAS,MAAM,OAAO,IAAI;AAAA;AAAA;AAItE,SAAR,iBAAkC,OAAkE;AACzG,SAAO,oBAAC,0BAAuB,OAAO,MAAM,MAAM,QAAQ,MAAM,OAAO;AACzE;","names":[]}

package/dist/esm/components-page/oauth-callback.js

@@ -11,21 +11,36 @@ function OAuthCallback() {
   const app = useStackApp();
   const called = useRef(false);
   const [error, setError] = useState(null);
+  const [showRedirectLink, setShowRedirectLink] = useState(false);
   useEffect(() => runAsynchronously(async () => {
     if (called.current)
       return;
     called.current = true;
+    let hasRedirected = false;
     try {
-      await app.callOAuthCallback();
+      hasRedirected = await app.callOAuthCallback();
     } catch (e) {
       setError(e);
     }
+    if (!hasRedirected) {
+      await app.redirectToSignIn();
+    }
   }), []);
-  return /* @__PURE__ */ jsx(MessageCard, { title: "Redirecting...", fullPage: true, children: error ? /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { children: "Something went wrong while processing the OAuth callback:" }),
-    /* @__PURE__ */ jsx("pre", { children: JSON.stringify(error, null, 2) }),
-    /* @__PURE__ */ jsx("p", { children: "This is most likely an error in Stack. Please report it." })
-  ] }) : null });
+  useEffect(() => {
+    setTimeout(() => setShowRedirectLink(true), 3e3);
+  }, []);
+  return /* @__PURE__ */ jsxs(MessageCard, { title: "Redirecting...", fullPage: true, children: [
+    showRedirectLink ? /* @__PURE__ */ jsxs("p", { children: [
+      "If you are not redirected automatically, ",
+      /* @__PURE__ */ jsx("a", { href: app.urls.home, children: "click here" }),
+      "."
+    ] }) : null,
+    error ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { children: "Something went wrong while processing the OAuth callback:" }),
+      /* @__PURE__ */ jsx("pre", { children: JSON.stringify(error, null, 2) }),
+      /* @__PURE__ */ jsx("p", { children: "This is most likely an error in Stack. Please report it." })
+    ] }) : null
+  ] });
 }
 export {
   OAuthCallback as default