import*as t from"react";import{mapResponsive as e}from"../../../utils/dist/esm/responsive.js";import{forwardRef as r}from"../../../system/dist/esm/forward-ref.js";import{cx as s}from"../../../utils/dist/esm/dom.js";import{chakra as i}from"../../../system/dist/esm/system.js";import{__DEV__ as o}from"../../../utils/dist/esm/assertion.js";function n(){return(n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(t[s]=r[s])}return t}).apply(this,arguments)}var a=r(((r,o)=>{var{ratio:a=4/3,children:m,className:l}=r,c=function(t,e){if(null==t)return{};var r,s,i={},o=Object.keys(t);for(s=0;s<o.length;s++)r=o[s],e.indexOf(r)>=0||(i[r]=t[r]);return i}(r,["ratio","children","className"]),f=t.Children.only(m),p=s("chakra-aspect-ratio",l);return t.createElement(i.div,n({ref:o,position:"relative",className:p,_before:{height:0,content:'""',display:"block",paddingBottom:e(a,(t=>1/t*100+"%"))},__css:{"& > *:not(style)":{overflow:"hidden",position:"absolute",top:"0",right:"0",bottom:"0",left:"0",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},"& > img, & > video":{objectFit:"cover"}}},c),f)}));o&&(a.displayName="AspectRatio");export{a as AspectRatio};
//# sourceMappingURL=aspect-ratio.js.map
