import React from 'react';
import { Animated, type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { PinningDirection } from '@coinbase/cds-common/types/BoxBaseProps';
import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { Theme } from '../core/theme';
import { type StyleProps } from '../styles/styleProps';
export type BoxBaseProps = SharedProps &
  StyleProps & {
    children?: React.ReactNode;
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    animated?: boolean;
    /** Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. */
    elevation?: ElevationLevels;
    font?: ThemeVars.FontFamily | 'inherit';
    /** 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;
    /**
     * @deprecated Use `style` or the `background` style prop to set custom background colors. This will be removed in a future major release.
     * @deprecationExpectedRemoval v10
     */
    dangerouslySetBackground?: string;
  };
export type BoxProps = BoxBaseProps & Omit<ViewProps, 'style'>;
export declare const getElevationStyles: (
  elevation: ElevationLevels,
  theme: Theme,
  background?: ThemeVars.Color,
) => ViewStyle;
export declare const Box: React.MemoExoticComponent<
  ({
    ref,
    children,
    style,
    animated,
    testID,
    pin,
    bordered,
    borderedTop,
    borderedBottom,
    borderedStart,
    borderedEnd,
    borderedHorizontal,
    borderedVertical,
    dangerouslySetBackground,
    display,
    position,
    overflow,
    zIndex,
    gap,
    columnGap,
    rowGap,
    justifyContent,
    alignContent,
    alignItems,
    alignSelf,
    flexDirection,
    flexWrap,
    color,
    background,
    borderColor,
    borderTopLeftRadius,
    borderTopRightRadius,
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderTopWidth,
    borderEndWidth,
    borderBottomWidth,
    borderStartWidth,
    elevation,
    borderWidth,
    borderRadius,
    font,
    fontFamily,
    fontSize,
    fontWeight,
    lineHeight,
    textAlign,
    textDecorationStyle,
    textDecorationLine,
    textTransform,
    padding,
    paddingX,
    paddingY,
    paddingTop,
    paddingBottom,
    paddingStart,
    paddingEnd,
    margin,
    marginX,
    marginY,
    marginTop,
    marginBottom,
    marginStart,
    marginEnd,
    userSelect,
    width,
    height,
    minWidth,
    minHeight,
    maxWidth,
    maxHeight,
    aspectRatio,
    top,
    bottom,
    left,
    right,
    transform,
    flexBasis,
    flexShrink,
    flexGrow,
    opacity,
    ...props
  }: BoxProps & {
    ref?: React.Ref<View>;
  }) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=Box.d.ts.map