'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var index = require('../index-DMbj7vXd.js');
require('react-dom');
require('../index-D-iDn9RI.js');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

// src/aspect-ratio.tsx
var NAME = "AspectRatio";
var AspectRatio$2 = React__namespace.forwardRef(
  (props, forwardedRef) => {
    const { ratio = 1 / 1, style, ...aspectRatioProps } = props;
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        style: {
          // ensures inner element is contained
          position: "relative",
          // ensures padding bottom trick maths works
          width: "100%",
          paddingBottom: `${100 / ratio}%`
        },
        "data-radix-aspect-ratio-wrapper": "",
        children: /* @__PURE__ */ jsxRuntime.jsx(
          index.Primitive.div,
          {
            ...aspectRatioProps,
            ref: forwardedRef,
            style: {
              ...style,
              // ensures children expand in ratio
              position: "absolute",
              top: 0,
              right: 0,
              bottom: 0,
              left: 0
            }
          }
        )
      }
    );
  }
);
AspectRatio$2.displayName = NAME;
var Root = AspectRatio$2;

function AspectRatio$1({ ...props }) {
    return jsxRuntime.jsx(Root, { "data-slot": "aspect-ratio", ...props });
}

const AspectRatio = (props) => (jsxRuntime.jsx(AspectRatio$1, { ...props }));

exports.AspectRatio = AspectRatio;
//# sourceMappingURL=AspectRatio.js.map
