import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { PositionStyles, SharedProps } from '@coinbase/cds-common/types';
import type { Polymorphic } from '../core/polymorphism';
import { type GridDefaultElement, type GridProps } from '../layout/Grid';
import type { ResponsiveProps, StaticStyleProps } from '../styles/styleProps';
export declare const pageHeaderStartPaddingStart: ResponsiveProps<StaticStyleProps>['paddingStart'];
export declare const pageHeaderEndPaddingX: ResponsiveProps<StaticStyleProps>['paddingX'];
export type PageHeaderBaseProps = SharedProps &
  PositionStyles & {
    /**
     * Optional. Accepts a ReactNode. Used for placing primary content on the left side of the page header, such as a header title, logo, or icon button.
     */
    start?: React.ReactNode;
    /**
     * Optional. Accepts a ReactNode. Intended for content on the right side of the header, such as action buttons or icons.
     * In modal usage, elements like a close button should be included to facilitate modal dismissal.
     */
    end?: React.ReactNode;
    /**
     * Optional. Accepts a ReactNode. Intended for main title within the Page Header or for secondary content in the center of the header, like a navigation stepper or search bar.
     */
    title?: React.ReactNode;
    /**
     * Set the background color of the box.
     */
    background?: ThemeVars.Color;
  };
export type PageHeaderProps = Polymorphic.ExtendableProps<
  GridProps<GridDefaultElement>,
  PageHeaderBaseProps & {
    /** Custom styles for individual elements of the PageHeader component */
    styles?: {
      /** Root element */
      root?: React.CSSProperties;
      /** Start element */
      start?: React.CSSProperties;
      /** End element */
      end?: React.CSSProperties;
      /** Title element */
      title?: React.CSSProperties;
    };
    /** Custom class names for individual elements of the PageHeader component */
    classNames?: {
      /** Root element */
      root?: string;
      /** Start element */
      start?: string;
      /** End element */
      end?: string;
      /** Title element */
      title?: string;
    };
  }
>;
export declare const PageHeader: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<
    Omit<PageHeaderProps, 'ref'> & React.RefAttributes<HTMLDivElement>
  >
>;
//# sourceMappingURL=PageHeader.d.ts.map