@stackframe/stack 2.5.33 → 2.5.37

package/dist/lib/translations.d.mts

@@ -0,0 +1,5 @@
+declare function useTranslation(): {
+    t: (str: string) => string;
+};
+
+export { useTranslation };

package/dist/lib/translations.d.ts

@@ -0,0 +1,5 @@
+declare function useTranslation(): {
+    t: (str: string) => string;
+};
+
+export { useTranslation };

package/dist/lib/translations.js

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/translations.tsx
+var translations_exports = {};
+__export(translations_exports, {
+  useTranslation: () => useTranslation
+});
+module.exports = __toCommonJS(translations_exports);
+var import_client_only = require("client-only");
+var import_react = __toESM(require("react"));
+var import_translation_provider_client = require("../providers/translation-provider-client");
+function useTranslation() {
+  const translationContext = import_react.default.useContext(import_translation_provider_client.TranslationContext);
+  if (!translationContext) {
+    throw new Error("Translation context not found; did you forget to wrap your app in a <StackProvider />?");
+  }
+  return {
+    t: (str) => {
+      const { quetzalKeys, quetzalLocale } = translationContext;
+      return quetzalLocale.get(quetzalKeys.get(str) ?? void 0) ?? str;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTranslation
+});
+//# sourceMappingURL=translations.js.map

package/dist/lib/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/translations.tsx"],"sourcesContent":["import \"client-only\";\nimport React from \"react\";\nimport { TranslationContext } from \"../providers/translation-provider-client\";\n\nexport function useTranslation() {\n  const translationContext = React.useContext(TranslationContext);\n  if (!translationContext) {\n    throw new Error(\"Translation context not found; did you forget to wrap your app in a <StackProvider />?\");\n  }\n  return {\n    t: (str: string) => {\n      const { quetzalKeys, quetzalLocale } = translationContext;\n      return quetzalLocale.get(quetzalKeys.get(str) ?? (undefined as never)) ?? str;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAO;AACP,mBAAkB;AAClB,yCAAmC;AAE5B,SAAS,iBAAiB;AAC/B,QAAM,qBAAqB,aAAAA,QAAM,WAAW,qDAAkB;AAC9D,MAAI,CAAC,oBAAoB;AACvB,UAAM,IAAI,MAAM,wFAAwF;AAAA,EAC1G;AACA,SAAO;AAAA,IACL,GAAG,CAAC,QAAgB;AAClB,YAAM,EAAE,aAAa,cAAc,IAAI;AACvC,aAAO,cAAc,IAAI,YAAY,IAAI,GAAG,KAAM,MAAmB,KAAK;AAAA,IAC5E;AAAA,EACF;AACF;","names":["React"]}

package/dist/providers/stack-provider-client.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CurrentUserCrud } from '@stackframe/stack-shared/dist/interface/crud/current-user';
-import React from 'react';
+import React__default from 'react';
 import { StackClientApp, StackClientAppJson } from '../lib/stack-app.mjs';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/helpers/production-mode';
@@ -12,12 +12,12 @@ import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/utils/oauth';
 import '@stackframe/stack-shared/dist/utils/results';
 
