welcome-ui/dist/AspectRatio.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as i } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as s } from "./System.mjs";
import r, { css as n } from "@xstyled/styled-components";
const p = r.divBox(
  ({ ratio: t }) => n`
    position: relative;

    & > * {
      overflow: hidden;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    & > img,
    & > video {
      object-fit: cover;
    }

    &:before {
      height: 0;
      content: '';
      display: block;
      padding-bottom: ${1 / t * 100}%;
    }
  `
), c = s(
  ({ ratio: t = 4 / 3, ...o }, e) => /* @__PURE__ */ i.jsx(p, { ratio: t, ref: e, ...o })
);
c.displayName = "AspectRatio";
export {
  c as AspectRatio
};