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

UI Kit Core React components.

import { staticClasses, useClasses } from "./Container.styles.js";
import { theme } from "@hitachivantara/uikit-styles";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
import MuiContainer from "@mui/material/Container";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//#region src/Container/Container.tsx
/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */
var HvContainer = forwardRef(function HvContainer(props, ref) {
	const { maxWidth = false, classes: classesProp, className, fixed, disableGutters, ...others } = useDefaultProps("HvContainer", props);
	const { classes, cx, css } = useClasses(classesProp);
	return /* @__PURE__ */ jsx(MuiContainer, {
		className: cx({ [css(useMediaQuery(useTheme$1().breakpoints.up("md")) ? { [`&.${staticClasses.root}`]: {
			paddingLeft: theme.spacing(4),
			paddingRight: theme.spacing(4)
		} } : { [`&.${staticClasses.root}`]: {
			paddingLeft: theme.space.sm,
			paddingRight: theme.space.sm
		} })]: !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
	});
});
//#endregion
export { HvContainer };