declare module "react" {
    interface CSSProperties {
        "--rmd-box-gap"?: string | number;
        "--rmd-box-padding"?: string | number;
        "--rmd-box-item-min-size"?: string | number;
        "--rmd-box-columns"?: string | number;
    }
}
/**
 * @since 6.0.0
 */
export type BoxAlignItems = "start" | "flex-start" | "center" | "end" | "flex-end" | "stretch";
/**
 * @since 6.0.0
 */
export type BoxJustifyContent = BoxAlignItems | "space-around" | "space-between" | "space-evenly";
/**
 * @since 6.0.0
 */
export type BoxFlexDirection = "row" | "column";
/**
 * @since 6.0.0
 */
export interface BoxOptions {
    className?: string;
    /**
     * Set this to `true` to use `display: grid` instead of `display: flex`.
     *
     * @defaultValue `false`
     */
    grid?: boolean;
    /**
     * Set this to `true` to apply `width: 100%`. This can be useful when using
     * nested box layouts.
     *
     * @defaultValue `false`
     */
    fullWidth?: boolean;
    /**
     * Set this to `true` to set `flex-wrap: nowrap`.
     *
     * @defaultValue `false`
     */
    disableWrap?: boolean;
    /**
     * Set this to `true` to disable the default padding.
     *
     * @defaultValue `false`
     */
    disablePadding?: boolean;
    /**
     * This should match one of the names in the `$box-grids` map. So for example:
     *
     * ```scss
     * @use "react-md" with (
     *   $box-grids: (
     *     small: (
     *       min: 5rem
     *     ),
     *     medium: (
     *       min: 7rem,
     *       gap: 0.5rem,
     *       padding: 2rem,
     *     ),
     *   ),
     * );
     * ```
     *
     * The `gridName` should be `"small" | "medium"`.
     *
     * @defaultValue `""`
     */
    gridName?: string;
    /**
     * @defaultValue `"fit"`
     */
    gridColumns?: "fit" | "fill" | number;
    /**
     * @defaultValue `""`
     */
    align?: BoxAlignItems;
    /**
     * The default value is really `center` or whatever the
     * `$box-default-align-items` is set to.
     *
     * @defaultValue `""`
     */
    justify?: BoxJustifyContent;
    /**
     * Set this to `true` to set `flex-direction: column` which will stack all
     * items in the box.
     *
     * @defaultValue `false`
     */
    stacked?: boolean;
    /**
     * Set this to `true` to reverse the `flex-direction`. i.e.
     * - `flex-direction: row-reverse`
     * - `flex-direction: column-reverse`
     *
     * @defaultValue `false`
     */
    reversed?: boolean;
}
/**
 * @since 6.0.0
 */
export declare function box(options?: BoxOptions): string;
