npm - @stackframe/stack - Versions diffs - 2.6.21 → 2.6.24 - Mend

@stackframe/stack 2.6.21 → 2.6.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/dist/esm/lib/stack-app.js CHANGED Viewed

@@ -25,7 +25,7 @@ import { constructRedirectUrl } from "../utils/url";
 import { addNewOAuthProviderOrScope, callOAuthCallback, signInWithOAuth } from "./auth";
 import { createBrowserCookieHelper, createCookieHelper, deleteCookieClient, getCookieClient, setOrDeleteCookie, setOrDeleteCookieClient } from "./cookie";
 var NextNavigation = scrambleDuringCompileTime(NextNavigationUnscrambled);
-var clientVersion = "js @stackframe/stack@2.6.21";
+var clientVersion = "js @stackframe/stack@2.6.24";
 function getUrls(partial) {
   const handler = partial.handler ?? "/handler";
   const home = partial.home ?? "/";

package/dist/esm/providers/theme-provider.js CHANGED Viewed

@@ -35,7 +35,7 @@ function convertColorsToCSS(theme) {
   .stack-scope {
   ${colorsToCSSVars(colors.light)}
   }
-  [data-stack-theme="dark"] .stack-scope {
+  html:has(head > [data-stack-theme="dark"]) .stack-scope {
   ${colorsToCSSVars(colors.dark)}
   }`;
 }
@@ -55,7 +55,6 @@ function StackTheme({
     /* @__PURE__ */ jsx(
       "style",
       {
-        suppressHydrationWarning: true,
         nonce,
         dangerouslySetInnerHTML: {
           __html: globalCSS + "\n" + convertColorsToCSS(themeValue)

package/dist/esm/providers/theme-provider.js.map CHANGED Viewed

	@@ -1 +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}\n"],"mappings":";;;AAGA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAuFrB,mBACE,KADF;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,QAAQ,MAAM,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,gBAAgBA,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,cAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,iCACE;AAAA,wBAAC,iBAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC~~,0BAAwB~~;AAAA,~~QACxB;AAAA,~~QACA,yBAAyB;AAAA,UACvB,QAAQ,YAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["colors"]}
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 html:has(head > [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 nonce={nonce}\n dangerouslySetInnerHTML={{\n __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n }}\n />\n {children}\n </>\n );\n}\n"],"mappings":";;;AAGA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAuFrB,mBACE,KADF;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,QAAQ,MAAM,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,gBAAgBA,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,cAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,iCACE;AAAA,wBAAC,iBAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,yBAAyB;AAAA,UACvB,QAAQ,YAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["colors"]}

package/dist/esm/utils/browser-script.js CHANGED Viewed

@@ -13,7 +13,14 @@ var script = () => {
     return null;
   };
   const setTheme = (mode) => {
-    document.documentElement.setAttribute("data-stack-theme", mode);
+    let el = document.getElementById(`--stack-theme-mode`);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = `--stack-theme-mode`;
+      el.innerHTML = `/* This tag is used by Stack Auth to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \`html:has(head > [data-stack-theme=XYZ])\` selector to apply styles based on the theme. */`;
+      document.head.appendChild(el);
+    }
+    el.setAttribute("data-stack-theme", mode);
   };
   const colorToRGB = (color) => {
     const temp = document.createElement("div");

package/dist/esm/utils/browser-script.js.map CHANGED Viewed

	@@ -1 +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 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 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":";AAEA,SAAS,iBAAiB;~~AAyHjB~~;~~AAtHT~~,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,aAAa,CAAC,UAAmD;AAErE,UAAM,OAAO,SAAS,cAAc,KAAK;AACzC,SAAK,MAAM,QAAQ;AACnB,aAAS,KAAK,YAAY,IAAI;AAG9B,UAAM,gBAAgB,iBAAiB,IAAI,EAAE;AAC7C,aAAS,KAAK,YAAY,IAAI;AAG9B,UAAM,QAAQ,cAAc,MAAM,kCAAkC;AACpE,QAAI,OAAO;AACT,aAAO,CAAC,SAAS,MAAM,CAAC,CAAC,GAAG,SAAS,MAAM,CAAC,CAAC,GAAG,SAAS,MAAM,CAAC,CAAC,CAAC;AAAA,IACpE;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,CAAC,QAAkC;AACnD,YAAQ,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,OAAO;AAAA,EACxD;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,cAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAE9F,QAAI,aAAa;AACf,YAAM,OAAO,aAAa,WAAW;AACrC,UAAI,MAAM;AACR,iBAAS,IAAI;AACb,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,kBAAkB,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAChG,QAAI,iBAAiB;AAEnB,UAAI,4BAA4B,KAAK,eAAe,GAAG;AACrD,0BAAkB,OAAO,eAAe;AAAA,MAC1C;AAGA,YAAM,MAAM,WAAW,eAAe;AACtC,UAAI,KAAK;AACP,cAAM,OAAO,UAAU,GAAG;AAC1B,YAAI,OAAO,KAAK;AACd,mBAAS,MAAM;AAAA,QACjB,OAAO;AACL,mBAAS,OAAO;AAAA,QAClB;AACA,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,KAAK,mBAAmB,GAAG;AACjG;AAAA,MACF;AACA,UAAI,kBAAkB,GAAG;AACvB;AAAA,MACF;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,QAAI,CAAC,mBAAmB,GAAG;AACzB,wBAAkB;AAAA,IACpB;AAAA,EACF;AACF;AAEO,SAAS,cAAc,OAA4B;AACxD,SAAO,oBAAC,aAAU,OAAO,MAAM,OAAO,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AAC3E;","names":[]}
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\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 let el = document.getElementById(`--stack-theme-mode`);\n if (!el) {\n el = document.createElement(\"style\");\n el.id = `--stack-theme-mode`;\n el.innerHTML = `/* This tag is used by Stack Auth to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \\`html:has(head > [data-stack-theme=XYZ])\\` selector to apply styles based on the theme. /`;\n document.head.appendChild(el);\n }\n el.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 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":[]}