import { _ as __rest } from './tslib.es6-es.js';
import React__default from 'react';
import classnames from 'classnames';

var borderStyles = {"border":"Y4Fm1wA7Z6c-","border-base":"GWX6qFcouh8-","border-top":"_20qfwUymZHI-","border-right":"_80vVV1kYAXU-","border-bottom":"_3yLCo9rAEyY-","border-left":"Sejzll1Lw3U-","spinning":"hgVY5aoAemU-"};

// Borders
const getBorderClassNames = (size) => getClassNames$1({
    defaultClass: "border",
    prefix: "border",
    size,
    styles: borderStyles,
});
const getBorderVars = (size) => getVars$2({ size, tokenPrefix: "border", varPrefix: "border" });
function getClassNames$1({ defaultClass, prefix, size, styles, }) {
    if (!size)
        return;
    const className = [
        defaultClass && styles[defaultClass],
    ];
    if (typeof size === "string") {
        className.push(styles[`${prefix}-base`]);
        // Return early since we don't need to process the object
        return classnames(className);
    }
    Object.keys(size).forEach(key => className.push(styles[`${prefix}-${key}`]));
    return classnames(className);
}
function getVars$2({ size, tokenPrefix, varPrefix }) {
    if (!size)
        return;
    const fullPrefix = `--box-${varPrefix}`;
    const customProperties = {};
    if (typeof size === "string") {
        customProperties[fullPrefix] = `var(--${tokenPrefix}-${size})`;
        // Return early since we don't need to process the object
        return customProperties;
    }
    const entries = Object.entries(size);
    entries.forEach(([key, value]) => {
        customProperties[`${fullPrefix}-${key}`] = `var(--${tokenPrefix}-${value})`;
    });
    return customProperties;
}

var styles$1 = {"height-auto":"CXP1mw5bm-s-","width-auto":"WF3F8955azY-","height-shrink":"FvQEC-mLWg0-","width-shrink":"V-mgShFUOdU-","height-grow":"QpiuEE5kvzA-","width-grow":"gKgsOLA5xGU-","spinning":"n3pqA-wy-NY-"};

const getHeightClassName = (value) => getClassName(value, "height");
const getHeightVars = (value) => getVars$1(value, "height");
const getWidthClassName = (value) => getClassName(value, "width");
const getWidthVars = (value) => getVars$1(value, "width");
function getClassName(value, prefix) {
    if (typeof value === "string" && !value.endsWith("%")) {
        return styles$1[`${prefix}-${value}`];
    }
    return styles$1[`${prefix}-auto`];
}
function getVars$1(value, prefix) {
    let size;
    if (typeof value === "string" && value.endsWith("%")) {
        size = value;
    }
    else if (typeof value === "number") {
        size = `${value}px`;
    }
    if (size) {
        return { [prefix]: size };
    }
}

var marginStyles = {"base":"vqVnWscsiIQ-","horizontal":"DhS09-lwkTc-","vertical":"W69ryAzdUzg-","top":"HvTuGXdMjIs-","right":"I6vE31JlhII-","bottom":"q8t-vPsvy5g-","left":"_1KNYdnJlOLE-","spinning":"tspLBDgETWM-"};

var paddingStyles = {"base":"pyQJ1Rwtg3Q-","horizontal":"J0XrYI95Nwo-","vertical":"krPrcZ2t1Mg-","top":"Ms36xmpr504-","right":"HR4tB8Ht7-w-","bottom":"_5mybhdcr7f0-","left":"eRM9czZkHgE-","spinning":"aRW2czggK0Y-"};

// Padding
const getPaddingClassNames = getClassNames;
const getPaddingVars = getVars;
// Margin
const getMarginClassNames = (size) => getClassNames(size, true);
const getMarginVars = (size) => getVars(size, "--box-margin");
/**
 * Converts BoxSpace object values into class names.
 */
function getClassNames(size, isMargin = false) {
    if (!size)
        return;
    const styles = isMargin ? marginStyles : paddingStyles;
    const className = [];
    if (typeof size === "string") {
        className.push(styles.base);
        // Return early since we don't need to process the object
        return classnames(className);
    }
    Object.keys(size).forEach(key => className.push(` ${styles[key]}`));
    return classnames(className);
}
/**
 * Converts BoxSpace object values into custom properties.
 */
function getVars(size, basePrefix = "--box-padding") {
    if (!size)
        return;
    const customProperties = {};
    if (typeof size === "string") {
        customProperties[basePrefix] = `var(--space-${size})`;
        // Return early since we don't need to process the object
        return customProperties;
    }
    const paddingEntries = Object.entries(size);
    paddingEntries.forEach(([key, value]) => {
        customProperties[`${basePrefix}-${key}`] = `var(--space-${value})`;
    });
    return customProperties;
}

var styles = {"box":"_3hq7jJitEgs-","preserve-white-space":"oWJNe7O1DFI-","spinning":"wXEsL-y93kQ-"};

var gapStyles = {"gap-minuscule":"QJaShYW08G4-","gap-smallest":"_6Cm3NqSDt4Y-","gap-smaller":"_4HNb8yqqy34-","gap-small":"O-c4Zb8TOoE-","gap-slim":"-jtvRWsRRc4-","gap-base":"JdxCZSu6mUE-","gap-large":"-yIVkzs7exw-","gap-larger":"obuoQPiyBuc-","gap-largest":"VqE9QLxSDIE-","gap-extravagant":"_4jHngIdjuqo-","spinning":"a-aXE4DiSRI-"};

var radiusStyles = {"radius-small":"kCKg-JJTRO8-","radius-base":"_235nMwtuWSw-","radius-large":"_9ppkWehd4QA-","radius-larger":"CsG3cZAn6r0-","radius-circle":"WWKSAC2020Q-","spinning":"CiyryaHCYUs-"};

function Box(_a) {
    var { alignItems, alignSelf, as: Tag = "div", background, border, borderColor, children, direction, gap, height = "auto", justifyContent, margin, overflow, padding, position = "relative", preserveWhiteSpace, radius, width = "auto" } = _a, props = __rest(_a, ["alignItems", "alignSelf", "as", "background", "border", "borderColor", "children", "direction", "gap", "height", "justifyContent", "margin", "overflow", "padding", "position", "preserveWhiteSpace", "radius", "width"]);
    return (React__default.createElement(Tag, Object.assign({}, props, { className: classnames(styles.box, preserveWhiteSpace && styles["preserve-white-space"], getPaddingClassNames(padding), getMarginClassNames(margin), getHeightClassName(height), getWidthClassName(width), getBorderClassNames(border), radius && radiusStyles[`radius-${radius}`], gap && gapStyles[`gap-${gap}`]), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getPaddingVars(padding)), getMarginVars(margin)), getHeightVars(height)), getWidthVars(width)), getBorderVars(border)), (background && { backgroundColor: `var(--color-${background})` })), (borderColor && { borderColor: `var(--color-${borderColor})` })), { alignItems,
            alignSelf, flexDirection: direction, justifyContent,
            overflow,
            position }) }), children));
}

export { Box as B };
