/** @jsxImportSource react */
import { createGlobalStyle } from '@lilith/ui-styled-components';
import { flattenThemeToCssVars } from '../utils/css-variables';
/**
 * Global style component that injects theme values as CSS custom properties on :root.
 *
 * Opt-in via `<ThemeProvider cssVariables>` or standalone `<ThemeCssVariables />`.
 *
 * @example
 * ```tsx
 * // Via ThemeProvider prop
 * <ThemeProvider themeName="cyberpunk" cssVariables>
 *   <App />
 * </ThemeProvider>
 *
 * // Or standalone (must be inside ThemeProvider)
 * <ThemeCssVariables />
 *
 * // Then use in CSS:
 * .card {
 *   background: var(--theme-color-background-primary);
 *   border-radius: var(--theme-radius-md);
 * }
 * ```
 */
export const ThemeCssVariables = createGlobalStyle `
  :root {
    ${({ theme }) => {
    const vars = flattenThemeToCssVars(theme);
    return Object.entries(vars)
        .map(([name, value]) => `${name}: ${value};`)
        .join('\n    ');
}}
  }
`;
//# sourceMappingURL=ThemeCssVariables.js.map