import * as React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
import { CommonStyleProps } from './utils/styleProps';
/**
* Box Props
* ---
* Common style props + children
*
* - background
* - border
* - color
* - depth
* - flexItem
* - gridItem
* - layout
* - other
* - position
* - space
* - text
*/
export type BoxProps = CommonStyleProps & CSProps & {
children?: React.ReactNode;
};
/**
* A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
* Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
* @example
* ```
* import { boxStyleFn } from '@workday/canvas-kit-react/layout';
* const StyledHeader = styled('h1')(
* boxStyleFn,
* {
* fontWeight: 400,
* }
* )
*
* ...
*
*
(props: P) => {};
/**
* `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
* It is highly flexible, and its primary purpose is to build other components.
*
* @example
* import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
*
* interface CardProps extends BoxProps {
* // card-specific props
* }
*
* // `Card`'s default values are set using `BoxProps`
* const Card = (props: CardProps) => (
*