How to use the @xstyled/system.compose function in @xstyled/system

);

// Compose

const customSystem = compose(margin, padding);

type CustomSystemBoxProps = MarginProps & PaddingProps;

const CustomSystemBox = styled.div`
    ${customSystem}
`;

const customSystemBoxTest = () => (
    <div>
        
    </div>
);

// createSystemComponent

const InnerSystemComponentBox = createSystemComponent(React, 'div', shadows);

/* eslint-disable no-console, import/no-unresolved */
const Benchmark = require('benchmark')
const xsys = require('@xstyled/system')
const sys = require('styled-system')

// Benchmark.options.maxTime = 0.2

const xsysSystem = xsys.compose(
  xsys.fontSize,
  xsys.space,
)

const sysSystem = sys.compose(
  sys.fontSize,
  sys.space,
)

const suite = new Benchmark.Suite('systems')

const xSysValue = {
  theme: {},
  p: { xs: 1, md: 20 },
  mt: 10,
  m: '20px',

user-select: none;
    // todo: don't hardcode
    border: thin solid #808080;
    // todo: may want to read from a theme value here
    border-radius: 2px;

    ${({ size, disabled }) =>
        css({
            height: size,
            width: size,
            cursor: disabled ? 'default' : 'pointer',
            opacity: disabled ? 0.4 : 1,
        })};

    ${compose(spaceStyles, colorStyles, backgroundColorStyles)};
`;

interface CheckboxProps {
    className?: string;
    id?: string;
    htmlFor?: string;
    backgroundColor?: string;

    checked?: boolean;
    disabled?: boolean;
    name?: string;

    size?: string;
    color?: string;

    inputProps?: any;