import React from "react";
import { MarginProps } from "styled-system";
import * as DesignTokens from "@sage/design-tokens/js/base/common";
import { CardContextProps } from "./__internal__/card.context";
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
type DesignTokensType = keyof typeof DesignTokens;
type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
export interface CardProps extends MarginProps, TagProps {
    /** Action to be executed when card is clicked or enter pressed.
     * Renders a button when passed and no draggable or href props set
     * */
    onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLDivElement>) => void;
    /** Style value for width of card */
    width?: string;
    /** Child nodes */
    children: React.ReactNode;
    /** Flag to indicate if card is draggable */
    draggable?: boolean;
    /** Height of the component (any valid CSS value) */
    height?: string;
    /** @deprecated Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
    boxShadow?: BoxShadowsType;
    /** @deprecated Design token for custom Box Shadow on hover. One of `onClick` or `href` props must be true. Note: please check that the box shadow design token you are using is compatible with the Card component. */
    hoverBoxShadow?: BoxShadowsType;
    /** Size padding applied to the card. */
    spacing?: CardContextProps["spacing"];
    /** Sets the level of roundness of the corners. "moderate" is 16px and "curved" is 20px.
     *
     * **Note:** The values "default" and "large" are deprecated. Use "moderate" or "curved" instead.
     */
    roundness?: CardContextProps["roundness"];
    /** The path to navigate to. Renders an anchor element when passed and no draggable prop set */
    href?: string;
    /** Visual style variant of the card */
    variant?: "standard" | "outlined";
    /** The header to render above the Card content */
    header?: React.ReactNode;
    /** The footer to render underneath the Card content */
    footer?: React.ReactNode;
    /** Target property in which link should open ie: _blank, _self, _parent, _top */
    target?: string;
    /** String for rel property when card has an href prop set */
    rel?: string;
    /** Prop to specify an aria-label for the component */
    "aria-label"?: string;
    /** Slot rendered on the opposite side of the drag handle, only visible when `draggable` is true.
     * Intended for accessibility controls (e.g. move-up / move-down buttons) for keyboard users.
     */
    rightChildren?: React.ReactNode;
}
declare const Card: {
    ({ "data-element": dataElement, "data-role": dataRole, children, width, draggable, height, onClick, href, spacing, boxShadow, hoverBoxShadow, roundness, header, footer, rel, target, "aria-label": ariaLabel, variant, rightChildren, ...rest }: CardProps): React.JSX.Element;
    displayName: string;
};
export default Card;