"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const clsx = require("clsx");
const createPolymorphicComponent = require("../factory/create-polymorphic-component.cjs");
const InlineStyles = require("../InlineStyles/InlineStyles.cjs");
const isNumberLike = require("../utils/is-number-like/is-number-like.cjs");
const Mantine_context = require("../MantineProvider/Mantine.context.cjs");
const MantineThemeProvider = require("../MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const getBoxMod = require("./get-box-mod/get-box-mod.cjs");
const getBoxStyle = require("./get-box-style/get-box-style.cjs");
const extractStyleProps = require("./style-props/extract-style-props/extract-style-props.cjs");
const stylePropsData = require("./style-props/style-props-data.cjs");
const parseStyleProps = require("./style-props/parse-style-props/parse-style-props.cjs");
const useRandomClassname = require("./use-random-classname/use-random-classname.cjs");
const _Box = React.forwardRef(
  ({
    component,
    style,
    __vars,
    className,
    variant,
    mod,
    size,
    hiddenFrom,
    visibleFrom,
    lightHidden,
    darkHidden,
    renderRoot,
    __size,
    ...others
  }, ref) => {
    var _a;
    const theme = MantineThemeProvider.useMantineTheme();
    const Element = component || "div";
    const { styleProps, rest } = extractStyleProps.extractStyleProps(others);
    const useSxTransform = Mantine_context.useMantineSxTransform();
    const transformedSx = (_a = useSxTransform == null ? void 0 : useSxTransform()) == null ? void 0 : _a(styleProps.sx);
    const responsiveClassName = useRandomClassname.useRandomClassName();
    const parsedStyleProps = parseStyleProps.parseStyleProps({
      styleProps,
      theme,
      data: stylePropsData.STYlE_PROPS_DATA
    });
    const props = {
      ref,
      style: getBoxStyle.getBoxStyle({
        theme,
        style,
        vars: __vars,
        styleProps: parsedStyleProps.inlineStyles
      }),
      className: clsx(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": isNumberLike.isNumberLike(size) ? void 0 : size || void 0,
      size: __size,
      ...getBoxMod.getBoxMod(mod),
      ...rest
    };
    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ jsxRuntime.jsx(
        InlineStyles.InlineStyles,
        {
          selector: `.${responsiveClassName}`,
          styles: parsedStyleProps.styles,
          media: parsedStyleProps.media
        }
      ),
      typeof renderRoot === "function" ? renderRoot(props) : /* @__PURE__ */ jsxRuntime.jsx(Element, { ...props })
    ] });
  }
);
_Box.displayName = "@mantine/core/Box";
const Box = createPolymorphicComponent.createPolymorphicComponent(_Box);
exports.Box = Box;
