import type { StyleRule } from '@vanilla-extract/css';
import { type Breakpoints } from '../themes/makeTheme';
import { type CSSLayers } from './layers.css';
/**
 * Type for defining styles for each breakpoint
 */
export type ResponsiveStyleMap = Partial<Record<Breakpoints, StyleRule>>;
/**
 * Creates a single responsive style class that applies different styles at different breakpoints
 *
 * @param styles - Object defining styles for each breakpoint
 * @param layer - Optional CSS layer name to apply the styles within
 * @returns A single vanilla-extract style class with responsive behavior
 *
 * @example
 * ```typescript
 * const styles = responsiveStyles({
 *   mobile: { padding: '16px', fontSize: '14px' },
 *   tablet: { padding: '24px', fontSize: '16px' },
 *   desktop: { padding: '32px', fontSize: '18px' }
 * });
 *
 * // With CSS layer
 * const layeredStyles = responsiveStyles({
 *   mobile: { padding: '16px', fontSize: '14px' },
 *   tablet: { padding: '24px', fontSize: '16px' },
 *   desktop: { padding: '32px', fontSize: '18px' }
 * }, 'component');
 *
 * // Usage in a component
 * <div className={styles}>Responsive content</div>
 * ```
 */
export declare const responsiveStyles: (styles: ResponsiveStyleMap, layer?: CSSLayers) => string;
//# sourceMappingURL=responsiveStyles.d.ts.map