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 './Grid.css';const grid = "_grid_fgegg_1";
const styles = {
	grid: grid,
	"inline-grid": "_inline-grid_fgegg_7",
	"grid-item": "_grid-item_fgegg_13"
};

const GridItem = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const { className, children, style, ...rest } = componentProps;
    const gridItemClassNames = cx([styles["grid-item"]], className, {});
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: gridItemClassNames,
        "data-anv": "grid-item",
        ref,
        style: styleCombined,
        ...rest,
        children
      }
    );
  }
);
GridItem.displayName = "GridItem";

const Grid = Object.assign(
  forwardRef(function GridInner(props, ref) {
    const {
      inline,
      templateColumns,
      templateRows,
      templateAreas,
      autoColumns,
      autoRows,
      sm,
      md,
      lg,
      xl,
      xxl,
      ...nonLayoutProps
    } = props;
    const combineLayoutProps = {
      ...nonLayoutProps,
      gridTemplateColumns: props.templateColumns,
      gridTemplateRows: props.templateRows,
      gridTemplateAreas: props.templateAreas,
      gridAutoColumns: props.autoColumns,
      gridAutoRows: props.autoRows,
      sm: {
        ...sm,
        gridTemplateColumns: sm?.templateColumns,
        gridTemplateRows: sm?.templateRows,
        gridTemplateAreas: sm?.templateAreas,
        gridAutoColumns: sm?.autoColumns,
        gridAutoRows: sm?.autoRows
      },
      md: {
        ...md,
        gridTemplateColumns: md?.templateColumns,
        gridTemplateRows: md?.templateRows,
        gridTemplateAreas: md?.templateAreas,
        gridAutoColumns: md?.autoColumns,
        gridAutoRows: md?.autoRows
      },
      lg: {
        ...lg,
        gridTemplateColumns: lg?.templateColumns,
        gridTemplateRows: lg?.templateRows,
        gridTemplateAreas: lg?.templateAreas,
        gridAutoColumns: lg?.autoColumns,
        gridAutoRows: lg?.autoRows
      },
      xl: {
        ...xl,
        gridTemplateColumns: xl?.templateColumns,
        gridTemplateRows: xl?.templateRows,
        gridTemplateAreas: xl?.templateAreas,
        gridAutoColumns: xl?.autoColumns,
        gridAutoRows: xl?.autoRows
      },
      xxl: {
        ...xxl,
        gridTemplateColumns: xxl?.templateColumns,
        gridTemplateRows: xxl?.templateRows,
        gridTemplateAreas: xxl?.templateAreas,
        gridAutoColumns: xxl?.autoColumns,
        gridAutoRows: xxl?.autoRows
      }
    };
    const { layoutStyles, componentProps } = useLayoutPropsUtil(combineLayoutProps);
    const { children, className, style, ...rest } = componentProps;
    const gridClassNames = cx(className, {
      [styles["grid"]]: !inline,
      [styles["inline-grid"]]: inline
    });
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: gridClassNames,
        "data-anv": "grid",
        style: styleCombined,
        ref,
        ...rest,
        children
      }
    );
  }),
  {
    /**
     * GridItem component for individual items within a CSS Grid layout.
     *
     * Features:
     * - Individual grid item with full layout utility support
     * - Automatic grid item styling and class management
     * - Comprehensive layout utilities for positioning and sizing
     * - Support for all standard div element props
     * - Flexible grid positioning and sizing controls
     * - Automatic style generation and class management
     * - Works seamlessly with Grid component
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Grid templateColumns="repeat(2, 1fr)" gap="4">
     *   <Grid.Item>Grid Item 1</Grid.Item>
     *   <Grid.Item>Grid Item 2</Grid.Item>
     * </Grid>
     */
    Item: GridItem
  }
);
Grid.displayName = "Grid";

export { Grid as G };
//# sourceMappingURL=Grid-ho1pGJ5L.js.map
