import { GridBox } from '@codecademy/gamut';
import { ComponentProps, FC } from 'react';
import { ColumnCount } from './getCSSFromColumnCount';
/**
 * Subgrid is basically used as a stand-in for css subgrids, which are currently only supported in firefox.
 * Because the number of Subgrid columns is dependent on many factors (screen width, content type, whether
 * or not we're displaying contributors) and Subgrid is used in multiple places - sometimes nested within
 * subcomponents - we avoid prop-drilling and keep each instance in sync by defining the columns at each
 * breakpoint in react context. Usage example:
 *
 * import { Subgrid, subgridContext } from './Subgrid';
 *
 * export const MyComponent = () => (
 *   <subgridContext.Provider value={{ _: 12, md: 6 }}>
 *     ...
 *     <Subgrid>...</Subgrid>
 *   </subgridContext.Provider>
 * );
 *
 * here, all descendant Subgrids will have 6 columns at breakpoints md and above and 12 columns otherwise
 */
export declare const subgridContext: import("react").Context<ColumnCount>;
export declare const Subgrid: FC<ComponentProps<typeof GridBox>>;