@ngrok/mantle 0.73.3 → 0.73.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider-MMwxHEfw.js","names":[],"sources":["../src/components/theme/themes.ts","../src/components/theme/theme-provider.tsx"],"sourcesContent":["/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] as const;\n\n/**\n * ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n */\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/**\n * themes is a tuple of valid themes.\n */\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/**\n * Theme is a string literal type that represents a valid theme.\n */\ntype Theme = (typeof themes)[number];\n\n/**\n * $theme is a helper which translates the Theme type into a string literal type.\n */\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid theme.\n */\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/**\n * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n */\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid resolved theme.\n */\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\nexport {\n\t//,\n\tthemes,\n\tresolvedThemes,\n\t$resolvedTheme,\n\t$theme,\n\tisResolvedTheme,\n\tisTheme,\n};\n\nexport type {\n\t//,\n\tTheme,\n\tResolvedTheme,\n};\n","\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { canUseDOM } from \"../browser-only/browser-only.js\";\nimport {\n\ttype ResolvedTheme,\n\ttype Theme,\n\tisResolvedTheme,\n\tisTheme,\n\tresolvedThemes,\n\tthemes,\n} from \"./themes.js\";\n\n/**\n * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n */\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n */\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/**\n * THEME_STORAGE_KEY is the key used to store the theme in cookies.\n */\nconst THEME_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * DEFAULT_THEME is the initial theme to apply if no value is found in storage.\n * {@link themes}\n */\nconst DEFAULT_THEME = \"system\" satisfies Theme;\n\n/**\n * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n */\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/**\n * Initial state for the ThemeProviderContext.\n */\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/**\n * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n */\nconst ThemeProviderContext = createContext<ThemeProviderState | null>(initialState);\n\ntype ThemeProviderProps = PropsWithChildren;\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#themeprovider\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"system\" storageKey=\"app-theme\">\n *   <App />\n * </ThemeProvider>\n * ```\n */\nfunction ThemeProvider({ children }: ThemeProviderProps) {\n\t// Init once from cookie and apply immediately to avoid flashes\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst storedTheme = getStoredTheme({\n\t\t\tcookie: canUseDOM() ? document.cookie : null,\n\t\t});\n\t\tapplyThemeToHtml(storedTheme);\n\t\treturn storedTheme;\n\t});\n\n\tconst broadcastChannelRef = useRef<BroadcastChannel | null>(null);\n\n\tuseEffect(() => {\n\t\tfunction syncThemeFromCookie(next?: Theme) {\n\t\t\tconst newTheme = next ?? getStoredTheme({ cookie: document.cookie });\n\t\t\tsetTheme(newTheme);\n\t\t\tapplyThemeToHtml(newTheme);\n\t\t}\n\n\t\t// initial sync in case defaultTheme or storageKey changed\n\t\tsyncThemeFromCookie();\n\n\t\t// add cross-tab listeners (prefer broadcast channel, use localStorage as fallback)\n\t\ttry {\n\t\t\tif (\"BroadcastChannel\" in window) {\n\t\t\t\tbroadcastChannelRef.current = new BroadcastChannel(THEME_STORAGE_KEY);\n\t\t\t\tbroadcastChannelRef.current.addEventListener(\"message\", (event) => {\n\t\t\t\t\tconst value: unknown = event?.data?.theme;\n\t\t\t\t\tif (isTheme(value)) {\n\t\t\t\t\t\tsyncThemeFromCookie(value);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t} catch {\n\t\t\t// silently swallow errors\n\t\t}\n\n\t\tfunction onStorage(event: StorageEvent) {\n\t\t\tif (event.key === `${THEME_STORAGE_KEY}__ping`) {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\t\twindow.addEventListener(\"storage\", onStorage);\n\n\t\t// add media query listeners for system theme changes\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(prefersHighContrastMediaQuery);\n\n\t\tfunction onChange() {\n\t\t\tsyncThemeFromCookie();\n\t\t}\n\n\t\tfunction onVisibilityChange() {\n\t\t\tif (document.visibilityState === \"visible\") {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\t// pageshow fires on bfcache restore (event.persisted === true) and some restore-from-freeze cases.\n\t\twindow.addEventListener(\"pageshow\", onChange);\n\n\t\t// visibilitychange to handle coming back to a tab\n\t\tdocument.addEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t// don't forget to clean up your slop!\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"storage\", onStorage);\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t\twindow.removeEventListener(\"pageshow\", onChange);\n\t\t\tdocument.removeEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t\ttry {\n\t\t\t\tbroadcastChannelRef.current?.close();\n\t\t\t} catch {\n\t\t\t\t// silently swallow errors\n\t\t\t}\n\t\t\tbroadcastChannelRef.current = null;\n\t\t};\n\t}, []);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(next: Theme) => {\n\t\t\t\tsetCookie(next);\n\t\t\t\tsetTheme(next);\n\t\t\t\tapplyThemeToHtml(next);\n\t\t\t\tnotifyOtherTabs(next, {\n\t\t\t\t\tbroadcastChannel: broadcastChannelRef.current,\n\t\t\t\t\tpingKey: `${THEME_STORAGE_KEY}__ping`,\n\t\t\t\t});\n\t\t\t},\n\t\t],\n\t\t[theme],\n\t);\n\n\treturn <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\nThemeProvider.displayName = \"ThemeProvider\";\n\n/**\n * useTheme returns the current theme and a function to set the theme.\n *\n * @note This function will throw an error if used outside of a ThemeProvider context tree.\n */\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/**\n * Applies the given theme to the `<html>` element.\n */\nfunction applyThemeToHtml(theme: Theme) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\tconst html = window.document.documentElement;\n\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\n\tconst resolvedTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\n\tconst htmlTheme = html.dataset.theme;\n\tconst htmlAppliedTheme = html.dataset.appliedTheme;\n\n\tconst currentTheme = isTheme(htmlTheme) ? htmlTheme : undefined;\n\tconst currentResolvedTheme = isResolvedTheme(htmlAppliedTheme) ? htmlAppliedTheme : undefined;\n\n\tif (currentTheme === theme && currentResolvedTheme === resolvedTheme) {\n\t\t// nothing to do: input theme and resolved class already match\n\t\treturn;\n\t}\n\n\t// Clear any stale theme class, then apply the new one\n\thtml.classList.remove(...resolvedThemes); // ✅ remove all potential theme classes\n\thtml.classList.add(resolvedTheme);\n\thtml.dataset.theme = theme;\n\thtml.dataset.appliedTheme = resolvedTheme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!canUseDOM()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction resolveTheme(\n\ttheme: Theme,\n\t{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\t}\n\n\treturn theme;\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction useAppliedTheme() {\n\tconst themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/**\n * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n *\n * @example\n * ```tsx\n * const theme = determineThemeFromMediaQuery({\n *   prefersDarkMode: true,\n *   prefersHighContrast: false\n * });\n * // Returns: \"dark\"\n *\n * const themeWithContrast = determineThemeFromMediaQuery({\n *   prefersDarkMode: false,\n *   prefersHighContrast: true\n * });\n * // Returns: \"light-high-contrast\"\n * ```\n */\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\n/**\n * The FOUC-prevention bootstrap. This entire function is stringified and inlined\n * into a blocking `<script>` in the document head; it runs synchronously before\n * React mounts (and before first paint) so the resolved theme class is on\n * `<html>` by the time the browser paints, avoiding a light→dark (or vice-versa)\n * flash.\n *\n * Resolution order:\n *  1. Read the stored preference: cookie first, then `localStorage` (legacy fallback).\n *  2. Validate it against the configured `themes`; fall back to `defaultTheme` otherwise.\n *  3. If the preference is `\"system\"`, resolve against the OS media queries\n *     (`prefers-color-scheme`, `prefers-contrast`).\n *  4. Apply the resolved class to `<html>` and refresh the cookie so subsequent\n *     SSRs see the same value.\n *\n * Why nested helpers: this function is serialized verbatim into the inlined\n * script, so it must be hermetic — every helper it calls has to travel with it.\n * Hoisting them to module scope would leave dangling references in the inlined\n * source. All catches are intentionally swallowing to keep the script crash-free\n * in environments where cookies / `localStorage` / `matchMedia` throw (sandboxed\n * iframes, privacy modes, SSR-style polyfills).\n *\n * @param args.storageKey                    Cookie + localStorage key for the persisted theme.\n * @param args.defaultTheme                  Theme to use when no valid preference is stored.\n * @param args.themes                        Allowed `Theme` values (used to validate stored input).\n * @param args.resolvedThemes                Allowed `ResolvedTheme` class names applied to `<html>`.\n * @param args.prefersDarkModeMediaQuery     Media query string for OS dark-mode detection.\n * @param args.prefersHighContrastMediaQuery Media query string for OS high-contrast detection.\n */\nfunction preventThemeFlash(args: {\n\tstorageKey: string;\n\tdefaultTheme: Theme;\n\tthemes: readonly Theme[];\n\tresolvedThemes: readonly ResolvedTheme[];\n\tprefersDarkModeMediaQuery: string;\n\tprefersHighContrastMediaQuery: string;\n}) {\n\tconst {\n\t\tstorageKey,\n\t\tdefaultTheme,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} = args;\n\n\tfunction isTheme(value: unknown): value is Theme {\n\t\treturn typeof value === \"string\" && themes.includes(value as Theme);\n\t}\n\n\t// Nested helpers below must stay inside `preventThemeFlash` so they are\n\t// included when the function is stringified into the inlined FOUC-prevention\n\t// script. Hoisting them would leave dangling references at runtime.\n\t// oxlint-disable-next-line unicorn/consistent-function-scoping\n\tfunction getThemeFromCookie(name: string): string | null {\n\t\tconst cookie = document.cookie;\n\t\tif (!cookie) {\n\t\t\treturn null;\n\t\t}\n\n\t\ttry {\n\t\t\tconst cookies = cookie.split(\";\");\n\t\t\tconst themeCookie = cookies.find((c) => c.trim().startsWith(`${name}=`));\n\t\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\t\tconst storedTheme = cookieValue ? decodeURIComponent(cookieValue) : null;\n\t\t\treturn storedTheme;\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\t// oxlint-disable-next-line unicorn/consistent-function-scoping -- stringified into the inlined FOUC script; see note above.\n\tfunction buildCookie(name: string, val: string): string {\n\t\tconst expires = new Date();\n\t\texpires.setFullYear(expires.getFullYear() + 1);\n\t\tconst hostname = window.location.hostname;\n\t\tconst protocol = window.location.protocol;\n\t\tconst domainAttribute =\n\t\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\") ? \"; domain=.ngrok.com\" : \"\";\n\t\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\t\treturn `${name}=${encodeURIComponent(val)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}`;\n\t}\n\n\tfunction writeCookie(name: string, val: string): void {\n\t\ttry {\n\t\t\tdocument.cookie = buildCookie(name, val);\n\t\t} catch {\n\t\t\t// silently swallow errors\n\t\t}\n\t}\n\n\t// oxlint-disable-next-line unicorn/consistent-function-scoping -- stringified into the inlined FOUC script; see note above.\n\tfunction resolveThemeValue(\n\t\ttheme: Theme,\n\t\tisDark: boolean,\n\t\tisHighContrast: boolean,\n\t): ResolvedTheme {\n\t\tif (theme === \"system\") {\n\t\t\tif (isHighContrast) {\n\t\t\t\treturn isDark ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t\t}\n\t\t\treturn isDark ? \"dark\" : \"light\";\n\t\t}\n\t\treturn theme;\n\t}\n\n\t// 1) Read preference: cookie first, fallback to localStorage (migration support)\n\tlet cookieTheme: string | null = null;\n\tlet lsTheme: string | null = null;\n\tlet storedTheme: Theme | null = null;\n\n\ttry {\n\t\tcookieTheme = getThemeFromCookie(storageKey);\n\t} catch {\n\t\t// silently swallow errors\n\t}\n\n\tif (isTheme(cookieTheme)) {\n\t\tstoredTheme = cookieTheme;\n\t} else {\n\t\ttry {\n\t\t\tlsTheme = window.localStorage?.getItem(storageKey) ?? null;\n\t\t} catch {\n\t\t\t// silently swallow errors\n\t\t}\n\t\tif (isTheme(lsTheme)) {\n\t\t\tstoredTheme = lsTheme;\n\t\t}\n\t}\n\n\tconst preference = isTheme(storedTheme) ? storedTheme : defaultTheme;\n\n\t// 2) Resolve theme based on media queries\n\tconst isDark = matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst isHighContrast = matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst resolvedTheme = resolveThemeValue(preference, isDark, isHighContrast);\n\n\tconst html = document.documentElement;\n\t// 3) Apply theme to DOM (same order as applyThemeToHtml)\n\tif (html.dataset.appliedTheme !== resolvedTheme || html.dataset.theme !== preference) {\n\t\t// Remove all theme classes\n\t\tfor (const themeClass of resolvedThemes as readonly string[]) {\n\t\t\thtml.classList.remove(themeClass);\n\t\t}\n\t\t// Add resolved theme class\n\t\thtml.classList.add(resolvedTheme);\n\t\t// Set data attributes\n\t\thtml.dataset.theme = preference;\n\t\thtml.dataset.appliedTheme = resolvedTheme;\n\t}\n\n\t// 4) Handle persistence/migration synchronously to prevent FOUC\n\tconst hadValidCookie = isTheme(cookieTheme);\n\ttry {\n\t\tif (isTheme(lsTheme) && !hadValidCookie) {\n\t\t\t// Migrate from localStorage to cookie\n\t\t\twriteCookie(storageKey, lsTheme);\n\t\t\ttry {\n\t\t\t\twindow.localStorage.removeItem(storageKey);\n\t\t\t} catch {\n\t\t\t\t// silently swallow errors\n\t\t\t}\n\t\t} else if (!hadValidCookie) {\n\t\t\t// Set default cookie if none existed\n\t\t\twriteCookie(storageKey, preference);\n\t\t}\n\t} catch {\n\t\t// silently swallow errors\n\t}\n}\n\n/**\n * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.\n * It checks cookies for a stored theme, and if none is found, it sets the default theme.\n * It also applies the correct theme to the `<html>` element based on the user's media query preferences.\n */\nfunction preventWrongThemeFlashScriptContent() {\n\tconst args = {\n\t\tstorageKey: THEME_STORAGE_KEY,\n\t\tdefaultTheme: DEFAULT_THEME,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} as const satisfies Parameters<typeof preventThemeFlash>[0];\n\n\treturn `(${preventThemeFlash.toString()})(${JSON.stringify(args)})`;\n}\n\nexport type PreventWrongThemeFlashScriptProps = {\n\t/**\n\t * An optional CSP nonce to allowlist this inline script. Using this can help\n\t * you to avoid using the CSP `unsafe-inline` directive, which disables\n\t * XSS protection and would allowlist all inline scripts or styles.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\n/**\n * Renders an inline script that prevents Flash of Unstyled Content (FOUC) or the\n * wrong theme flashing on first paint.\n *\n * This is the preferred building block for SSR apps. Pair it with\n * {@link preloadFontLink} HTTP `Link` headers in your server entry so font fetches\n * begin before HTML is parsed. For client-only apps without header control, pair\n * it with {@link PreloadFont} elements in `<head>` instead.\n *\n * Place this as early as possible in the `<head>`.\n *\n * @example\n * ```tsx\n * // entry.server.tsx — send font preloads as HTTP headers (preferred for SSR)\n * headers.set(\"Link\", [\n *   `<${assetsCdnOrigin}>; rel=preconnect; crossorigin`,\n *   preloadFontLink(\"roobert\"),\n *   preloadFontLink(\"jetbrains-mono\"),\n * ].join(\", \"));\n *\n * // root.tsx — only the FOUC script in <head>\n * <head>\n *   <PreventWrongThemeFlashScript nonce={nonce} />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns {JSX.Element} A script tag injected before first paint.\n * @see preloadFontLink\n * @see PreloadFont\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst PreventWrongThemeFlashScript = ({ nonce }: PreventWrongThemeFlashScriptProps) => (\n\t<script\n\t\tdangerouslySetInnerHTML={{\n\t\t\t__html: preventWrongThemeFlashScriptContent(),\n\t\t}}\n\t\tnonce={nonce}\n\t\tsuppressHydrationWarning\n\t/>\n);\nPreventWrongThemeFlashScript.displayName = \"PreventWrongThemeFlashScript\";\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": ResolvedTheme;\n\t\"data-theme\": Theme;\n};\n\ntype UseInitialHtmlThemePropsOptions = {\n\tclassName?: string;\n\t/**\n\t * Theme cookie string for SSR theme resolution. Pass only the theme cookie\n\t * pair (via {@link extractThemeCookie}) rather than the full raw `Cookie`\n\t * header to avoid leaking sensitive cookies in serialized loader data.\n\t */\n\tssrCookie?: string;\n};\n\n/**\n * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n */\nfunction useInitialHtmlThemeProps(props: UseInitialHtmlThemePropsOptions = {}): InitialThemeProps {\n\tconst { className = \"\", ssrCookie } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tlet initialTheme: Theme;\n\t\tlet resolvedTheme: ResolvedTheme;\n\n\t\tif (!canUseDOM()) {\n\t\t\tinitialTheme = getStoredTheme({ cookie: ssrCookie });\n\t\t\tresolvedTheme = resolveTheme(initialTheme, {\n\t\t\t\t// During SSR we can't detect media queries, so assume light/no high contrast.\n\t\t\t\t// The inline script will correct this before paint for \"system\" theme users.\n\t\t\t\tprefersDarkMode: false,\n\t\t\t\tprefersHighContrast: false,\n\t\t\t});\n\t\t} else {\n\t\t\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\t\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\t\tinitialTheme = getStoredTheme({ cookie: document.cookie });\n\t\t\tresolvedTheme = resolveTheme(initialTheme, {\n\t\t\t\tprefersDarkMode,\n\t\t\t\tprefersHighContrast,\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tclassName: cx(className, resolvedTheme),\n\t\t\t\"data-applied-theme\": resolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className, ssrCookie]);\n}\n\ntype GetStoredThemeOptions = {\n\t/**\n\t * raw Cookie header (SSR) or document.cookie (client)\n\t */\n\tcookie: string | null | undefined;\n};\n\n/**\n * Returns the persisted UI theme from a Cookie header string.\n *\n * Looks for a cookie named by {@link THEME_STORAGE_KEY} and returns its value **iff**\n * it’s a valid `Theme` per `isTheme`. Otherwise, falls back to\n * {@link DEFAULT_THEME}. This function never throws; malformed encodings or\n * missing cookies quietly return the default.\n *\n * @example\n * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // \"dark\"\n * @example\n * getStoredTheme({ cookie: \"\" }) // DEFAULT_THEME\n */\nfunction getStoredTheme({ cookie }: GetStoredThemeOptions): Theme {\n\tif (!cookie) {\n\t\treturn DEFAULT_THEME;\n\t}\n\n\ttry {\n\t\tconst cookies = cookie.split(\";\");\n\t\tconst themeCookie = cookies.find((cookieStr) =>\n\t\t\tcookieStr.trim().startsWith(`${THEME_STORAGE_KEY}=`),\n\t\t);\n\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\tconst storedTheme = cookieValue ? globalThis.decodeURIComponent(cookieValue) : null;\n\n\t\treturn isTheme(storedTheme) ? storedTheme : DEFAULT_THEME;\n\t} catch {\n\t\treturn DEFAULT_THEME;\n\t}\n}\n\n/**\n * Extract just the mantle theme cookie from a raw `Cookie` header string.\n *\n * Use this in SSR loaders to safely pass the theme cookie to\n * {@link useInitialHtmlThemeProps} without exposing the full `Cookie` header\n * (which may contain HttpOnly/session cookies) in serialized loader data.\n *\n * @example\n * ```ts\n * // app/root.tsx loader\n * export const loader = async ({ request }: Route.LoaderArgs) => {\n *   const themeCookie = extractThemeCookie(request.headers.get(\"Cookie\"));\n *   return { themeCookie };\n * };\n * ```\n *\n * @param cookieHeader - The raw `Cookie` header string from the request, or null/undefined.\n * @returns The `mantle-ui-theme=<value>` cookie string, or undefined if not found.\n */\nfunction extractThemeCookie(cookieHeader: string | null | undefined): string | undefined {\n\tif (!cookieHeader) {\n\t\treturn undefined;\n\t}\n\n\treturn cookieHeader\n\t\t.split(\";\")\n\t\t.map((part) => part.trim())\n\t\t.find((part) => part.startsWith(`${THEME_STORAGE_KEY}=`));\n}\n\nexport {\n\tPreventWrongThemeFlashScript,\n\tThemeProvider,\n\t//,\n\textractThemeCookie,\n\tgetStoredTheme,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\n/**\n * Notifies other open tabs (same origin) that the theme changed.\n *\n * Prefers a shared {@link BroadcastChannel} for immediate, reliable delivery.\n * Falls back to writing a unique “ping” value to `localStorage`, which triggers\n * the cross-tab `storage` event. Both mechanisms only work across the same origin.\n *\n * Uses a timestamp to ensure the storage value always changes so the event fires.\n *\n * @remarks\n * - Same-origin only: BroadcastChannel and the `storage` event do not cross subdomains\n *   or different schemes/ports. For cross-subdomain sync, use a postMessage hub or server push.\n * - This function is fire-and-forget and intentionally swallows errors.\n * - Receivers should re-read the cookie/source of truth and then apply the theme;\n *   don’t trust the payload blindly.\n *\n * @example\n * // Sender (inside your setter)\n * notifyOtherTabs(nextTheme, {\n *   broadcastChannel: broadcastChannelRef.current,\n *   pingKey: `${storageKey}__ping`,\n * });\n *\n * @example\n * // Receiver (setup once per tab)\n * const bc = new BroadcastChannel(storageKey);\n * bc.onmessage = () => syncThemeFromCookie();\n * window.addEventListener('storage', (e) => {\n *   if (e.key === `${storageKey}__ping`) syncThemeFromCookie();\n * });\n */\nfunction notifyOtherTabs(\n\ttheme: Theme,\n\toptions: {\n\t\tbroadcastChannel: BroadcastChannel | null;\n\t\tpingKey: `${string}__ping`;\n\t},\n) {\n\tconst { broadcastChannel, pingKey } = options;\n\n\t// first try BroadcastChannel\n\ttry {\n\t\tif (broadcastChannel) {\n\t\t\t// BroadcastChannel.postMessage has no `targetOrigin` parameter (unlike Window.postMessage); the rule can't distinguish the two.\n\t\t\t// oxlint-disable unicorn/require-post-message-target-origin\n\t\t\tbroadcastChannel.postMessage({\n\t\t\t\ttheme,\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t});\n\t\t\t// oxlint-enable unicorn/require-post-message-target-origin\n\t\t\treturn;\n\t\t}\n\t} catch {\n\t\t// silently swallow errors\n\t}\n\n\t// fallback to storage event: write a \"ping\" key (not the real storageKey)\n\ttry {\n\t\tlocalStorage.setItem(pingKey, JSON.stringify({ theme, timestamp: Date.now() }));\n\t} catch {\n\t\t// silently swallow errors\n\t}\n}\n\nfunction buildThemeCookie(value: string) {\n\tconst expires = new Date();\n\texpires.setFullYear(expires.getFullYear() + 1); // 1 year expiration\n\n\t// Only set .ngrok.com domain for ngrok domains, otherwise let it default to current domain\n\tconst { hostname, protocol } = window.location;\n\tconst domainAttribute =\n\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\") ? \"; domain=.ngrok.com\" : \"\";\n\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\n\treturn `${THEME_STORAGE_KEY}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}` as const;\n}\n\n/**\n * Sets a cookie with appropriate domain for the current hostname.\n * Uses .ngrok.com for ngrok domains, otherwise no domain (current domain only).\n */\nfunction setCookie(value: string) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\ttry {\n\t\tdocument.cookie = buildThemeCookie(value);\n\t} catch {\n\t\t// silently swallow errors\n\t}\n}\n"],"mappings":"sTAGA,MAAM,EAAiB,CAAC,QAAS,OAAQ,sBAAuB,oBAAoB,EAU9E,EAAS,CAAC,SAAU,GAAG,CAAc,EAUrC,EAAmC,GAAa,EAKtD,SAAS,EAAQ,EAAgC,CAKhD,OAJI,OAAO,GAAU,SAId,EAAO,SAAS,CAAc,EAH7B,EAIT,CAKA,MAAM,EAA2D,GAAa,EAK9E,SAAS,EAAgB,EAAwC,CAKhE,OAJI,OAAO,GAAU,SAId,EAAe,SAAS,CAAsB,EAH7C,EAIT,CC9BA,MAAM,EAA4B,+BAK5B,EAAgC,2BAKhC,EAAoB,kBAMpB,EAAgB,SAehB,EAAuB,EAAyC,CAL5B,aAAgB,IAKuB,CAAC,EAgBlF,SAAS,EAAc,CAAE,YAAgC,CAExD,GAAM,CAAC,EAAO,GAAY,MAAsB,CAC/C,IAAM,EAAc,EAAe,CAClC,OAAQ,EAAU,EAAI,SAAS,OAAS,IACzC,CAAC,EAED,OADA,EAAiB,CAAW,EACrB,CACR,CAAC,EAEK,EAAsB,EAAgC,IAAI,EAEhE,MAAgB,CACf,SAAS,EAAoB,EAAc,CAC1C,IAAM,EAAW,GAAQ,EAAe,CAAE,OAAQ,SAAS,MAAO,CAAC,EACnE,EAAS,CAAQ,EACjB,EAAiB,CAAQ,CAC1B,CAGA,EAAoB,EAGpB,GAAI,CACC,qBAAsB,SACzB,EAAoB,QAAU,IAAI,iBAAiB,CAAiB,EACpE,EAAoB,QAAQ,iBAAiB,UAAY,GAAU,CAClE,IAAM,EAAiB,GAAO,MAAM,MAChC,EAAQ,CAAK,GAChB,EAAoB,CAAK,CAE3B,CAAC,EAEH,MAAQ,CAER,CAEA,SAAS,EAAU,EAAqB,CACnC,EAAM,MAAQ,GAAG,EAAkB,SACtC,EAAoB,CAEtB,CACA,OAAO,iBAAiB,UAAW,CAAS,EAG5C,IAAM,EAAiB,OAAO,WAAW,CAAyB,EAC5D,EAAyB,OAAO,WAAW,CAA6B,EAE9E,SAAS,GAAW,CACnB,EAAoB,CACrB,CAEA,SAAS,GAAqB,CACzB,SAAS,kBAAoB,WAChC,EAAoB,CAEtB,CAYA,OAVA,EAAe,iBAAiB,SAAU,CAAQ,EAClD,EAAuB,iBAAiB,SAAU,CAAQ,EAG1D,OAAO,iBAAiB,WAAY,CAAQ,EAG5C,SAAS,iBAAiB,mBAAoB,CAAkB,MAGnD,CACZ,OAAO,oBAAoB,UAAW,CAAS,EAC/C,EAAe,oBAAoB,SAAU,CAAQ,EACrD,EAAuB,oBAAoB,SAAU,CAAQ,EAC7D,OAAO,oBAAoB,WAAY,CAAQ,EAC/C,SAAS,oBAAoB,mBAAoB,CAAkB,EAEnE,GAAI,CACH,EAAoB,SAAS,MAAM,CACpC,MAAQ,CAER,CACA,EAAoB,QAAU,IAC/B,CACD,EAAG,CAAC,CAAC,EAEL,IAAM,EAA4B,MAC3B,CACL,EACC,GAAgB,CAChB,EAAU,CAAI,EACd,EAAS,CAAI,EACb,EAAiB,CAAI,EACrB,EAAgB,EAAM,CACrB,iBAAkB,EAAoB,QACtC,QAAS,GAAG,EAAkB,OAC/B,CAAC,CACF,CACD,EACA,CAAC,CAAK,CACP,EAEA,OAAO,EAAC,EAAqB,SAAtB,CAAsC,QAAQ,UAAwC,CAAA,CAC9F,CACA,EAAc,YAAc,gBAO5B,SAAS,GAAW,CACnB,IAAM,EAAU,EAAW,CAAoB,EAI/C,OAFA,EAAU,EAAS,8CAA8C,EAE1D,CACR,CAKA,SAAS,EAAiB,EAAc,CACvC,GAAI,CAAC,EAAU,EACd,OAGD,IAAM,EAAO,OAAO,SAAS,gBAEvB,EAAkB,OAAO,WAAW,CAAyB,EAAE,QAC/D,EAAsB,OAAO,WAAW,CAA6B,EAAE,QAEvE,EAAgB,EAAa,EAAO,CACzC,kBACA,qBACD,CAAC,EAEK,EAAY,EAAK,QAAQ,MACzB,EAAmB,EAAK,QAAQ,aAEhC,EAAe,EAAQ,CAAS,EAAI,EAAY,IAAA,GAChD,EAAuB,EAAgB,CAAgB,EAAI,EAAmB,IAAA,GAEhF,IAAiB,GAAS,IAAyB,IAMvD,EAAK,UAAU,OAAO,GAAG,CAAc,EACvC,EAAK,UAAU,IAAI,CAAa,EAChC,EAAK,QAAQ,MAAQ,EACrB,EAAK,QAAQ,aAAe,EAC7B,CAKA,SAAS,GAA2B,CACnC,GAAI,CAAC,EAAU,EACd,MAAO,CACN,aAAc,IAAA,GACd,MAAO,IAAA,EACR,EAGD,IAAM,EAAc,OAAO,SAAS,gBAC9B,EAAQ,EAAQ,EAAY,QAAQ,KAAK,EAAI,EAAY,QAAQ,MAAQ,IAAA,GAK/E,MAAO,CACN,aALoB,EAAgB,EAAY,QAAQ,YAAY,EAClE,EAAY,QAAQ,aACpB,IAAA,GAIF,OACD,CACD,CAMA,SAAS,EACR,EACA,CACC,kBACA,uBAEA,CAQD,OAPI,IAAU,SACN,EAA6B,CACnC,kBACA,qBACD,CAAC,EAGK,CACR,CAMA,SAAS,GAAkB,CAC1B,IAAM,EAAe,EAAW,CAAoB,EAMpD,OAAO,EALO,GAAgB,KAAyB,SAAlB,EAAa,GAKvB,CAAE,gBAHL,EAAqB,CAGF,EAAG,oBAFlB,EAAqB,CAEe,CAAE,CAAC,CACpE,CAqBA,SAAgB,EAA6B,CAC5C,kBACA,uBAIiB,CAKjB,OAJI,EACI,EAAkB,qBAAuB,sBAG1C,EAAkB,OAAS,OACnC,CA+BA,SAAS,EAAkB,EAOxB,CACF,GAAM,CACL,aACA,eACA,SACA,iBACA,4BACA,iCACG,EAEJ,SAAS,EAAQ,EAAgC,CAChD,OAAO,OAAO,GAAU,UAAY,EAAO,SAAS,CAAc,CACnE,CAMA,SAAS,EAAmB,EAA6B,CACxD,IAAM,EAAS,SAAS,OACxB,GAAI,CAAC,EACJ,OAAO,KAGR,GAAI,CAGH,IAAM,EAFU,EAAO,MAAM,GACH,EAAE,KAAM,GAAM,EAAE,KAAK,EAAE,WAAW,GAAG,EAAK,EAAE,CACxC,GAAG,MAAM,GAAG,EAAE,GAE5C,OADoB,EAAc,mBAAmB,CAAW,EAAI,IAErE,MAAQ,CACP,OAAO,IACR,CACD,CAGA,SAAS,EAAY,EAAc,EAAqB,CACvD,IAAM,EAAU,IAAI,KACpB,EAAQ,YAAY,EAAQ,YAAY,EAAI,CAAC,EAC7C,IAAM,EAAW,OAAO,SAAS,SAC3B,EAAW,OAAO,SAAS,SAC3B,EACL,IAAa,aAAe,EAAS,SAAS,YAAY,EAAI,sBAAwB,GACjF,EAAkB,IAAa,SAAW,WAAa,GAC7D,MAAO,GAAG,EAAK,GAAG,mBAAmB,CAAG,EAAE,YAAY,EAAQ,YAAY,EAAE,UAAU,EAAgB,gBAAgB,GACvH,CAEA,SAAS,EAAY,EAAc,EAAmB,CACrD,GAAI,CACH,SAAS,OAAS,EAAY,EAAM,CAAG,CACxC,MAAQ,CAER,CACD,CAGA,SAAS,EACR,EACA,EACA,EACgB,CAOhB,OANI,IAAU,SACT,EACI,EAAS,qBAAuB,sBAEjC,EAAS,OAAS,QAEnB,CACR,CAGA,IAAI,EAA6B,KAC7B,EAAyB,KACzB,EAA4B,KAEhC,GAAI,CACH,EAAc,EAAmB,CAAU,CAC5C,MAAQ,CAER,CAEA,GAAI,EAAQ,CAAW,EACtB,EAAc,MACR,CACN,GAAI,CACH,EAAU,OAAO,cAAc,QAAQ,CAAU,GAAK,IACvD,MAAQ,CAER,CACI,EAAQ,CAAO,IAClB,EAAc,EAEhB,CAEA,IAAM,EAAa,EAAQ,CAAW,EAAI,EAAc,EAGlD,EAAS,WAAW,CAAyB,EAAE,QAC/C,EAAiB,WAAW,CAA6B,EAAE,QAC3D,EAAgB,EAAkB,EAAY,EAAQ,CAAc,EAEpE,EAAO,SAAS,gBAEtB,GAAI,EAAK,QAAQ,eAAiB,GAAiB,EAAK,QAAQ,QAAU,EAAY,CAErF,IAAK,IAAM,KAAc,EACxB,EAAK,UAAU,OAAO,CAAU,EAGjC,EAAK,UAAU,IAAI,CAAa,EAEhC,EAAK,QAAQ,MAAQ,EACrB,EAAK,QAAQ,aAAe,CAC7B,CAGA,IAAM,EAAiB,EAAQ,CAAW,EAC1C,GAAI,CACH,GAAI,EAAQ,CAAO,GAAK,CAAC,EAAgB,CAExC,EAAY,EAAY,CAAO,EAC/B,GAAI,CACH,OAAO,aAAa,WAAW,CAAU,CAC1C,MAAQ,CAER,CACD,MAAY,GAEX,EAAY,EAAY,CAAU,CAEpC,MAAQ,CAER,CACD,CAOA,SAAS,GAAsC,CAC9C,IAAM,EAAO,CACZ,WAAY,EACZ,aAAc,EACd,SACA,iBACA,4BACA,+BACD,EAEA,MAAO,IAAI,EAAkB,SAAS,EAAE,IAAI,KAAK,UAAU,CAAI,EAAE,EAClE,CA6CA,MAAM,GAAgC,CAAE,WACvC,EAAC,SAAD,CACC,wBAAyB,CACxB,OAAQ,EAAoC,CAC7C,EACO,QACP,yBAAA,EACA,CAAA,EAEF,EAA6B,YAAc,+BAqB3C,SAAS,EAAyB,EAAyC,CAAC,EAAsB,CACjG,GAAM,CAAE,YAAY,GAAI,aAAc,GAAS,CAAC,EAEhD,OAAO,MAAc,CACpB,IAAI,EACA,EAEJ,GAAI,CAAC,EAAU,EACd,EAAe,EAAe,CAAE,OAAQ,CAAU,CAAC,EACnD,EAAgB,EAAa,EAAc,CAG1C,gBAAiB,GACjB,oBAAqB,EACtB,CAAC,MACK,CACN,IAAM,EAAkB,OAAO,WAAW,CAAyB,EAAE,QAC/D,EAAsB,OAAO,WAAW,CAA6B,EAAE,QAC7E,EAAe,EAAe,CAAE,OAAQ,SAAS,MAAO,CAAC,EACzD,EAAgB,EAAa,EAAc,CAC1C,kBACA,qBACD,CAAC,CACF,CAEA,MAAO,CACN,UAAW,EAAG,EAAW,CAAa,EACtC,qBAAsB,EACtB,aAAc,CACf,CACD,EAAG,CAAC,EAAW,CAAS,CAAC,CAC1B,CAsBA,SAAS,EAAe,CAAE,UAAwC,CACjE,GAAI,CAAC,EACJ,OAAO,EAGR,GAAI,CAKH,IAAM,EAJU,EAAO,MAAM,GACH,EAAE,KAAM,GACjC,EAAU,KAAK,EAAE,WAAW,GAAG,EAAkB,EAAE,CAEtB,GAAG,MAAM,GAAG,EAAE,GACtC,EAAc,EAAc,WAAW,mBAAmB,CAAW,EAAI,KAE/E,OAAO,EAAQ,CAAW,EAAI,EAAc,CAC7C,MAAQ,CACP,OAAO,CACR,CACD,CAqBA,SAAS,EAAmB,EAA6D,CACnF,KAIL,OAAO,EACL,MAAM,GAAG,EACT,IAAK,GAAS,EAAK,KAAK,CAAC,EACzB,KAAM,GAAS,EAAK,WAAW,GAAG,EAAkB,EAAE,CAAC,CAC1D,CA8CA,SAAS,EACR,EACA,EAIC,CACD,GAAM,CAAE,mBAAkB,WAAY,EAGtC,GAAI,CACH,GAAI,EAAkB,CAGrB,EAAiB,YAAY,CAC5B,QACA,UAAW,KAAK,IAAI,CACrB,CAAC,EAED,MACD,CACD,MAAQ,CAER,CAGA,GAAI,CACH,aAAa,QAAQ,EAAS,KAAK,UAAU,CAAE,QAAO,UAAW,KAAK,IAAI,CAAE,CAAC,CAAC,CAC/E,MAAQ,CAER,CACD,CAEA,SAAS,EAAiB,EAAe,CACxC,IAAM,EAAU,IAAI,KACpB,EAAQ,YAAY,EAAQ,YAAY,EAAI,CAAC,EAG7C,GAAM,CAAE,WAAU,YAAa,OAAO,SAChC,EACL,IAAa,aAAe,EAAS,SAAS,YAAY,EAAI,sBAAwB,GACjF,EAAkB,IAAa,SAAW,WAAa,GAE7D,MAAO,GAAG,EAAkB,GAAG,mBAAmB,CAAK,EAAE,YAAY,EAAQ,YAAY,EAAE,UAAU,EAAgB,gBAAgB,GACtI,CAMA,SAAS,EAAU,EAAe,CAC5B,KAAU,EAIf,GAAI,CACH,SAAS,OAAS,EAAiB,CAAK,CACzC,MAAQ,CAER,CACD"}

package/dist/theme.d.ts

@@ -1,6 +1,5 @@
-import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./themes-FPux5kIu.js";
+import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./themes-CYNpplwN.js";
 import { PropsWithChildren } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/theme/mantle-style-sheets.d.ts
 /**
@@ -163,7 +162,7 @@ declare function MantleStyleSheets({
   forceTheme,
   nonce,
   ssrCookie
-}: MantleStyleSheetsProps): _$react_jsx_runtime0.JSX.Element;
+}: MantleStyleSheetsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace MantleStyleSheets {
   var displayName: string;
 }
@@ -188,7 +187,7 @@ type ThemeProviderProps = PropsWithChildren;
  */
 declare function ThemeProvider({
   children
-}: ThemeProviderProps): _$react_jsx_runtime0.JSX.Element;
+}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
   var displayName: string;
 }
