"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),styles=require("../common/styles.js");const AdaptiveImage=e=>{let{alt:t,style:s,layout:a,srcSet:r,priority:i,className:l,aspectRatio:c,pageContext:d,pictureClass:m,borderRadius:h,enableLazyLoadImage:o=!0,...p}=e,{getDeviceSource:u}=helpers.getAdaptiveImageData(e),{srcDesktop:g,srcTablet:y,srcMobile:$}=u({isLiquid:!0}),w=system.createAttr({src:o&&!i?helpers.createBlurDataURL(r?.desktop?.width??0,r?.desktop?.height??0):g,"data-src":g}),k=system.createStyle({...styles.getAdaptivePictureStyles()}),v=system.createStyle({...styles.getAdaptiveImageStyles({layout:a,aspectRatio:c,borderRadius:h}),...s}),b=system.createClass({...classes.getAdaptiveImageClasses({className:l,hasLazyLoad:!i&&o,hasForceLoad:d?.isOptimizePlan})}),n=()=>core.template`
      ${$?`<source media="(max-width: 767px)" data-srcSet="${$}" srcset="${o&&!i?helpers.createBlurDataURL(r?.mobile?.width??r?.tablet?.width??r?.desktop?.width??0,r?.mobile?.height??r?.tablet?.height??r?.desktop?.height??0):$}" />`:""}
      ${y?`<source media="(max-width: 1024px)" data-srcSet="${y}" srcset="${o&&!i?helpers.createBlurDataURL(r?.tablet?.width??r?.desktop?.width??0,r?.tablet?.height??r?.desktop?.height??0):y}" />`:""}
    `,A=()=>core.template`
      <img
        ${{...p}}
        ${{...w}}
        alt="${t}"
        width="100%"
        style="${v}"
        class="${b}"
      />
    `;return core.template`
    <picture style="${k}" class="${m}">
      ${n()}
      ${A()}
    </picture>
  `};exports.default=AdaptiveImage;
