@patreon/studio/module/components/Box/index.jsx

Patreon Studio Design System

'use client';
import isPropValid from '@emotion/is-prop-valid';
import React, { forwardRef } from 'react';
import { styled } from 'styled-components';
import { tokens } from '~/tokens';
import { filterForAriaProps } from '~/utilities/accessibility';
import { convertLegacyUnitValue } from '~/utilities/legacy-units';
import { cssForResponsiveProp, wrapResponsive } from '~/utilities/opaque-responsive';
import { getBorder, getMargin, getPadding } from './utils';
/**
 * @deprecated If you need margins/padding, use the Spacer component, otherwise use a CSS module.
 */
const InnerBox = ({ 'data-tag': dataTag, alignContent, alignItems, alignSelf, b, backgroundColor, bb, bl, borderColor = tokens.global.border.muted.default, borderStrokeWidth, borderStyle = 'solid', br, bt, children, cornerRadius, css: userCss, display, el = 'div', flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, fluidHeight, fluidWidth, height, id, innerRef, justifyContent, m, maxHeight, maxWidth, mb, mh, minHeight, minWidth, ml, mr, mt, mv, onClick, onMouseEnter, onMouseLeave, order, overflow, p, pb, ph, pl, position, pr, pt, pv, textAlign, verticalAlign, width, ...restProps }) => {
    return (<Div as={el} ref={innerRef} data-tag={dataTag} alignContent={wrapResponsive(alignContent)} alignItems={wrapResponsive(alignItems)} alignSelf={wrapResponsive(alignSelf)} b={wrapResponsive(b)} backgroundColor={wrapResponsive(backgroundColor)} bb={wrapResponsive(bb)} bl={wrapResponsive(bl)} borderColor={borderColor} borderStrokeWidth={borderStrokeWidth} borderStyle={borderStyle} br={wrapResponsive(br)} bt={wrapResponsive(bt)} cornerRadius={wrapResponsive(cornerRadius)} css={userCss} display={wrapResponsive(display)} flexBasis={wrapResponsive(flexBasis)} flexDirection={wrapResponsive(flexDirection)} flexGrow={wrapResponsive(flexGrow)} flexShrink={wrapResponsive(flexShrink)} flexWrap={wrapResponsive(flexWrap)} fluidHeight={wrapResponsive(fluidHeight)} fluidWidth={wrapResponsive(fluidWidth)} height={wrapResponsive(height)} id={id} justifyContent={wrapResponsive(justifyContent)} m={wrapResponsive(m)} maxHeight={wrapResponsive(maxHeight)} maxWidth={wrapResponsive(maxWidth)} mh={wrapResponsive(mh)} mb={wrapResponsive(mb)} minHeight={wrapResponsive(minHeight)} minWidth={wrapResponsive(minWidth)} ml={wrapResponsive(ml)} mr={wrapResponsive(mr)} mt={wrapResponsive(mt)} mv={wrapResponsive(mv)} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} order={wrapResponsive(order)} overflow={wrapResponsive(overflow)} p={wrapResponsive(p)} pb={wrapResponsive(pb)} ph={wrapResponsive(ph)} pl={wrapResponsive(pl)} position={wrapResponsive(position)} pr={wrapResponsive(pr)} pt={wrapResponsive(pt)} pv={wrapResponsive(pv)} textAlign={wrapResponsive(textAlign)} verticalAlign={wrapResponsive(verticalAlign)} width={wrapResponsive(width)} {...filterForAriaProps(restProps)}>
      {children}
    </Div>);
};
/**
 * @deprecated Use styled.div`` instead. If you need responsive properties, use the `mediaForBreakpoint` utility
 */
export const Box = forwardRef(function Box(props, ref) {
    return <InnerBox {...props} innerRef={ref}/>;
});
const convertNumberToString = (value) => value.toString();
const convertNumberToUnits = (value) => typeof value === 'number' ? convertLegacyUnitValue(value) : value;
const Div = styled.div.withConfig({
    shouldForwardProp: (prop) => isPropValid(prop) && !['display', 'height', 'order', 'overflow', 'width'].includes(prop),
}) `
  box-sizing: border-box;
  transition: all ${tokens.global.transition.regular.duration} ${tokens.global.transition.regular.easing};

  ${({ alignContent }) => cssForResponsiveProp('align-content', alignContent)}
  ${({ alignSelf }) => cssForResponsiveProp('align-self', alignSelf)}
  ${({ alignItems }) => cssForResponsiveProp('align-items', alignItems)}
  ${({ backgroundColor }) => cssForResponsiveProp('background-color', backgroundColor)}
  ${({ cornerRadius }) => cssForResponsiveProp('border-radius', cornerRadius, (cr) => {
    switch (cr) {
        case 'none':
        case 'imageDefault':
            return '0';
        case 'circle':
            return tokens.global.radius.pill;
        case 'small':
        case 'default':
        default:
            return tokens.global.radius.sm;
    }
})}
  ${({ display }) => cssForResponsiveProp('display', display)}
  ${({ flexBasis }) => cssForResponsiveProp('flex-basis', flexBasis, convertNumberToUnits)}
  ${({ flexDirection }) => cssForResponsiveProp('flex-direction', flexDirection)}
  ${({ flexGrow }) => cssForResponsiveProp('flex-grow', flexGrow, convertNumberToString)}
  ${({ flexShrink }) => cssForResponsiveProp('flex-shrink', flexShrink, convertNumberToString)}
  ${({ flexWrap }) => cssForResponsiveProp('flex-wrap', flexWrap)}
  ${({ fluidHeight }) => cssForResponsiveProp('height', fluidHeight, (value) => (value ? '100%' : 'initial'))};
  ${({ height }) => cssForResponsiveProp('height', height, convertNumberToUnits)}
  ${({ justifyContent }) => cssForResponsiveProp('justify-content', justifyContent)}
  ${({ maxHeight }) => cssForResponsiveProp('max-height', maxHeight, convertNumberToUnits)}
  ${({ maxWidth }) => cssForResponsiveProp('max-width', maxWidth, convertNumberToUnits)}
  ${({ minHeight }) => cssForResponsiveProp('min-height', minHeight, convertNumberToUnits)}
  ${({ minWidth }) => cssForResponsiveProp('min-width', minWidth, convertNumberToUnits)}
  ${({ order }) => cssForResponsiveProp('order', order, convertNumberToString)}
  ${({ overflow }) => cssForResponsiveProp('overflow', overflow)}
  ${({ position }) => cssForResponsiveProp('position', position)}
  ${({ textAlign }) => cssForResponsiveProp('text-align', textAlign)}
  ${({ verticalAlign }) => cssForResponsiveProp('vertical-align', verticalAlign)}
  ${({ fluidWidth }) => cssForResponsiveProp('width', fluidWidth, (value) => (value ? '100%' : 'initial'))};
  ${({ width }) => cssForResponsiveProp('width', width, convertNumberToUnits)}

  ${({ p, pv, ph, pt, pr, pb, pl }) => getPadding({ p, pv, ph, pt, pr, pb, pl })}
  ${({ m, mv, mh, mt, mr, mb, ml }) => getMargin({ m, mv, mh, mt, mr, mb, ml })}
  ${({ b, bt, br, bb, bl, borderColor, borderStrokeWidth, borderStyle }) => getBorder({ b, bt, br, bb, bl, borderColor, borderStrokeWidth, borderStyle })}

  ${(props) => props.css};
`;
//# sourceMappingURL=index.jsx.map