import { Box, GridBox } from '@codecademy/gamut';
import { MediaQueryMap } from '@codecademy/variance';
import React, { ComponentProps } from 'react';
import { ColumnCount } from './getCSSFromColumnCount';
export declare const getMediaQuery: ({ css, start, end, }: {
    css: string;
    start: string;
    end?: string;
}) => string;
export type GridCollapseProps = ComponentProps<typeof GridBox> & {
    /**
     * the number of columns per row in the grid
     */
    columnCount: ColumnCount;
    /**
     * the number of items to display when collapsed
     */
    initialMaxShown: MediaQueryMap<number>;
    /**
     * the number of new items to display on each "expand" click; if not provided, a binary toggle is used
     * note: must include exactly the same keys as initialMaxShown
     */
    pageSize?: MediaQueryMap<number>;
    /**
     * text to display when "show more" is available
     */
    expandLabel?: string;
    /**
     * text to display when "show fewer" is available
     */
    collapseLabel?: string;
    /**
     * called when clicking the show more/see less toggle; accepts the current expanded state as an arg
     */
    onExpandClick?: (expanded?: boolean) => void;
    /**
     * props to pass to the expand/collapse container (useful for changing the margin between the grid and controls)
     */
    expandCollapseProps?: ComponentProps<typeof Box>;
};
export declare const GridCollapse: React.FC<GridCollapseProps>;