import { PropsWithChildren } from 'react';
import { ViewProps } from '@shopify/post-purchase-ui-extensions';
import { ThemeBackground, ThemeBorderColor, ThemeBorderRadius, ThemeBorderWidth, ThemeBorderStyle, ThemeSpacing } from '../Theme';
declare type ViewportSize = 'aboveSmall' | 'aboveMedium' | 'aboveLarge';
declare type BorderRadius = Extract<ThemeBorderRadius, 'base' | 'tight' | 'none'>;
declare type BorderStyle = ThemeBorderStyle | 'none';
declare type Spacing = Extract<ThemeSpacing, 'tight4x' | 'tight1x' | 'base' | 'loose1x' | 'loose4x' | 'none'>;
interface Media {
    viewportSize: ViewportSize;
    padding?: Spacing | [Spacing, Spacing] | [Spacing, Spacing, Spacing, Spacing];
    background?: ThemeBackground;
    border?: BorderStyle | [BorderStyle, BorderStyle] | [BorderStyle, BorderStyle, BorderStyle, BorderStyle];
    borderWidth?: ThemeBorderWidth | [ThemeBorderWidth, ThemeBorderWidth] | [ThemeBorderWidth, ThemeBorderWidth, ThemeBorderWidth, ThemeBorderWidth];
    borderColor?: ThemeBorderColor;
    borderRadius?: BorderRadius | [BorderRadius, BorderRadius] | [BorderRadius, BorderRadius, BorderRadius, BorderRadius];
}
export interface Props extends ViewProps {
    padding?: Spacing | [Spacing, Spacing] | [Spacing, Spacing, Spacing, Spacing];
    /**
     * Adjust the background
     */
    background?: ThemeBackground;
    /**
     * Adjust the border style
     */
    border?: BorderStyle | [BorderStyle, BorderStyle] | [BorderStyle, BorderStyle, BorderStyle, BorderStyle];
    /**
     * Adjust the border width
     */
    borderWidth?: ThemeBorderWidth | [ThemeBorderWidth, ThemeBorderWidth] | [ThemeBorderWidth, ThemeBorderWidth, ThemeBorderWidth, ThemeBorderWidth];
    /**
     * Adjust the border color
     */
    borderColor?: ThemeBorderColor;
    borderRadius?: BorderRadius | [BorderRadius, BorderRadius] | [BorderRadius, BorderRadius, BorderRadius, BorderRadius];
    /**
     * Sizes at different media
     */
    media?: Media[];
}
/**
 * A View is a generic container component. Its contents will always be their
 * “natural” size, so this component can be useful in layout components (like `Layout`, `Tiles`,
 * `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit.
 */
export declare function View({ blockPadding, inlinePadding, padding, children, media, ...props }: PropsWithChildren<Props>): JSX.Element;
export declare function convertPadding(blockPadding: ViewProps['blockPadding'], inlinePadding: ViewProps['inlinePadding']): Props['padding'];
export {};