'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const useContainerSize = require('../hooks/use-container-size.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  const n = Object.create(null);
  if (e) {
    for (const k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return n;
}

const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

const MeasuredContainer = ({
  as: Component,
  name,
  children,
  style = {},
  ...props
}) => {
  const innerRef = React__namespace.useRef(null);
  const rect = useContainerSize.useContainerSize(innerRef.current);
  const customStyle = {
    [`--${name}-width`]: `${rect.width}px`,
    [`--${name}-height`]: `${rect.height}px`
  };
  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, ref: innerRef, style: { ...customStyle, ...style }, children });
};
MeasuredContainer.displayName = "MeasuredContainer";

exports.MeasuredContainer = MeasuredContainer;
