import { jsx } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { useStyle } from "../../runtimes/react/use-style";
import { useItemAnimation } from "../builtin/Box/animations";
import { useResponsiveGridItem } from "../utils/responsive-style";
const gridItemIdentifierClassName = "grid-item";
function GridItem({
  grid,
  index,
  columnGap,
  rowGap,
  className,
  itemAnimateDuration,
  itemAnimateDelay,
  itemStaggerDuration,
  ...restOfProps
}) {
  const gridItemClassName = useStyle(useResponsiveGridItem({ grid, index, columnGap, rowGap }));
  const animationClassName = useItemAnimation(
    itemAnimateDuration,
    itemAnimateDelay,
    itemStaggerDuration,
    index
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)
    }
  );
}
export {
  GridItem,
  gridItemIdentifierClassName
};
//# sourceMappingURL=grid-item.js.map