@cimpress/react-components/dist/esm/src/FlexBox.js

React components to support the MCP styleguide

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { cx } from '@emotion/css';
export const FlexBox = (_a) => {
    var { style, children, alignContent, alignItems = 'center', alignSelf, flex, flexBasis, justifyContent = 'space-between', flexDirection, flexFlow, flexWrap, className } = _a, restProps = __rest(_a, ["style", "children", "alignContent", "alignItems", "alignSelf", "flex", "flexBasis", "justifyContent", "flexDirection", "flexFlow", "flexWrap", "className"]);
    const flexBoxStyles = {
        display: 'flex',
        alignContent,
        alignItems,
        alignSelf,
        flex,
        flexBasis,
        flexDirection,
        flexFlow,
        flexWrap,
        justifyContent,
    };
    // shorthand properties e.g, `flexFlow = undefined` overwrite the normal properties, e.g., `flexDirection`
    // therefore filtering all `undefined` values before passing them to component styles
    Object.keys(flexBoxStyles).forEach(k => {
        const key = k;
        if (!flexBoxStyles[key]) {
            delete flexBoxStyles[key];
        }
    });
    return (React.createElement("div", Object.assign({ className: cx('crc-flexbox', className), style: Object.assign(Object.assign({}, flexBoxStyles), style) }, restProps), children));
};
//# sourceMappingURL=FlexBox.js.map