import React from "react";
import { SpaceProps, LayoutProps, FlexboxProps, PositionProps, GridProps } from "styled-system";
import * as DesignTokens from "@sage/design-tokens/js/base/common";
import { type Gap } from "../../style/utils/box-gap";
import { TagProps } from "../../__internal__/utils/helpers/tags";
export type OverflowWrap = "break-word" | "anywhere";
export type ScrollVariant = "light" | "dark";
export type BoxSizing = "content-box" | "border-box";
type DesignTokensType = keyof typeof DesignTokens;
type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
type BorderRadiusToken = Extract<DesignTokensType, `borderRadius${string}`>;
export type BorderRadiusType = BorderRadiusToken | `${BorderRadiusToken} ${BorderRadiusToken}` | `${BorderRadiusToken} ${BorderRadiusToken} ${BorderRadiusToken}` | `${BorderRadiusToken} ${BorderRadiusToken} ${BorderRadiusToken} ${BorderRadiusToken}`;
export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gridRowGap" | "gridColumnGap">, LayoutProps, Omit<PositionProps, "zIndex">, SpaceProps, TagProps {
    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
    /** Set the ID attribute of the Box component */
    id?: string;
    /** Content to be rendered inside the Box component */
    children?: React.ReactNode;
    /** Set the Role attribute of the Box component */
    role?: string;
    /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
    overflowWrap?: OverflowWrap;
    /** Scroll styling attribute */
    scrollVariant?: ScrollVariant;
    /** Set the box-sizing attribute of the Box component */
    boxSizing?: BoxSizing;
    /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
    gap?: Gap;
    /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
    columnGap?: Gap;
    /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
    rowGap?: Gap;
    /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
    boxShadow?: BoxShadowsType;
    /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. */
    borderRadius?: BorderRadiusType;
    /**
     * @private
     * @ignore
     * @internal
     * Sets className for component. INTERNAL USE ONLY. */
    className?: string;
    /** Set the color attribute of the Box component */
    color?: string;
    /** Set the bg attribute of the Box component */
    bg?: string;
    /** Set the backgroundColor attribute of the Box component */
    backgroundColor?: string;
    /** Whether the component is hidden from view. In this state, the component will not be visible to users but will remain in the HTML document */
    hidden?: boolean;
    /** Set the opacity attribute of the Box component */
    opacity?: string | number;
    /** Set the container to be hidden from screen readers */
    "aria-hidden"?: "true" | "false";
    /** Make the container an aria-live region */
    "aria-live"?: "off" | "assertive" | "polite";
    /** @private @internal @ignore */
    "data-component"?: string;
    /** @private @internal @ignore */
    tabIndex?: number;
    /** Indicates whether AT will announce all, or only parts of, the changed region */
    "aria-atomic"?: "true" | "false";
}
export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
export default Box;