import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';

import './Flex.css';const flex = "_flex_1yrhm_1";
const styles = {
	flex: flex,
	"inline-flex": "_inline-flex_1yrhm_7"
};

const Flex = forwardRef((props, ref) => {
  const {
    inline,
    direction,
    grow,
    shrink,
    basis,
    wrap,
    sm,
    md,
    lg,
    xl,
    xxl,
    ...nonLayoutProps
  } = props;
  const combineLayoutProps = {
    ...nonLayoutProps,
    flexDirection: direction,
    flexGrow: grow,
    flexShrink: shrink,
    flexBasis: basis,
    flexWrap: wrap,
    sm: {
      ...sm,
      flexDirection: sm?.direction,
      flexGrow: sm?.grow,
      flexShrink: sm?.shrink,
      flexBasis: sm?.basis,
      flexWrap: sm?.wrap
    },
    md: {
      ...md,
      flexDirection: md?.direction,
      flexGrow: md?.grow,
      flexShrink: md?.shrink,
      flexBasis: md?.basis,
      flexWrap: md?.wrap
    },
    lg: {
      ...lg,
      flexDirection: lg?.direction,
      flexGrow: lg?.grow,
      flexShrink: lg?.shrink,
      flexBasis: lg?.basis,
      flexWrap: lg?.wrap
    },
    xl: {
      ...xl,
      flexDirection: xl?.direction,
      flexGrow: xl?.grow,
      flexShrink: xl?.shrink,
      flexBasis: xl?.basis,
      flexWrap: xl?.wrap
    },
    xxl: {
      ...xxl,
      flexDirection: xxl?.direction,
      flexGrow: xxl?.grow,
      flexShrink: xxl?.shrink,
      flexBasis: xxl?.basis,
      flexWrap: xxl?.wrap
    }
  };
  const { layoutStyles, componentProps } = useLayoutPropsUtil(combineLayoutProps);
  const { children, className, style, ...rest } = componentProps;
  const flexClassNames = cx(className, {
    [styles["flex"]]: !inline,
    [styles["inline-flex"]]: inline
  });
  const styleCombined = {
    ...style,
    ...layoutStyles
  };
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: flexClassNames,
      "data-anv": "flex",
      style: styleCombined,
      ref,
      ...rest,
      children
    }
  );
});
Flex.displayName = "Flex";

export { Flex as F };
//# sourceMappingURL=Flex-Bb3iHExM.js.map