-declare const StackContext: React.Context<{
+declare const StackContext: React__default.Context<{
     app: StackClientApp<true>;
 } | null>;
 declare function StackProviderClient(props: {
     appJson: StackClientAppJson<true, string>;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function UserSetter(props: {
     userJsonPromise: Promise<CurrentUserCrud['Client']['Read'] | null>;

package/dist/providers/stack-provider-client.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CurrentUserCrud } from '@stackframe/stack-shared/dist/interface/crud/current-user';
-import React from 'react';
+import React__default from 'react';
 import { StackClientApp, StackClientAppJson } from '../lib/stack-app.js';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/helpers/production-mode';
@@ -12,12 +12,12 @@ import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/utils/oauth';
 import '@stackframe/stack-shared/dist/utils/results';
 
-declare const StackContext: React.Context<{
+declare const StackContext: React__default.Context<{
     app: StackClientApp<true>;
 } | null>;
 declare function StackProviderClient(props: {
     appJson: StackClientAppJson<true, string>;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function UserSetter(props: {
     userJsonPromise: Promise<CurrentUserCrud['Client']['Read'] | null>;

package/dist/providers/stack-provider.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 import { StackClientApp, StackServerApp, StackAdminApp } from '../lib/stack-app.mjs';
+import { TranslationProvider } from './translation-provider.mjs';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/helpers/production-mode';
 import '@stackframe/stack-shared/dist/interface/crud/api-keys';
@@ -11,9 +12,11 @@ import '@stackframe/stack-shared/dist/sessions';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/utils/oauth';
 import '@stackframe/stack-shared/dist/utils/results';
+import '../generated/quetzal-translations.mjs';
 
-declare function StackProvider({ children, app, }: {
-    children: React.ReactNode;
+declare function StackProvider({ children, app, lang, }: {
+    lang?: React__default.ComponentProps<typeof TranslationProvider>['lang'];
+    children: React__default.ReactNode;
     app: StackClientApp<true> | StackServerApp<true> | StackAdminApp<true>;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/providers/stack-provider.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 import { StackClientApp, StackServerApp, StackAdminApp } from '../lib/stack-app.js';
+import { TranslationProvider } from './translation-provider.js';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/helpers/production-mode';
 import '@stackframe/stack-shared/dist/interface/crud/api-keys';
@@ -11,9 +12,11 @@ import '@stackframe/stack-shared/dist/sessions';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/utils/oauth';
 import '@stackframe/stack-shared/dist/utils/results';
+import '../generated/quetzal-translations.js';
 
-declare function StackProvider({ children, app, }: {
-    children: React.ReactNode;
+declare function StackProvider({ children, app, lang, }: {
+    lang?: React__default.ComponentProps<typeof TranslationProvider>['lang'];
+    children: React__default.ReactNode;
     app: StackClientApp<true> | StackServerApp<true> | StackAdminApp<true>;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/providers/stack-provider.js

@@ -26,14 +26,16 @@ module.exports = __toCommonJS(stack_provider_exports);
 var import_react = require("react");
 var import_stack_app = require("../lib/stack-app");
 var import_stack_provider_client = require("./stack-provider-client");
+var import_translation_provider = require("./translation-provider");
 var import_jsx_runtime = require("react/jsx-runtime");
 function StackProvider({
   children,
-  app
+  app,
+  lang
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_provider_client.StackProviderClient, { appJson: app[import_stack_app.stackAppInternalsSymbol].toClientJson(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserFetcher, { app }) }),
-    children
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_translation_provider.TranslationProvider, { lang, children })
   ] });
 }
 function UserFetcher(props) {

package/dist/providers/stack-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/providers/stack-provider.tsx"],"sourcesContent":["import React, { Suspense } from 'react';\nimport { StackAdminApp, StackClientApp, StackServerApp, stackAppInternalsSymbol } from '../lib/stack-app';\nimport { StackProviderClient, UserSetter } from './stack-provider-client';\n\n\nexport default function StackProvider({\n  children,\n  app,\n}: {\n  children: React.ReactNode,\n  // list all three types of apps even though server and admin are subclasses of client so it's clear that you can pass any\n  app: StackClientApp<true> | StackServerApp<true> | StackAdminApp<true>,\n}) {\n  return (\n    <StackProviderClient appJson={app[stackAppInternalsSymbol].toClientJson()}>\n      <Suspense fallback={null}>\n        <UserFetcher app={app} />\n      </Suspense>\n      {children}\n    </StackProviderClient>\n  );\n}\n\nfunction UserFetcher(props: { app: StackClientApp<true> }) {\n  const userPromise = props.app.getUser().then((user) => user?.toClientJson() ?? null);\n  return <UserSetter userJsonPromise={userPromise} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,uBAAuF;AACvF,mCAAgD;AAY5C;AATW,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AACF,GAIG;AACD,SACE,6CAAC,oDAAoB,SAAS,IAAI,wCAAuB,EAAE,aAAa,GACtE;AAAA,gDAAC,yBAAS,UAAU,MAClB,sDAAC,eAAY,KAAU,GACzB;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,SAAS,YAAY,OAAsC;AACzD,QAAM,cAAc,MAAM,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,MAAM,aAAa,KAAK,IAAI;AACnF,SAAO,4CAAC,2CAAW,iBAAiB,aAAa;AACnD;","names":[]}
+{"version":3,"sources":["../../src/providers/stack-provider.tsx"],"sourcesContent":["import React, { Suspense } from 'react';\nimport { StackAdminApp, StackClientApp, StackServerApp, stackAppInternalsSymbol } from '../lib/stack-app';\nimport { StackProviderClient, UserSetter } from './stack-provider-client';\nimport { TranslationProvider } from './translation-provider';\n\n\nexport default function StackProvider({\n  children,\n  app,\n  lang,\n}: {\n  lang?: React.ComponentProps<typeof TranslationProvider>['lang'],\n  children: React.ReactNode,\n  // list all three types of apps even though server and admin are subclasses of client so it's clear that you can pass any\n  app: StackClientApp<true> | StackServerApp<true> | StackAdminApp<true>,\n}) {\n  return (\n    <StackProviderClient appJson={app[stackAppInternalsSymbol].toClientJson()}>\n      <Suspense fallback={null}>\n        <UserFetcher app={app} />\n      </Suspense>\n      <TranslationProvider lang={lang}>\n        {children}\n      </TranslationProvider>\n    </StackProviderClient>\n  );\n}\n\nfunction UserFetcher(props: { app: StackClientApp<true> }) {\n  const userPromise = props.app.getUser().then((user) => user?.toClientJson() ?? null);\n  return <UserSetter userJsonPromise={userPromise} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,uBAAuF;AACvF,mCAAgD;AAChD,kCAAoC;AAchC;AAXW,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,6CAAC,oDAAoB,SAAS,IAAI,wCAAuB,EAAE,aAAa,GACtE;AAAA,gDAAC,yBAAS,UAAU,MAClB,sDAAC,eAAY,KAAU,GACzB;AAAA,IACA,4CAAC,mDAAoB,MAClB,UACH;AAAA,KACF;AAEJ;AAEA,SAAS,YAAY,OAAsC;AACzD,QAAM,cAAc,MAAM,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,MAAM,aAAa,KAAK,IAAI;AACnF,SAAO,4CAAC,2CAAW,iBAAiB,aAAa;AACnD;","names":[]}

package/dist/providers/theme-provider.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 
 type Colors = {
     background: string;
@@ -33,7 +33,7 @@ type ThemeConfig = {
 } & Partial<Omit<Theme, 'light' | 'dark'>>;
 declare function StackTheme({ theme, children, nonce, }: {
     theme?: ThemeConfig;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     nonce?: string;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/providers/theme-provider.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 
 type Colors = {
     background: string;
@@ -33,7 +33,7 @@ type ThemeConfig = {
 } & Partial<Omit<Theme, 'light' | 'dark'>>;
 declare function StackTheme({ theme, children, nonce, }: {
     theme?: ThemeConfig;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     nonce?: string;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/providers/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\nimport Color from \"color\";\nimport { deindent } from \"@stackframe/stack-shared/dist/utils/strings\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n  .stack-scope {\n  ${colorsToCSSVars(colors.light)}\n  }\n  [data-stack-theme=\"dark\"] .stack-scope {\n  ${colorsToCSSVars(colors.dark)}\n  }`;\n}\n\n\nexport function StackTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      {children}\n    </>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA0B;AAC1B,4BAA8B;AAC9B,uBAA8B;AAC9B,mBAAkB;AAClB,qBAAyB;AAuFrB;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,YAAQ,aAAAA,SAAM,KAAK,EAAE,IAAI,EAAE,MAAM;AACvC,WAAO;AAAA;AAAA,MAEL,IAAI,QAAQ,UAAU,OAAK,IAAI,EAAE,YAAY,CAAC,EAAE;AAAA;AAAA,MAEhD,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;AAAA,IACtC;AAAA,EACF,CAAC,CAAC;AACJ;AAEA,SAAS,mBAAmB,OAAc;AACxC,QAAM,EAAE,MAAM,OAAO,GAAG,KAAK,IAAI;AACjC,QAAM,SAAS;AAAA,IACb,OAAO,EAAE,GAAG,sBAAsB,KAAK,GAAG,GAAG,KAAK;AAAA,IAClD,MAAM,sBAAsB,IAAI;AAAA,EAClC;AAEA,WAAS,gBAAgBC,SAAgC;AACvD,WAAO,OAAO,QAAQA,OAAM,EAAE,IAAI,CAAC,WAAW;AAC5C,aAAO,KAAK,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA,IACrC,CAAC,EAAE,KAAK,EAAE;AAAA,EACZ;AAEA,SAAO;AAAA;AAAA,IAEL,gBAAgB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7B,gBAAgB,OAAO,IAAI,CAAC;AAAA;AAEhC;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,aAAoB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,EAAE,GAAG,+BAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,+BAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,4EACE;AAAA,gDAAC,uCAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB;AAAA,QACxB;AAAA,QACA,yBAAyB;AAAA,UACvB,QAAQ,8BAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["Color","colors"]}
+{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\nimport Color from \"color\";\nimport { deindent } from \"@stackframe/stack-shared/dist/utils/strings\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n  .stack-scope {\n  ${colorsToCSSVars(colors.light)}\n  }\n  [data-stack-theme=\"dark\"] .stack-scope {\n  ${colorsToCSSVars(colors.dark)}\n  }`;\n}\n\n\nexport function StackTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      {children}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA0B;AAC1B,4BAA8B;AAC9B,uBAA8B;AAC9B,mBAAkB;AAClB,qBAAyB;AAuFrB;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,YAAQ,aAAAA,SAAM,KAAK,EAAE,IAAI,EAAE,MAAM;AACvC,WAAO;AAAA;AAAA,MAEL,IAAI,QAAQ,UAAU,OAAK,IAAI,EAAE,YAAY,CAAC,EAAE;AAAA;AAAA,MAEhD,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;AAAA,IACtC;AAAA,EACF,CAAC,CAAC;AACJ;AAEA,SAAS,mBAAmB,OAAc;AACxC,QAAM,EAAE,MAAM,OAAO,GAAG,KAAK,IAAI;AACjC,QAAM,SAAS;AAAA,IACb,OAAO,EAAE,GAAG,sBAAsB,KAAK,GAAG,GAAG,KAAK;AAAA,IAClD,MAAM,sBAAsB,IAAI;AAAA,EAClC;AAEA,WAAS,gBAAgBC,SAAgC;AACvD,WAAO,OAAO,QAAQA,OAAM,EAAE,IAAI,CAAC,WAAW;AAC5C,aAAO,KAAK,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA,IACrC,CAAC,EAAE,KAAK,EAAE;AAAA,EACZ;AAEA,SAAO;AAAA;AAAA,IAEL,gBAAgB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7B,gBAAgB,OAAO,IAAI,CAAC;AAAA;AAEhC;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,aAAoB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,EAAE,GAAG,+BAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,+BAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,4EACE;AAAA,gDAAC,uCAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB;AAAA,QACxB;AAAA,QACA,yBAAyB;AAAA,UACvB,QAAQ,8BAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["Color","colors"]}

package/dist/providers/translation-provider-client.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+declare const TranslationContext: React$1.Context<{
+    quetzalKeys: Map<string, string>;
+    quetzalLocale: Map<string, string>;
+} | null>;
+declare function TranslationProviderClient(props: {
+    children: React.ReactNode;
+    quetzalKeys: Map<string, string>;
+    quetzalLocale: Map<string, string>;
+}): react_jsx_runtime.JSX.Element;
+
+export { TranslationContext, TranslationProviderClient };

package/dist/providers/translation-provider-client.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+declare const TranslationContext: React$1.Context<{
+    quetzalKeys: Map<string, string>;
+    quetzalLocale: Map<string, string>;
+} | null>;
+declare function TranslationProviderClient(props: {
+    children: React.ReactNode;
+    quetzalKeys: Map<string, string>;
+    quetzalLocale: Map<string, string>;
+}): react_jsx_runtime.JSX.Element;
+
+export { TranslationContext, TranslationProviderClient };

package/dist/providers/translation-provider-client.js

@@ -0,0 +1,43 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/providers/translation-provider-client.tsx
+var translation_provider_client_exports = {};
+__export(translation_provider_client_exports, {
+  TranslationContext: () => TranslationContext,
+  TranslationProviderClient: () => TranslationProviderClient
+});
+module.exports = __toCommonJS(translation_provider_client_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TranslationContext = (0, import_react.createContext)(null);
+function TranslationProviderClient(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TranslationContext.Provider, { value: {
+    quetzalKeys: props.quetzalKeys,
+    quetzalLocale: props.quetzalLocale
+  }, children: props.children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TranslationContext,
+  TranslationProviderClient
+});
+//# sourceMappingURL=translation-provider-client.js.map

package/dist/providers/translation-provider-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/translation-provider-client.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport const TranslationContext = createContext<null | {\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}>(null);\n\nexport function TranslationProviderClient(props: {\n  children: React.ReactNode,\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}) {\n  return (\n    <TranslationContext.Provider value={{\n      quetzalKeys: props.quetzalKeys,\n      quetzalLocale: props.quetzalLocale,\n    }}>\n      {props.children}\n    </TranslationContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;AAatC;AAXG,IAAM,yBAAqB,4BAG/B,IAAI;AAEA,SAAS,0BAA0B,OAIvC;AACD,SACE,4CAAC,mBAAmB,UAAnB,EAA4B,OAAO;AAAA,IAClC,aAAa,MAAM;AAAA,IACnB,eAAe,MAAM;AAAA,EACvB,GACG,gBAAM,UACT;AAEJ;","names":[]}

package/dist/providers/translation-provider.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { quetzalLocales } from '../generated/quetzal-translations.mjs';
+
+declare function TranslationProvider({ lang, children }: {
+    lang: Parameters<typeof quetzalLocales.get>[0] | undefined;
+    children: React.ReactNode;
+}): Promise<react_jsx_runtime.JSX.Element>;
+
+export { TranslationProvider };

package/dist/providers/translation-provider.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { quetzalLocales } from '../generated/quetzal-translations.js';
+
+declare function TranslationProvider({ lang, children }: {
+    lang: Parameters<typeof quetzalLocales.get>[0] | undefined;
+    children: React.ReactNode;
+}): Promise<react_jsx_runtime.JSX.Element>;
+
+export { TranslationProvider };

package/dist/providers/translation-provider.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/providers/translation-provider.tsx
+var translation_provider_exports = {};
+__export(translation_provider_exports, {
+  TranslationProvider: () => TranslationProvider
+});
+module.exports = __toCommonJS(translation_provider_exports);
+var import_quetzal_translations = require("../generated/quetzal-translations");
+var import_translation_provider_client = require("./translation-provider-client");
+var import_jsx_runtime = require("react/jsx-runtime");
+async function TranslationProvider({ lang, children }) {
+  const locale = import_quetzal_translations.quetzalLocales.get(lang ?? void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_translation_provider_client.TranslationProviderClient, { quetzalKeys: import_quetzal_translations.quetzalKeys, quetzalLocale: locale ?? /* @__PURE__ */ new Map(), children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TranslationProvider
+});
+//# sourceMappingURL=translation-provider.js.map

package/dist/providers/translation-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/translation-provider.tsx"],"sourcesContent":["import { quetzalLocales, quetzalKeys } from \"../generated/quetzal-translations\";\nimport { TranslationProviderClient } from \"./translation-provider-client\";\n\nexport async function TranslationProvider({ lang, children }: {\n  lang: Parameters<typeof quetzalLocales.get>[0] | undefined,\n  children: React.ReactNode,\n}) {\n  const locale = quetzalLocales.get(lang ?? (undefined as never));\n  return <TranslationProviderClient quetzalKeys={quetzalKeys} quetzalLocale={locale ?? new Map()}>\n    {children}\n  </TranslationProviderClient>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA4C;AAC5C,yCAA0C;AAOjC;AALT,eAAsB,oBAAoB,EAAE,MAAM,SAAS,GAGxD;AACD,QAAM,SAAS,2CAAe,IAAI,QAAS,MAAmB;AAC9D,SAAO,4CAAC,gEAA0B,aAAa,yCAAa,eAAe,UAAU,oBAAI,IAAI,GAC1F,UACH;AACF;","names":[]}

package/dist/utils/browser-script.js

@@ -39,14 +39,24 @@ var script = () => {
   const setTheme = (mode) => {
     document.documentElement.setAttribute("data-stack-theme", mode);
   };
+  const colorToRGB = (color) => {
+    const temp = document.createElement("div");
+    temp.style.color = color;
+    document.body.appendChild(temp);
+    const computedColor = getComputedStyle(temp).color;
+    document.body.removeChild(temp);
+    const match = computedColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (match) {
+      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+    }
+    return null;
+  };
+  const rgbToLuma = (rgb) => {
+    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3;
+  };
   const copyFromColorScheme = () => {
     const colorScheme = getComputedStyle(document.documentElement).getPropertyValue("color-scheme");
     if (colorScheme) {
-      if (colorScheme === "normal") {
-        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        setTheme(isDark ? "dark" : "light");
-        return true;
-      }
       const mode = getColorMode(colorScheme);
       if (mode) {
         setTheme(mode);
@@ -55,6 +65,26 @@ var script = () => {
     }
     return false;
   };
+  const copyFromVariables = () => {
+    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue("--background");
+    if (backgroundColor) {
+      if (/^\d+\s\d+%\s\d+(\.\d+)?%$/.test(backgroundColor)) {
+        backgroundColor = `hsl(${backgroundColor})`;
+      }
+      const rgb = colorToRGB(backgroundColor);
+      console.log(rgb);
+      if (rgb) {
+        const luma = rgbToLuma(rgb);
+        if (luma < 128) {
+          setTheme("dark");
+        } else {
+          setTheme("light");
+        }
+        return true;
+      }
+    }
+    return false;
+  };
   const copyFromAttributes = () => {
     for (const attributeName of attributes) {
       const colorTheme = document.documentElement.getAttribute(attributeName);
@@ -73,8 +103,11 @@ var script = () => {
       if (copyFromColorScheme()) {
         return;
       }
-      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {
-        copyFromAttributes();
+      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {
+        return;
+      }
+      if (copyFromVariables()) {
+        return;
       }
     });
   });
@@ -83,7 +116,9 @@ var script = () => {
     attributeFilter: attributes
   });
   if (!copyFromColorScheme()) {
-    copyFromAttributes();
+    if (!copyFromAttributes()) {
+      copyFromVariables();
+    }
   }
 };
 function BrowserScript(props) {

package/dist/utils/browser-script.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\n// Also please note that there might be hydration issues with this script, always check the browser console for errors after changing this script.\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    document.documentElement.setAttribute('data-stack-theme', mode);\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      if (colorScheme === 'normal') {\n        const isDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n        setTheme(isDark ? 'dark' : 'light');\n        return true;\n      }\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {\n        copyFromAttributes();\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    copyFromAttributes();\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,+BAA0B;AA2EjB;AAxET,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,eAAe,CAAC,UAAkB;AACtC,QAAI,MAAM,SAAS,MAAM,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,QAAI,MAAM,SAAS,OAAO,GAAG;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,CAAC,SAA2B;AAC3C,aAAS,gBAAgB,aAAa,oBAAoB,IAAI;AAAA,EAChE;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,cAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAE9F,QAAI,aAAa;AACf,UAAI,gBAAgB,UAAU;AAC5B,cAAM,SAAS,OAAO,WAAW,8BAA8B,EAAE;AACjE,iBAAS,SAAS,SAAS,OAAO;AAClC,eAAO;AAAA,MACT;AACA,YAAM,OAAO,aAAa,WAAW;AACrC,UAAI,MAAM;AACR,iBAAS,IAAI;AACb,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,qBAAqB,MAAM;AAC/B,eAAW,iBAAiB,YAAY;AACtC,YAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,UAAI,YAAY;AACd,cAAM,OAAO,aAAa,UAAU;AACpC,YAAI,MAAM;AACR,mBAAS,IAAI;AACb,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,UAAI,oBAAoB,GAAG;AACzB;AAAA,MACF;AACA,UAAI,SAAS,iBAAiB,WAAW,SAAS,SAAS,aAAa,GAAG;AACzE,2BAAmB;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AAGD,MAAI,CAAC,oBAAoB,GAAG;AAC1B,uBAAmB;AAAA,EACrB;AACF;AAEO,SAAS,cAAc,OAA4B;AACxD,SAAO,4CAAC,sCAAU,OAAO,MAAM,OAAO,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AAC3E;","names":[]}
+{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\n// Also please note that there might be hydration issues with this script, always check the browser console for errors after changing this script.\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    document.documentElement.setAttribute('data-stack-theme', mode);\n  };\n\n  const colorToRGB = (color: string): [number, number, number] | null => {\n    // Create a temporary element to use for color conversion\n    const temp = document.createElement('div');\n    temp.style.color = color;\n    document.body.appendChild(temp);\n\n    // Get the computed style\n    const computedColor = getComputedStyle(temp).color;\n    document.body.removeChild(temp);\n\n    // Parse the RGB values\n    const match = computedColor.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\n    if (match) {\n      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];\n    }\n\n    return null;\n  };\n\n  const rgbToLuma = (rgb: [number, number, number]) => {\n    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromVariables = () => {\n    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background');\n    if (backgroundColor) {\n      // shadcn by default uses the hsl values with the format \"123 45% 6.5%\"\n      if (/^\\d+\\s\\d+%\\s\\d+(\\.\\d+)?%$/.test(backgroundColor)) {\n        backgroundColor = `hsl(${backgroundColor})`;\n      }\n\n      // convert backgroundColor to luma and check if it's dark\n      const rgb = colorToRGB(backgroundColor);\n      console.log(rgb);\n      if (rgb) {\n        const luma = rgbToLuma(rgb);\n        if (luma < 128) {\n          setTheme('dark');\n        } else {\n          setTheme('light');\n        }\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {\n        return;\n      }\n      if (copyFromVariables()) {\n        return;\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    if (!copyFromAttributes()) {\n      copyFromVariables();\n    }\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack",
-  "version": "2.5.33",
+  "version": "2.5.37",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,15 +42,16 @@
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.7.2",
     "yup": "^1.4.0",
-    "@stackframe/stack-sc": "2.5.33",
-    "@stackframe/stack-ui": "2.5.33",
-    "@stackframe/stack-shared": "2.5.33"
+    "@stackframe/stack-sc": "2.5.37",
+    "@stackframe/stack-ui": "2.5.37",
+    "@stackframe/stack-shared": "2.5.37"
   },
   "peerDependencies": {
     "next": ">=14.1",
     "react": ">=18.2"
   },
   "devDependencies": {
+    "@quetzallabs/i18n": "^0.1.19",
     "@types/color": "^3.0.6",
     "@types/cookie": "^0.6.0",
     "@types/js-cookie": "^3.0.6",
@@ -61,6 +62,8 @@
     "chokidar-cli": "^3.0.0",
     "esbuild": "^0.20.2",
     "next": "^14.1.0",
+    "i18next": "^23.14.0",
+    "i18next-parser": "^9.0.2",
     "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "react": "^18.2.0",
@@ -69,15 +72,20 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "rimraf dist && npm run codegen && tsup-node",
-    "codegen": "npm run css",
+    "build": "rimraf dist && pnpm run css && tsup-node",
+    "codegen": "pnpm run css && pnpm run quetzal",
+    "codegen:watch": "concurrently -n \"css,quetzal\" -k \"pnpm run css:watch\" \"pnpm run quetzal:watch\"",
     "clean": "rimraf dist && rimraf node_modules",
-    "dev": "rimraf dist && concurrently -k \"tsup-node --watch\" \"npm run css:tw:watch\" \"npm run css:sc:watch\"",
+    "dev": "rimraf dist && concurrently -n \"build,codegen\" -k \"tsup-node --watch\" \"pnpm run codegen:watch\"",
     "lint": "eslint --ext .tsx,.ts .",
-    "css": "npm run css:tw && npm run css:sc",
-    "css:tw:watch": "tailwindcss -i ./src/global.css -o ./src/generated/tailwind.css --watch",
-    "css:tw": "tailwindcss -i ./src/global.css -o ./src/generated/tailwind.css",
-    "css:sc": "tsx ./scripts/process-css.ts ./src/generated/tailwind.css ./src/generated/global-css.ts",
-    "css:sc:watch": "chokidar --silent './src/generated/tailwind.css' -c 'tsx ./scripts/process-css.ts ./src/generated/tailwind.css ./src/generated/global-css.ts'"
+    "css": "pnpm run css-tw && pnpm run css-sc",
+    "css:watch": "concurrently -n \"tw,sc\" -k \"pnpm run css-tw:watch\" \"pnpm run css-sc:watch\"",
+    "css-tw:watch": "tailwindcss -i ./src/global.css -o ./src/generated/tailwind.css --watch",
+    "css-tw": "tailwindcss -i ./src/global.css -o ./src/generated/tailwind.css",
+    "css-sc": "tsx ./scripts/process-css.ts ./src/generated/tailwind.css ./src/generated/global-css.ts",
+    "css-sc:watch": "chokidar --silent './src/generated/tailwind.css' -c 'pnpm run css-sc'",
+    "override-env-local-for-quetzal": "echo \"\\n$STACK_ENV_LOCAL_PACKAGE_BUILD_OVERRIDE_FOR_QUETZAL\\n\" >> .env.local",
+    "quetzal": "rimraf quetzal-translations && pnpm run override-env-local-for-quetzal && quetzal-process-translations && tsx ./scripts/merge-quetzal-translations.ts",
+    "quetzal:watch": "chokidar --silent \"src/**/*\" -i \"src/generated/quetzal-translations.ts\" -c 'pnpm run quetzal || echo Quetzal failed, probably because the API key is missing. We will just ignore it'"
   }
 }