var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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 { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
import { theme } from "../../../css/globalStyle";
var BoxComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  flex-direction: ", ";\n  padding: ", ";\n  padding-top: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  color: ", ";\n  overflow: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  border-radius: ", ";\n  background: ", ";\n  z-index: ", ";\n  box-sizing: border-box;\n  white-space: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  flex-direction: ", ";\n  padding: ", ";\n  padding-top: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  color: ", ";\n  overflow: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  border-radius: ", ";\n  background: ", ";\n  z-index: ", ";\n  box-sizing: border-box;\n  white-space: ", ";\n"])), function (_a) {
    var w = _a.w;
    return (typeof w === "number" ? "".concat(w, "px") : w);
}, function (_a) {
    var h = _a.h;
    return (typeof h === "number" ? "".concat(h, "px") : h);
}, function (_a) {
    var position = _a.position;
    return position;
}, function (_a) {
    var top = _a.top;
    return top;
}, function (_a) {
    var right = _a.right;
    return right;
}, function (_a) {
    var bottom = _a.bottom;
    return bottom;
}, function (_a) {
    var left = _a.left;
    return left;
}, function (_a) {
    var display = _a.display;
    return display;
}, function (_a) {
    var justify = _a.justify;
    return justify;
}, function (_a) {
    var align = _a.align;
    return align;
}, function (_a) {
    var direction = _a.direction;
    return direction;
}, function (_a) {
    var p = _a.p, px = _a.px, py = _a.py;
    return px && py
        ? "".concat(theme.spacing[py], " ").concat(theme.spacing[px])
        : px
            ? "0 ".concat(theme.spacing[px])
            : py
                ? "".concat(theme.spacing[py], " 0")
                : typeof p === "number"
                    ? theme.spacing[p]
                    : p;
}, function (_a) {
    var pt = _a.pt;
    return theme.spacing[pt];
}, function (_a) {
    var pl = _a.pl;
    return theme.spacing[pl];
}, function (_a) {
    var pr = _a.pr;
    return theme.spacing[pr];
}, function (_a) {
    var pb = _a.pb;
    return theme.spacing[pb];
}, function (_a) {
    var m = _a.m, mx = _a.mx, my = _a.my;
    return mx && my
        ? "".concat(theme.spacing[my], " ").concat(theme.spacing[mx])
        : mx
            ? "0 ".concat(theme.spacing[mx])
            : my
                ? "".concat(theme.spacing[my], " 0")
                : typeof m === "number"
                    ? theme.spacing[m]
                    : m;
}, function (_a) {
    var mt = _a.mt;
    return theme.spacing[mt];
}, function (_a) {
    var ml = _a.ml;
    return theme.spacing[ml];
}, function (_a) {
    var mr = _a.mr;
    return theme.spacing[mr];
}, function (_a) {
    var mb = _a.mb;
    return theme.spacing[mb];
}, function (_a) {
    var color = _a.color;
    return color;
}, function (_a) {
    var overflow = _a.overflow;
    return overflow;
}, function (_a) {
    var boxShadow = _a.boxShadow;
    return theme.shadow[boxShadow];
}, function (_a) {
    var border = _a.border;
    return border;
}, function (_a) {
    var rounded = _a.rounded;
    return theme.radius[rounded];
}, function (_a) {
    var bg = _a.bg;
    return bg;
}, function (_a) {
    var z = _a.z;
    return z;
}, function (_a) {
    var noWrap = _a.noWrap;
    return (noWrap ? "nowrap" : "normal");
});
export var Box = forwardRef(function (_a, ref) {
    var children = _a.children, boxShadow = _a.boxShadow, rounded = _a.rounded, rest = __rest(_a, ["children", "boxShadow", "rounded"]);
    return (_jsx(BoxComponent, __assign({ ref: ref, shadow: boxShadow, rounded: rounded }, rest, { children: children })));
});
var templateObject_1;
//# sourceMappingURL=index.js.map