import type { EditableNodeAttributes } from "../types";
import { type ResponsiveEdgeInsets, type ResponsiveLength, type ResponsiveValue } from "../utils/responsivePresentation";
import { type StudioImageSource } from "./StudioImage";
type ContainerTag = "div" | "section" | "main" | "header" | "footer" | "nav" | "aside";
type BackgroundPosition = "center" | "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left";
interface ContainerProps extends EditableNodeAttributes {
    as?: ContainerTag;
    id?: string;
    display?: "block" | "flex" | "inline-flex" | "grid" | "none";
    /** Place direct children in one grid cell when display is grid. */
    overlapChildren?: boolean;
    direction?: "vertical" | "horizontal";
    gap?: "none" | "sm" | "md" | "lg" | "xl";
    align?: "start" | "center" | "end" | "stretch";
    justify?: "start" | "center" | "end" | "between";
    wrap?: "nowrap" | "wrap";
    /** Legacy shorthand kept for old authored JSON; prefer paddingX/paddingY. */
    padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
    paddingX?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
    paddingY?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
    paddingTop?: string;
    paddingRight?: string;
    paddingBottom?: string;
    paddingLeft?: string;
    responsivePadding?: ResponsiveEdgeInsets;
    marginBottom?: string;
    responsiveMarginBottom?: ResponsiveLength;
    width?: "auto" | "full" | "fit" | "screen";
    /** Content max-width: none/full (no constraint), narrow (672px), default (896px), wide (1152px) */
    maxWidth?: "none" | "narrow" | "default" | "wide" | "full";
    minHeight?: "auto" | "none" | "xs" | "sm" | "md" | "lg" | "screen";
    bg?: string;
    /** Background image URL — rendered behind content with optional overlay */
    bgImage?: StudioImageSource;
    /** Color or CSS gradient rendered over the container background. */
    bgOverlay?: string;
    /** Opacity for the overlay layer, kept separate from its color for predictable compositing. */
    bgOverlayOpacity?: number;
    bgSize?: "auto" | "cover" | "contain";
    bgPosition?: BackgroundPosition;
    bgAttachment?: "scroll" | "fixed";
    responsiveBgAttachment?: ResponsiveValue<"scroll" | "fixed">;
    borderWidth?: "none" | "sm" | "md" | "lg";
    borderColor?: string;
    radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
    overflow?: "visible" | "hidden" | "auto" | "scroll";
    children?: React.ReactNode;
    className?: string;
}
export declare function Container({ as, id, display, overlapChildren, direction, gap, align, justify, wrap, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, responsivePadding, marginBottom, responsiveMarginBottom, width, maxWidth, minHeight, bg, bgImage, bgOverlay, bgOverlayOpacity, bgSize, bgPosition, bgAttachment, responsiveBgAttachment, borderWidth, borderColor, radius, overflow, children, className, "data-node-id": dataNodeId, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=Container.d.ts.map