@atlaskit/primitives/dist/es2019/components/box.js

Primitives are token-backed low-level building blocks.

import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */
import { forwardRef } from 'react';
import { css, jsx } from '@emotion/react';
import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
import { parseXcss } from '../xcss/xcss';
import { SurfaceContext } from './internal/surface-provider';

// Can either Exclude or Extract - here we're excluding all SVG-related elements

// Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
/**
 * __Box__
 *
 * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
 * Renders a `div` by default.
 *
 * - [Examples](https://atlassian.design/components/primitives/box/examples)
 * - [Code](https://atlassian.design/components/primitives/box/code)
 * - [Usage](https://atlassian.design/components/primitives/box/usage)
 */
export const Box = /*#__PURE__*/forwardRef(({
  as = 'div',
  children,
  backgroundColor,
  padding,
  paddingBlock,
  paddingBlockStart,
  paddingBlockEnd,
  paddingInline,
  paddingInlineStart,
  paddingInlineEnd,
  style,
  testId,
  xcss,
  ...htmlAttributes
}, ref) => {
  const Component = as;
  // This is to remove className from safeHtmlAttributes
  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
  const {
    className: _spreadClass,
    ...safeHtmlAttributes
  } = htmlAttributes;
  const className = xcss && parseXcss(xcss);
  const node =
  // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
  jsx(Component, _extends({
    style: style
    // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
    ,
    ref: ref
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, safeHtmlAttributes, {
    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
    className],
    "data-testid": testId
  }), children);
  return backgroundColor ? jsx(SurfaceContext.Provider, {
    value: backgroundColor
  }, node) : node;
});
export default Box;
const baseStyles = css({
  boxSizing: 'border-box',
  appearance: 'none',
  border: 'none'
});