export type MessagingCardLayoutProps = {
  /** Type of messaging card. Determines background color and text color. */
  type: 'upsell' | 'nudge';
  /** Text or React node to display as the card title. Use a Text component to override default color and font. */
  title?: React.ReactNode;
  /** Text or React node to display as the card description. Use a Text component to override default color and font. */
  description?: React.ReactNode;
  /** Text or React node to display as a tag. When a string is provided, it will be rendered in a Tag component. */
  tag?: React.ReactNode;
  /**
   * Action element to display. Can be a string (renders as default button) or a custom ReactNode.
   * When a string is provided, use `onActionButtonClick` to handle clicks.
   */
  action?: React.ReactNode;
  /** Callback fired when the action button is clicked. Only used when `action` is a string. */
  onActionButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  /** Accessibility label for the action button. Only used when `action` is a string.
   * @default action value (when action is a string)
   */
  actionButtonAccessibilityLabel?: string;
  /** React node to display as the dismiss button. When provided, this will be rendered instead of the default dismiss button. */
  dismissButton?: React.ReactNode;
  /** Callback fired when the dismiss button is clicked. When provided, a default dismiss button will be rendered in the top-right corner. */
  onDismissButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  /** Accessibility label for the dismiss button.
   * @default 'Dismiss {title}' when title is a string, otherwise 'Dismiss card'
   */
  dismissButtonAccessibilityLabel?: string;
  /** Placement of the media content relative to the text content.
   * @default 'end'
   */
  mediaPlacement: 'start' | 'end';
  /** React node to display as the main media content. When provided, it will be rendered in a Box container. */
  media?: React.ReactNode;
  styles?: {
    /** Layout container element */
    layoutContainer?: React.CSSProperties;
    /** Content container element */
    contentContainer?: React.CSSProperties;
    /** Text container element */
    textContainer?: React.CSSProperties;
    /** Media container element */
    mediaContainer?: React.CSSProperties;
    /** Dismiss button container element */
    dismissButtonContainer?: React.CSSProperties;
  };
  classNames?: {
    /** Layout container element */
    layoutContainer?: string;
    /** Content container element */
    contentContainer?: string;
    /** Text container element */
    textContainer?: string;
    /** Media container element */
    mediaContainer?: string;
    /** Dismiss button container element */
    dismissButtonContainer?: string;
  };
};
export declare const MessagingCardLayout: import('react').MemoExoticComponent<
  ({
    type,
    title,
    description,
    tag,
    action,
    onActionButtonClick,
    actionButtonAccessibilityLabel,
    onDismissButtonClick,
    dismissButtonAccessibilityLabel,
    mediaPlacement,
    media,
    styles,
    classNames,
    dismissButton,
  }: MessagingCardLayoutProps) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=MessagingCardLayout.d.ts.map