Styled Component Spacing Props Generation

Spacing.js

import React from "react";
import styled, { css } from "styled-components";

const directions = {
    T: "top",
    L: "left",
    R: "right",
    B: "bottom"
};

const boxModel = {
    p: "padding",
    m: "margin"
};

const sizes = {
    Xsm: "0.25rem",
    Sm: "0.5rem",
    Md: "1rem",
    Lg: "1.5rem",
    Xlg: "2rem"
};

function handleProps(props) {
    const passedProps = Object.keys(props);

    const derivedProps = Object.keys(sizes).reduce((all, sizeName) => {
        const size = sizes[sizeName];
        const sizeGroupedProps = {};
        Object.keys(directions).forEach((dir) => {
            const direction = directions[dir];
            Object.keys(boxModel).forEach((bm) => {
                const boxModelType = boxModel[bm];
                sizeGroupedProps[`${bm}${dir}${sizeName}`] = css`
                    ${boxModelType}-${direction}: ${size};
                `;
            });
        });
        return { ...all, ...sizeGroupedProps };
    }, {});

    return passedProps.map((p) => derivedProps[p]);
}

const Spacing = styled.div`
    ${handleProps}
`;

export default Spacing;