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

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
import { OverridableComponent } from "../../util/types";
import { PrimitiveProps } from "../base/BasePrimitive";
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
import { BorderRadiusScale, ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types";
export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    /**
     * CSS `background-color` property.
     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
     * @see {@link StaticDefaultBgKeys} and {@link StaticBgKeys}
     */
    background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken;
    /**
     * CSS `border-color` property.
     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
     * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
     */
    borderColor?: Exclude<AkselRootBorderToken, "focus"> | AkselColoredBorderToken;
    /**
     * 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'}}
     * @see {@link BorderRadiusKeys}
     */
    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'
     * @see {@link ShadowKeys}
     */
    shadow?: AkselShadowToken;
} & PrimitiveProps & PrimitiveAsChildProps;
/**
 *
 * 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 BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement>;
export default BoxNew;