@stackframe/stack 2.4.1 → 2.4.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/magic-link-sign-in.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, Link } 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAyB;AACzB,0BAA4B;AAC5B,mBAA8B;AAC9B,eAA4B;AAC5B,6BAA2C;AA2BvC;AAzBW,SAAR,kBAAmC;AACxC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,UAAM,sBAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,eAAS,yBAAyB;AAClC;AAAA,IACF;AACA,QAAI,KAAC,4BAAc,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,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,gDAAC,gCAAM,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,4CAAC,oBAAAC,SAAA,EAAgB,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","FormWarningText"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;AACzB,0BAA4B;AAC5B,mBAA8B;AAC9B,eAA4B;AAC5B,6BAAqC;AA2BjC;AAzBW,SAAR,kBAAmC;AACxC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,UAAM,sBAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,eAAS,yBAAyB;AAClC;AAAA,IACF;AACA,QAAI,KAAC,4BAAc,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,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,gDAAC,gCAAM,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,4CAAC,oBAAAC,SAAA,EAAgB,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","FormWarningText"]}

package/dist/components/oauth-button.js

@@ -28,14 +28,12 @@ module.exports = __toCommonJS(oauth_button_exports);
 var import_fa = require("react-icons/fa");
 var import__ = require("..");
 var import_components_core = require("../components-core");
