@hitachivantara/uikit-react-core/dist/esm/Container/Container.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import MuiContainer from "@mui/material/Container";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import { useClasses, staticClasses } from "./Container.styles.js";
const HvContainer = forwardRef(
  function HvContainer2(props, ref) {
    const {
      maxWidth = false,
      classes: classesProp,
      className,
      fixed,
      disableGutters,
      ...others
    } = useDefaultProps("HvContainer", props);
    const { classes, cx, css } = useClasses(classesProp);
    const muiTheme = useTheme();
    const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
    const gutters = upMd ? {
      // Increases specificity
      [`&.${staticClasses.root}`]: {
        paddingLeft: theme.spacing(4),
        paddingRight: theme.spacing(4)
      }
    } : {
      // Increases specificity
      [`&.${staticClasses.root}`]: {
        paddingLeft: theme.space.sm,
        paddingRight: theme.space.sm
      }
    };
    return /* @__PURE__ */ jsx(
      MuiContainer,
      {
        className: cx({ [css(gutters)]: !disableGutters }, className),
        classes: {
          root: classes.root,
          disableGutters: classes.disableGutters,
          fixed: classes.fixed,
          maxWidthXs: classes.maxWidthXs,
          maxWidthSm: classes.maxWidthSm,
          maxWidthMd: classes.maxWidthMd,
          maxWidthLg: classes.maxWidthLg,
          maxWidthXl: classes.maxWidthXl
        },
        ref,
        maxWidth,
        fixed,
        disableGutters,
        ...others
      }
    );
  }
);
export {
  HvContainer,
  staticClasses as containerClasses
};