@stackframe/stack 2.4.0 → 2.4.3

package/dist/esm/components/credential-sign-in.js

@@ -80,3 +80,4 @@ function CredentialSignIn() {
 export {
   CredentialSignIn as default
 };
+//# sourceMappingURL=credential-sign-in.js.map

package/dist/esm/components/credential-sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport PasswordField from \"./password-field\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label, Link } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function CredentialSignIn() {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const app = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    \n    const error = await app.signInWithCredential({ email, password });\n\n    if (error instanceof KnownErrors.EmailPasswordMismatch) {\n      setPasswordError('Wrong email or password');\n    } else if (error) {\n      setEmailError(`An error occurred. ${error.message}`);\n    }\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        name=\"password\"\n        value={password}\n        onChange={(e) => {\n          setPassword(e.target.value);\n          setPasswordError('');\n        }}\n      />\n      <FormWarningText text={passwordError} />\n\n      <Link href={app.urls.forgotPassword} size='sm' style={{ marginTop: '0.5rem' }}>\n        Forgot password?\n      </Link>\n\n      <Button\n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n          Sign In\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,OAAO,YAAY;AAC3C,SAAS,mBAAmB;AAiCxB,SACE,KADF;AA/BW,SAAR,mBAAoC;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb,uBAAiB,4BAA4B;AAC7C;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAEhE,QAAI,iBAAiB,YAAY,uBAAuB;AACtD,uBAAiB,yBAAyB;AAAA,IAC5C,WAAW,OAAO;AAChB,oBAAc,sBAAsB,MAAM,OAAO,EAAE;AAAA,IACrD;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,YAAY;AAAA,IAEnC,oBAAC,SAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,IAChE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,sBAAY,EAAE,OAAO,KAAK;AAC1B,2BAAiB,EAAE;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,eAAe;AAAA,IAEtC,oBAAC,QAAK,MAAM,IAAI,KAAK,gBAAgB,MAAK,MAAK,OAAO,EAAE,WAAW,SAAS,GAAG,8BAE/E;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAS;AAAA,QAC7B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/credential-sign-up.js

@@ -112,3 +112,4 @@ function CredentialSignUp() {
 export {
   CredentialSignUp as default
 };
+//# sourceMappingURL=credential-sign-up.js.map

package/dist/esm/components/credential-sign-up.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport { Label, Input, Button } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function CredentialSignUp() {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const [passwordRepeat, setPasswordRepeat] = useState('');\n  const [passwordRepeatError, setPasswordRepeatError] = useState('');\n  const app = useStackApp();\n\n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    if (!passwordRepeat) {\n      setPasswordRepeatError('Please repeat your password');\n      return;\n    }\n    if (password !== passwordRepeat) {\n      setPasswordRepeatError('Passwords do not match');\n      return;\n    }\n\n    const passwordError = getPasswordError(password);\n    if (passwordError) {\n      setPasswordError(passwordError.message);\n      return;\n    }\n\n    let error;\n    error = await app.signUpWithCredential({ email, password });\n    \n    if (error instanceof KnownErrors.UserEmailAlreadyExists) {\n      setEmailError('User already exists');\n    } else if (error) {\n      setEmailError(`An error occurred. ${error.message}`);\n    }\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        name=\"password\"\n        value={password}\n        onChange={(e) => {\n          setPassword(e.target.value);\n          setPasswordError('');\n          setPasswordRepeatError('');\n        }}\n      />\n      <FormWarningText text={passwordError} />\n        \n      <Label htmlFor=\"repeat-password\" style={{ marginTop: '1rem' }}>Repeat Password</Label>\n      <PasswordField\n        id=\"repeat-password\"\n        name=\"repeat-password\"\n        value={passwordRepeat}\n        onChange={(e) => {\n          setPasswordRepeat(e.target.value);\n          setPasswordError('');\n          setPasswordRepeatError('');\n        }}\n      />\n      <FormWarningText text={passwordRepeatError} />\n\n      <Button \n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n          Sign Up\n      </Button>\n    </div>\n  );\n}\n"],"mappings":"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","names":["passwordError"]}

package/dist/esm/components/forgot-password.js

@@ -53,3 +53,4 @@ function ForgotPassword({ onSent }) {
 export {
   ForgotPassword as default
 };
+//# sourceMappingURL=forgot-password.js.map

package/dist/esm/components/forgot-password.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\n\n\nexport default function ForgotPassword({ onSent }: { onSent?: () => void }) {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const stackApp = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    await stackApp.sendForgotPasswordEmail(email);\n\n    onSent?.();\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Button\n        style={{ marginTop: '1.5rem'}}\n        onClick={onSubmit}\n      >\n          Send Email\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AAuBjC,SACE,KADF;AApBW,SAAR,eAAgC,EAAE,OAAO,GAA4B;AAC1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,UAAM,SAAS,wBAAwB,KAAK;AAE5C,aAAS;AAAA,EACX;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,wBAAU;AAAA,IACjC;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,YAAY;AAAA,IAEnC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAQ;AAAA,QAC5B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/form-warning.js

@@ -13,3 +13,4 @@ function FormWarningText({ text }) {
 export {
   FormWarningText as default
 };
+//# sourceMappingURL=form-warning.js.map

package/dist/esm/components/form-warning.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form-warning.tsx"],"sourcesContent":["'use client';\n\nimport { Text } from \"../components-core\";\n\nexport default function FormWarningText({ text }: { text?: string }) {\n  if (!text) {\n    return null;\n  }\n  return (\n    <Text size=\"sm\" variant=\"warning\">\n      {text}\n    </Text>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY;AAOjB;AALW,SAAR,gBAAiC,EAAE,KAAK,GAAsB;AACnE,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,SACE,oBAAC,QAAK,MAAK,MAAK,SAAQ,WACrB,gBACH;AAEJ;","names":[]}

package/dist/esm/components/magic-link-sign-in.js

@@ -59,3 +59,4 @@ function MagicLinkSignIn() {
 export {
   MagicLinkSignIn as default
 };
+//# sourceMappingURL=magic-link-sign-in.js.map

package/dist/esm/components/magic-link-sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';;\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\n\nexport default function MagicLinkSignIn() {\n  const [email, setEmail] = useState('');\n  const [sent, setSent] = useState(false);\n  const [error, setError] = useState('');\n  const app = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setError('Please enter a valid email');\n      return;\n    }\n\n    const error = await app.sendMagicLinkEmail(email);\n    if (error) {\n      setError(error.message);\n      return;\n    }\n    setSent(true);\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setError('');\n        }}\n      />\n      <FormWarningText text={error} />\n\n      <Button\n        disabled={sent}\n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n        {sent ? 'Email sent' : 'Send magic link'}\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AACA,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AA2BjC,SACE,KADF;AAzBW,SAAR,kBAAmC;AACxC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,eAAS,yBAAyB;AAClC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,eAAS,4BAA4B;AACrC;AAAA,IACF;AAEA,UAAMA,SAAQ,MAAM,IAAI,mBAAmB,KAAK;AAChD,QAAIA,QAAO;AACT,eAASA,OAAM,OAAO;AACtB;AAAA,IACF;AACA,YAAQ,IAAI;AAAA,EACd;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,mBAAS,EAAE;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,OAAO;AAAA,IAE9B;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,OAAO,EAAE,WAAW,SAAS;AAAA,QAC7B,SAAS;AAAA,QAER,iBAAO,eAAe;AAAA;AAAA,IACzB;AAAA,KACF;AAEJ;","names":["error"]}

package/dist/esm/components/message-card.js

@@ -14,3 +14,4 @@ function MessageCard({ children, title, fullPage = false }) {
 export {
   MessageCard as default
 };
+//# sourceMappingURL=message-card.js.map

package/dist/esm/components/message-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/message-card.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport CardFrame from \"./card-frame\";\nimport { Text } from \"../components-core\";\n\nexport default function MessageCard(\n  { children, title, fullPage=false }: \n  { children?: React.ReactNode, title: string, fullPage?: boolean}\n) {\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center' }}>\n        <Text size=\"xl\" as='h2' style={{ marginBottom: '24px' }}>{title}</Text>\n        {children}\n      </div>\n    </CardFrame>\n  );\n}\n"],"mappings":";;;AAGA,OAAO,eAAe;AACtB,SAAS,YAAY;AAQf,SACE,KADF;AANS,SAAR,YACL,EAAE,UAAU,OAAO,WAAS,MAAM,GAElC;AACA,SACE,oBAAC,aAAU,UACT,+BAAC,SAAI,OAAO,EAAE,WAAW,SAAS,GAChC;AAAA,wBAAC,QAAK,MAAK,MAAK,IAAG,MAAK,OAAO,EAAE,cAAc,OAAO,GAAI,iBAAM;AAAA,IAC/D;AAAA,KACH,GACF;AAEJ;","names":[]}

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

@@ -5,14 +5,12 @@
 import { FaGithub, FaFacebook, FaApple } from "react-icons/fa";
 import { useStackApp } from "..";
 import { Button } from "../components-core";
-import { useDesign } from "../providers/design-provider";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconSize = 22;
 function OAuthButton({
   provider,
   type
 }) {
-  const { colors } = useDesign();
   const stackApp = useStackApp();
   let style;
   switch (provider) {
@@ -122,3 +120,4 @@ function OAuthButton({
 export {
   OAuthButton as default
 };
+//# sourceMappingURL=oauth-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { FaGithub, FaFacebook, FaApple } from 'react-icons/fa';\nimport { useStackApp } from '..';\nimport { Button } from \"../components-core\";\n\nconst iconSize = 22;\n\nexport default function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'signin' | 'signup',\n}) {\n  const stackApp = useStackApp();\n\n  let style : {\n    backgroundColor: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        name: 'Google',\n        border: '1px solid #ccc',\n        icon: (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n            <path\n              fill=\"#4285F4\"\n              d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n            />\n            <path\n              fill=\"#34A853\"\n              d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n            />\n            <path\n              fill=\"#FBBC05\"\n              d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n            />\n            <path\n              fill=\"#EA4335\"\n              d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n            />\n            <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n          </svg>\n        ),\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        border: '1px solid #444',\n        name: 'GitHub',\n        icon: (\n          <FaGithub color=\"#fff\" size={iconSize} />\n        ),\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        name: 'Facebook',\n        icon: (\n          <FaFacebook color=\"#fff\" size={iconSize} />\n        ),\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: '#000',\n        name: 'Apple',\n        icon: (\n          <FaApple color=\"#fff\" size={iconSize} />\n        ),\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        name: 'Microsoft',\n        icon: (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n            <title>{\"MS-SymbolLockup\"}</title>\n            <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n            <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n            <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n            <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n          </svg>\n        ),\n      };\n      break;\n    }\n    default: {\n      style = {\n        backgroundColor: '#000',\n        name: provider,\n        icon: null\n      };\n    }\n  }\n\n  return (\n    <Button\n      color={style.backgroundColor}\n      style={{ border: style.border }}\n      onClick={() => stackApp.signInWithOAuth(provider)}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>\n        {style.icon}\n        <span style={{ flexGrow: 1 }}>{type === 'signup' ? 'Sign up with ' : 'Sign in with '}{style.name}</span>\n        {<div style={{ visibility: 'hidden' }}>{style.icon}</div>}\n      </div>\n    </Button>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,UAAU,YAAY,eAAe;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AA0Bb,SACE,KADF;AAxBV,IAAM,WAAW;AAEF,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,MAAI;AAMJ,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MACE,qBAAC,SAAI,OAAM,8BAA6B,OAAO,UAAU,QAAQ,UAAU,SAAQ,aACjF;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,GAAE;AAAA;AAAA,UACJ;AAAA,UACA,oBAAC,UAAK,MAAK,QAAO,GAAE,iBAAgB;AAAA,WACtC;AAAA,MAEJ;AACA;AAAA,IACF;AAAA,IACA,KAAK,UAAU;AACb,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MACE,oBAAC,YAAS,OAAM,QAAO,MAAM,UAAU;AAAA,MAE3C;AACA;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,oBAAC,cAAW,OAAM,QAAO,MAAM,UAAU;AAAA,MAE7C;AACA;AAAA,IACF;AAAA,IACA,KAAK,SAAS;AACZ,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,oBAAC,WAAQ,OAAM,QAAO,MAAM,UAAU;AAAA,MAE1C;AACA;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,qBAAC,SAAI,OAAM,8BAA6B,OAAO,UAAU,QAAQ,UAAU,SAAQ,aACjF;AAAA,8BAAC,WAAO,6BAAkB;AAAA,UAC1B,oBAAC,UAAK,MAAK,WAAU,GAAE,eAAc;AAAA,UACrC,oBAAC,UAAK,MAAK,WAAU,GAAE,gBAAe;AAAA,UACtC,oBAAC,UAAK,MAAK,WAAU,GAAE,iBAAgB;AAAA,UACvC,oBAAC,UAAK,MAAK,WAAU,GAAE,kBAAiB;AAAA,WAC1C;AAAA,MAEJ;AACA;AAAA,IACF;AAAA,IACA,SAAS;AACP,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,SAAS,gBAAgB,QAAQ;AAAA,MAEhD,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,OAAO,GAChE;AAAA,cAAM;AAAA,QACP,qBAAC,UAAK,OAAO,EAAE,UAAU,EAAE,GAAI;AAAA,mBAAS,WAAW,kBAAkB;AAAA,UAAiB,MAAM;AAAA,WAAK;AAAA,QAChG,oBAAC,SAAI,OAAO,EAAE,YAAY,SAAS,GAAI,gBAAM,MAAK;AAAA,SACrD;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -6,12 +6,14 @@ import { useStackApp } from "../lib/hooks";
 import OAuthButton from "./oauth-button";
 import { jsx } from "react/jsx-runtime";
 function OAuthGroup({
-  type
+  type,
+  mockProject
 }) {
   const stackApp = useStackApp();
-  const project = stackApp.useProject();
+  const project = mockProject || stackApp.useProject();
   return /* @__PURE__ */ jsx("div", { style: { gap: "16px", display: "flex", flexDirection: "column", alignItems: "stretch" }, children: project.oauthProviders.filter((p) => p.enabled).map((p) => /* @__PURE__ */ jsx(OAuthButton, { provider: p.id, type }, p.id)) });
 }
 export {
   OAuthGroup as default
 };
+//# sourceMappingURL=oauth-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/oauth-group.tsx"],"sourcesContent":["'use client';\n\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\nimport { useStackApp } from \"../lib/hooks\";\nimport OAuthButton from \"./oauth-button\";\n\nexport default function OAuthGroup({\n  type,\n  mockProject,\n}: {\n  type: 'signin' | 'signup',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const project = mockProject || stackApp.useProject();\n\n  return (\n    <div style={{ gap: '16px', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      {project.oauthProviders.filter(p => p.enabled).map(p => (\n        <OAuthButton key={p.id} provider={p.id} type={type}/>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AAehB;AAbO,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,SACE,oBAAC,SAAI,OAAO,EAAE,KAAK,QAAQ,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GACxF,kBAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,IAAI,OACjD,oBAAC,eAAuB,UAAU,EAAE,IAAI,QAAtB,EAAE,EAA+B,CACpD,GACH;AAEJ;","names":[]}

package/dist/esm/components/password-field.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var getIconStyle = (colors) => `
   color: ${colors.light.secondaryColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${colors.dark.secondaryColor};
   }
 `;
@@ -80,3 +80,4 @@ var password_field_default = PasswordField;
 export {
   password_field_default as default
 };
+//# sourceMappingURL=password-field.js.map

package/dist/esm/components/password-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { Input } from \"../components-core\";\nimport { forwardRef, useRef, useState } from 'react';\nimport { HiEye, HiEyeOff } from 'react-icons/hi';\nimport { useDesign } from \"..\";\nimport styled from \"styled-components\";\nimport { ColorPalette } from \"../providers/design-provider\";\n\nconst getIconStyle = (colors: ColorPalette) => `\n  color: ${colors.light.secondaryColor};\n\n  html[data-stack-theme='dark'] & {\n    color: ${colors.dark.secondaryColor};\n  }\n`;\nconst StyledEyeOff = styled(HiEyeOff)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\nconst StyledEye = styled(HiEye)<{ colors: ColorPalette }>`${props => getIconStyle(props.colors)}`;\n\nconst PasswordField = forwardRef<\n  HTMLInputElement, \n  React.InputHTMLAttributes<HTMLInputElement>\n>(({ id, name, ...props }, ref) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const { colors } = useDesign();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const mergeRef = (node: HTMLInputElement) => {\n    if (ref) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else {\n        ref.current = node;\n      }\n    }\n    inputRef.current = node;\n  };\n\n  const onClickReveal = () => {\n    setIsOpen(!isOpen);\n    const currentInput = inputRef.current;\n    if (currentInput) {\n      currentInput.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative', display: 'flex' }}>\n      <Input\n        id={id}\n        ref={mergeRef}\n        name={name}\n        type={isOpen ? 'text' : 'password'}\n        autoComplete=\"current-password\"\n        required\n        style={{ flex: 1 }}\n        {...props}\n      />\n      <button\n        tabIndex={-1}\n        type=\"button\"\n        style={{ \n          position: 'absolute', \n          backgroundColor: 'transparent',\n          border: 'none',\n          top: 0, \n          right: 0, \n          bottom: 0, \n          display: 'flex', \n          alignItems: 'center', \n          paddingRight: '12px' \n        }}\n        onClick={onClickReveal}\n        aria-label={isOpen ? 'Mask password' : 'Reveal password'}\n      >\n        {isOpen ? <StyledEyeOff colors={colors} /> : <StyledEye colors={colors} />}\n      </button>\n    </div>\n  );\n});\n\nPasswordField.displayName = 'PasswordField';\n\nexport default PasswordField;\n"],"mappings":";;;AAEA,SAAS,aAAa;AACtB,SAAS,YAAY,QAAQ,gBAAgB;AAC7C,SAAS,OAAO,gBAAgB;AAChC,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAyCf,SACE,KADF;AAtCJ,IAAM,eAAe,CAAC,WAAyB;AAAA,WACpC,OAAO,MAAM,cAAc;AAAA;AAAA;AAAA,aAGzB,OAAO,KAAK,cAAc;AAAA;AAAA;AAGvC,IAAM,eAAe,OAAO,QAAQ,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACrG,IAAM,YAAY,OAAO,KAAK,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE/F,IAAM,gBAAgB,WAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,WAAW,CAAC,SAA2B;AAC3C,QAAI,KAAK;AACP,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,OAAO;AACL,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AACA,aAAS,UAAU;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,cAAU,CAAC,MAAM;AACjB,UAAM,eAAe,SAAS;AAC9B,QAAI,cAAc;AAChB,mBAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IAC5C;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,SAAS,OAAO,GAClD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,MAAM,SAAS,SAAS;AAAA,QACxB,cAAa;AAAA,QACb,UAAQ;AAAA,QACR,OAAO,EAAE,MAAM,EAAE;AAAA,QAChB,GAAG;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,SAAS,kBAAkB;AAAA,QAEtC,mBAAS,oBAAC,gBAAa,QAAgB,IAAK,oBAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":[]}

package/dist/esm/components/password-reset-inner.js

@@ -91,3 +91,4 @@ function PasswordResetInner({ code, fullPage = false }) {
 export {
   PasswordResetInner as default
 };
+//# sourceMappingURL=password-reset-inner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/password-reset-inner.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport RedirectMessageCard from \"./redirect-message-card\";\nimport MessageCard from \"./message-card\";\nimport CardFrame from \"./card-frame\";\nimport { Button, Label, Text } from \"../components-core\";\n\n\nexport default function PasswordResetInner(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const [passwordRepeat, setPasswordRepeat] = useState('');\n  const [passwordRepeatError, setPasswordRepeatError] = useState('');\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n  const stackApp = useStackApp();\n\n  const onSubmit = async () => {\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    if (!passwordRepeat) {\n      setPasswordRepeatError('Please repeat your password');\n      return;\n    }\n    if (password !== passwordRepeat) {\n      setPasswordRepeatError('Passwords do not match');\n      return;\n    }\n\n    const passwordError = getPasswordError(password);\n    if (passwordError) {\n      setPasswordError(passwordError.message);\n      return;\n    }\n\n    const errorCode = await stackApp.resetPassword({ password, code });\n    \n    // this should not happen, the outer component should verify the code before rendering this component\n    if (errorCode) {\n      setResetError(true);\n      return;\n    }\n\n    setFinished(true);\n  };\n\n  if (finished) {\n    return <RedirectMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        <Text>Failed to reset password. Please request a new password reset link</Text>\n      </MessageCard>\n    );\n  }\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>Reset Your Password</Text>\n      </div>\n\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n        <Label htmlFor=\"password\">New Password</Label>\n        <PasswordField\n          id=\"password\"\n          name=\"password\"\n          value={password}\n          onChange={(e) => {\n            setPassword(e.target.value);\n            setPasswordError('');\n            setPasswordRepeatError('');\n          }}\n        />\n        <FormWarningText text={passwordError} />\n\n        <Label htmlFor=\"repeat-password\" style={{ marginTop: \"1rem\" }}>Repeat New Password</Label>\n        <PasswordField\n          id=\"repeat-password\"\n          name=\"repeat-password\"\n          value={passwordRepeat}\n          onChange={(e) => {\n            setPasswordRepeat(e.target.value);\n            setPasswordError('');\n            setPasswordRepeatError('');\n          }}\n        />\n        <FormWarningText text={passwordRepeatError} />\n\n        <Button style={{ marginTop: '1.5rem' }} onClick={() => onSubmit()}>\n          Reset Password\n        </Button>\n      </div>\n    </CardFrame>\n  ); \n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,qBAAqB;AAC5B,OAAO,yBAAyB;AAChC,OAAO,iBAAiB;AACxB,OAAO,eAAe;AACtB,SAAS,QAAQ,OAAO,YAAY;AA+CzB,cAiBL,YAjBK;AA5CI,SAAR,mBACL,EAAE,MAAM,WAAW,MAAM,GAEzB;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AACvD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,EAAE;AACjE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,UAAU;AACb,uBAAiB,4BAA4B;AAC7C;AAAA,IACF;AACA,QAAI,CAAC,gBAAgB;AACnB,6BAAuB,6BAA6B;AACpD;AAAA,IACF;AACA,QAAI,aAAa,gBAAgB;AAC/B,6BAAuB,wBAAwB;AAC/C;AAAA,IACF;AAEA,UAAMA,iBAAgB,iBAAiB,QAAQ;AAC/C,QAAIA,gBAAe;AACjB,uBAAiBA,eAAc,OAAO;AACtC;AAAA,IACF;AAEA,UAAM,YAAY,MAAM,SAAS,cAAc,EAAE,UAAU,KAAK,CAAC;AAGjE,QAAI,WAAW;AACb,oBAAc,IAAI;AAClB;AAAA,IACF;AAEA,gBAAY,IAAI;AAAA,EAClB;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,uBAAoB,MAAK,iBAAgB,UAAoB;AAAA,EACvE;AAEA,MAAI,YAAY;AACd,WACE,oBAAC,eAAY,OAAM,4BAA2B,UAC5C,8BAAC,QAAK,gFAAkE,GAC1E;AAAA,EAEJ;AAEA,SACE,qBAAC,aAAU,UACT;AAAA,wBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD,8BAAC,QAAK,MAAK,MAAK,IAAG,MAAK,iCAAmB,GAC7C;AAAA,IAEA,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,0BAAC,SAAM,SAAQ,YAAW,0BAAY;AAAA,MACtC;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AACf,wBAAY,EAAE,OAAO,KAAK;AAC1B,6BAAiB,EAAE;AACnB,mCAAuB,EAAE;AAAA,UAC3B;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,mBAAgB,MAAM,eAAe;AAAA,MAEtC,oBAAC,SAAM,SAAQ,mBAAkB,OAAO,EAAE,WAAW,OAAO,GAAG,iCAAmB;AAAA,MAClF;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AACf,8BAAkB,EAAE,OAAO,KAAK;AAChC,6BAAiB,EAAE;AACnB,mCAAuB,EAAE;AAAA,UAC3B;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,mBAAgB,MAAM,qBAAqB;AAAA,MAE5C,oBAAC,UAAO,OAAO,EAAE,WAAW,SAAS,GAAG,SAAS,MAAM,SAAS,GAAG,4BAEnE;AAAA,OACF;AAAA,KACF;AAEJ;","names":["passwordError"]}

package/dist/esm/components/redirect-message-card.js

@@ -15,44 +15,42 @@ function RedirectMessageCard({
   const stackApp = useStackApp();
   const router = useRouter();
   let title;
-  let primaryUrl;
-  let secondaryUrl = null;
+  let primaryAction;
   let message = null;
   let primaryButton;
   let secondaryButton = null;
   switch (type) {
     case "signedIn": {
       title = "You are already signed in";
-      primaryUrl = stackApp.urls.home;
-      secondaryUrl = stackApp.urls.signOut;
+      primaryAction = () => stackApp.redirectToAfterSignOut();
       primaryButton = "Go to Home";
       secondaryButton = "Sign Out";
       break;
     }
     case "signedOut": {
       title = "You are not currently signed in.";
-      primaryUrl = stackApp.urls.home;
+      primaryAction = () => stackApp.redirectToSignIn();
       primaryButton = "Go to Home";
       break;
     }
     case "emailSent": {
       title = "Email sent!";
       message = "Please check your inbox. Make sure to check your spam folder.";
-      primaryUrl = stackApp.urls.home;
+      primaryAction = () => neverResolve();
       primaryButton = "Go to Home";
       break;
     }
     case "passwordReset": {
       title = "Password reset successfully!";
       message = "Your password has been reset. You can now sign in with your new password.";
-      primaryUrl = stackApp.urls.signIn;
+      primaryAction = () => stackApp.redirectToSignIn();
       primaryButton = "Go to Sign In";
       break;
     }
     case "emailVerified": {
       title = "Email verified!";
       message = "Your have successfully verified your email.";
-      primaryUrl = stackApp.urls.home;
+      primaryAction = () => stackApp.redirectToSignIn();
       primaryButton = "Go to Home";
       break;
     }
@@ -65,19 +63,16 @@ function RedirectMessageCard({
         {
           variant: "secondary",
           onClick: async () => {
-            router.push(stackApp.urls.signOut.toString());
-            await neverResolve();
+            await stackApp.redirectToSignOut();
           },
           children: secondaryButton
         }
       ),
-      /* @__PURE__ */ jsx(Button, { onClick: async () => {
-        router.push(primaryUrl.toString());
-        await neverResolve();
-      }, children: primaryButton })
+      /* @__PURE__ */ jsx(Button, { onClick: primaryAction, children: primaryButton })
     ] })
   ] });
 }
 export {
   RedirectMessageCard as default
 };
+//# sourceMappingURL=redirect-message-card.js.map

package/dist/esm/components/redirect-message-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/redirect-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport { useStackApp } from \"..\";\nimport MessageCard from \"./message-card\";\nimport { Text, Button } from \"../components-core\";\nimport { neverResolve, wait } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nexport default function RedirectMessageCard({ \n  type,\n  fullPage=false,\n}: { \n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified',\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n  const router = useRouter();\n\n  let title: string;\n  let primaryAction: () => Promise<void>;\n  let message: string | null = null;\n  let primaryButton: string;\n  let secondaryButton: string | null = null;\n  switch (type) {\n    case 'signedIn': {\n      title = \"You are already signed in\";\n      primaryAction = () => stackApp.redirectToAfterSignOut();\n      primaryButton = \"Go to Home\";\n      secondaryButton = \"Sign Out\";\n      break;\n    }\n    case 'signedOut': {\n      title = \"You are not currently signed in.\";\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Go to Home\";\n      break;\n    }\n    case 'emailSent': {\n      title = \"Email sent!\";\n      message = 'Please check your inbox. Make sure to check your spam folder.';\n      primaryAction = () => neverResolve();\n      primaryButton = \"Go to Home\";\n      break;\n    }\n    case 'passwordReset': {\n      title = \"Password reset successfully!\";\n      message = 'Your password has been reset. You can now sign in with your new password.';\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Go to Sign In\";\n      break;\n    }\n    case 'emailVerified': {\n      title = \"Email verified!\";\n      message = 'Your have successfully verified your email.';\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = \"Go to Home\";\n      break;\n    }\n  }\n\n  return (\n    <MessageCard title={title} fullPage={fullPage}>\n      {message && <Text>{message}</Text>}\n\n      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '16px', marginTop: 20 }}>\n        {secondaryButton && (\n          <Button\n            variant=\"secondary\"\n            onClick={async () => {\n              await stackApp.redirectToSignOut();\n            }}\n          >\n            {secondaryButton}\n          </Button>\n        )}\n        \n        <Button onClick={primaryAction}>\n          {primaryButton}\n        </Button>\n      </div>\n    </MessageCard>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,OAAO,iBAAiB;AACxB,SAAS,MAAM,cAAc;AAC7B,SAAS,oBAA0B;AAwDjB,cAEZ,YAFY;AAtDH,SAAR,oBAAqC;AAAA,EAC1C;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,UAAU;AAEzB,MAAI;AACJ,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI;AACJ,MAAI,kBAAiC;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ;AACR,sBAAgB,MAAM,SAAS,uBAAuB;AACtD,sBAAgB;AAChB,wBAAkB;AAClB;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AACR,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,aAAa;AACnC,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB;AAChB;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ;AACR,gBAAU;AACV,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB;AAChB;AAAA,IACF;AAAA,EACF;AAEA,SACE,qBAAC,eAAY,OAAc,UACxB;AAAA,eAAW,oBAAC,QAAM,mBAAQ;AAAA,IAE3B,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,OAAO,YAAY,UAAU,gBAAgB,UAAU,KAAK,QAAQ,WAAW,GAAG,GAC7H;AAAA,yBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,YAAY;AACnB,kBAAM,SAAS,kBAAkB;AAAA,UACnC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAGF,oBAAC,UAAO,SAAS,eACd,yBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/separator-with-text.js

@@ -14,3 +14,4 @@ function SeparatorWithText({ text }) {
 export {
   SeparatorWithText as default
 };
+//# sourceMappingURL=separator-with-text.js.map

package/dist/esm/components/separator-with-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/separator-with-text.tsx"],"sourcesContent":["'use client';\n\nimport { Separator, Text } from \"../components-core\";\n\nexport default function SeparatorWithText({ text }: { text: string }) {\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '1.5rem', marginBottom: '1.5rem' }}>\n      <div style={{ flex: 1 }}>\n        <Separator />\n      </div>\n      <Text style={{ padding: '0 16px' }} variant=\"secondary\" size='sm'>{text}</Text>\n      <div style={{ flex: 1 }}>\n        <Separator />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,WAAW,YAAY;AAI5B,SAEI,KAFJ;AAFW,SAAR,kBAAmC,EAAE,KAAK,GAAqB;AACpE,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,UAAU,WAAW,UAAU,cAAc,SAAS,GACzH;AAAA,wBAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB,8BAAC,aAAU,GACb;AAAA,IACA,oBAAC,QAAK,OAAO,EAAE,SAAS,SAAS,GAAG,SAAQ,aAAY,MAAK,MAAM,gBAAK;AAAA,IACxE,oBAAC,SAAI,OAAO,EAAE,MAAM,EAAE,GACpB,8BAAC,aAAU,GACb;AAAA,KACF;AAEJ;","names":[]}

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

@@ -12,3 +12,4 @@ function UserAvatar(props) {
 export {
   UserAvatar as default
 };
+//# sourceMappingURL=user-avatar.js.map

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

@@ -0,0 +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":[]}

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

@@ -22,7 +22,7 @@ var icons = typedFromEntries(typedEntries({
   const styledComponent = styled(value)`
     color: ${SECONDARY_FONT_COLORS.light};
 
-    html[data-theme='dark'] & {
+    html[data-stack-theme='dark'] & {
       color: ${SECONDARY_FONT_COLORS.dark};
     }
   `;
@@ -131,3 +131,4 @@ function UserButtonInnerInner(props) {
 export {
   UserButton as default
 };
+//# sourceMappingURL=user-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Avatar, AvatarImage, AvatarFallback, Button, Skeleton, CurrentUser } from \"..\";\nimport { RxPerson, RxEnter, RxHalf2, RxFilePlus, RxPencil2 } from \"react-icons/rx\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { SECONDARY_FONT_COLORS } from \"../utils/constants\";\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\";\n\nconst icons = typedFromEntries(typedEntries({\n  RxPencil2,\n  RxPerson,\n  RxEnter,\n  RxHalf2,\n  RxFilePlus\n} as const).map(([key, value]) => {\n  const styledComponent = styled(value)`\n    color: ${SECONDARY_FONT_COLORS.light};\n\n    html[data-stack-theme='dark'] & {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\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={() => runAsynchronously(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  };\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 variant=\"secondary\">Not signed in</Text>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => runAsynchronously(router.push(app.urls.accountSettings))}\n          icon={icons.RxPerson}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => runAsynchronously(router.push(app.urls.signIn))}\n          icon={icons.RxPerson}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => runAsynchronously(router.push(app.urls.signUp))}\n          icon={icons.RxPencil2}\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.RxHalf2}\n          />\n        )}\n        {user && <Item \n          text=\"Sign out\" \n          onClick={() => user.signOut()} \n          icon={icons.RxEnter}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -32,7 +32,7 @@ var StyledAvatarFallback = styled(AvatarPrimitive.Fallback)`
   
   background-color: ${({ $colors }) => $colors.light.secondaryColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${({ $colors }) => $colors.dark.secondaryColor};
   }
 `;
@@ -54,3 +54,4 @@ export {
   AvatarFallback,
   AvatarImage
 };
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport styled from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root)`\n  position: relative;\n  display: flex;\n  height: 2rem;\n  width: 2rem;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n`;\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <StyledAvatar ref={ref} className={className} {...props} />\n));\nAvatar.displayName = 'Avatar';\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image)`\n  aspect-ratio: 1 / 1;\n  height: 100%;\n  width: 100%;\n`;\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <StyledAvatarImage ref={ref} className={className} {...props} />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback)<{\n  $colors: ColorPalette,\n}>`\n  display: flex;\n  height: 100%;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  \n  background-color: ${({ $colors }) => $colors.light.secondaryColor};\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${({ $colors }) => $colors.dark.secondaryColor};\n  }\n`;\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => {\n  const { colors } = useDesign();\n  return <StyledAvatarFallback \n    ref={ref} \n    className={className} \n    $colors={colors}\n    {...props} \n  />;\n});\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport { Avatar, AvatarImage, AvatarFallback };\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAiBxB;AAdF,IAAM,eAAe,OAAuB,oBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhD,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,gBAAa,KAAU,WAAuB,GAAG,OAAO,CAC1D;AACD,OAAO,cAAc;AAErB,IAAM,oBAAoB,OAAuB,qBAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,qBAAkB,KAAU,WAAuB,GAAG,OAAO,CAC/D;AACD,YAAY,cAAc;AAE1B,IAAM,uBAAuB,OAAuB,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUtC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,cAAc;AAAA;AAAA;AAAA,wBAG3C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,cAAc;AAAA;AAAA;AAIpE,IAAM,iBAAuB,iBAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AACF,CAAC;AACD,eAAe,cAAc;","names":[]}

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

@@ -116,7 +116,7 @@ var StyledButton = styled.button`
     }
   }
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${(props) => props.$colors.dark.bgColor};
     color: ${(props) => props.$colors.dark.textColor};
     &:not([disabled]) {
@@ -152,8 +152,8 @@ var Button = React.forwardRef(
         $colors: { dark, light },
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", visibility: loading ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(LoadingIndicator, { color: { light: light.textColor, dark: dark.textColor } }) }),
-          /* @__PURE__ */ jsx("div", { style: { visibility: loading ? "hidden" : "visible" }, children: props.children })
+          /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", visibility: loading ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(LoadingIndicator, { color: { light: light.textColor, dark: dark.textColor } }) }),
+          /* @__PURE__ */ jsx("span", { style: { visibility: loading ? "hidden" : "visible", whiteSpace: "nowrap" }, children: props.children })
         ]
       }
     );
@@ -163,3 +163,4 @@ Button.displayName = "Button";
 export {
   Button
 };
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +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":[]}

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

@@ -14,7 +14,7 @@ var StyledCard = styled.div`
   border: 1px solid ${(props) => props.$colors.light.neutralColor};
   background-color: ${(props) => props.$colors.light.backgroundColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     border-color: ${(props) => props.$colors.dark.neutralColor};
     background-color: ${(props) => props.$colors.dark.backgroundColor};
   }
@@ -49,3 +49,4 @@ export {
   CardFooter,
   CardHeader
 };
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\";\nimport styled from \"styled-components\";\nimport { useDesign } from \"..\";\nimport { ColorPalette } from \"../providers/design-provider\";\n\nconst StyledCard = styled.div<{ \n  $colors: ColorPalette,\n}>`\n  border-radius: 0.5rem;\n  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);\n  padding: 1.5rem;\n\n  border: 1px solid ${props => props.$colors.light.neutralColor};\n  background-color: ${props => props.$colors.light.backgroundColor};\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${props => props.$colors.dark.neutralColor};\n    background-color: ${props => props.$colors.dark.backgroundColor};\n  }\n`;\n\nconst StyledCardHeader = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-bottom: 1.5rem;\n`;\n\nconst StyledCardContent = styled.div`\n`;\n\nconst StyledCardFooter = styled.div`\n  display: flex;\n  align-items: center;\n  margin-top: 1.5rem;\n`;\n\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => {\n  const { colors } = useDesign();\n  return <StyledCard ref={ref} {...props} $colors={colors} />;\n});\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (\n  <StyledCardHeader ref={ref} {...props} />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (\n  <StyledCardContent ref={ref} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (\n  <StyledCardFooter ref={ref} {...props} />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport { \n  Card, \n  CardHeader, \n  CardFooter, \n  CardContent,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,SAAS,iBAAiB;AAqCjB;AAlCT,IAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOJ,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,sBACzC,WAAS,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG9C,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,wBACpC,WAAS,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAInE,IAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,IAAM,oBAAoB,OAAO;AAAA;AAGjC,IAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,IAAM,OAAa,iBAAiE,CAAC,OAAO,QAAQ;AAClG,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO,oBAAC,cAAW,KAAW,GAAG,OAAO,SAAS,QAAQ;AAC3D,CAAC;AACD,KAAK,cAAc;AAEnB,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,oBAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;AAEzB,IAAM,cAAoB,iBAAiE,CAAC,OAAO,QACjG,oBAAC,qBAAkB,KAAW,GAAG,OAAO,CACzC;AACD,YAAY,cAAc;AAE1B,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,oBAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;","names":[]}

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

@@ -11,3 +11,4 @@ export {
   CollapsibleContent2 as CollapsibleContent,
   CollapsibleTrigger2 as CollapsibleTrigger
 };
+//# sourceMappingURL=collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\nconst Collapsible = CollapsiblePrimitive.Root;\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":";;;AAEA,YAAY,0BAA0B;AAEtC,IAAM,cAAmC;AACzC,IAAMA,sBAA0C;AAChD,IAAMC,sBAA0C;","names":["CollapsibleTrigger","CollapsibleContent"]}

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

@@ -33,3 +33,4 @@ function Container({
 export {
   Container
 };
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/container.tsx"],"sourcesContent":["'use client';\n\nimport { useDesign } from \"../providers/design-provider\";\nimport styled from 'styled-components';\n\ntype ContainerProps = {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number,\n} & Omit<React.HTMLProps<HTMLDivElement>, 'size'>\n\nconst OuterContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  width: 100%;\n`;\n\nconst InnerContainer = styled.div<{ $breakpoint: number }>`\n  width: 100%;\n  @media (min-width: ${props => props.$breakpoint}px) {\n    width: ${props => props.$breakpoint}px;\n  }\n`;\n\nexport function Container({\n  size='md',\n  ...props\n} : ContainerProps) {\n  const { breakpoints } = useDesign();\n  return (\n    <OuterContainer>\n      <InnerContainer\n        $breakpoint={typeof size === 'number' ? size : breakpoints[size]}\n        {...props}\n      >\n        {props.children}\n      </InnerContainer>\n    </OuterContainer>\n  );\n}"],"mappings":";;;AAEA,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AA0Bb;AApBN,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM9B,IAAM,iBAAiB,OAAO;AAAA;AAAA,uBAEP,WAAS,MAAM,WAAW;AAAA,aACpC,WAAS,MAAM,WAAW;AAAA;AAAA;AAIhC,SAAS,UAAU;AAAA,EACxB,OAAK;AAAA,EACL,GAAG;AACL,GAAoB;AAClB,QAAM,EAAE,YAAY,IAAI,UAAU;AAClC,SACE,oBAAC,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,OAAO,SAAS,WAAW,OAAO,YAAY,IAAI;AAAA,MAC9D,GAAG;AAAA,MAEH,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

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

@@ -28,7 +28,7 @@ var StyledContent = styled(DropdownMenuPrimitive.Content)`
   border: 1px solid ${({ $colors }) => $colors.light.neutralColor};
   background: ${({ $colors }) => $colors.light.backgroundColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     border-color: ${({ $colors }) => $colors.dark.neutralColor};
     background: ${({ $colors }) => $colors.dark.backgroundColor};
   }
@@ -65,7 +65,7 @@ var StyledItem = styled(DropdownMenuPrimitive.Item)`
     background-color: ${SELECTED_BACKGROUND_COLORS.light};
   }
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     &:hover {
       background-color: ${SELECTED_BACKGROUND_COLORS.dark};
     }
@@ -87,7 +87,7 @@ var StyledSeparator = styled(DropdownMenuPrimitive.Separator)`
   height: 1px;
   background-color: ${({ $colors }) => $colors.light.neutralColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${({ $colors }) => $colors.dark.neutralColor};
   }
 `;
@@ -104,3 +104,4 @@ export {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 };
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useDesign } from '..';\nimport { SELECTED_BACKGROUND_COLORS } from '../utils/constants';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst StyledTrigger = styled(DropdownMenuPrimitive.Trigger)`\n  all: unset;\n  &:focus {\n    outline: none;\n    box-shadow: 0;\n  }\n`;\n\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <StyledTrigger ref={ref} {...props} />\n));\n\nconst StyledContent = styled(DropdownMenuPrimitive.Content)<{\n  $colors: ColorPalette,\n}>`\n  z-index: 50;\n  min-width: 8rem;\n  overflow: hidden;\n  border-radius: 4px;\n  padding: 0.25rem;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n  border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n  background: ${({ $colors }) => $colors.light.backgroundColor};\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${({ $colors }) => $colors.dark.neutralColor};\n    background: ${({ $colors }) => $colors.dark.backgroundColor};\n  }\n`;\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => {\n  const { colors } = useDesign();\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <StyledContent \n        $colors={colors}\n        sideOffset={sideOffset} \n        ref={ref} \n        {...props}  \n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nconst StyledItem = styled(DropdownMenuPrimitive.Item)<{ \n  $inset?: boolean,\n}>`\n  display: flex;\n  cursor: default;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  outline: none;\n  transition: color 0.2s ease;\n  &:focus {\n    background-color: var(--accent);\n    color: var(--accent-foreground);\n  }\n  ${({ $inset }) => $inset && 'padding-left: 2rem;'}\n\n  &:hover {\n    background-color: ${SELECTED_BACKGROUND_COLORS.light};\n  }\n\n  html[data-stack-theme='dark'] & {\n    &:hover {\n      background-color: ${SELECTED_BACKGROUND_COLORS.dark};\n    }\n  }\n`;\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean,\n  }\n>(({ className, inset, ...props }, ref) => {\n  return <StyledItem ref={ref} {...props} $inset={inset} />;\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nconst StyledLabel = styled(DropdownMenuPrimitive.Label)<{ inset?: boolean }>`\n  padding: 0.375rem 0.5rem;\n  font-size: 0.875rem;\n  ${({ inset }) => inset && 'padding-left: 2rem;'}\n`;\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean,\n  }\n>(({ className, inset, ...props }, ref) => (\n  <StyledLabel ref={ref} {...props} inset={inset} />\n));\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nconst StyledSeparator = styled(DropdownMenuPrimitive.Separator)<{\n  $colors: ColorPalette,\n}>`\n  margin: 0.25rem -0.25rem;\n  height: 1px;\n  background-color: ${({ $colors }) => $colors.light.neutralColor};\n\n  html[data-stack-theme='dark'] & {\n    background-color: ${({ $colors }) => $colors.dark.neutralColor};\n  }\n`;\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n  const { colors } = useDesign();\n  return <StyledSeparator ref={ref} {...props} $colors={colors} />;\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n};\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,OAAO,YAAY;AACnB,YAAY,2BAA2B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAiBzC;AAdF,IAAM,eAAqC;AAE3C,IAAM,gBAAgB,OAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,gBAAgB,OAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,gBACjD,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAG1C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,kBAC5C,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAI/D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAClD,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SACE,oBAAuB,8BAAtB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAElC,IAAM,aAAa,OAA6B,0BAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehD,CAAC,EAAE,OAAO,MAAM,UAAU,qBAAqB;AAAA;AAAA;AAAA,wBAG3B,2BAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,2BAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,oBAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,cAAc,OAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,oBAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,kBAAkB,OAA6B,+BAAS;AAAA;AAAA;AAAA,sBAKxC,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,wBAGzC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAIlE,IAAM,wBAA8B,iBAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SAAO,oBAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":[]}

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

@@ -91,3 +91,4 @@ export {
   TabsTrigger,
   Text
 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/index.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { forwardRef } from 'react';\nimport { Components, useComponents } from '../providers/component-provider';\nimport type { Button as StaticButton } from './button';\nimport { useAsyncCallbackWithLoggedError } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\n\nexport const Button = forwardRef<\n  HTMLButtonElement, \n  React.ComponentProps<typeof StaticButton>\n>((props, ref) => {\n  const { Button } = useComponents();\n  const [onClick, onClickLoading] = useAsyncCallbackWithLoggedError(async () => {\n    return await props.onClick?.();\n  }, [props.onClick]);\n\n  return <Button\n    {...props}\n    onClick={props.onClick && onClick}\n    loading={props.loading || onClickLoading}\n    disabled={props.disabled || onClickLoading}\n    ref={ref}\n  />;\n});\n\nfunction createDynamicComponent<T extends keyof typeof Components>(\n  component: T\n): React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<React.ComponentProps<typeof Components[T]>> & \n  React.RefAttributes<React.ElementRef<typeof Components[T]>>\n> {\n  return forwardRef<\n    React.ElementRef<typeof Components[T]>,\n    React.ComponentProps<typeof Components[T]>\n  >((props, ref) => {\n    const Component = useComponents()[component] as any;\n    return <Component {...props} ref={ref} />;\n  });\n};\n\nexport const Input = createDynamicComponent('Input');\nexport const Container = createDynamicComponent('Container');\nexport const Separator = createDynamicComponent('Separator');\nexport const Label = createDynamicComponent('Label');\nexport const Link = createDynamicComponent('Link');\nexport const Text = createDynamicComponent('Text');\nexport const Popover = createDynamicComponent('Popover');\nexport const PopoverTrigger = createDynamicComponent('PopoverTrigger');\nexport const PopoverContent = createDynamicComponent('PopoverContent');\nexport const DropdownMenu = createDynamicComponent('DropdownMenu');\nexport const DropdownMenuTrigger = createDynamicComponent('DropdownMenuTrigger');\nexport const DropdownMenuContent = createDynamicComponent('DropdownMenuContent');\nexport const DropdownMenuItem = createDynamicComponent('DropdownMenuItem');\nexport const DropdownMenuLabel = createDynamicComponent('DropdownMenuLabel');\nexport const DropdownMenuSeparator = createDynamicComponent('DropdownMenuSeparator');\nexport const Avatar = createDynamicComponent('Avatar');\nexport const AvatarFallback = createDynamicComponent('AvatarFallback');\nexport const AvatarImage = createDynamicComponent('AvatarImage');\nexport const Collapsible = createDynamicComponent('Collapsible');\nexport const CollapsibleTrigger = createDynamicComponent('CollapsibleTrigger');\nexport const CollapsibleContent = createDynamicComponent('CollapsibleContent');\nexport const Card = createDynamicComponent('Card');\nexport const CardHeader = createDynamicComponent('CardHeader');\nexport const CardContent = createDynamicComponent('CardContent');\nexport const CardFooter = createDynamicComponent('CardFooter');\nexport const Tabs = createDynamicComponent('Tabs');\nexport const TabsList = createDynamicComponent('TabsList');\nexport const TabsContent = createDynamicComponent('TabsContent');\nexport const TabsTrigger = createDynamicComponent('TabsTrigger');\nexport const Skeleton = createDynamicComponent('Skeleton');\n"],"mappings":";;;AAGA,SAAS,kBAAkB;AAC3B,SAAqB,qBAAqB;AAE1C,SAAS,uCAAuC;AAWvC;AATF,IAAM,SAAS,WAGpB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,QAAAA,QAAO,IAAI,cAAc;AACjC,QAAM,CAAC,SAAS,cAAc,IAAI,gCAAgC,YAAY;AAC5E,WAAO,MAAM,MAAM,UAAU;AAAA,EAC/B,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AAAA,IAACA;AAAA,IAAA;AAAA,MACL,GAAG;AAAA,MACJ,SAAS,MAAM,WAAW;AAAA,MAC1B,SAAS,MAAM,WAAW;AAAA,MAC1B,UAAU,MAAM,YAAY;AAAA,MAC5B;AAAA;AAAA,EACF;AACF,CAAC;AAED,SAAS,uBACP,WAIA;AACA,SAAO,WAGL,CAAC,OAAO,QAAQ;AAChB,UAAM,YAAY,cAAc,EAAE,SAAS;AAC3C,WAAO,oBAAC,aAAW,GAAG,OAAO,KAAU;AAAA,EACzC,CAAC;AACH;AAEO,IAAM,QAAQ,uBAAuB,OAAO;AAC5C,IAAM,YAAY,uBAAuB,WAAW;AACpD,IAAM,YAAY,uBAAuB,WAAW;AACpD,IAAM,QAAQ,uBAAuB,OAAO;AAC5C,IAAM,OAAO,uBAAuB,MAAM;AAC1C,IAAM,OAAO,uBAAuB,MAAM;AAC1C,IAAM,UAAU,uBAAuB,SAAS;AAChD,IAAM,iBAAiB,uBAAuB,gBAAgB;AAC9D,IAAM,iBAAiB,uBAAuB,gBAAgB;AAC9D,IAAM,eAAe,uBAAuB,cAAc;AAC1D,IAAM,sBAAsB,uBAAuB,qBAAqB;AACxE,IAAM,sBAAsB,uBAAuB,qBAAqB;AACxE,IAAM,mBAAmB,uBAAuB,kBAAkB;AAClE,IAAM,oBAAoB,uBAAuB,mBAAmB;AACpE,IAAM,wBAAwB,uBAAuB,uBAAuB;AAC5E,IAAM,SAAS,uBAAuB,QAAQ;AAC9C,IAAM,iBAAiB,uBAAuB,gBAAgB;AAC9D,IAAM,cAAc,uBAAuB,aAAa;AACxD,IAAM,cAAc,uBAAuB,aAAa;AACxD,IAAM,qBAAqB,uBAAuB,oBAAoB;AACtE,IAAM,qBAAqB,uBAAuB,oBAAoB;AACtE,IAAM,OAAO,uBAAuB,MAAM;AAC1C,IAAM,aAAa,uBAAuB,YAAY;AACtD,IAAM,cAAc,uBAAuB,aAAa;AACxD,IAAM,aAAa,uBAAuB,YAAY;AACtD,IAAM,OAAO,uBAAuB,MAAM;AAC1C,IAAM,WAAW,uBAAuB,UAAU;AAClD,IAAM,cAAc,uBAAuB,aAAa;AACxD,IAAM,cAAc,uBAAuB,aAAa;AACxD,IAAM,WAAW,uBAAuB,UAAU;","names":["Button"]}

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

@@ -43,7 +43,7 @@ var StyledInput = styled.input`
     color: ${PRIMARY_FONT_COLORS.light};
   }
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     border-color: ${(props) => props.$colors.dark.neutralColor};
     color: ${PRIMARY_FONT_COLORS.dark};
     &::placeholder {
@@ -78,3 +78,4 @@ Input.displayName = "Input";
 export {
   Input
 };
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/input.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { ColorPalette, useDesign } from \"../providers/design-provider\";\nimport styled from 'styled-components';\nimport { BORDER_RADIUS, FONT_FAMILY, FONT_SIZES, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS } from \"../utils/constants\";\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, 'ref'>\n\n\nconst StyledInput = styled.input<{\n  $colors: ColorPalette,\n}>`\n  font-family: ${FONT_FAMILY};\n  font-size: ${FONT_SIZES.md};\n  height: 2.5rem;\n  border-radius: ${BORDER_RADIUS};\n  background-color: transparent;\n  border: 1px solid;\n  padding: 0rem 1rem;\n  &:disabled {\n    cursor: auto;\n    opacity: 0.5;\n  }\n  &[type=file]::file-selector-button{\n    border: none;\n    background-color: transparent;\n    height: 2.5rem;\n    margin-right: 0.5rem;\n    padding: 0;\n  }\n\n  border-color: ${props => props.$colors.light.neutralColor};\n  color: ${PRIMARY_FONT_COLORS.light};\n  &::placeholder {\n    color: ${SECONDARY_FONT_COLORS.light};\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ${props => props.$colors.light.primaryColor};\n  }\n  &[type=file] {\n    color: ${SECONDARY_FONT_COLORS.light};\n  }\n  &[type=file]::file-selector-button{\n    color: ${PRIMARY_FONT_COLORS.light};\n  }\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${props => props.$colors.dark.neutralColor};\n    color: ${PRIMARY_FONT_COLORS.dark};\n    &::placeholder {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${props => props.$colors.dark.primaryColor};\n    }\n    &[type=file] {\n      color: ${SECONDARY_FONT_COLORS.dark};\n    }\n    &[type=file]::file-selector-button{\n      color: ${PRIMARY_FONT_COLORS.dark};\n    }\n  }\n`;\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (props, ref) => {\n    const { colors } = useDesign();\n    return (\n      <StyledInput\n        ref={ref}\n        $colors={colors}\n        {...props}\n      />\n    );\n  }\n);\nInput.displayName = 'Input';\n\nexport { Input };"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,SAAuB,iBAAiB;AACxC,OAAO,YAAY;AACnB,SAAS,eAAe,aAAa,YAAY,qBAAqB,6BAA6B;AAkE7F;AA7DN,IAAM,cAAc,OAAO;AAAA,iBAGV,WAAW;AAAA,eACb,WAAW,EAAE;AAAA;AAAA,mBAET,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBd,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,WAChD,oBAAoB,KAAK;AAAA;AAAA,aAEvB,sBAAsB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIZ,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,aAGxD,sBAAsB,KAAK;AAAA;AAAA;AAAA,aAG3B,oBAAoB,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIlB,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,aAC/C,oBAAoB,IAAI;AAAA;AAAA,eAEtB,sBAAsB,IAAI;AAAA;AAAA;AAAA;AAAA,8BAIX,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAAA,eAGvD,sBAAsB,IAAI;AAAA;AAAA;AAAA,eAG1B,oBAAoB,IAAI;AAAA;AAAA;AAAA;AAKvC,IAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACR,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}

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

@@ -17,7 +17,7 @@ var Primitive = styled(LabelPrimitive.Root)`
 
   color: ${SECONDARY_FONT_COLORS.light};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${SECONDARY_FONT_COLORS.dark};
   }
 `;
@@ -36,3 +36,4 @@ Label.displayName = LabelPrimitive.Root.displayName;
 export {
   Label
 };
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-core/label.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport styled from 'styled-components';\nimport { FONT_FAMILY, FONT_SIZES, SECONDARY_FONT_COLORS } from \"../utils/constants\";\nimport { useDesign } from \"../providers/design-provider\";\n\nconst Primitive = styled(LabelPrimitive.Root)`\n  font-size: ${FONT_SIZES.sm};\n  line-height: 1;\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  display: block;\n  margin-bottom: 0.5rem;\n\n  color: ${SECONDARY_FONT_COLORS.light};\n\n  html[data-stack-theme='dark'] & {\n    color: ${SECONDARY_FONT_COLORS.dark};\n  }\n`;\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(\n  (props, ref) => {\n    return <Primitive\n      ref={ref}\n      {...props}\n    />;\n  }\n);\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n"],"mappings":";;;AAEA,OAAO,WAAW;AAClB,YAAY,oBAAoB;AAChC,OAAO,YAAY;AACnB,SAAS,aAAa,YAAY,6BAA6B;AAuBpD;AApBX,IAAM,YAAY,OAAsB,mBAAI;AAAA,eAC7B,WAAW,EAAE;AAAA;AAAA;AAAA,iBAGX,WAAW;AAAA;AAAA;AAAA;AAAA,WAIjB,sBAAsB,KAAK;AAAA;AAAA;AAAA,aAGzB,sBAAsB,IAAI;AAAA;AAAA;AAIvC,IAAM,QAAQ,MAAM;AAAA,EAIlB,CAAC,OAAO,QAAQ;AACd,WAAO;AAAA,MAAC;AAAA;AAAA,QACN;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EACF;AACF;AACA,MAAM,cAA6B,oBAAK;","names":[]}

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

@@ -18,7 +18,7 @@ var StyledNextLink = styled(NextLink)`
 
   color: ${LINK_COLORS.light};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${LINK_COLORS.dark};
   }
 `;
@@ -36,3 +36,4 @@ var Link = React.forwardRef(({ size = "md", href, ...props }, ref) => {
 export {
   Link
 };
+//# sourceMappingURL=link.js.map