@@ -202,14 +201,14 @@ declare function useTheme(): ThemeProviderState;
  * Read the theme and applied theme from the `<html>` element.
  */
 declare function readThemeFromHtmlElement(): {
-  appliedTheme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | undefined;
-  theme: "dark" | "light" | "system" | "light-high-contrast" | "dark-high-contrast" | undefined;
+  appliedTheme: "light" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
+  theme: "system" | "light" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
 };
 /**
  * If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.
  * This will mirror the result that gets applied to the <html> element.
  */
-declare function useAppliedTheme(): "dark" | "light" | "light-high-contrast" | "dark-high-contrast";
+declare function useAppliedTheme(): "light" | "dark" | "light-high-contrast" | "dark-high-contrast";
 /**
  * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.
  * @private
@@ -280,7 +279,7 @@ type PreventWrongThemeFlashScriptProps = {
 declare const PreventWrongThemeFlashScript: {
   ({
     nonce
-  }: PreventWrongThemeFlashScriptProps): _$react_jsx_runtime0.JSX.Element;
+  }: PreventWrongThemeFlashScriptProps): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 type InitialThemeProps = {
@@ -346,7 +345,7 @@ declare function extractThemeCookie(cookieHeader: string | null | undefined): st
 //#endregion
 //#region src/components/theme/fonts.d.ts
 /**
- * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.
+ * @file Helpers for preloading ngrok brand fonts from the CDN.
  * All font URLs resolve to `${assetsCdnOrigin}/fonts`.
  */
 /**
@@ -437,7 +436,7 @@ declare function preloadFontLink(name: CoreFontName): string;
 declare const PreloadFont: {
   ({
     name
-  }: PreloadFontProps): _$react_jsx_runtime0.JSX.Element;
+  }: PreloadFontProps): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/theme.js

@@ -1,2 +1,2 @@
-import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-provider-BFcnjeME.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e;return{dark:n===`dark`?`all`:S,lightHighContrast:n===`light-high-contrast`?`all`:C,darkHighContrast:n===`dark-high-contrast`?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i);return v(g,{children:[(!i||i===`dark`)&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),(!i||i===`light-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),(!i||i===`dark-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),!i&&l==null&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}k.displayName=`MantleStyleSheets`;const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){return`${j}${e.startsWith(`/`)?e:`/${e}`}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});F.displayName=`PreloadFont`;export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,O as fixMediaScriptContent,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
+import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-provider-MMwxHEfw.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e;return{dark:n===`dark`?`all`:S,lightHighContrast:n===`light-high-contrast`?`all`:C,darkHighContrast:n===`dark-high-contrast`?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i);return v(g,{children:[(!i||i===`dark`)&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),(!i||i===`light-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),(!i||i===`dark-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),!i&&l==null&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}k.displayName=`MantleStyleSheets`;const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){return`${j}${e.startsWith(`/`)?e:`/${e}`}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});F.displayName=`PreloadFont`;export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,O as fixMediaScriptContent,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
 //# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../src/components/theme/mantle-style-sheets.tsx","../src/components/theme/fonts.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { getStoredTheme } from \"./theme-provider.js\";\nimport type { ResolvedTheme } from \"./themes.js\";\nimport { isResolvedTheme } from \"./themes.js\";\n\n/**\n * Stable IDs for the three lazy-loaded theme `<link>` elements.\n * Used to locate them in the DOM for media attribute updates.\n */\nconst DARK_LINK_ID = \"mantle-dark-styles\";\nconst LIGHT_HIGH_CONTRAST_LINK_ID = \"mantle-light-high-contrast-styles\";\nconst DARK_HIGH_CONTRAST_LINK_ID = \"mantle-dark-high-contrast-styles\";\n\n/**\n * Default `media` attribute values for each lazy-loaded stylesheet.\n * Each one matches only the OS preference for that theme, making them\n * non-render-blocking for users whose OS does not match.\n */\nconst MEDIA_DARK = \"(prefers-color-scheme: dark)\";\nconst MEDIA_LIGHT_HC = \"(prefers-contrast: more) and (prefers-color-scheme: light)\";\nconst MEDIA_DARK_HC = \"(prefers-contrast: more) and (prefers-color-scheme: dark)\";\n\ntype MediaValues = {\n\tdark: string;\n\tlightHighContrast: string;\n\tdarkHighContrast: string;\n};\n\n/**\n * Compute the `media` attribute value for each stylesheet given the active theme.\n * When a theme is active (either from the resolved applied theme or a forced override),\n * its stylesheet's `media` is set to `\"all\"` so the CSS is applied regardless of OS preference.\n */\nfunction computeMediaValues(\n\tappliedTheme: ResolvedTheme | undefined,\n\tforceTheme: ResolvedTheme | undefined,\n): MediaValues {\n\tconst theme = forceTheme ?? appliedTheme;\n\treturn {\n\t\tdark: theme === \"dark\" ? \"all\" : MEDIA_DARK,\n\t\tlightHighContrast: theme === \"light-high-contrast\" ? \"all\" : MEDIA_LIGHT_HC,\n\t\tdarkHighContrast: theme === \"dark-high-contrast\" ? \"all\" : MEDIA_DARK_HC,\n\t};\n}\n\n/**\n * Browser-accessible URLs for mantle's three lazy-loaded theme stylesheets.\n *\n * Use {@link mantleStyleSheetUrls} to create this object from Vite `?url` imports.\n */\nexport type MantleThemeCssUrls = {\n\t/**\n\t * Browser-accessible URL for `mantle-dark.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\"\n\t * ```\n\t */\n\tdarkCssUrl: string;\n\t/**\n\t * Browser-accessible URL for `mantle-light-high-contrast.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\"\n\t * ```\n\t */\n\tlightHighContrastCssUrl: string;\n\t/**\n\t * Browser-accessible URL for `mantle-dark-high-contrast.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\"\n\t * ```\n\t */\n\tdarkHighContrastCssUrl: string;\n};\n\n/**\n * Collects the three Vite `?url` imports for mantle's theme stylesheets into a typed object\n * that can be spread directly into `<MantleStyleSheets>`.\n *\n * Call this once at the top of your app entry (e.g. `root.tsx`) and spread the result:\n *\n * ```ts\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n *\n * // In JSX:\n * <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={ssrCookie} />\n * ```\n */\nfunction mantleStyleSheetUrls(urls: MantleThemeCssUrls): MantleThemeCssUrls {\n\treturn urls;\n}\n\nexport type MantleStyleSheetsProps = MantleThemeCssUrls & {\n\t/**\n\t * Force a specific resolved theme's stylesheet to load unconditionally (`media=\"all\"`),\n\t * regardless of the user's OS preference. Use this when your app is locked to a single\n\t * theme (e.g. a dark-only page) so the required CSS is render-blocking as intended.\n\t *\n\t * When omitted, each stylesheet uses its OS media query and becomes non-render-blocking\n\t * for users whose OS preference does not match.\n\t *\n\t * @example\n\t * // Dark-only app — always load dark CSS eagerly\n\t * <MantleStyleSheets forceTheme=\"dark\" {...themeUrls} />\n\t */\n\tforceTheme?: ResolvedTheme;\n\t/**\n\t * The theme cookie string from the incoming HTTP request (e.g. `request.headers.get(\"Cookie\")`\n\t * or the pre-extracted value from {@link extractThemeCookie}). When provided, the server can\n\t * resolve the stored theme and render the correct `media` attribute directly in the SSR HTML,\n\t * eliminating the need for the inline fix script in cases where the user has a non-system\n\t * theme stored in their cookie.\n\t *\n\t * @example\n\t * ```tsx\n\t * // root.tsx loader\n\t * export async function loader({ request }: Route.LoaderArgs) {\n\t *   return { ssrCookie: extractThemeCookie(request.headers.get(\"Cookie\")) };\n\t * }\n\t *\n\t * // root.tsx component\n\t * <MantleStyleSheets {...themeUrls} ssrCookie={loaderData.ssrCookie} nonce={nonce} />\n\t * ```\n\t */\n\tssrCookie?: string;\n\t/**\n\t * An optional CSP nonce to allowlist the inline script that fixes `media` attributes\n\t * synchronously after the `<link>` tags are parsed. Mirror the same nonce you pass\n\t * to {@link PreventWrongThemeFlashScript}.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\n/**\n * Inline script that runs synchronously after the `<link>` tags are parsed to fix their\n * `media` attributes based on the applied theme already written to `html[data-applied-theme]`\n * by `PreventWrongThemeFlashScript`. This eliminates FOUC for users who have manually\n * selected a theme that differs from their OS preference.\n */\nfunction fixMediaAttributes(args: {\n\tdarkLinkId: string;\n\tlightHcLinkId: string;\n\tdarkHcLinkId: string;\n\tmediaDark: string;\n\tmediaLightHc: string;\n\tmediaDarkHc: string;\n\tforceTheme: ResolvedTheme | undefined;\n}) {\n\tconst {\n\t\tdarkLinkId,\n\t\tlightHcLinkId,\n\t\tdarkHcLinkId,\n\t\tmediaDark,\n\t\tmediaLightHc,\n\t\tmediaDarkHc,\n\t\tforceTheme,\n\t} = args;\n\tconst appliedTheme = document.documentElement.dataset.appliedTheme;\n\tconst theme = forceTheme ?? appliedTheme;\n\n\tconst darkLink = document.getElementById(darkLinkId) as HTMLLinkElement | null;\n\tconst lightHcLink = document.getElementById(lightHcLinkId) as HTMLLinkElement | null;\n\tconst darkHcLink = document.getElementById(darkHcLinkId) as HTMLLinkElement | null;\n\n\tif (darkLink) {\n\t\tdarkLink.media = theme === \"dark\" ? \"all\" : mediaDark;\n\t}\n\tif (lightHcLink) {\n\t\tlightHcLink.media = theme === \"light-high-contrast\" ? \"all\" : mediaLightHc;\n\t}\n\tif (darkHcLink) {\n\t\tdarkHcLink.media = theme === \"dark-high-contrast\" ? \"all\" : mediaDarkHc;\n\t}\n}\n\n/**\n * Returns the raw JavaScript string for the inline `<script>` that runs synchronously\n * after the `<link>` tags are parsed to fix their `media` attributes based on the applied\n * theme already written to `html[data-applied-theme]` by `PreventWrongThemeFlashScript`.\n * This eliminates FOUC for users who have manually selected a theme that differs from\n * their OS preference.\n *\n * Use this when you need to inline the script directly into SSR HTML outside of a React\n * context — for example, in a legacy Go service that renders the initial HTML response.\n *\n * @example\n * ```go\n * // In a Go template, inline script content that was pre-generated by mantle\n * // (e.g., via fixMediaScriptContent(undefined) in a JS/Node build step)\n * fmt.Fprintf(w, `<script nonce=\"%s\">%s</script>`, nonce, scriptContent)\n * ```\n */\nfunction fixMediaScriptContent(forceTheme?: ResolvedTheme): string {\n\tconst args = {\n\t\tdarkLinkId: DARK_LINK_ID,\n\t\tlightHcLinkId: LIGHT_HIGH_CONTRAST_LINK_ID,\n\t\tdarkHcLinkId: DARK_HIGH_CONTRAST_LINK_ID,\n\t\tmediaDark: MEDIA_DARK,\n\t\tmediaLightHc: MEDIA_LIGHT_HC,\n\t\tmediaDarkHc: MEDIA_DARK_HC,\n\t\tforceTheme,\n\t} satisfies Parameters<typeof fixMediaAttributes>[0];\n\treturn `(${fixMediaAttributes.toString()})(${JSON.stringify(args)})`;\n}\n\n/**\n * Renders `<link rel=\"stylesheet\">` tags for the dark, light-high-contrast, and\n * dark-high-contrast theme CSS files. Each stylesheet is gated behind a `media` attribute\n * matching its OS preference so it is non-render-blocking for users who do not need it.\n *\n * Use {@link mantleStyleSheetUrls} to collect the required CSS URL props from Vite `?url`\n * imports and spread them in:\n *\n * ```ts\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n * ```\n *\n * Place this component in `<head>`, after `<PreventWrongThemeFlashScript>`.\n *\n * On the client, a `MutationObserver` watches `html[data-applied-theme]` (kept in sync by\n * `ThemeProvider`) and updates the `media` attributes to `\"all\"` when the user manually\n * selects a theme that differs from their OS preference, ensuring the correct CSS is applied.\n *\n * When `forceTheme` is set, only the link tag for that theme is rendered — the others are\n * omitted entirely to avoid unnecessary network requests.\n *\n * @example\n * ```tsx\n * // root.tsx\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n * import { mantleStyleSheetUrls, MantleStyleSheets, PreventWrongThemeFlashScript } from \"@ngrok/mantle/theme\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n *\n * <head>\n *   <PreventWrongThemeFlashScript nonce={nonce} />\n *   <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={loaderData?.ssrCookie} />\n * </head>\n * ```\n */\nfunction MantleStyleSheets({\n\tdarkCssUrl,\n\tlightHighContrastCssUrl,\n\tdarkHighContrastCssUrl,\n\tforceTheme,\n\tnonce,\n\tssrCookie,\n}: MantleStyleSheetsProps) {\n\tuseEffect(() => {\n\t\tfunction getAppliedTheme(): ResolvedTheme | undefined {\n\t\t\tconst value = document.documentElement.dataset.appliedTheme;\n\t\t\treturn isResolvedTheme(value) ? value : undefined;\n\t\t}\n\n\t\tfunction updateMediaAttributes() {\n\t\t\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\t\t\tgetAppliedTheme(),\n\t\t\t\tforceTheme,\n\t\t\t);\n\n\t\t\tconst darkLink = document.getElementById(DARK_LINK_ID) as HTMLLinkElement | null;\n\t\t\tconst lightHighContrastLink = document.getElementById(\n\t\t\t\tLIGHT_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\t\t\tconst darkHighContrastLink = document.getElementById(\n\t\t\t\tDARK_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\n\t\t\tif (darkLink) {\n\t\t\t\tdarkLink.media = dark;\n\t\t\t}\n\t\t\tif (lightHighContrastLink) {\n\t\t\t\tlightHighContrastLink.media = lightHighContrast;\n\t\t\t}\n\t\t\tif (darkHighContrastLink) {\n\t\t\t\tdarkHighContrastLink.media = darkHighContrast;\n\t\t\t}\n\t\t}\n\n\t\t// Sync immediately on mount in case the applied theme diverges from the SSR-rendered media values\n\t\tupdateMediaAttributes();\n\n\t\t// Watch for theme changes driven by ThemeProvider\n\t\tconst observer = new MutationObserver(updateMediaAttributes);\n\t\tobserver.observe(document.documentElement, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: [\"data-applied-theme\"],\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [forceTheme]);\n\n\t// On SSR (and as the initial React render), emit the link tags with media values\n\t// derived from the cookie-stored theme (if available) and forceTheme.\n\t// The useEffect above will correct them on the client before the user can interact.\n\tconst ssrStoredTheme = ssrCookie != null ? getStoredTheme({ cookie: ssrCookie }) : undefined;\n\tconst ssrAppliedTheme = ssrStoredTheme !== \"system\" ? ssrStoredTheme : undefined;\n\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\tssrAppliedTheme,\n\t\tforceTheme,\n\t);\n\n\t// The inline fix script corrects media attributes for users whose stored theme differs from\n\t// their OS preference. It is only needed when the SSR HTML may have been rendered with\n\t// incorrect media values — i.e. when neither ssrCookie (with a non-system theme) nor\n\t// forceTheme provide a deterministic answer at render time.\n\tconst needsFixScript = !forceTheme && ssrAppliedTheme == null;\n\n\t// When forceTheme is set, only render the link tag for that specific theme's stylesheet.\n\t// Light is the base theme with no dedicated lazy stylesheet, so forceTheme=\"light\" renders\n\t// no link tags at all. When forceTheme is unset, all three are rendered.\n\tconst renderDark = !forceTheme || forceTheme === \"dark\";\n\tconst renderLightHighContrast = !forceTheme || forceTheme === \"light-high-contrast\";\n\tconst renderDarkHighContrast = !forceTheme || forceTheme === \"dark-high-contrast\";\n\n\treturn (\n\t\t<>\n\t\t\t{renderDark && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={DARK_LINK_ID}\n\t\t\t\t\thref={darkCssUrl}\n\t\t\t\t\tmedia={dark}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{renderLightHighContrast && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={LIGHT_HIGH_CONTRAST_LINK_ID}\n\t\t\t\t\thref={lightHighContrastCssUrl}\n\t\t\t\t\tmedia={lightHighContrast}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{renderDarkHighContrast && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={DARK_HIGH_CONTRAST_LINK_ID}\n\t\t\t\t\thref={darkHighContrastCssUrl}\n\t\t\t\t\tmedia={darkHighContrast}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{needsFixScript && (\n\t\t\t\t<script\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: fixMediaScriptContent(forceTheme) }}\n\t\t\t\t\tnonce={nonce}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\nMantleStyleSheets.displayName = \"MantleStyleSheets\";\n\nexport {\n\t//,\n\tfixMediaScriptContent,\n\tmantleStyleSheetUrls,\n\tMantleStyleSheets,\n};\n","/**\n * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\nconst coreFontNames = [\n\t\"roobert\",\n\t\"jetbrains-mono\",\n\t\"jetbrains-mono-italic\",\n\t\"family-regular\",\n\t\"family-italic\",\n] as const;\n/**\n * Named keys identifying each individual core font.\n * @public\n */\ntype CoreFontName = (typeof coreFontNames)[number];\n\n/**\n * Maps each {@link CoreFontName} to its CDN font path (relative to the fonts base).\n * @internal\n */\nconst coreFontPathByName = {\n\troobert: \"/roobert/roobert-proportional-vf.woff2\",\n\t\"jetbrains-mono\": \"/jetbrains/jetbrainsmono-wght.woff2\",\n\t\"jetbrains-mono-italic\": \"/jetbrains/jetbrainsmono-italic-wght.woff2\",\n\t\"family-regular\": \"/family/family-regular.woff2\",\n\t\"family-italic\": \"/family/family-italic.woff2\",\n} as const satisfies Record<CoreFontName, `/${string}`>;\n\ntype FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/roobert/roobert-proportional-vf.woff2\");\n * // -> \"https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Props for {@link PreloadFont}.\n * @public\n */\ntype PreloadFontProps = {\n\t/**\n\t * The name of the individual core font to preload.\n\t *\n\t * - `\"roobert\"` — Roobert proportional variable font\n\t * - `\"jetbrains-mono\"` — JetBrains Mono variable weight\n\t * - `\"jetbrains-mono-italic\"` — JetBrains Mono italic variable weight\n\t * - `\"family-regular\"` — Family regular\n\t * - `\"family-italic\"` — Family italic\n\t */\n\tname: CoreFontName;\n};\n\n/**\n * Returns an HTTP `Link` header value that preloads a single core font by name.\n *\n * Identical in intent to {@link PreloadFont}, but for server-side use where\n * you want to send the preload hint as an HTTP header instead of (or in\n * addition to) an HTML `<link>` element. Sending this as a `Link` header lets\n * the browser start the font fetch before it has parsed any HTML.\n *\n * @remarks\n * For best performance, also send a `preconnect` hint to {@link assetsCdnOrigin}\n * in the same `Link` header.\n *\n * @example\n * ```ts\n * // In an HTTP handler / server entry:\n * headers.append(\"Link\", preloadFontLink(\"roobert\"));\n * headers.append(\"Link\", preloadFontLink(\"jetbrains-mono\"));\n *\n * // Or as a single combined header:\n * headers.set(\"Link\", [\n *   `<${assetsCdnOrigin}>; rel=preconnect; crossorigin`,\n *   preloadFontLink(\"roobert\"),\n * ].join(\", \"));\n * ```\n */\nfunction preloadFontLink(name: CoreFontName): string {\n\tconst href = fontHref(coreFontPathByName[name]);\n\treturn `<${href}>; rel=preload; as=font; type=\"font/woff2\"; crossorigin`;\n}\n\n/**\n * Preloads a single core font by name.\n *\n * Use this when you only need one or two specific fonts rather than all core\n * fonts. Include it as early as possible in the document `<head>`.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * @example\n * ```tsx\n * <head>\n *   <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n *   <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *   <PreloadFont name=\"roobert\" />\n *   <PreloadFont name=\"jetbrains-mono\" />\n * </head>\n * ```\n */\nconst PreloadFont = ({ name }: PreloadFontProps) => (\n\t<link\n\t\trel=\"preload\"\n\t\thref={fontHref(coreFontPathByName[name])}\n\t\tas=\"font\"\n\t\ttype=\"font/woff2\"\n\t\tcrossOrigin=\"anonymous\"\n\t/>\n);\nPreloadFont.displayName = \"PreloadFont\";\n\nexport type { CoreFontName };\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tpreloadFontLink,\n\tPreloadFont,\n};\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../src/components/theme/mantle-style-sheets.tsx","../src/components/theme/fonts.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { getStoredTheme } from \"./theme-provider.js\";\nimport type { ResolvedTheme } from \"./themes.js\";\nimport { isResolvedTheme } from \"./themes.js\";\n\n/**\n * Stable IDs for the three lazy-loaded theme `<link>` elements.\n * Used to locate them in the DOM for media attribute updates.\n */\nconst DARK_LINK_ID = \"mantle-dark-styles\";\nconst LIGHT_HIGH_CONTRAST_LINK_ID = \"mantle-light-high-contrast-styles\";\nconst DARK_HIGH_CONTRAST_LINK_ID = \"mantle-dark-high-contrast-styles\";\n\n/**\n * Default `media` attribute values for each lazy-loaded stylesheet.\n * Each one matches only the OS preference for that theme, making them\n * non-render-blocking for users whose OS does not match.\n */\nconst MEDIA_DARK = \"(prefers-color-scheme: dark)\";\nconst MEDIA_LIGHT_HC = \"(prefers-contrast: more) and (prefers-color-scheme: light)\";\nconst MEDIA_DARK_HC = \"(prefers-contrast: more) and (prefers-color-scheme: dark)\";\n\ntype MediaValues = {\n\tdark: string;\n\tlightHighContrast: string;\n\tdarkHighContrast: string;\n};\n\n/**\n * Compute the `media` attribute value for each stylesheet given the active theme.\n * When a theme is active (either from the resolved applied theme or a forced override),\n * its stylesheet's `media` is set to `\"all\"` so the CSS is applied regardless of OS preference.\n */\nfunction computeMediaValues(\n\tappliedTheme: ResolvedTheme | undefined,\n\tforceTheme: ResolvedTheme | undefined,\n): MediaValues {\n\tconst theme = forceTheme ?? appliedTheme;\n\treturn {\n\t\tdark: theme === \"dark\" ? \"all\" : MEDIA_DARK,\n\t\tlightHighContrast: theme === \"light-high-contrast\" ? \"all\" : MEDIA_LIGHT_HC,\n\t\tdarkHighContrast: theme === \"dark-high-contrast\" ? \"all\" : MEDIA_DARK_HC,\n\t};\n}\n\n/**\n * Browser-accessible URLs for mantle's three lazy-loaded theme stylesheets.\n *\n * Use {@link mantleStyleSheetUrls} to create this object from Vite `?url` imports.\n */\nexport type MantleThemeCssUrls = {\n\t/**\n\t * Browser-accessible URL for `mantle-dark.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\"\n\t * ```\n\t */\n\tdarkCssUrl: string;\n\t/**\n\t * Browser-accessible URL for `mantle-light-high-contrast.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\"\n\t * ```\n\t */\n\tlightHighContrastCssUrl: string;\n\t/**\n\t * Browser-accessible URL for `mantle-dark-high-contrast.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\"\n\t * ```\n\t */\n\tdarkHighContrastCssUrl: string;\n};\n\n/**\n * Collects the three Vite `?url` imports for mantle's theme stylesheets into a typed object\n * that can be spread directly into `<MantleStyleSheets>`.\n *\n * Call this once at the top of your app entry (e.g. `root.tsx`) and spread the result:\n *\n * ```ts\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n *\n * // In JSX:\n * <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={ssrCookie} />\n * ```\n */\nfunction mantleStyleSheetUrls(urls: MantleThemeCssUrls): MantleThemeCssUrls {\n\treturn urls;\n}\n\nexport type MantleStyleSheetsProps = MantleThemeCssUrls & {\n\t/**\n\t * Force a specific resolved theme's stylesheet to load unconditionally (`media=\"all\"`),\n\t * regardless of the user's OS preference. Use this when your app is locked to a single\n\t * theme (e.g. a dark-only page) so the required CSS is render-blocking as intended.\n\t *\n\t * When omitted, each stylesheet uses its OS media query and becomes non-render-blocking\n\t * for users whose OS preference does not match.\n\t *\n\t * @example\n\t * // Dark-only app — always load dark CSS eagerly\n\t * <MantleStyleSheets forceTheme=\"dark\" {...themeUrls} />\n\t */\n\tforceTheme?: ResolvedTheme;\n\t/**\n\t * The theme cookie string from the incoming HTTP request (e.g. `request.headers.get(\"Cookie\")`\n\t * or the pre-extracted value from {@link extractThemeCookie}). When provided, the server can\n\t * resolve the stored theme and render the correct `media` attribute directly in the SSR HTML,\n\t * eliminating the need for the inline fix script in cases where the user has a non-system\n\t * theme stored in their cookie.\n\t *\n\t * @example\n\t * ```tsx\n\t * // root.tsx loader\n\t * export async function loader({ request }: Route.LoaderArgs) {\n\t *   return { ssrCookie: extractThemeCookie(request.headers.get(\"Cookie\")) };\n\t * }\n\t *\n\t * // root.tsx component\n\t * <MantleStyleSheets {...themeUrls} ssrCookie={loaderData.ssrCookie} nonce={nonce} />\n\t * ```\n\t */\n\tssrCookie?: string;\n\t/**\n\t * An optional CSP nonce to allowlist the inline script that fixes `media` attributes\n\t * synchronously after the `<link>` tags are parsed. Mirror the same nonce you pass\n\t * to {@link PreventWrongThemeFlashScript}.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\n/**\n * Inline script that runs synchronously after the `<link>` tags are parsed to fix their\n * `media` attributes based on the applied theme already written to `html[data-applied-theme]`\n * by `PreventWrongThemeFlashScript`. This eliminates FOUC for users who have manually\n * selected a theme that differs from their OS preference.\n */\nfunction fixMediaAttributes(args: {\n\tdarkLinkId: string;\n\tlightHcLinkId: string;\n\tdarkHcLinkId: string;\n\tmediaDark: string;\n\tmediaLightHc: string;\n\tmediaDarkHc: string;\n\tforceTheme: ResolvedTheme | undefined;\n}) {\n\tconst {\n\t\tdarkLinkId,\n\t\tlightHcLinkId,\n\t\tdarkHcLinkId,\n\t\tmediaDark,\n\t\tmediaLightHc,\n\t\tmediaDarkHc,\n\t\tforceTheme,\n\t} = args;\n\tconst appliedTheme = document.documentElement.dataset.appliedTheme;\n\tconst theme = forceTheme ?? appliedTheme;\n\n\tconst darkLink = document.getElementById(darkLinkId) as HTMLLinkElement | null;\n\tconst lightHcLink = document.getElementById(lightHcLinkId) as HTMLLinkElement | null;\n\tconst darkHcLink = document.getElementById(darkHcLinkId) as HTMLLinkElement | null;\n\n\tif (darkLink) {\n\t\tdarkLink.media = theme === \"dark\" ? \"all\" : mediaDark;\n\t}\n\tif (lightHcLink) {\n\t\tlightHcLink.media = theme === \"light-high-contrast\" ? \"all\" : mediaLightHc;\n\t}\n\tif (darkHcLink) {\n\t\tdarkHcLink.media = theme === \"dark-high-contrast\" ? \"all\" : mediaDarkHc;\n\t}\n}\n\n/**\n * Returns the raw JavaScript string for the inline `<script>` that runs synchronously\n * after the `<link>` tags are parsed to fix their `media` attributes based on the applied\n * theme already written to `html[data-applied-theme]` by `PreventWrongThemeFlashScript`.\n * This eliminates FOUC for users who have manually selected a theme that differs from\n * their OS preference.\n *\n * Use this when you need to inline the script directly into SSR HTML outside of a React\n * context — for example, in a legacy Go service that renders the initial HTML response.\n *\n * @example\n * ```go\n * // In a Go template, inline script content that was pre-generated by mantle\n * // (e.g., via fixMediaScriptContent(undefined) in a JS/Node build step)\n * fmt.Fprintf(w, `<script nonce=\"%s\">%s</script>`, nonce, scriptContent)\n * ```\n */\nfunction fixMediaScriptContent(forceTheme?: ResolvedTheme): string {\n\tconst args = {\n\t\tdarkLinkId: DARK_LINK_ID,\n\t\tlightHcLinkId: LIGHT_HIGH_CONTRAST_LINK_ID,\n\t\tdarkHcLinkId: DARK_HIGH_CONTRAST_LINK_ID,\n\t\tmediaDark: MEDIA_DARK,\n\t\tmediaLightHc: MEDIA_LIGHT_HC,\n\t\tmediaDarkHc: MEDIA_DARK_HC,\n\t\tforceTheme,\n\t} satisfies Parameters<typeof fixMediaAttributes>[0];\n\treturn `(${fixMediaAttributes.toString()})(${JSON.stringify(args)})`;\n}\n\n/**\n * Renders `<link rel=\"stylesheet\">` tags for the dark, light-high-contrast, and\n * dark-high-contrast theme CSS files. Each stylesheet is gated behind a `media` attribute\n * matching its OS preference so it is non-render-blocking for users who do not need it.\n *\n * Use {@link mantleStyleSheetUrls} to collect the required CSS URL props from Vite `?url`\n * imports and spread them in:\n *\n * ```ts\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n * ```\n *\n * Place this component in `<head>`, after `<PreventWrongThemeFlashScript>`.\n *\n * On the client, a `MutationObserver` watches `html[data-applied-theme]` (kept in sync by\n * `ThemeProvider`) and updates the `media` attributes to `\"all\"` when the user manually\n * selects a theme that differs from their OS preference, ensuring the correct CSS is applied.\n *\n * When `forceTheme` is set, only the link tag for that theme is rendered — the others are\n * omitted entirely to avoid unnecessary network requests.\n *\n * @example\n * ```tsx\n * // root.tsx\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n * import { mantleStyleSheetUrls, MantleStyleSheets, PreventWrongThemeFlashScript } from \"@ngrok/mantle/theme\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n *\n * <head>\n *   <PreventWrongThemeFlashScript nonce={nonce} />\n *   <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={loaderData?.ssrCookie} />\n * </head>\n * ```\n */\nfunction MantleStyleSheets({\n\tdarkCssUrl,\n\tlightHighContrastCssUrl,\n\tdarkHighContrastCssUrl,\n\tforceTheme,\n\tnonce,\n\tssrCookie,\n}: MantleStyleSheetsProps) {\n\tuseEffect(() => {\n\t\tfunction getAppliedTheme(): ResolvedTheme | undefined {\n\t\t\tconst value = document.documentElement.dataset.appliedTheme;\n\t\t\treturn isResolvedTheme(value) ? value : undefined;\n\t\t}\n\n\t\tfunction updateMediaAttributes() {\n\t\t\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\t\t\tgetAppliedTheme(),\n\t\t\t\tforceTheme,\n\t\t\t);\n\n\t\t\tconst darkLink = document.getElementById(DARK_LINK_ID) as HTMLLinkElement | null;\n\t\t\tconst lightHighContrastLink = document.getElementById(\n\t\t\t\tLIGHT_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\t\t\tconst darkHighContrastLink = document.getElementById(\n\t\t\t\tDARK_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\n\t\t\tif (darkLink) {\n\t\t\t\tdarkLink.media = dark;\n\t\t\t}\n\t\t\tif (lightHighContrastLink) {\n\t\t\t\tlightHighContrastLink.media = lightHighContrast;\n\t\t\t}\n\t\t\tif (darkHighContrastLink) {\n\t\t\t\tdarkHighContrastLink.media = darkHighContrast;\n\t\t\t}\n\t\t}\n\n\t\t// Sync immediately on mount in case the applied theme diverges from the SSR-rendered media values\n\t\tupdateMediaAttributes();\n\n\t\t// Watch for theme changes driven by ThemeProvider\n\t\tconst observer = new MutationObserver(updateMediaAttributes);\n\t\tobserver.observe(document.documentElement, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: [\"data-applied-theme\"],\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [forceTheme]);\n\n\t// On SSR (and as the initial React render), emit the link tags with media values\n\t// derived from the cookie-stored theme (if available) and forceTheme.\n\t// The useEffect above will correct them on the client before the user can interact.\n\tconst ssrStoredTheme = ssrCookie != null ? getStoredTheme({ cookie: ssrCookie }) : undefined;\n\tconst ssrAppliedTheme = ssrStoredTheme !== \"system\" ? ssrStoredTheme : undefined;\n\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\tssrAppliedTheme,\n\t\tforceTheme,\n\t);\n\n\t// The inline fix script corrects media attributes for users whose stored theme differs from\n\t// their OS preference. It is only needed when the SSR HTML may have been rendered with\n\t// incorrect media values — i.e. when neither ssrCookie (with a non-system theme) nor\n\t// forceTheme provide a deterministic answer at render time.\n\tconst needsFixScript = !forceTheme && ssrAppliedTheme == null;\n\n\t// When forceTheme is set, only render the link tag for that specific theme's stylesheet.\n\t// Light is the base theme with no dedicated lazy stylesheet, so forceTheme=\"light\" renders\n\t// no link tags at all. When forceTheme is unset, all three are rendered.\n\tconst renderDark = !forceTheme || forceTheme === \"dark\";\n\tconst renderLightHighContrast = !forceTheme || forceTheme === \"light-high-contrast\";\n\tconst renderDarkHighContrast = !forceTheme || forceTheme === \"dark-high-contrast\";\n\n\treturn (\n\t\t<>\n\t\t\t{renderDark && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={DARK_LINK_ID}\n\t\t\t\t\thref={darkCssUrl}\n\t\t\t\t\tmedia={dark}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{renderLightHighContrast && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={LIGHT_HIGH_CONTRAST_LINK_ID}\n\t\t\t\t\thref={lightHighContrastCssUrl}\n\t\t\t\t\tmedia={lightHighContrast}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{renderDarkHighContrast && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={DARK_HIGH_CONTRAST_LINK_ID}\n\t\t\t\t\thref={darkHighContrastCssUrl}\n\t\t\t\t\tmedia={darkHighContrast}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{needsFixScript && (\n\t\t\t\t<script\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: fixMediaScriptContent(forceTheme) }}\n\t\t\t\t\tnonce={nonce}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\nMantleStyleSheets.displayName = \"MantleStyleSheets\";\n\nexport {\n\t//,\n\tfixMediaScriptContent,\n\tmantleStyleSheetUrls,\n\tMantleStyleSheets,\n};\n","/**\n * @file Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\nconst coreFontNames = [\n\t\"roobert\",\n\t\"jetbrains-mono\",\n\t\"jetbrains-mono-italic\",\n\t\"family-regular\",\n\t\"family-italic\",\n] as const;\n/**\n * Named keys identifying each individual core font.\n * @public\n */\ntype CoreFontName = (typeof coreFontNames)[number];\n\n/**\n * Maps each {@link CoreFontName} to its CDN font path (relative to the fonts base).\n * @internal\n */\nconst coreFontPathByName = {\n\troobert: \"/roobert/roobert-proportional-vf.woff2\",\n\t\"jetbrains-mono\": \"/jetbrains/jetbrainsmono-wght.woff2\",\n\t\"jetbrains-mono-italic\": \"/jetbrains/jetbrainsmono-italic-wght.woff2\",\n\t\"family-regular\": \"/family/family-regular.woff2\",\n\t\"family-italic\": \"/family/family-italic.woff2\",\n} as const satisfies Record<CoreFontName, `/${string}`>;\n\ntype FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/roobert/roobert-proportional-vf.woff2\");\n * // -> \"https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Props for {@link PreloadFont}.\n * @public\n */\ntype PreloadFontProps = {\n\t/**\n\t * The name of the individual core font to preload.\n\t *\n\t * - `\"roobert\"` — Roobert proportional variable font\n\t * - `\"jetbrains-mono\"` — JetBrains Mono variable weight\n\t * - `\"jetbrains-mono-italic\"` — JetBrains Mono italic variable weight\n\t * - `\"family-regular\"` — Family regular\n\t * - `\"family-italic\"` — Family italic\n\t */\n\tname: CoreFontName;\n};\n\n/**\n * Returns an HTTP `Link` header value that preloads a single core font by name.\n *\n * Identical in intent to {@link PreloadFont}, but for server-side use where\n * you want to send the preload hint as an HTTP header instead of (or in\n * addition to) an HTML `<link>` element. Sending this as a `Link` header lets\n * the browser start the font fetch before it has parsed any HTML.\n *\n * @remarks\n * For best performance, also send a `preconnect` hint to {@link assetsCdnOrigin}\n * in the same `Link` header.\n *\n * @example\n * ```ts\n * // In an HTTP handler / server entry:\n * headers.append(\"Link\", preloadFontLink(\"roobert\"));\n * headers.append(\"Link\", preloadFontLink(\"jetbrains-mono\"));\n *\n * // Or as a single combined header:\n * headers.set(\"Link\", [\n *   `<${assetsCdnOrigin}>; rel=preconnect; crossorigin`,\n *   preloadFontLink(\"roobert\"),\n * ].join(\", \"));\n * ```\n */\nfunction preloadFontLink(name: CoreFontName): string {\n\tconst href = fontHref(coreFontPathByName[name]);\n\treturn `<${href}>; rel=preload; as=font; type=\"font/woff2\"; crossorigin`;\n}\n\n/**\n * Preloads a single core font by name.\n *\n * Use this when you only need one or two specific fonts rather than all core\n * fonts. Include it as early as possible in the document `<head>`.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * @example\n * ```tsx\n * <head>\n *   <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n *   <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *   <PreloadFont name=\"roobert\" />\n *   <PreloadFont name=\"jetbrains-mono\" />\n * </head>\n * ```\n */\nconst PreloadFont = ({ name }: PreloadFontProps) => (\n\t<link\n\t\trel=\"preload\"\n\t\thref={fontHref(coreFontPathByName[name])}\n\t\tas=\"font\"\n\t\ttype=\"font/woff2\"\n\t\tcrossOrigin=\"anonymous\"\n\t/>\n);\nPreloadFont.displayName = \"PreloadFont\";\n\nexport type { CoreFontName };\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tpreloadFontLink,\n\tPreloadFont,\n};\n"],"mappings":"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"}

