import style from "./style.js";
import compose from "./compose.js";
import { createUnaryUnit, getValue } from "./spacing.js";
import { handleBreakpoints } from "./breakpoints.js";
import responsivePropType from "./responsivePropType.js";
const gap = (props) => {
  if (props.gap !== void 0 && props.gap !== null) {
    const transformer = createUnaryUnit(props.theme, "spacing", 8, "gap");
    const styleFromPropValue = (propValue) => ({
      gap: getValue(transformer, propValue)
    });
    return handleBreakpoints(props, props.gap, styleFromPropValue);
  }
  return null;
};
gap.propTypes = process.env.NODE_ENV !== "production" ? {
  gap: responsivePropType
} : {};
gap.filterProps = ["gap"];
const columnGap = (props) => {
  if (props.columnGap !== void 0 && props.columnGap !== null) {
    const transformer = createUnaryUnit(props.theme, "spacing", 8, "columnGap");
    const styleFromPropValue = (propValue) => ({
      columnGap: getValue(transformer, propValue)
    });
    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
  }
  return null;
};
columnGap.propTypes = process.env.NODE_ENV !== "production" ? {
  columnGap: responsivePropType
} : {};
columnGap.filterProps = ["columnGap"];
const rowGap = (props) => {
  if (props.rowGap !== void 0 && props.rowGap !== null) {
    const transformer = createUnaryUnit(props.theme, "spacing", 8, "rowGap");
    const styleFromPropValue = (propValue) => ({
      rowGap: getValue(transformer, propValue)
    });
    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
  }
  return null;
};
rowGap.propTypes = process.env.NODE_ENV !== "production" ? {
  rowGap: responsivePropType
} : {};
rowGap.filterProps = ["rowGap"];
const gridColumn = style({
  prop: "gridColumn"
});
const gridRow = style({
  prop: "gridRow"
});
const gridAutoFlow = style({
  prop: "gridAutoFlow"
});
const gridAutoColumns = style({
  prop: "gridAutoColumns"
});
const gridAutoRows = style({
  prop: "gridAutoRows"
});
const gridTemplateColumns = style({
  prop: "gridTemplateColumns"
});
const gridTemplateRows = style({
  prop: "gridTemplateRows"
});
const gridTemplateAreas = style({
  prop: "gridTemplateAreas"
});
const gridArea = style({
  prop: "gridArea"
});
compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
export {
  columnGap,
  gap,
  gridArea,
  gridAutoColumns,
  gridAutoFlow,
  gridAutoRows,
  gridColumn,
  gridRow,
  gridTemplateAreas,
  gridTemplateColumns,
  gridTemplateRows,
  rowGap
};
