@mantine/core/cjs/core/Box/Box.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_is_number_like = require("../utils/is-number-like/is-number-like.cjs");
const require_Mantine_context = require("../MantineProvider/Mantine.context.cjs");
const require_MantineThemeProvider = require("../MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_InlineStyles = require("../InlineStyles/InlineStyles.cjs");
const require_extract_style_props = require("./style-props/extract-style-props/extract-style-props.cjs");
const require_style_props_data = require("./style-props/style-props-data.cjs");
const require_parse_style_props = require("./style-props/parse-style-props/parse-style-props.cjs");
const require_use_random_classname = require("./use-random-classname/use-random-classname.cjs");
const require_create_polymorphic_component = require("../factory/create-polymorphic-component.cjs");
const require_get_box_mod = require("./get-box-mod/get-box-mod.cjs");
const require_get_box_style = require("./get-box-style/get-box-style.cjs");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/core/Box/Box.tsx
function _Box({ component, style, __vars, className, variant, mod, size, hiddenFrom, visibleFrom, lightHidden, darkHidden, renderRoot, __size, ref, ...others }) {
	const theme = require_MantineThemeProvider.useMantineTheme();
	const Element = component || "div";
	const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
	const transformedSx = require_Mantine_context.useMantineSxTransform()?.()?.(styleProps.sx);
	const responsiveClassName = require_use_random_classname.useRandomClassName();
	const parsedStyleProps = require_parse_style_props.parseStyleProps({
		styleProps,
		theme,
		data: require_style_props_data.STYlE_PROPS_DATA
	});
	const props = {
		ref,
		style: require_get_box_style.getBoxStyle({
			theme,
			style,
			vars: __vars,
			styleProps: parsedStyleProps.inlineStyles
		}),
		className: (0, clsx.default)(className, transformedSx, {
			[responsiveClassName]: parsedStyleProps.hasResponsiveStyles,
			"mantine-light-hidden": lightHidden,
			"mantine-dark-hidden": darkHidden,
			[`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,
			[`mantine-visible-from-${visibleFrom}`]: visibleFrom
		}),
		"data-variant": variant,
		"data-size": require_is_number_like.isNumberLike(size) ? void 0 : size || void 0,
		size: __size,
		...require_get_box_mod.getBoxMod(mod),
		...rest
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
		selector: `.${responsiveClassName}`,
		styles: parsedStyleProps.styles,
		media: parsedStyleProps.media
	}), typeof renderRoot === "function" ? renderRoot(props) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, { ...props })] });
}
_Box.displayName = "@mantine/core/Box";
const Box = require_create_polymorphic_component.polymorphic(_Box);
//#endregion
exports.Box = Box;

//# sourceMappingURL=Box.cjs.map