@mantine/core/esm/components/Flex/Flex.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { filterProps } from "../../core/utils/filter-props/filter-props.mjs";
import { useMantineDeduplicateInlineStyles } from "../../core/MantineProvider/Mantine.context.mjs";
import { useMantineTheme } from "../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { InlineStyles } from "../../core/InlineStyles/InlineStyles.mjs";
import { hashStyleProps } from "../../core/InlineStyles/hash-styles.mjs";
import { parseStyleProps } from "../../core/Box/style-props/parse-style-props/parse-style-props.mjs";
import { useRandomClassName } from "../../core/Box/use-random-classname/use-random-classname.mjs";
import { polymorphicFactory } from "../../core/factory/polymorphic-factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { FLEX_STYLE_PROPS_DATA } from "./flex-props.mjs";
import Flex_module_default from "./Flex.module.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Flex/Flex.tsx
const Flex = polymorphicFactory((_props) => {
	const props = useProps("Flex", null, _props);
	const { classNames, className, style, styles, unstyled, vars, gap, rowGap, columnGap, align, justify, wrap, direction, attributes, ...others } = props;
	const getStyles = useStyles({
		name: "Flex",
		classes: Flex_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars
	});
	const theme = useMantineTheme();
	const randomClassName = useRandomClassName();
	const parsedStyleProps = parseStyleProps({
		styleProps: {
			gap,
			rowGap,
			columnGap,
			align,
			justify,
			wrap,
			direction
		},
		theme,
		data: FLEX_STYLE_PROPS_DATA
	});
	const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();
	const responsiveClassName = deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media) : randomClassName;
	return /* @__PURE__ */ jsxs(Fragment, { children: [parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ jsx(InlineStyles, {
		selector: `.${responsiveClassName}`,
		styles: parsedStyleProps.styles,
		media: parsedStyleProps.media,
		deduplicate: deduplicateInlineStyles
	}), /* @__PURE__ */ jsx(Box, {
		...getStyles("root", {
			className: responsiveClassName,
			style: filterProps(parsedStyleProps.inlineStyles)
		}),
		...others
	})] });
});
Flex.classes = Flex_module_default;
Flex.displayName = "@mantine/core/Flex";
//#endregion
export { Flex };

//# sourceMappingURL=Flex.mjs.map