package/dist/{themes-FPux5kIu.d.ts → themes-CYNpplwN.d.ts}

@@ -33,4 +33,4 @@ declare const $resolvedTheme: <T extends ResolvedTheme = ResolvedTheme>(value: T
 declare function isResolvedTheme(value: unknown): value is ResolvedTheme;
 //#endregion
 export { isResolvedTheme as a, themes as c, Theme as i, $theme as n, isTheme as o, ResolvedTheme as r, resolvedThemes as s, $resolvedTheme as t };
-//# sourceMappingURL=themes-FPux5kIu.d.ts.map
+//# sourceMappingURL=themes-CYNpplwN.d.ts.map

package/dist/toast-CR3MVChj.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-C8bYBIHW.js";import{t as n}from"./slot-CV5fmqFr.js";import{s as r}from"./theme-provider-MMwxHEfw.js";import{createContext as i,forwardRef as a,useContext as o,useMemo as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{CheckCircleIcon as u}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as d}from"@phosphor-icons/react/Info";import{WarningIcon as f}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as p}from"@phosphor-icons/react/WarningDiamond";import*as m from"sonner";const h=({className:t,containerAriaLabel:n,dir:i,duration_ms:a=4e3,position:o=`top-center`,style:s})=>{let l=r();return c(m.Toaster,{"data-slot":`toaster`,className:e(`toaster overlay-prompt pointer-events-auto *:duration-200`,t),containerAriaLabel:n,dir:i,duration:a,gap:12,position:o??`top-center`,style:s,theme:l,toastOptions:{unstyled:!0}})};h.displayName=`Toaster`;const g=i(``);function _(e,t){let n=t?.duration_ms;return typeof n==`number`&&n<=0&&(n=1/0),m.toast.custom(t=>c(g.Provider,{value:t,children:e}),{duration:n,...t?.id?{id:t.id}:{},unstyled:!0})}const v=i({priority:`info`}),y=a(({asChild:t,children:r,className:i,priority:a,...o},u)=>{let d=t?n:`div`,f=s(()=>({priority:a}),[a]);return c(v.Provider,{value:f,children:l(d,{"data-slot":`toast`,className:e(`relative flex items-start gap-2 text-sm font-sans`,`p-3 pl-3.75`,`bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg`,i),ref:u,...o,children:[c(E,{priority:a}),r]})})});y.displayName=`Toast`;const b=a(({className:n,svg:r,...i},a)=>{let s=o(v);switch(s.priority){case`danger`:return c(t,{"data-slot":`toast-icon`,className:e(`text-danger-600`,n),ref:a,svg:r??c(f,{weight:`fill`}),...i});case`warning`:return c(t,{"data-slot":`toast-icon`,className:e(`text-warning-600`,n),ref:a,svg:r??c(p,{weight:`fill`}),...i});case`success`:return c(t,{"data-slot":`toast-icon`,className:e(`text-success-600`,n),ref:a,svg:r??c(u,{weight:`fill`}),...i});case`info`:return c(t,{"data-slot":`toast-icon`,className:e(`text-accent-600`,n),ref:a,svg:c(d,{weight:`fill`}),...i});default:throw Error(`Unreachable Case: ${s.priority}`)}});b.displayName=`ToastIcon`;const x=a(({asChild:t,className:r,onClick:i,...a},s)=>{let l=o(g);return c(t?n:`button`,{"data-slot":`toast-action`,className:e(`shrink-0`,`data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs`,r),onClick:e=>{i?.(e),!e.defaultPrevented&&m.toast.dismiss(l)},ref:s,...a})});x.displayName=`ToastAction`;const S=a(({asChild:t,className:r,...i},a)=>c(t?n:`p`,{"data-slot":`toast-message`,className:e(`text-strong flex-1 text-sm font-body`,r),ref:a,...i}));S.displayName=`ToastMessage`;const C={Root:y,Action:x,Icon:b,Message:S};function w(e){e.target instanceof Element&&e.target.closest(`.overlay-prompt`)&&e.preventDefault()}const T={info:`bg-accent-600`,warning:`bg-warning-600`,success:`bg-success-600`,danger:`bg-danger-600`};function E({className:t,priority:n,...r}){return c(`div`,{"aria-hidden":!0,className:e(`z-1 absolute -inset-px right-auto w-1.5 rounded-l`,T[n],t),...r})}export{w as i,h as n,_ as r,C as t};
+//# sourceMappingURL=toast-CR3MVChj.js.map

package/dist/toast-CR3MVChj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-CR3MVChj.js","names":["IconComponent"],"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#toaster\n *\n * @example\n * ```tsx\n * <Toaster\n *   position=\"top-right\"\n *   duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tdata-slot=\"toaster\"\n\t\t\tclassName={cx(\"toaster overlay-prompt pointer-events-auto *:duration-200\", className)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t *\n\t * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#maketoast\n *\n * @example\n * ```tsx\n * // Basic toast with auto-dismiss (default 4000ms, inherits from `<Toaster>`)\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n *\n * // Toast that stays open until manually dismissed\n * makeToast(\n *   <Toast.Root priority=\"warning\">\n *     <Toast.Icon />\n *     <Toast.Message>Action required</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>,\n *   { duration_ms: Number.POSITIVE_INFINITY }\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\tlet duration = options?.duration_ms;\n\tif (typeof duration === \"number\" && duration <= 0) {\n\t\tduration = Number.POSITIVE_INFINITY;\n\t}\n\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => <ToastIdContext.Provider value={toastId}>{children}</ToastIdContext.Provider>,\n\t\t{\n\t\t\t//\n\t\t\tduration,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#toastroot\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Changes saved successfully!</Toast.Message>\n *   <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\tconst contextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={contextValue}>\n\t\t\t\t<Component\n\t\t\t\t\tdata-slot=\"toast\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm font-sans\",\n\t\t\t\t\t\t\"p-3 pl-3.75\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#toasticon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n *   <Toast.Icon />\n *   <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#toastaction\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n *   <Toast.Icon />\n *   <Toast.Message>File uploaded successfully</Toast.Message>\n *   <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"toast-action\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#toastmessage\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tdata-slot=\"toast-message\"\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm font-body\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * Composition:\n * ```\n * Toast.Root\n * ├── Toast.Icon\n * ├── Toast.Message\n * └── Toast.Action\n * ```\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Changes saved successfully!</Toast.Message>\n\t *   <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>File uploaded successfully</Toast.Message>\n\t *   <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toasticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastmessage\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n *   <Dialog.Content>\n *     <p>Dialog content</p>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({ className, priority, ...props }: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/toast.d.ts

@@ -1,9 +1,7 @@
-import { t as WithAsChild } from "./as-child-CpZKMqTE.js";
-import { t as WithStyleProps } from "./with-style-props-xzZLnIrF.js";
-import { n as SvgOnlyProps } from "./svg-only-D4uqM1OC.js";
-import * as _$react from "react";
+import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithStyleProps } from "./with-style-props-CyImx7vd.js";
+import { n as SvgOnlyProps } from "./svg-only-f6ToFLH0.js";
 import { ComponentProps, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as ToastPrimitive from "sonner";
 
 //#region src/components/toast/toast.d.ts
@@ -40,7 +38,7 @@ declare const Toaster: {
     duration_ms,
     position,
     style
-  }: ToasterProps): _$react_jsx_runtime0.JSX.Element;
+  }: ToasterProps): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 type MakeToastOptions = {
@@ -133,7 +131,7 @@ declare const Toast: {
    * </Toast.Root>
    * ```
    */
-  readonly Root: _$react.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * A button that dismisses the toast when clicked.
    *
@@ -148,7 +146,7 @@ declare const Toast: {
    * </Toast.Root>
    * ```
    */
-  readonly Action: _$react.ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Action: import("react").ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   /**
    * An icon that visually represents the priority of the toast.
    *
@@ -162,7 +160,7 @@ declare const Toast: {
    * </Toast.Root>
    * ```
    */
-  readonly Icon: _$react.ForwardRefExoticComponent<Omit<Partial<SvgOnlyProps>, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
+  readonly Icon: import("react").ForwardRefExoticComponent<Omit<Partial<SvgOnlyProps>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
   /**
    * The message content of the toast.
    *
@@ -176,7 +174,7 @@ declare const Toast: {
    * </Toast.Root>
    * ```
    */
-  readonly Message: _$react.ForwardRefExoticComponent<Omit<ToastMessageProps, "ref"> & _$react.RefAttributes<HTMLParagraphElement>>;
+  readonly Message: import("react").ForwardRefExoticComponent<Omit<ToastMessageProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 };
 //#endregion
 export { type Priority, Toast, Toaster, makeToast };

package/dist/toast.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./toast-CGnquSKO.js";export{n as Toast,e as Toaster,t as makeToast};
+import{n as e,r as t,t as n}from"./toast-CR3MVChj.js";export{n as Toast,e as Toaster,t as makeToast};

package/dist/tooltip.d.ts

@@ -1,6 +1,4 @@
-import * as _$react from "react";
 import { ComponentProps, ComponentPropsWithoutRef } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 //#region src/components/tooltip/tooltip.d.ts
@@ -32,7 +30,7 @@ declare const TooltipProvider: {
   ({
     delayDuration,
     ...props
-  }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>): _$react_jsx_runtime0.JSX.Element;
+  }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 /**
@@ -57,7 +55,7 @@ declare const TooltipProvider: {
  * </Tooltip.Root>
  * ```
  */
-declare function Root(props: ComponentProps<typeof TooltipPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function Root(props: ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
   var displayName: string;
 }
@@ -80,7 +78,7 @@ declare namespace Root {
  * </Tooltip.Root>
  * ```
  */
-declare function Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare namespace Trigger {
   var displayName: string;
 }
@@ -167,7 +165,7 @@ declare const Tooltip: {
    * </Tooltip.Root>
    * ```
    */
-  readonly Content: _$react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Content: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The trigger button that opens the tooltip.
    *

package/dist/tooltip.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import*as i from"@radix-ui/react-tooltip";const a=({delayDuration:e=0,...t})=>n(i.Provider,{"data-slot":`tooltip-provider`,delayDuration:e??0,...t});a.displayName=`Tooltip.Provider`;function o(e){return n(i.Root,{"data-slot":`tooltip`,...e})}o.displayName=`Tooltip.Root`;function s(e){return n(i.Trigger,{"data-slot":`tooltip-trigger`,...e})}s.displayName=`Tooltip.Trigger`;const c=t(({children:t,className:a,sideOffset:o=4,...s},c)=>n(i.Portal,{children:r(i.Content,{className:e(`bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow`,a),"data-slot":`tooltip-content`,ref:c,sideOffset:o,...s,children:[t,n(i.Arrow,{asChild:!0,children:n(`div`,{className:`bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs`})})]})}));c.displayName=`Tooltip.Content`;const l={Root:o,Content:c,Trigger:s};export{l as Tooltip,a as TooltipProvider};
+import{t as e}from"./cx-CBSnSC36.js";import{forwardRef as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import*as i from"@radix-ui/react-tooltip";const a=({delayDuration:e=0,...t})=>n(i.Provider,{"data-slot":`tooltip-provider`,delayDuration:e??0,...t});a.displayName=`Tooltip.Provider`;function o(e){return n(i.Root,{"data-slot":`tooltip`,...e})}o.displayName=`Tooltip.Root`;function s(e){return n(i.Trigger,{"data-slot":`tooltip-trigger`,...e})}s.displayName=`Tooltip.Trigger`;const c=t(({children:t,className:a,sideOffset:o=4,...s},c)=>n(i.Portal,{children:r(i.Content,{className:e(`bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow`,a),"data-slot":`tooltip-content`,ref:c,sideOffset:o,...s,children:[t,n(i.Arrow,{asChild:!0,children:n(`div`,{className:`bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs`})})]})}));c.displayName=`Tooltip.Content`;const l={Root:o,Content:c,Trigger:s};export{l as Tooltip,a as TooltipProvider};
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide shared global behavior for your tooltips, such\n * as consistent delay and hover settings. Mount one instance at the root of\n * your app when you want app-wide tooltip defaults. Children render\n * `Tooltip.Root` / `Tooltip.Trigger` / `Tooltip.Content` trees as usual.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger asChild>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Hover me\n *       </Button>\n *     </Tooltip.Trigger>\n *     <Tooltip.Content>\n *       This is a tooltip\n *     </Tooltip.Content>\n *   </Tooltip.Root>\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of\n * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n * app-wide delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n *\n * Use `Tooltip` to show a short, non-essential label or hint when the user\n * hovers or focuses an element — e.g., the meaning of an icon button, a\n * keyboard shortcut, or a brief explanation. Tooltips are NON-INTERACTIVE:\n * do not put buttons, links, or form controls inside one. Per the WAI-ARIA\n * tooltip pattern, tooltips never receive focus, so interactive content\n * inside them is unreachable for keyboard users. For interactive overlay\n * content (forms, settings, color pickers), use `Popover`. For non-essential\n * preview cards (user/repo previews, link previews), use `HoverCard`.\n *\n * Mount a `<TooltipProvider>` once at the app root when you want shared\n * tooltip behavior such as consistent delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of\n\t * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n\t * app-wide delay and hover settings.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKA6BA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,EACH,CAAA,CAEH,EAAgB,YAAc,mBAwB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,EAAS,CAAA,CAEhE,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,EAAS,CAAA,CAE3E,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,EACA,CACD,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,6EAA+E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,CACF,EAAQ,YAAc,kBA0CtB,MAAM,EAAU,CAuBf,OAoBA,UAoBA,UACA"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide shared global behavior for your tooltips, such\n * as consistent delay and hover settings. Mount one instance at the root of\n * your app when you want app-wide tooltip defaults. Children render\n * `Tooltip.Root` / `Tooltip.Trigger` / `Tooltip.Content` trees as usual.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger asChild>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Hover me\n *       </Button>\n *     </Tooltip.Trigger>\n *     <Tooltip.Content>\n *       This is a tooltip\n *     </Tooltip.Content>\n *   </Tooltip.Root>\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of\n * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n * app-wide delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n *\n * Use `Tooltip` to show a short, non-essential label or hint when the user\n * hovers or focuses an element — e.g., the meaning of an icon button, a\n * keyboard shortcut, or a brief explanation. Tooltips are NON-INTERACTIVE:\n * do not put buttons, links, or form controls inside one. Per the WAI-ARIA\n * tooltip pattern, tooltips never receive focus, so interactive content\n * inside them is unreachable for keyboard users. For interactive overlay\n * content (forms, settings, color pickers), use `Popover`. For non-essential\n * preview cards (user/repo previews, link previews), use `HoverCard`.\n *\n * Mount a `<TooltipProvider>` once at the app root when you want shared\n * tooltip behavior such as consistent delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of\n\t * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n\t * app-wide delay and hover settings.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKA6BA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,CACJ,CAAA,EAEF,EAAgB,YAAc,mBAwB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CAC/D,CACA,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC1E,CACA,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,CACD,EACA,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,4EAA8E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,EACD,EAAQ,YAAc,kBA0CtB,MAAM,EAAU,CAuBf,OAoBA,UAoBA,SACD"}

package/dist/{traffic-policy-file-BwHHdhWJ.js → traffic-policy-file-0g5RXFqu.js}

@@ -1,2 +1,2 @@
 import{jsx as e,jsxs as t}from"react/jsx-runtime";function n(n){return t(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 256 256`,width:`1em`,...n,children:[e(`path`,{fill:`none`,d:`M0 0h256v256H0z`}),e(`path`,{d:`m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z`}),e(`path`,{d:`M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z`})]})}n.displayName=`TrafficPolicyFileIcon`;export{n as t};
-//# sourceMappingURL=traffic-policy-file-BwHHdhWJ.js.map
+//# sourceMappingURL=traffic-policy-file-0g5RXFqu.js.map

package/dist/{traffic-policy-file-BwHHdhWJ.js.map → traffic-policy-file-0g5RXFqu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"traffic-policy-file-BwHHdhWJ.js","names":[],"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 256 256\" width=\"1em\" {...props}>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\nTrafficPolicyFileIcon.displayName = \"TrafficPolicyFileIcon\";\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"kDAKA,SAAS,EAAsB,EAAsB,CACpD,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM,GAAI,WAA5E,CACC,EAAC,OAAD,CAAM,KAAK,OAAO,EAAE,kBAAoB,CAAA,CACxC,EAAC,OAAD,CAAM,EAAE,2OAA6O,CAAA,CACrP,EAAC,OAAD,CAAM,EAAE,6gBAA+gB,CAAA,CAClhB,GAGR,EAAsB,YAAc"}
+{"version":3,"file":"traffic-policy-file-0g5RXFqu.js","names":[],"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 256 256\" width=\"1em\" {...props}>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\nTrafficPolicyFileIcon.displayName = \"TrafficPolicyFileIcon\";\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"kDAKA,SAAS,EAAsB,EAAsB,CACpD,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM,GAAI,WAA5E,CACC,EAAC,OAAD,CAAM,KAAK,OAAO,EAAE,iBAAmB,CAAA,EACvC,EAAC,OAAD,CAAM,EAAE,0OAA4O,CAAA,EACpP,EAAC,OAAD,CAAM,EAAE,4gBAA8gB,CAAA,CAClhB,GAEP,CACA,EAAsB,YAAc"}

package/dist/{types-QKZ5fvaQ.d.ts → types-BvUzforF.d.ts}

@@ -27,4 +27,4 @@ type SvgAttributes = ComponentProps<"svg"> & {
 };
 //#endregion
 export { SvgAttributes as t };
-//# sourceMappingURL=types-QKZ5fvaQ.d.ts.map
+//# sourceMappingURL=types-BvUzforF.d.ts.map

package/dist/types-D85fCNV3.js

@@ -0,0 +1,2 @@
+const e=e=>e;export{e as t};
+//# sourceMappingURL=types-D85fCNV3.js.map

package/dist/{types-884RJJqm.js.map → types-D85fCNV3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"types-884RJJqm.js","names":[],"sources":["../src/types/css-properties.ts"],"sourcesContent":["import type { CSSProperties as ReactCSSProperties } from \"react\";\n\n/**\n * A CSS custom property (CSS variable) name.\n *\n * CSS variables must start with `--`, e.g. `--brand-color` or `--spacing-2`.\n * This template-literal type lets TypeScript recognize those keys as valid\n * style keys when building objects for `style={...}`.\n */\ntype CssVariableName = `--${string}`;\n\n/**\n * React-compatible CSS properties plus support for CSS custom properties.\n *\n * React's `CSSProperties` type does not allow arbitrary property names by\n * default, so keys like `--foo` would normally be rejected by TypeScript.\n *\n * This type extends React's `CSSProperties` and additionally permits any\n * CSS variable name (keys starting with `--`) with values that match what\n * CSS variables accept in React style objects: `string | number`.\n */\ntype CssProperties = ReactCSSProperties & Record<CssVariableName, string | number>;\n\n/**\n * Helper to type-check a style object while preserving its exact inferred type.\n *\n * Why not just annotate with `CssProperties`?\n * - Annotating forces the value to be treated as the *wider* `CssProperties` type,\n *   which can lose useful inference (literal values, narrow unions, etc.).\n *\n * This function validates that `input` conforms to `CssProperties` (including\n * CSS variables like `--foo`) and returns it unchanged, keeping inference intact.\n *\n * @example\n * style={$cssProperties({ display: \"block\", \"--gap\": 8 })}\n */\nconst $cssProperties = <T extends CssProperties = CssProperties>(input: T): ReactCSSProperties =>\n\tinput;\n\nexport { type CssProperties, $cssProperties };\n"],"mappings":"AAoCA,MAAM,EAA2D,GAChE"}
+{"version":3,"file":"types-D85fCNV3.js","names":[],"sources":["../src/types/css-properties.ts"],"sourcesContent":["import type { CSSProperties as ReactCSSProperties } from \"react\";\n\n/**\n * A CSS custom property (CSS variable) name.\n *\n * CSS variables must start with `--`, e.g. `--brand-color` or `--spacing-2`.\n * This template-literal type lets TypeScript recognize those keys as valid\n * style keys when building objects for `style={...}`.\n */\ntype CssVariableName = `--${string}`;\n\n/**\n * React-compatible CSS properties plus support for CSS custom properties.\n *\n * React's `CSSProperties` type does not allow arbitrary property names by\n * default, so keys like `--foo` would normally be rejected by TypeScript.\n *\n * This type extends React's `CSSProperties` and additionally permits any\n * CSS variable name (keys starting with `--`) with values that match what\n * CSS variables accept in React style objects: `string | number`.\n */\ntype CssProperties = ReactCSSProperties & Record<CssVariableName, string | number>;\n\n/**\n * Helper to type-check a style object while preserving its exact inferred type.\n *\n * Why not just annotate with `CssProperties`?\n * - Annotating forces the value to be treated as the *wider* `CssProperties` type,\n *   which can lose useful inference (literal values, narrow unions, etc.).\n *\n * This function validates that `input` conforms to `CssProperties` (including\n * CSS variables like `--foo`) and returns it unchanged, keeping inference intact.\n *\n * @example\n * style={$cssProperties({ display: \"block\", \"--gap\": 8 })}\n */\nconst $cssProperties = <T extends CssProperties = CssProperties>(input: T): ReactCSSProperties =>\n\tinput;\n\nexport { type CssProperties, $cssProperties };\n"],"mappings":"AAoCA,MAAM,EAA2D,GAChE"}

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-Xu7ckQM6.js";
-import { t as WithAsChild } from "./as-child-CpZKMqTE.js";
-import { i as parseBooleanish, n as CssProperties, r as Booleanish, t as $cssProperties } from "./index-BbZBDzPh.js";
-import { t as WithStyleProps } from "./with-style-props-xzZLnIrF.js";
-import { t as VariantProps } from "./variant-props-BZbM__kQ.js";
-export { $cssProperties, Booleanish, CssProperties, DeepNonNullable, VariantProps, WithAsChild, WithStyleProps, parseBooleanish };
+import { t as DeepNonNullable } from "./deep-non-nullable-BxRoySYR.js";
+import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { i as parseBooleanish, n as CssProperties, r as Booleanish, t as $cssProperties } from "./index-L3NmbHi5.js";
+import { t as WithStyleProps } from "./with-style-props-CyImx7vd.js";
+import { t as VariantProps } from "./variant-props-CVymuSfa.js";
+export { $cssProperties, type Booleanish, type CssProperties, type DeepNonNullable, type VariantProps, type WithAsChild, type WithStyleProps, parseBooleanish };

package/dist/types.js

@@ -1 +1 @@
-import{t as e}from"./booleanish-CBGdPL3Q.js";import{t}from"./types-884RJJqm.js";export{t as $cssProperties,e as parseBooleanish};
+import{t as e}from"./booleanish-BfvnW6vy.js";import{t}from"./types-D85fCNV3.js";export{t as $cssProperties,e as parseBooleanish};

package/dist/use-copy-to-clipboard-BLpquU9d.js

@@ -0,0 +1,2 @@
+import{t as e}from"./copy-to-clipboard-Baw30q9O.js";function t(){return e}export{t};
+//# sourceMappingURL=use-copy-to-clipboard-BLpquU9d.js.map

package/dist/{use-copy-to-clipboard-CTgtLjUg.js.map → use-copy-to-clipboard-BLpquU9d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-copy-to-clipboard-CTgtLjUg.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { copyToClipboard } from \"../utils/copy-to-clipboard.js\";\n\n/**\n * React hook that returns a stable async function for copying a string to\n * the system clipboard.\n *\n * The returned function uses the Clipboard API when available and falls back\n * to a `document.execCommand(\"copy\")` polyfill for older browsers. `await`\n * the call (or attach a `.then()` / `.catch()`) to observe whether the copy\n * succeeded — the function throws when both the Clipboard API and the\n * polyfill fail, or when called outside of a DOM environment.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n *\n * @returns An async function `(value: string) => Promise<void>` that writes\n *   `value` to the clipboard and rejects on failure.\n *\n * @example\n * // Copy a token on click and surface a toast on success/failure\n * const copy = useCopyToClipboard();\n *\n * async function handleCopy() {\n *   try {\n *     await copy(token);\n *     toast.success(\"Copied!\");\n *   } catch {\n *     toast.error(\"Could not copy to clipboard\");\n *   }\n * }\n *\n * return <button onClick={handleCopy}>Copy token</button>;\n */\nfunction useCopyToClipboard() {\n\treturn copyToClipboard;\n}\n\nexport { useCopyToClipboard };\n"],"mappings":"oDAgCA,SAAS,GAAqB,CAC7B,OAAO"}
+{"version":3,"file":"use-copy-to-clipboard-BLpquU9d.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { copyToClipboard } from \"../utils/copy-to-clipboard.js\";\n\n/**\n * React hook that returns a stable async function for copying a string to\n * the system clipboard.\n *\n * The returned function uses the Clipboard API when available and falls back\n * to a `document.execCommand(\"copy\")` polyfill for older browsers. `await`\n * the call (or attach a `.then()` / `.catch()`) to observe whether the copy\n * succeeded — the function throws when both the Clipboard API and the\n * polyfill fail, or when called outside of a DOM environment.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n *\n * @returns An async function `(value: string) => Promise<void>` that writes\n *   `value` to the clipboard and rejects on failure.\n *\n * @example\n * // Copy a token on click and surface a toast on success/failure\n * const copy = useCopyToClipboard();\n *\n * async function handleCopy() {\n *   try {\n *     await copy(token);\n *     toast.success(\"Copied!\");\n *   } catch {\n *     toast.error(\"Could not copy to clipboard\");\n *   }\n * }\n *\n * return <button onClick={handleCopy}>Copy token</button>;\n */\nfunction useCopyToClipboard() {\n\treturn copyToClipboard;\n}\n\nexport { useCopyToClipboard };\n"],"mappings":"oDAgCA,SAAS,GAAqB,CAC7B,OAAO,CACR"}