'use strict';

var React = require('react');
var classnames = require('classnames');

var styles = {"flexible":"pEdV7Oo29SE-","minusculeGap":"Zm7CagsL-WU-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","slimGap":"odJ-gd44AYY-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","largerGap":"l-DqnL94mmw-","largestGap":"_4bEByMh7pHI-","extravagantGap":"pdH9lzFTcIc-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};

function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
    return (React.createElement("div", { className: classnames(styles.flexible, {
            [styles[`${gap}Gap`]]: Boolean(gap),
            [styles[`${align}Align`]]: Boolean(align),
        }), style: generateGridStylesFromTemplate(direction, template) }, children));
}
function generateGridStylesFromTemplate(direction, layoutTemplate) {
    const containerStyles = {};
    const templateKeys = {
        row: "gridTemplateColumns",
        column: "gridTemplateRows",
    };
    const templateValues = {
        grow: "1fr",
        shrink: "max-content",
    };
    containerStyles[templateKeys[direction]] = layoutTemplate
        .map(key => templateValues[key])
        .join(" ");
    return containerStyles;
}

exports.Flex = Flex;
