import { jsx as o } from "react/jsx-runtime";
import { styled as e } from "../Theme/index.js";
function p({ aspect: t, children: i, ...n }) {
  return /* @__PURE__ */ o(a, { aspect: t, ...n, children: /* @__PURE__ */ o("span", { className: "aspect-ratio-container__inner", children: i }) });
}
const a = e("span")`
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: ${({ aspect: t }) => 1 / t * 100}%;

  .aspect-ratio-container__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
`;
export {
  p as default
};
