@navikt/ds-react/cjs/layout/box/Box.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import { OverridableComponent } from "../../util/types";
import { PrimitiveProps } from "../base/BasePrimitive";
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
import { BackgroundColorToken, BorderColorToken, BorderRadiusScale, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SurfaceColorToken } from "../utilities/types";
import BoxNew from "./Box.darkside";
export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
    /**
     * CSS `background-color` property.
     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
     */
    background?: BackgroundColorToken | SurfaceColorToken;
    /**
     * CSS `border-color` property.
     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
     */
    borderColor?: BorderColorToken;
    /**
     * CSS `border-radius` property.
     * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
     * or an object of radius tokens for different breakpoints.
     * @example
     * borderRadius='full'
     * borderRadius='0 full 12 2'
     * borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
     */
    borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>;
    /**
     * CSS `border-width` property. If this is not set there will be no border.
     * @example
     * borderWidth='2'
     * borderWidth='1 2 3 4'
     */
    borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
    /** Shadow on box. Accepts a shadow token.
     * @example
     * shadow='small'
     */
    shadow?: ShadowToken;
} & PrimitiveProps & PrimitiveAsChildProps;
interface BoxComponentType extends OverridableComponent<BoxProps, HTMLDivElement> {
    New: typeof BoxNew;
}
/**
 * Foundational Layout-primitive for generic encapsulation & styling.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
 * @see 🏷️ {@link BoxProps}
 * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
 *
 * @example
 * <Box padding="4">
 *   <BodyShort>Hei</BodyShort>
 * </Box>
 *
 * @example
 * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
 *   <BodyShort>Hei</BodyShort>
 * </Box>
 *
 * @example
 * <VStack gap="8">
 *  <Box padding="4">
 *   <BodyShort>Hei</BodyShort>
 *  </Box>
 *  <Box padding="4">
 *    <BodyShort>Hei</BodyShort>
 *  </Box>
 * </VStack>
 */
export declare const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement>;
export declare const Box: BoxComponentType;
export default Box;