@spark-web/box/dist/declarations/src/box.d.ts

--- title: Box storybookPath: page-layout-box--default isExperimentalPackage: false ---

import type { DataAttributeMap } from '@spark-web/utils/internal';
import type { ReactNode } from 'react';
import type { BoxStyleProps } from "./use-box-styles.js";
export declare type BoxProps = {
    /** Children element to be rendered inside the component. */
    children?: ReactNode;
    /** Sets data attributes on the component. */
    data?: DataAttributeMap;
    /** An identifier which must be unique in the whole document. */
    id?: string;
    /** Custom css styles. */
    className?: string;
    /**
     * When providing a component using the "as" prop, optionally tell the system
     * what the underlying element will be. Used internally to manage reset
     * styles.
     */
    asElement?: keyof HTMLElementTagNameMap;
} & BoxStyleProps;
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
    as?: Comp | undefined;
    ref?: import("react").Ref<Comp extends "symbol" | "switch" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "switch" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
    /** Children element to be rendered inside the component. */
    children?: ReactNode;
    /** Sets data attributes on the component. */
    data?: DataAttributeMap | undefined;
    /** An identifier which must be unique in the whole document. */
    id?: string | undefined;
    /** Custom css styles. */
    className?: string | undefined;
    /**
     * When providing a component using the "as" prop, optionally tell the system
     * what the underlying element will be. Used internally to manage reset
     * styles.
     */
    asElement?: keyof HTMLElementTagNameMap | undefined;
} & {
    background?: "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "body" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "input" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
    cursor?: "default" | "pointer" | undefined;
    minHeight?: 0 | undefined;
    minWidth?: 0 | undefined;
    overflow?: "scroll" | "hidden" | "auto" | "visible" | undefined;
    shadow?: "small" | "large" | "medium" | undefined;
    userSelect?: "none" | undefined;
} & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;