import { type ReactNode } from 'react';
/**
 * Type for responsive content slots that can display different content based on viewport width.
 * This enables responsive behavior without requiring separate components or media queries.
 *
 * @template T - The type of content that can be stored in the responsive slots. Defaults to ReactNode.
 */
export type ResponsiveSlot<T = ReactNode> = {
    /**
     * A value to be used when the viewport width is the breakpoint or larger.
     */
    base: T;
    /**
     * A value to be used when the viewport width is smaller than the breakpoint.
     *
     * When this value is not provided, the base value is used across all viewports.
     */
    narrowViewport?: T;
};