import { jsx } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { useStyle } from "../../../runtimes/react/use-style";
import { useResponsiveStyle } from "../../utils/responsive-style";
function GutterContainer({ className, gutter, first, last, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        useStyle(
          useResponsiveStyle([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
            paddingLeft: first ? "0px" : `${gutter2.value / 2}${gutter2.unit}`,
            paddingRight: last ? "0px" : `${gutter2.value / 2}${gutter2.unit}`
          }))
        ),
        className
      )
    }
  );
}
export {
  GutterContainer as default
};
//# sourceMappingURL=index.js.map