@dnanpm/styleguide/build/cjs/components/Box/Box.d.ts

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

import type { ReactNode, AriaRole } from 'react';
import React from 'react';
import type { ElevationLevel } from '../../types/elevation';
interface Props {
    /**
     * Unique ID for the component
     */
    id?: string;
    /**
     * Content of Box component
     */
    children?: ReactNode;
    /**
     * Allows to change the elevation effect of component
     *
     * @param {ElevationLevel} none No elevation
     * @param {ElevationLevel} low Low elevation effect
     * @param {ElevationLevel} high High elevation effect
     * @param {ElevationLevel} extraHigh Extra high elevation effect
     *
     * @default 'none'
     */
    elevation?: ElevationLevel;
    /**
     * Allows to change the shadow map. Order of map is top, right, bottom, and left (clockwise) with space as separator.
     * Shadows are applied to sides with value `1` (`true`) and omitted from sides with value `0` (`false`)
     *
     * @default '1 1 1 1'
     */
    shadow?: string;
    /**
     * Allows to pass a custom width of component
     *
     * @default auto
     */
    width?: string;
    /**
     * Allows to pass a custom height of component
     *
     * @default auto
     */
    height?: string;
    /**
     * Allows to pass a custom margin
     *
     * @default '0'
     */
    margin?: string;
    /**
     * Allows to pass a custom padding
     *
     * @default '1.25rem'
     */
    padding?: string;
    /**
     * Allows to pass testid string for testing purposes
     */
    'data-testid'?: string;
    /**
     * Allows to pass a custom className
     */
    className?: string;
    /**
     * Screen reader label describing the purpose or topic of the box content,
     * e.g., "important information" or "example."
     */
    ariaLabel?: string;
    /**
     * Screen reader live region policy for the box content
     */
    ariaLive?: 'off' | 'polite' | 'assertive';
    /**
     * Allows to pass a role to the component
     */
    role?: AriaRole;
}
declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
/** @component */
export default Box;