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 flex from "../mixins/flex";
import wrap from "../mixins/wrap";
import alignItems from "../mixins/alignItems";
import alignContent from "../mixins/alignContent";
import justifyContent from "../mixins/justifyContent";
import gap from "../mixins/gap";
import direction from "../mixins/direction";
import border from "../mixins/border";
import pseudos from "../mixins/pseudos";
import { fontColor } from "../../typography/typography";
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 Flex = function Flex(Component) {
  return styled(Component).withConfig({
    displayName: "flex",
    componentId: "sc-1gtk8kg-0"
  })(["display:flex;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], flex, direction, wrap, alignItems, alignContent, justifyContent, alignSelf, position, margin, padding, gap, width, height, fontColor, background, opacity, border, round, overflow, zIndex, cursor, pseudos, styledSystemPosition, sx);
};
export default Flex;