-var import_design_provider = require("../providers/design-provider");
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconSize = 22;
 function OAuthButton({
   provider,
   type
 }) {
-  const { colors } = (0, import_design_provider.useDesign)();
   const stackApp = (0, import__.useStackApp)();
   let style;
   switch (provider) {

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

@@ -1 +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\";\nimport { useDesign } from \"../providers/design-provider\";\nimport Color from 'color';\n\nconst iconSize = 22;\n\nexport default function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'signin' | 'signup',\n}) {\n  const { colors } = useDesign();\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":"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","names":[]}
+{"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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAA8C;AAC9C,eAA4B;AAC5B,6BAAuB;AA0Bb;AAxBV,IAAM,WAAW;AAEF,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,QAAM,eAAW,sBAAY;AAE7B,MAAI;AAMJ,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MACE,6CAAC,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,4CAAC,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,4CAAC,sBAAS,OAAM,QAAO,MAAM,UAAU;AAAA,MAE3C;AACA;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,4CAAC,wBAAW,OAAM,QAAO,MAAM,UAAU;AAAA,MAE7C;AACA;AAAA,IACF;AAAA,IACA,KAAK,SAAS;AACZ,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,4CAAC,qBAAQ,OAAM,QAAO,MAAM,UAAU;AAAA,MAE1C;AACA;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,MAAM;AAAA,QACN,MACE,6CAAC,SAAI,OAAM,8BAA6B,OAAO,UAAU,QAAQ,UAAU,SAAQ,aACjF;AAAA,sDAAC,WAAO,6BAAkB;AAAA,UAC1B,4CAAC,UAAK,MAAK,WAAU,GAAE,eAAc;AAAA,UACrC,4CAAC,UAAK,MAAK,WAAU,GAAE,gBAAe;AAAA,UACtC,4CAAC,UAAK,MAAK,WAAU,GAAE,iBAAgB;AAAA,UACvC,4CAAC,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,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,OAAO,GAChE;AAAA,cAAM;AAAA,QACP,6CAAC,UAAK,OAAO,EAAE,UAAU,EAAE,GAAI;AAAA,mBAAS,WAAW,kBAAkB;AAAA,UAAiB,MAAM;AAAA,WAAK;AAAA,QAChG,4CAAC,SAAI,OAAO,EAAE,YAAY,SAAS,GAAI,gBAAM,MAAK;AAAA,SACrD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/oauth-group.d.mts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClientProjectJson } from '@stackframe/stack-shared';
 
-declare function OAuthGroup({ type, }: {
+declare function OAuthGroup({ type, mockProject, }: {
     type: 'signin' | 'signup';
+    mockProject?: ClientProjectJson;
 }): react_jsx_runtime.JSX.Element;
 
 export { OAuthGroup as default };

package/dist/components/oauth-group.d.ts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClientProjectJson } from '@stackframe/stack-shared';
 
-declare function OAuthGroup({ type, }: {
+declare function OAuthGroup({ type, mockProject, }: {
     type: 'signin' | 'signup';
+    mockProject?: ClientProjectJson;
 }): react_jsx_runtime.JSX.Element;
 
 export { OAuthGroup as default };

package/dist/components/oauth-group.js

@@ -39,10 +39,11 @@ var import_hooks = require("../lib/hooks");
 var import_oauth_button = __toESM(require("./oauth-button"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function OAuthGroup({
-  type
+  type,
+  mockProject
 }) {
   const stackApp = (0, import_hooks.useStackApp)();
-  const project = stackApp.useProject();
+  const project = mockProject || stackApp.useProject();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gap: "16px", display: "flex", flexDirection: "column", alignItems: "stretch" }, children: project.oauthProviders.filter((p) => p.enabled).map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_oauth_button.default, { provider: p.id, type }, p.id)) });
 }
 //# sourceMappingURL=oauth-group.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/oauth-group.tsx"],"sourcesContent":["'use client';\n\nimport { useStackApp } from \"../lib/hooks\";\nimport OAuthButton from \"./oauth-button\";\n\nexport default function OAuthGroup({\n  type,\n}: {\n  type: 'signin' | 'signup',\n}) {\n  const stackApp = useStackApp();\n  const project = 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4B;AAC5B,0BAAwB;AAahB;AAXO,SAAR,WAA4B;AAAA,EACjC;AACF,GAEG;AACD,QAAM,eAAW,0BAAY;AAC7B,QAAM,UAAU,SAAS,WAAW;AAEpC,SACE,4CAAC,SAAI,OAAO,EAAE,KAAK,QAAQ,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GACxF,kBAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,IAAI,OACjD,4CAAC,oBAAAA,SAAA,EAAuB,UAAU,EAAE,IAAI,QAAtB,EAAE,EAA+B,CACpD,GACH;AAEJ;","names":["OAuthButton"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA4B;AAC5B,0BAAwB;AAehB;AAbO,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,eAAW,0BAAY;AAC7B,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,SACE,4CAAC,SAAI,OAAO,EAAE,KAAK,QAAQ,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GACxF,kBAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,IAAI,OACjD,4CAAC,oBAAAA,SAAA,EAAuB,UAAU,EAAE,IAAI,QAAtB,EAAE,EAA+B,CACpD,GACH;AAEJ;","names":["OAuthButton"]}

package/dist/components/password-field.js

@@ -44,7 +44,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var getIconStyle = (colors) => `
   color: ${colors.light.secondaryColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${colors.dark.secondaryColor};
   }
 `;

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

@@ -1 +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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAsB;AACtB,mBAA6C;AAC7C,gBAAgC;AAChC,eAA0B;AAC1B,+BAAmB;AAyCf;AAtCJ,IAAM,eAAe,CAAC,WAAyB;AAAA,WACpC,OAAO,MAAM,cAAc;AAAA;AAAA;AAAA,aAGzB,OAAO,KAAK,cAAc;AAAA;AAAA;AAGvC,IAAM,mBAAe,yBAAAA,SAAO,kBAAQ,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACrG,IAAM,gBAAY,yBAAAA,SAAO,eAAK,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE/F,IAAM,oBAAgB,yBAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,QAAM,eAAW,qBAAgC,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,6CAAC,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,4CAAC,gBAAa,QAAgB,IAAK,4CAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":["styled"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAsB;AACtB,mBAA6C;AAC7C,gBAAgC;AAChC,eAA0B;AAC1B,+BAAmB;AAyCf;AAtCJ,IAAM,eAAe,CAAC,WAAyB;AAAA,WACpC,OAAO,MAAM,cAAc;AAAA;AAAA;AAAA,aAGzB,OAAO,KAAK,cAAc;AAAA;AAAA;AAGvC,IAAM,mBAAe,yBAAAA,SAAO,kBAAQ,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AACrG,IAAM,gBAAY,yBAAAA,SAAO,eAAK,IAA8B,WAAS,aAAa,MAAM,MAAM,CAAC;AAE/F,IAAM,oBAAgB,yBAGpB,CAAC,EAAE,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,QAAM,eAAW,qBAAgC,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,6CAAC,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,4CAAC,gBAAa,QAAgB,IAAK,4CAAC,aAAU,QAAgB;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ,CAAC;AAED,cAAc,cAAc;AAE5B,IAAO,yBAAQ;","names":["styled"]}

package/dist/components/user-button.js

@@ -55,7 +55,7 @@ var icons = (0, import_objects.typedFromEntries)((0, import_objects.typedEntries
   const styledComponent = (0, import_styled_components.default)(value)`
     color: ${import_constants.SECONDARY_FONT_COLORS.light};
 
-    html[data-theme='dark'] & {
+    html[data-stack-theme='dark'] & {
       color: ${import_constants.SECONDARY_FONT_COLORS.dark};
     }
   `;
@@ -97,7 +97,8 @@ function UserButtonInnerInner(props) {
   const textStyles = {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    overflow: "hidden"
+    overflow: "hidden",
+    margin: 0
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [

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

@@ -1 +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-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":["styled","React","UserAvatar"]}
+{"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    margin: 0,\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n          <UserAvatar user={user} />\n          {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n            <Text style={textStyles}>{user.displayName}</Text>\n            <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n          </div>}\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent style={{ zIndex: 1500 }}>\n        <DropdownMenuLabel>\n          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n            <UserAvatar user={user} />\n            <div>\n              {user && <Text>{user.displayName}</Text>}\n              {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n              {!user && <Text 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":["styled","React","UserAvatar"]}

package/dist/components-core/avatar.js

@@ -68,7 +68,7 @@ var StyledAvatarFallback = (0, import_styled_components.default)(AvatarPrimitive
   
   background-color: ${({ $colors }) => $colors.light.secondaryColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${({ $colors }) => $colors.dark.secondaryColor};
   }
 `;

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

@@ -1 +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-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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,sBAAiC;AACjC,+BAAmB;AACnB,eAA0B;AAiBxB;AAdF,IAAM,mBAAe,yBAAAA,SAAuB,oBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhD,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,gBAAa,KAAU,WAAuB,GAAG,OAAO,CAC1D;AACD,OAAO,cAAc;AAErB,IAAM,wBAAoB,yBAAAA,SAAuB,qBAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,qBAAkB,KAAU,WAAuB,GAAG,OAAO,CAC/D;AACD,YAAY,cAAc;AAE1B,IAAM,2BAAuB,yBAAAA,SAAuB,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,QAAI,oBAAU;AAC7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AACF,CAAC;AACD,eAAe,cAAc;","names":["styled"]}
+{"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,sBAAiC;AACjC,+BAAmB;AACnB,eAA0B;AAiBxB;AAdF,IAAM,mBAAe,yBAAAA,SAAuB,oBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhD,IAAM,SAAe,iBAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,gBAAa,KAAU,WAAuB,GAAG,OAAO,CAC1D;AACD,OAAO,cAAc;AAErB,IAAM,wBAAoB,yBAAAA,SAAuB,qBAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,IAAM,cAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,qBAAkB,KAAU,WAAuB,GAAG,OAAO,CAC/D;AACD,YAAY,cAAc;AAE1B,IAAM,2BAAuB,yBAAAA,SAAuB,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,QAAI,oBAAU;AAC7B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AACF,CAAC;AACD,eAAe,cAAc;","names":["styled"]}

package/dist/components-core/button.js

@@ -149,7 +149,7 @@ var StyledButton = import_styled_components.default.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]) {
@@ -185,8 +185,8 @@ var Button = import_react.default.forwardRef(
         $colors: { dark, light },
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", visibility: loading ? "visible" : "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading_indicator.default, { color: { light: light.textColor, dark: dark.textColor } }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { visibility: loading ? "hidden" : "visible" }, children: props.children })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", visibility: loading ? "visible" : "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading_indicator.default, { color: { light: light.textColor, dark: dark.textColor } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { visibility: loading ? "hidden" : "visible", whiteSpace: "nowrap" }, children: props.children })
         ]
       }
     );

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-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        <div 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        </div>\n        <div style={{ visibility: loading ? 'hidden' : 'visible' }}>\n          {props.children}\n        </div>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport {\n  Button,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA+B;AAC/B,6BAA0B;AAC1B,mBAAkB;AAClB,+BAAmB;AACnB,uBAAuD;AACvD,+BAA6B;AAoKvB;AAlKN,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,GASE;AACA,MAAI;AACJ,UAAQ,SAAS;AAAA,IACf,KAAK,WAAW;AACd,gBAAU,OAAO;AACjB;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,gBAAU,OAAO;AACjB;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,gBAAU;AACV;AAAA,IACF;AAAA,EACF;AACA,MAAI,YAAY;AACd,cAAU;AAAA,EACZ;AAEA,QAAM,QAAI,aAAAA,SAAM,OAAO;AACvB,QAAM,SAAK,aAAAA,SAAM,OAAO,YAAY;AAEpC,QAAM,cAAc,CAAC,UAAkB;AACrC,WAAO,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,YAAY,GAAG,EAAE,UAAU,IAAI,KAAK,EAAE,SAAS;AAAA,EACzE;AAEA,QAAM,WAAW,CAAC,UAAkB;AAClC,eAAO,aAAAA;AAAA,MACL,GAAG,OAAO,IAAI,UAAU;AAAA,IAC1B,EAAE,MAAM,KAAK,EAAE,SAAS;AAAA,EAC1B;AAEA,MAAI,EAAE,MAAM,MAAM,GAAG;AACnB,WAAO;AAAA,MACL,SAAS;AAAA,MACT,cAAc,SAAS,GAAG;AAAA,MAC1B,eAAe,SAAS,GAAG;AAAA,MAC3B,WAAW,OAAO;AAAA,IACpB;AAAA,EACF,WAAW,EAAE,QAAQ,GAAG;AACtB,WAAO;AAAA,MACL;AAAA,MACA,cAAc,YAAY,GAAG;AAAA,MAC7B,eAAe,YAAY,GAAG;AAAA,MAC9B,WAAW;AAAA,IACb;AAAA,EACF,OAAO;AACL,WAAO;AAAA,MACL;AAAA,MACA,cAAc,YAAY,EAAE;AAAA,MAC5B,eAAe,YAAY,EAAE;AAAA,MAC7B,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAiBA,IAAM,eAAe,yBAAAC,QAAO;AAAA;AAAA,mBAST,8BAAa;AAAA,aACnB,WAAS;AAClB,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK,MAAM;AAAE,aAAO;AAAA,IAAgB;AAAA,IACpC,KAAK,MAAM;AAAE,aAAO;AAAA,IAAa;AAAA,IACjC,KAAK,MAAM;AAAE,aAAO;AAAA,IAAa;AAAA,EACnC;AACF,CAAC;AAAA,YACS,WAAS;AACjB,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK,MAAM;AAAE,aAAO;AAAA,IAAQ;AAAA,IAC5B,KAAK,MAAM;AAAE,aAAO;AAAA,IAAU;AAAA,IAC9B,KAAK,MAAM;AAAE,aAAO;AAAA,IAAQ;AAAA,EAC9B;AACF,CAAC;AAAA,iBACc,4BAAW;AAAA,eACb,4BAAW,EAAE;AAAA,aACf,WAAS,MAAM,WAAW,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASxB,WAAS,MAAM,QAAQ,MAAM,OAAO;AAAA,WAC/C,WAAS,MAAM,QAAQ,MAAM,SAAS;AAAA;AAAA;AAAA,0BAGvB,WAAS,MAAM,QAAQ,MAAM,aAAa;AAAA;AAAA;AAAA,0BAG1C,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,wBAK3C,WAAS,MAAM,QAAQ,KAAK,OAAO;AAAA,aAC9C,WAAS,MAAM,QAAQ,KAAK,SAAS;AAAA;AAAA;AAAA,4BAGtB,WAAS,MAAM,QAAQ,KAAK,aAAa;AAAA;AAAA;AAAA,4BAGzC,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAMpE,IAAM,SAAS,aAAAC,QAAM;AAAA,EACnB,CAAC;AAAA,IACC,UAAQ;AAAA,IACR,OAAK;AAAA,IACL,UAAQ;AAAA,IACR,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,EAAE,OAAO,QAAI,kCAAU;AAE7B,UAAM,EAAE,MAAM,MAAM,QAAI,sBAAQ,MAAM;AACpC,aAAO;AAAA,QACL,MAAM,UAAU,EAAE,YAAY,MAAM,OAAO,QAAQ,OAAO,MAAM,QAAQ,CAAC;AAAA,QACzE,OAAO,UAAU,EAAE,YAAY,MAAM,OAAO,QAAQ,OAAO,OAAO,QAAQ,CAAC;AAAA,MAC7E;AAAA,IACF,GAAG,CAAC,MAAM,OAAO,QAAQ,OAAO,CAAC;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAAS,EAAE,MAAM,MAAM;AAAA,QACtB,GAAG;AAAA,QAEJ;AAAA,sDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,OAAO,MAAM,OAAO,WAAW,yBAAyB,YAAY,UAAU,YAAY,SAAS,GAC1I,sDAAC,yBAAAC,SAAA,EAAiB,OAAO,EAAE,OAAO,MAAM,WAAW,MAAM,KAAK,UAAU,GAAE,GAC5E;AAAA,UACA,4CAAC,SAAI,OAAO,EAAE,YAAY,UAAU,WAAW,UAAU,GACtD,gBAAM,UACT;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","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.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"]}

package/dist/components-core/card.js

@@ -50,7 +50,7 @@ var StyledCard = import_styled_components.default.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};
   }

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

@@ -1 +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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,eAA0B;AAqCjB;AAlCT,IAAM,aAAa,yBAAAA,QAAO;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,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,IAAM,oBAAoB,yBAAAA,QAAO;AAAA;AAGjC,IAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,IAAM,OAAa,iBAAiE,CAAC,OAAO,QAAQ;AAClG,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SAAO,4CAAC,cAAW,KAAW,GAAG,OAAO,SAAS,QAAQ;AAC3D,CAAC;AACD,KAAK,cAAc;AAEnB,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,4CAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;AAEzB,IAAM,cAAoB,iBAAiE,CAAC,OAAO,QACjG,4CAAC,qBAAkB,KAAW,GAAG,OAAO,CACzC;AACD,YAAY,cAAc;AAE1B,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,4CAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;","names":["styled"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,eAA0B;AAqCjB;AAlCT,IAAM,aAAa,yBAAAA,QAAO;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,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,IAAM,oBAAoB,yBAAAA,QAAO;AAAA;AAGjC,IAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,IAAM,OAAa,iBAAiE,CAAC,OAAO,QAAQ;AAClG,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SAAO,4CAAC,cAAW,KAAW,GAAG,OAAO,SAAS,QAAQ;AAC3D,CAAC;AACD,KAAK,cAAc;AAEnB,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,4CAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;AAEzB,IAAM,cAAoB,iBAAiE,CAAC,OAAO,QACjG,4CAAC,qBAAkB,KAAW,GAAG,OAAO,CACzC;AACD,YAAY,cAAc;AAE1B,IAAM,aAAmB,iBAAiE,CAAC,OAAO,QAChG,4CAAC,oBAAiB,KAAW,GAAG,OAAO,CACxC;AACD,WAAW,cAAc;","names":["styled"]}

package/dist/components-core/dropdown.js

@@ -53,6 +53,9 @@ var StyledTrigger = (0, import_styled_components.default)(DropdownMenuPrimitive.
     outline: none;
     box-shadow: 0;
   }
+  &:hover {
+    cursor: pointer;
+  }
 `;
 var DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTrigger, { ref, ...props }));
 var StyledContent = (0, import_styled_components.default)(DropdownMenuPrimitive.Content)`
@@ -66,7 +69,7 @@ var StyledContent = (0, import_styled_components.default)(DropdownMenuPrimitive.
   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};
   }
@@ -103,7 +106,7 @@ var StyledItem = (0, import_styled_components.default)(DropdownMenuPrimitive.Ite
     background-color: ${import_constants.SELECTED_BACKGROUND_COLORS.light};
   }
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     &:hover {
       background-color: ${import_constants.SELECTED_BACKGROUND_COLORS.dark};
     }
@@ -125,7 +128,7 @@ var StyledSeparator = (0, import_styled_components.default)(DropdownMenuPrimitiv
   height: 1px;
   background-color: ${({ $colors }) => $colors.light.neutralColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${({ $colors }) => $colors.dark.neutralColor};
   }
 `;

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

@@ -1 +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-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-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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,4BAAuC;AACvC,eAA0B;AAC1B,uBAA2C;AAiBzC;AAdF,IAAM,eAAqC;AAE3C,IAAM,oBAAgB,yBAAAA,SAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,oBAAgB,yBAAAA,SAA6B,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,QAAI,oBAAU;AAC7B,SACE,4CAAuB,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,iBAAa,yBAAAA,SAA6B,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,4CAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,4CAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,4CAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,kBAAc,yBAAAA,SAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,4CAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,sBAAkB,yBAAAA,SAA6B,+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,QAAI,oBAAU;AAC7B,SAAO,4CAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":["styled"]}
+{"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  &:hover {\n    cursor: pointer;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,+BAAmB;AACnB,4BAAuC;AACvC,eAA0B;AAC1B,uBAA2C;AAoBzC;AAjBF,IAAM,eAAqC;AAE3C,IAAM,oBAAgB,yBAAAA,SAA6B,6BAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1D,IAAM,sBAA4B,iBAGhC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,4CAAC,iBAAc,KAAW,GAAG,OAAO,CACrC;AAED,IAAM,oBAAgB,yBAAAA,SAA6B,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,QAAI,oBAAU;AAC7B,SACE,4CAAuB,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,iBAAa,yBAAAA,SAA6B,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,4CAA2B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9B,4CAA2B,IAAI;AAAA;AAAA;AAAA;AAKzD,IAAM,mBAAyB,iBAK7B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACzC,SAAO,4CAAC,cAAW,KAAW,GAAG,OAAO,QAAQ,OAAO;AACzD,CAAC;AACD,iBAAiB,cAAc;AAE/B,IAAM,kBAAc,yBAAAA,SAA6B,2BAAK;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,MAAM,MAAM,SAAS,qBAAqB;AAAA;AAGjD,IAAM,oBAA0B,iBAK9B,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,QACjC,4CAAC,eAAY,KAAW,GAAG,OAAO,OAAc,CACjD;AACD,kBAAkB,cAAc;AAEhC,IAAM,sBAAkB,yBAAAA,SAA6B,+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,QAAI,oBAAU;AAC7B,SAAO,4CAAC,mBAAgB,KAAW,GAAG,OAAO,SAAS,QAAQ;AAChE,CAAC;AACD,sBAAsB,cAAc;","names":["styled"]}

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 | "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    size?: number | "xs" | "sm" | "md" | "lg" | "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?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "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?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "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 | "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    size?: number | "xs" | "sm" | "md" | "lg" | "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?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "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?: "h2" | "h3" | "p" | "h1" | "h4" | "h5" | "h6" | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "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/input.js

@@ -76,7 +76,7 @@ var StyledInput = import_styled_components.default.input`
     color: ${import_constants.PRIMARY_FONT_COLORS.light};
   }
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     border-color: ${(props) => props.$colors.dark.neutralColor};
     color: ${import_constants.PRIMARY_FONT_COLORS.dark};
     &::placeholder {

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

@@ -1 +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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,6BAAwC;AACxC,+BAAmB;AACnB,uBAAmG;AAkE7F;AA7DN,IAAM,cAAc,yBAAAA,QAAO;AAAA,iBAGV,4BAAW;AAAA,eACb,4BAAW,EAAE;AAAA;AAAA,mBAET,8BAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBd,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,WAChD,qCAAoB,KAAK;AAAA;AAAA,aAEvB,uCAAsB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIZ,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,aAGxD,uCAAsB,KAAK;AAAA;AAAA;AAAA,aAG3B,qCAAoB,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIlB,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,aAC/C,qCAAoB,IAAI;AAAA;AAAA,eAEtB,uCAAsB,IAAI;AAAA;AAAA;AAAA;AAAA,8BAIX,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAAA,eAGvD,uCAAsB,IAAI;AAAA;AAAA;AAAA,eAG1B,qCAAoB,IAAI;AAAA;AAAA;AAAA;AAKvC,IAAM,QAAQ,aAAAC,QAAM;AAAA,EAClB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,OAAO,QAAI,kCAAU;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACR,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":["styled","React"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,6BAAwC;AACxC,+BAAmB;AACnB,uBAAmG;AAkE7F;AA7DN,IAAM,cAAc,yBAAAA,QAAO;AAAA,iBAGV,4BAAW;AAAA,eACb,4BAAW,EAAE;AAAA;AAAA,mBAET,8BAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBd,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA,WAChD,qCAAoB,KAAK;AAAA;AAAA,aAEvB,uCAAsB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIZ,WAAS,MAAM,QAAQ,MAAM,YAAY;AAAA;AAAA;AAAA,aAGxD,uCAAsB,KAAK;AAAA;AAAA;AAAA,aAG3B,qCAAoB,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIlB,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA,aAC/C,qCAAoB,IAAI;AAAA;AAAA,eAEtB,uCAAsB,IAAI;AAAA;AAAA;AAAA;AAAA,8BAIX,WAAS,MAAM,QAAQ,KAAK,YAAY;AAAA;AAAA;AAAA,eAGvD,uCAAsB,IAAI;AAAA;AAAA;AAAA,eAG1B,qCAAoB,IAAI;AAAA;AAAA;AAAA;AAKvC,IAAM,QAAQ,aAAAC,QAAM;AAAA,EAClB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,OAAO,QAAI,kCAAU;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACR,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":["styled","React"]}

package/dist/components-core/label.js

@@ -50,7 +50,7 @@ var Primitive = (0, import_styled_components.default)(LabelPrimitive.Root)`
 
   color: ${import_constants.SECONDARY_FONT_COLORS.light};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${import_constants.SECONDARY_FONT_COLORS.dark};
   }
 `;

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

@@ -1 +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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,qBAAgC;AAChC,+BAAmB;AACnB,uBAA+D;AAuBpD;AApBX,IAAM,gBAAY,yBAAAA,SAAsB,mBAAI;AAAA,eAC7B,4BAAW,EAAE;AAAA;AAAA;AAAA,iBAGX,4BAAW;AAAA;AAAA;AAAA;AAAA,WAIjB,uCAAsB,KAAK;AAAA;AAAA;AAAA,aAGzB,uCAAsB,IAAI;AAAA;AAAA;AAIvC,IAAM,QAAQ,aAAAC,QAAM;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":["styled","React"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,qBAAgC;AAChC,+BAAmB;AACnB,uBAA+D;AAuBpD;AApBX,IAAM,gBAAY,yBAAAA,SAAsB,mBAAI;AAAA,eAC7B,4BAAW,EAAE;AAAA;AAAA;AAAA,iBAGX,4BAAW;AAAA;AAAA;AAAA;AAAA,WAIjB,uCAAsB,KAAK;AAAA;AAAA;AAAA,aAGzB,uCAAsB,IAAI;AAAA;AAAA;AAIvC,IAAM,QAAQ,aAAAC,QAAM;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":["styled","React"]}

package/dist/components-core/link.js

@@ -51,7 +51,7 @@ var StyledNextLink = (0, import_styled_components.default)(import_link.default)`
 
   color: ${import_constants.LINK_COLORS.light};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     color: ${import_constants.LINK_COLORS.dark};
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-core/link.tsx"],"sourcesContent":["'use client';\n\nimport NextLink from \"next/link\";\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS } from \"../utils/constants\";\nimport { Url } from \"url\";\nimport React from \"react\";\nimport styled from \"styled-components\";\n\ntype LinkProps = {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  href: Url | string,\n} & Omit<React.HTMLProps<HTMLLinkElement>, 'size' | 'href'>\n\nconst StyledNextLink = styled(NextLink)<{ \n  $size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n}>`\n  font-size: ${props => FONT_SIZES[props.$size]};\n  line-height: ${props => LINE_HEIGHTS[props.$size]};\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  text-decoration: underline;\n  margin: 0;\n  padding: 0;\n\n  color: ${LINK_COLORS.light};\n\n  html[data-theme='dark'] & {\n    color: ${LINK_COLORS.dark};\n  }\n`;\n\nexport const Link = React.forwardRef<\n  React.ElementRef<typeof StyledNextLink>,\n  LinkProps\n>(({ size='md', href, ...props }, ref) => {\n  return (\n    <StyledNextLink\n      $size={size}\n      href={href}\n      style={props.style}\n      children={props.children}\n    />\n  );\n});"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAAqB;AACrB,uBAAmE;AAEnE,mBAAkB;AAClB,+BAAmB;AA8Bf;AAvBJ,IAAM,qBAAiB,yBAAAA,SAAO,YAAAC,OAAQ;AAAA,eAGvB,WAAS,4BAAW,MAAM,KAAK,CAAC;AAAA,iBAC9B,WAAS,8BAAa,MAAM,KAAK,CAAC;AAAA;AAAA,iBAElC,4BAAW;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjB,6BAAY,KAAK;AAAA;AAAA;AAAA,aAGf,6BAAY,IAAI;AAAA;AAAA;AAItB,IAAM,OAAO,aAAAC,QAAM,WAGxB,CAAC,EAAE,OAAK,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA;AAAA,EAClB;AAEJ,CAAC;","names":["styled","NextLink","React"]}
+{"version":3,"sources":["../../src/components-core/link.tsx"],"sourcesContent":["'use client';\n\nimport NextLink from \"next/link\";\nimport { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS } from \"../utils/constants\";\nimport { Url } from \"url\";\nimport React from \"react\";\nimport styled from \"styled-components\";\n\ntype LinkProps = {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  href: Url | string,\n} & Omit<React.HTMLProps<HTMLLinkElement>, 'size' | 'href'>\n\nconst StyledNextLink = styled(NextLink)<{ \n  $size: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n}>`\n  font-size: ${props => FONT_SIZES[props.$size]};\n  line-height: ${props => LINE_HEIGHTS[props.$size]};\n  font-weight: 500;\n  font-family: ${FONT_FAMILY};\n  text-decoration: underline;\n  margin: 0;\n  padding: 0;\n\n  color: ${LINK_COLORS.light};\n\n  html[data-stack-theme='dark'] & {\n    color: ${LINK_COLORS.dark};\n  }\n`;\n\nexport const Link = React.forwardRef<\n  React.ElementRef<typeof StyledNextLink>,\n  LinkProps\n>(({ size='md', href, ...props }, ref) => {\n  return (\n    <StyledNextLink\n      $size={size}\n      href={href}\n      style={props.style}\n      children={props.children}\n    />\n  );\n});"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAAqB;AACrB,uBAAmE;AAEnE,mBAAkB;AAClB,+BAAmB;AA8Bf;AAvBJ,IAAM,qBAAiB,yBAAAA,SAAO,YAAAC,OAAQ;AAAA,eAGvB,WAAS,4BAAW,MAAM,KAAK,CAAC;AAAA,iBAC9B,WAAS,8BAAa,MAAM,KAAK,CAAC;AAAA;AAAA,iBAElC,4BAAW;AAAA;AAAA;AAAA;AAAA;AAAA,WAKjB,6BAAY,KAAK;AAAA;AAAA;AAAA,aAGf,6BAAY,IAAI;AAAA;AAAA;AAItB,IAAM,OAAO,aAAAC,QAAM,WAGxB,CAAC,EAAE,OAAK,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA;AAAA,EAClB;AAEJ,CAAC;","names":["styled","NextLink","React"]}

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

@@ -51,7 +51,7 @@ var LoadingIndicator = import_styled_components.default.div`
 
   --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.light} 90%, #0000);
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     --_g: no-repeat radial-gradient(circle closest-side, ${(props) => props.color.dark} 90%, #0000);
   }
 `;

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-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 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"]}

package/dist/components-core/popover.js

@@ -53,7 +53,7 @@ var StyledContent = (0, import_styled_components.default)(PopoverPrimitive.Conte
   border: 1px solid ${({ $colors }) => $colors.light.neutralColor};
   background-color: ${({ $colors }) => $colors.light.backgroundColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     border-color: ${({ $colors }) => $colors.dark.neutralColor};
     background-color: ${({ $colors }) => $colors.dark.backgroundColor};
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-core/popover.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport styled, { css } from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst StyledContent = styled(PopoverPrimitive.Content)<{\n  $colors: ColorPalette,\n}>`\n  z-index: 50;\n  width: 18rem;\n  border-radius: 0.375rem;\n  padding: 1rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  outline: none;\n\n  border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n  background-color: ${({ $colors }) => $colors.light.backgroundColor};\n\n  html[data-theme='dark'] & {\n    border-color: ${({ $colors }) => $colors.dark.neutralColor};\n    background-color: ${({ $colors }) => $colors.dark.backgroundColor};\n  }\n`;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = 'center', sideOffset = 4, ...props }, ref) => {\n  const { colors } = useDesign();\n  return (\n    <PopoverPrimitive.Portal>\n      <StyledContent\n        $colors={colors}\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n});\nPopoverContent.displayName = 'PopoverContent';\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,+BAA4B;AAC5B,eAA0B;AAiCpB;AA9BN,IAAM,UAA2B;AAEjC,IAAM,iBAAkC;AAExC,IAAM,oBAAgB,yBAAAA,SAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAU/B,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,sBAC3C,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAGhD,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,wBACtC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAIrE,IAAM,iBAAiB,aAAAC,QAAM,WAG3B,CAAC,EAAE,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AACzD,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SACE,4CAAkB,yBAAjB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;","names":["styled","React"]}
+{"version":3,"sources":["../../src/components-core/popover.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport styled, { css } from 'styled-components';\nimport { useDesign } from '..';\nimport { ColorPalette } from '../providers/design-provider';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst StyledContent = styled(PopoverPrimitive.Content)<{\n  $colors: ColorPalette,\n}>`\n  z-index: 50;\n  width: 18rem;\n  border-radius: 0.375rem;\n  padding: 1rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  outline: none;\n\n  border: 1px solid ${({ $colors }) => $colors.light.neutralColor};\n  background-color: ${({ $colors }) => $colors.light.backgroundColor};\n\n  html[data-stack-theme='dark'] & {\n    border-color: ${({ $colors }) => $colors.dark.neutralColor};\n    background-color: ${({ $colors }) => $colors.dark.backgroundColor};\n  }\n`;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = 'center', sideOffset = 4, ...props }, ref) => {\n  const { colors } = useDesign();\n  return (\n    <PopoverPrimitive.Portal>\n      <StyledContent\n        $colors={colors}\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n});\nPopoverContent.displayName = 'PopoverContent';\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,+BAA4B;AAC5B,eAA0B;AAiCpB;AA9BN,IAAM,UAA2B;AAEjC,IAAM,iBAAkC;AAExC,IAAM,oBAAgB,yBAAAA,SAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAU/B,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,YAAY;AAAA,sBAC3C,CAAC,EAAE,QAAQ,MAAM,QAAQ,MAAM,eAAe;AAAA;AAAA;AAAA,oBAGhD,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,YAAY;AAAA,wBACtC,CAAC,EAAE,QAAQ,MAAM,QAAQ,KAAK,eAAe;AAAA;AAAA;AAIrE,IAAM,iBAAiB,aAAAC,QAAM,WAG3B,CAAC,EAAE,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AACzD,QAAM,EAAE,OAAO,QAAI,oBAAU;AAC7B,SACE,4CAAkB,yBAAjB,EACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;","names":["styled","React"]}

package/dist/components-core/separator.js

@@ -46,7 +46,7 @@ var StyledSeparator = (0, import_styled_components.default)(SeparatorPrimitive.R
   
   background-color: ${(props) => props.$color.light.neutralColor};
 
-  html[data-theme='dark'] & {
+  html[data-stack-theme='dark'] & {
     background-color: ${(props) => props.$color.dark.neutralColor};
   }
 `;