@fluent-windows/core/es/Box/Box.js

React components that inspired by Microsoft's Fluent Design System.

import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles, withTheme } from '@fluent-windows/styles';
import propTypes from '@styled-system/prop-types';
import { styles } from './Box.styled';
import { BoxPropTypes } from './Box.type';
import { omit } from '../utils';
import { omitProps } from './omitProps';
export const name = 'Box';
const useStyles = createUseStyles(styles, {
  name
});
const Box = React.forwardRef((props, ref) => {
  const {
    as: Component = 'div',
    className: classNameProp,
    id,
    style,
    onClick,
    children,
    acrylic = false,
    ...rest
  } = props;
  const classes = useStyles(props);
  const className = classNames(classes.root, classes.system, {
    [classes.acrylic]: acrylic
  }, classNameProp);
  const otherProps = omit(rest, omitProps);
  const _props = {
    className,
    ref,
    id,
    style,
    onClick,
    ...otherProps
  };
  return React.createElement(Component, _props, children);
});
Box.displayName = `F${name}`;
Box.propTypes = { ...propTypes.space,
  ...propTypes.color,
  ...propTypes.typography,
  ...propTypes.layout,
  ...propTypes.background,
  ...propTypes.border,
  ...propTypes.position,
  ...propTypes.shadow,
  ...propTypes.flexbox,
  ...propTypes.grid,
  ...BoxPropTypes
}; // @ts-ignore

export default withTheme(Box);