import {
  useBreakpoint
} from "./chunk-7FQ7SXK4.js";

// src/components/Grid/Item.tsx
import { useEffect, useState } from "react";
import classNames from "classnames/dedupe";
import { jsx } from "react/jsx-runtime";
var getBreakpointMap = (config) => Object.entries(config).reduce(
  (prev, [key, value]) => {
    const previous = Object.values(prev);
    const lastDefined = previous[previous.length - 1];
    return { ...prev, [key]: value || lastDefined };
  },
  {}
);
var DEFAULT_SPAN = 12;
var GridItem = ({ ref, ...props }) => {
  const {
    breakpoint: { size: breakpointSize }
  } = useBreakpoint();
  const {
    span,
    xs = Array.isArray(span) ? DEFAULT_SPAN : span,
    sm,
    md,
    lg,
    xl,
    xxl,
    alignSelf,
    justifySelf,
    className,
    ...rest
  } = props;
  const breakpointMap = getBreakpointMap({
    xs,
    sm,
    md,
    lg,
    xl,
    xxl
  });
  const [responsiveSpan, setResponsiveSpan] = useState();
  const classes = classNames("mobius", "mobius-grid__item", className);
  useEffect(() => {
    setResponsiveSpan(breakpointMap[breakpointSize]);
  }, [breakpointSize, breakpointMap]);
  const styles = {
    gridColumn: responsiveSpan ? `span ${responsiveSpan}` : void 0,
    alignSelf,
    justifySelf
  };
  return /* @__PURE__ */ jsx("div", { ref, style: { ...styles }, className: classes, ...rest });
};
GridItem.displayName = "GridItem";

export {
  getBreakpointMap,
  DEFAULT_SPAN,
  GridItem
};
//# sourceMappingURL=chunk-PARKMZYZ.js.map
