import React, { HTMLAttributes } from "react";
import { BreakpointsAlias } from "../utilities/types.js";
export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    /**
     * Will show/hide element above breakpoint (inclusive)
     */
    above?: Exclude<BreakpointsAlias, "xs">;
    /**
     * Will show/hide element below breakpoint (inclusive)
     */
    below?: Exclude<BreakpointsAlias, "xs">;
    /**
     * Overrides html-tag
     * @default "div"
     */
    as?: "div" | "span";
    /**
     * When true, will render element as its child. This merges classes, styles and event handlers.
     */
    asChild?: boolean;
}
/**
 * Responsive view Primitive to show/hide elements based on breakpoints
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
 * @see 🏷️ {@link ResponsiveProps}
 *
 * @example
 * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
 *   <div/>
 *   <Hide below="md" asChild>
 *      // Only visible above "md"
 *   </Hide>
 * </HGrid>
 * @example
 * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
 *   <div/>
 *   <Hide above="md" asChild>
 *      // Only visible below "md"
 *   </Hide>
 * </HGrid>
 */
export declare const Hide: React.ForwardRefExoticComponent<ResponsiveProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Responsive view Primitive to show/hide elements based on breakpoints
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
 * @see 🏷️ {@link ResponsiveProps}
 *
 * @example
 * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
 *   <div/>
 *   <Show below="md" asChild>
 *      // Only visible below "md"
 *   </Show>
 * </HGrid>
 * @example
 * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
 *   <div/>
 *   <Show above="md" asChild>
 *      // Only visible above "md"
 *   </Show>
 * </HGrid>
 */
export declare const Show: React.ForwardRefExoticComponent<ResponsiveProps & React.RefAttributes<HTMLDivElement>>;