import React from 'react';
import type { PinningDirection } from '@coinbase/cds-common/types/BoxBaseProps';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { Polymorphic } from '../core/polymorphism';
import type { fontFamily } from '../styles/responsive/base';
import { type ResponsiveProp, type StyleProps } from '../styles/styleProps';
export declare const boxDefaultElement = 'div';
export type BoxDefaultElement = typeof boxDefaultElement;
export type BoxBaseProps = StyleProps &
  SharedProps &
  Pick<
    SharedAccessibilityProps,
    'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
  > & {
    style?: React.CSSProperties;
    font?: ResponsiveProp<keyof typeof fontFamily>;
    /** Direction in which to absolutely pin the box. */
    pin?: PinningDirection;
    /** Add a border around all sides of the box. */
    bordered?: boolean;
    /** Add a border to the top side of the box. */
    borderedTop?: boolean;
    /** Add a border to the bottom side of the box. */
    borderedBottom?: boolean;
    /** Add a border to the leading side of the box. */
    borderedStart?: boolean;
    /** Add a border to the trailing side of the box. */
    borderedEnd?: boolean;
    /** Add a border to the leading and trailing sides of the box. */
    borderedHorizontal?: boolean;
    /** Add a border to the top and bottom sides of the box. */
    borderedVertical?: boolean;
    /** @danger This is a migration escape hatch. It is not intended to be used normally. */
    dangerouslySetBackground?: string;
  };
export type BoxProps<AsComponent extends React.ElementType> = Polymorphic.Props<
  AsComponent,
  BoxBaseProps
>;
type BoxComponent = (<AsComponent extends React.ElementType = BoxDefaultElement>(
  props: BoxProps<AsComponent>,
) => Polymorphic.ReactReturn) &
  Polymorphic.ReactNamed;
export declare const Box: BoxComponent;
/**
 * @example
 * Use `PolymorphicBoxProps` to create polymorphic components from Box (components with the `as` prop and style props):
 * ```tsx
 * type MyComponentBaseProps = { message?: string }
 * type MyComponentProps<AsComponent extends React.ElementType> =
 *   PolymorphicBoxProps<AsComponent, MyComponentBaseProps>
 * const MyComponent = <
 *   AsComponent extends React.ElementType = 'button',
 * >({
 *   as = 'button' as AsComponent,
 *   message,
 *   ...props
 * }: MyComponentProps<AsComponent>) => {
 *   return <Box as={as} {...props}>{message}</Box>
 * }
 * ```
 */
export type PolymorphicBoxProps<
  AsComponent extends React.ElementType,
  OverrideProps,
> = Polymorphic.Props<AsComponent, Polymorphic.ExtendableProps<BoxBaseProps, OverrideProps>>;
export {};
//# sourceMappingURL=Box.d.ts.map