import styled from "styled-components";
import alignSelf from "../../../mixins/alignSelf";
import margin from "../../../mixins/margin";
import padding from "../../../mixins/padding";
import round from "../../../mixins/round";
import opacity from "../../../mixins/opacity";
import position from "../../../mixins/position";
import zIndex from "../../../mixins/zIndex";
import cursor from "../../../mixins/cursor";
import height from "../mixins/height";
import width from "../mixins/width";
import overflow from "../mixins/overflow";
import background from "../mixins/background";
import alignContent from "../mixins/alignContent";
import gap from "../mixins/gap";
import border from "../mixins/border";
import pseudos from "../mixins/pseudos";
//styled system custom
import { position as styledSystemPosition } from "styled-system";
import css from "@styled-system/css";
export var sx = function sx(props) {
  return css(props.sx)(props);
};
var Box = function Box(Component) {
  return styled(Component).withConfig({
    displayName: "box",
    componentId: "sc-12jmtj1-0"
  })(["box-sizing:border-box;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], alignContent, alignSelf, position, margin, padding, gap, width, height, background, opacity, border, round, overflow, zIndex, cursor, pseudos, styledSystemPosition, sx);
};
export default Box;