@gem-sdk/components 3.0.0-pre-production.14 → 3.0.1

package/dist/esm/image/components/AdaptiveImage.liquid.js

@@ -1,54 +1,18 @@
-import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
-import { getImageSrc } from '../helpers/getSrcSet.js';
-import { createBlurDataURL } from './helpers.js';
-
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, pageContext, fallBackImg, ...props })=>{
-    const fallBackImage = fallBackImg || 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
-    const srcDesktop = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
-    const srcTablet = getImageSrc(srcSet?.tablet, 'tablet') || getImageSrc(srcSet?.desktop, 'tablet') || fallBackImage;
-    const srcMobile = getImageSrc(srcSet?.mobile, 'mobile') || getImageSrc(srcSet?.tablet, 'mobile') || getImageSrc(srcSet?.desktop, 'mobile') || fallBackImage;
-    const { enableLazyLoadImage } = pageContext ?? {};
-    return template`
-  <picture style="border-radius: inherit" class="${cls(pictureClass)}">
-  ${RenderIf(priority, template`
-      ${srcMobile ? `<source media="(max-width: 767px)" srcset="${srcMobile}" />` : ``}
-      ${srcTablet ? `<source media="(max-width: 1024px)" srcset="${srcTablet}" />` : ``}
+import{template as t}from"@gem-sdk/core";import{createAttr as e,createStyle as s,createClass as i}from"@gem-sdk/system";import{getAdaptiveImageClasses as o}from"../common/classes.js";import{createBlurDataURL as a,getAdaptiveImageData as m}from"../common/helpers.js";import{getAdaptivePictureStyles as d,getAdaptiveImageStyles as r}from"../common/styles.js";let AdaptiveImage=h=>{let{alt:p,style:c,layout:l,srcSet:$,priority:g,className:w,aspectRatio:k,pageContext:u,pictureClass:b,borderRadius:f,enableLazyLoadImage:n=!0,...x}=h,{getDeviceSource:y}=m(h),{srcDesktop:L,srcTablet:j,srcMobile:v}=y({isLiquid:!0}),z=e({src:n&&!g?a($?.desktop?.width??0,$?.desktop?.height??0):L,"data-src":L}),A=s({...d()}),I=s({...r({layout:l,aspectRatio:k,borderRadius:f}),...c}),S=i({...o({className:w,hasLazyLoad:!g&&n,hasForceLoad:u?.isOptimizePlan})}),q=()=>t`
+      ${v?`<source media="(max-width: 767px)" data-srcSet="${v}" srcset="${n&&!g?a($?.mobile?.width??$?.tablet?.width??$?.desktop?.width??0,$?.mobile?.height??$?.tablet?.height??$?.desktop?.height??0):v}" />`:""}
+      ${j?`<source media="(max-width: 1024px)" data-srcSet="${j}" srcset="${n&&!g?a($?.tablet?.width??$?.desktop?.width??0,$?.tablet?.height??$?.desktop?.height??0):j}" />`:""}
+    `,F=()=>t`
       <img
-        ${{
-        ...props
-    }}
-        class="${cls(className)}"
-        src="${srcDesktop}"
-        alt="${alt}"
-        fetchpriority="high"
-        style="${{
-        ...makeStyleResponsive('aspect', aspectRatio),
-        ...makeStyleResponsive('objf', layout),
-        ...style
-    }}"
-      />
-    `, template`
-      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
-      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
-      <img
-        ${{
-        ...props
-    }}
-        class="${cls(className, {
-        gp_lazyload: enableLazyLoadImage
-    })}"
-        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
-        data-src="${srcDesktop}"
+        ${{...x}}
+        ${{...z}}
+        alt="${p}"
         width="100%"
-        alt="${alt}"
-        style="${{
-        ...makeStyleResponsive('aspect', aspectRatio),
-        ...makeStyleResponsive('objf', layout),
-        ...style
-    }}"
+        style="${I}"
+        class="${S}"
       />
-    `)}
-  </picture>`;
-};
-
-export { AdaptiveImage as default };
+    `;return t`
+    <picture style="${A}" class="${b}">
+      ${q()}
+      ${F()}
+    </picture>
+  `};export{AdaptiveImage as default};

package/dist/esm/image/components/Image.js

@@ -1,152 +1,2 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, getFlexGrowClassByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
-import Link from '../../link/components/Link.js';
-import AdaptiveImage from './AdaptiveImage.js';
-import NextImage from './NextImage.js';
-import { composeAspectRatio } from './helpers.js';
-
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
-    const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
-    const { customAspectRadio } = styles ?? {};
-    const { shape } = styles ?? {};
-    const WrapLink = imageLink?.link ? Link : 'div';
-    const opacity = {
-        normal: styles?.opacity?.normal !== undefined ? styles?.opacity?.normal / 100 : undefined,
-        hover: styles?.opacity?.hover !== undefined ? styles?.opacity?.hover / 100 : undefined,
-        focus: styles?.opacity?.focus !== undefined ? styles?.opacity?.focus / 100 : undefined
-    };
-    const imageWidth = shape ? makeStyleResponsive('w', getWidthByShapeGlobalSize(shape)) : makeStyleResponsive('w', makeWidth(styles?.width, styles?.fullWidth));
-    const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
-    const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
-    const overwriteDefaultRadius = (cornerRadius)=>{
-        const radius = {
-            ...cornerRadius
-        };
-        let hasDefault = true;
-        if (radius) {
-            Object.keys(radius ?? {}).forEach((key)=>{
-                if (key === 'bblr' || key === 'bbrr' || key === 'btlr' || key === 'btrr') {
-                    const currPos = radius[key] ?? {};
-                    if (currPos !== '0px') hasDefault = false;
-                }
-            });
-        }
-        return hasDefault ? getCornerCSSFromGlobal(builderProps?.builderData?.advanced?.rounded) : {};
-    };
-    const aspectRatio = {
-        desktop: composeAspectRatio({
-            device: 'desktop',
-            aspect: styles?.aspectRatio,
-            auto: setting?.isAdaptive ? srcSet?.desktop : image,
-            custom: customAspectRadio
-        }),
-        tablet: composeAspectRatio({
-            device: 'tablet',
-            aspect: styles?.aspectRatio,
-            auto: setting?.isAdaptive ? srcSet?.tablet : image,
-            custom: customAspectRadio
-        }),
-        mobile: composeAspectRatio({
-            device: 'mobile',
-            aspect: styles?.aspectRatio,
-            auto: setting?.isAdaptive ? srcSet?.mobile : image,
-            custom: customAspectRadio
-        })
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        ...builderAttrs,
-        "data-id": builderProps?.uid,
-        onClick: onClick,
-        role: "presentation",
-        className: cls('gp-group/image gp-relative', builderProps?.uid, {
-            ...imageFlexGrowClass
-        }),
-        style: {
-            ...style,
-            ...makeStyleResponsive('ta', styles?.align)
-        },
-        children: [
-            /*#__PURE__*/ jsxs(WrapLink, {
-                ...imageLink?.link ? {
-                    setting: {
-                        type: 'custom',
-                        href: imageLink?.link,
-                        target: imageLink?.target
-                    },
-                    title: setting?.title
-                } : {},
-                className: "gp-h-full gp-w-full gp-flex",
-                style: {
-                    ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
-                    borderRadius: 'inherit',
-                    ...makeStyleResponsive('jc', styles?.align)
-                },
-                children: [
-                    setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
-                        srcSet: setting.srcSet,
-                        pictureClass: "gp-block",
-                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
-                        alt: setting.alt,
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight,
-                            // ...handleConvertBorderStyle(styles?.borderImg),
-                            // ...handleConvertBorderWidth(styles?.borderImg),
-                            // ...handleConvertBorderColor(styles?.borderImg),
-                            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-                            ...getBorderStyle(styles?.wrapperBorder),
-                            ...getBorderRadiusStyle(styles?.borderRadius),
-                            ...getStyleShadow({
-                                value: styles?.shadow,
-                                styleAppliedFor: 'box-shadow',
-                                isEnableShadow: styles?.hasActiveShadow
-                            })
-                        },
-                        aspectRatio: shape ? getAspectRatioGlobalSize(styles?.shape) : aspectRatio,
-                        layout: styles?.objectFit,
-                        priority: setting?.priority
-                    }) : /*#__PURE__*/ jsx(NextImage, {
-                        ...setting?.image,
-                        priority: setting?.priority,
-                        quality: setting?.quality,
-                        isNotLazyload: isNotLazyload,
-                        className: cls(className, 'gp-inline gp-h-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
-                        onLoad: onLoad,
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight,
-                            // ...handleConvertBorderStyle(styles?.borderImg),
-                            // ...handleConvertBorderWidth(styles?.borderImg),
-                            // ...handleConvertBorderColor(styles?.borderImg),
-                            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-                            ...getBorderStyle(styles?.wrapperBorder),
-                            ...getBorderRadiusStyle(styles?.borderRadius),
-                            ...getStyleShadow({
-                                value: styles?.shadow,
-                                styleAppliedFor: 'box-shadow',
-                                isEnableShadow: styles?.hasActiveShadow
-                            })
-                        },
-                        alt: setting?.alt,
-                        title: setting?.title,
-                        vw: setting?.vw,
-                        setting: {
-                            aspectRatio: shape ? getAspectRatioGlobalSize(styles?.shape) : aspectRatio,
-                            layout: styles?.objectFit
-                        }
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: cls('gp-absolute gp-inset-0 gp-transition-all gp-duration-300 group-hover/image:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/image:gp-opacity-[var(--hvr-op,_var(--op))]', getGlobalColorStateClass('bg', styles?.opacityColor)),
-                        style: {
-                            ...getGlobalColorStateStyle('bgc', styles?.opacityColor),
-                            ...makeStyleState('op', opacity)
-                        }
-                    })
-                ]
-            }),
-            children
-        ]
-    });
-};
-
-export { Image as default };
+'use client';
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useEditorMode as m}from"@gem-sdk/core";import{createStyleReact as t,createStyle as r,createClass as o,createAttr as a,If as i}from"@gem-sdk/system";import l from"./AdaptiveImage.js";import p from"./NextImage.js";import{getWrapperStyles as c,getImageStyles as d,getContainerStyles as n}from"../common/styles.js";import{getWrapperClasses as f,getImageClasses as g,getContainerClasses as j}from"../common/classes.js";import{getContainerAttrs as u,getAdaptiveImageAttrs as y,getNextImageAttrs as N,getLinkWrapperAttrs as h}from"../common/attrs.js";import{getLinkData as I}from"../../helpers.js";let Image=({style:k,styles:v,setting:x,children:C,advanced:W,className:A,builderAttrs:L,builderProps:b,onLoad:q,onClick:w})=>{let{imageLink:z,isAdaptive:B,enableImageLink:D}=x??{},E=m(),{Wrapper:F,urlData:G}=I({defaultWrap:"div",setting:z,enableImageLink:D}),H=t(c(v)),J=r(d(v,b)),K=r(n(k,v)),M=o(f()),O=o(g(A,v)),P=o(j(b?.uid,W?.cssClass,v?.shape)),Q=a(u(L,b?.uid)),R=h({urlData:G,imageLink:z,title:x?.title}),S=y({styles:v,setting:x,mode:E}),T=N({styles:v,setting:x}),U=()=>i(B,s(l,{...S,style:J,className:O}),s(p,{...T,style:J,className:O,onLoad:q}));return e("div",{role:"presentation",...Q,style:K,className:P,onClick:w,children:[s(F,{...R,style:H,className:M,children:U()}),C]})};export{Image as default};

package/dist/esm/image/components/Image.liquid.js

@@ -1,116 +1,16 @@
-import { makeStyleResponsive, getWidthByShapeGlobalSize, getHeightByShapeGlobalSize, getFlexGrowClassByShapeGlobalSize, template, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getCornerCSSFromGlobal } from '@gem-sdk/core';
-import AdaptiveImage from './AdaptiveImage.liquid.js';
-import NextImage from './NextImage.liquid.js';
-import { getLinkDataConfigs } from '../../helpers.js';
-
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, pageContext })=>{
-    const { imageLink, isNotLazyload, isGoToSalesPage } = setting ?? {};
-    const { Wrap: WrapLink, urlData, shouldRenderLink } = getLinkDataConfigs({
-        defaultWrap: 'div',
-        setting: imageLink
-    }, isGoToSalesPage);
-    const { shape } = styles ?? {};
-    const overwriteDefaultRadius = (cornerRadius)=>{
-        const radius = {
-            ...cornerRadius
-        };
-        let hasDefault = true;
-        if (radius) {
-            Object.keys(radius ?? {}).forEach((key)=>{
-                if (key === 'bblr' || key === 'bbrr' || key === 'btlr' || key === 'btrr') {
-                    const currPos = radius[key] ?? {};
-                    if (currPos !== '0px') hasDefault = false;
-                }
-            });
-        }
-        return hasDefault ? getCornerCSSFromGlobal(builderProps?.builderData?.advanced?.rounded) : {};
-    };
-    const imageWidth = makeStyleResponsive('w', getWidthByShapeGlobalSize(shape));
-    const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
-    const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
-    return template`<div
-    ${{
-        ...builderAttrs
-    }}
-     data-id="${builderProps?.uid}"
-    role="presentation"
-    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, {
-        ...imageFlexGrowClass
-    })}"
-    style="${{
-        ...style,
-        ...makeStyleResponsive('ta', styles?.align)
-    }}"
+import{template as s}from"@gem-sdk/core";import{createStyle as e,createClass as t,createAttr as i,If as m}from"@gem-sdk/system";import{getLinkData as r}from"../../helpers.js";import o from"./AdaptiveImage.liquid.js";import a from"./NextImage.liquid.js";import{getWrapperStyles as l,getImageStyles as p,getContainerStyles as d}from"../common/styles.js";import{getWrapperClasses as c,getImageClasses as f,getContainerClasses as u}from"../common/classes.js";import{getContainerAttrs as $,getAdaptiveImageAttrs as g,getNextImageAttrs as n,getLinkWrapperAttrs as j,getImageLiquidAttrs as y}from"../common/attrs.js";let Image=({style:q,styles:v,setting:I,advanced:L,className:N,pageContext:h,builderAttrs:k,builderProps:x})=>{let{imageLink:W,isAdaptive:A,enableImageLink:C}=I??{},{enableLazyLoadImage:b}=h??{},{Wrapper:w,urlData:z}=r({defaultWrap:"div",setting:W,enableImageLink:C,isLiquid:!0}),B=e(l(v)),D=e(p(v,x)),E=e(d(q,v)),F=t(c()),G=t(f(N,v)),H=t(u(x?.uid,L?.cssClass,v?.shape)),J=i($(k,x?.uid)),K=j({urlData:z,imageLink:W,title:I?.title,isLiquid:!0}),M=g({styles:v,setting:I,isLiquid:!0}),O=n({styles:v,setting:I}),P=y({pageContext:h,enableLazyLoadImage:b}),Q=()=>m(A,o({...P,...M,style:D,className:G}),a({...P,...O,style:D,className:G})),R=()=>Q();return s`
+    <div
+      role="presentation"
+      ${{...J}}
+      style="${E}"
+      class="${H}"
     >
-      <${WrapLink}
-        class="pointer-events-auto gp-h-full gp-flex"
-        ${shouldRenderLink ? {
-        ...urlData,
-        title: setting?.title
-    } : {}}
-        class="gp-h-full gp-w-full"
-        style="${{
-        ...getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
-        'border-radius': 'inherit',
-        ...makeStyleResponsive('jc', styles?.align)
-    }}"
+      <${w}
+        ${K}
+        style="${B}"
+        class="${F}"
       >
-        ${setting?.isAdaptive ? AdaptiveImage({
-        srcSet: setting.srcSet,
-        className: cls(className, 'gp-h-full gp-max-w-full gp-flex', handleConvertClassColor(styles?.borderImg)),
-        pictureClass: 'gp-block',
-        alt: setting.alt,
-        style: {
-            ...imageWidth,
-            ...imageHeight,
-            // ...handleConvertBorderStyle(styles?.borderImg),
-            // ...handleConvertBorderWidth(styles?.borderImg),
-            // ...handleConvertBorderColor(styles?.borderImg),
-            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-            ...getBorderStyle(styles?.wrapperBorder),
-            ...getBorderRadiusStyle(styles?.borderRadius),
-            ...getStyleShadow({
-                value: styles?.shadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: styles?.hasActiveShadow
-            })
-        },
-        aspectRatio: getAspectRatioGlobalSize(styles?.shape),
-        layout: styles?.objectFit,
-        priority: setting?.priority,
-        pageContext
-    }) : NextImage({
-        ...setting?.image,
-        priority: setting?.priority,
-        quality: setting?.quality,
-        className: cls(className, '!gp-inline gp-h-full gp-max-w-full gp-flex', handleConvertClassColor(styles?.borderImg)),
-        style: {
-            ...imageWidth,
-            ...imageHeight,
-            // ...handleConvertBorderStyle(styles?.borderImg),
-            // ...handleConvertBorderWidth(styles?.borderImg),
-            // ...handleConvertBorderColor(styles?.borderImg),
-            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-            ...getBorderStyle(styles?.wrapperBorder),
-            ...getBorderRadiusStyle(styles?.borderRadius),
-            ...getStyleShadow({
-                value: styles?.shadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: styles?.hasActiveShadow
-            })
-        },
-        alt: setting?.alt,
-        title: setting?.title,
-        vw: setting?.vw,
-        setting: {
-            aspectRatio: getAspectRatioGlobalSize(styles?.shape),
-            layout: styles?.objectFit
-        },
-        isNotLazyload,
-        pageContext
-    })}
-      </${WrapLink}>
-  </div>`;
-};
-
-export { Image as default };
+        ${R()}
+      </${w}>
+    </div>
+  `};export{Image as default};

package/dist/esm/image/components/Modal3d.liquid.js

@@ -1,33 +1,7 @@
-import { getResponsiveValueByScreen, template, makeStyleResponsive } from '@gem-sdk/core';
-
-const Model3d = ({ src, alt, loading, poster, dataJsFocusVisible, arStatus, style, cameraControls, dataShopifyFeature = '1.12', reveal, loaded, modelIsVisible, aspectRatio })=>{
-    const customAspectRatio = {
-        desktop: getResponsiveValueByScreen(aspectRatio, 'desktop') || '1/1',
-        tablet: getResponsiveValueByScreen(aspectRatio, 'tablet') || '1/1',
-        mobile: getResponsiveValueByScreen(aspectRatio, 'mobile') || '1/1'
-    };
-    return template`
+import{createAttr as e,createStyle as t,createClass as l}from"@gem-sdk/system";import{template as o,getResponsiveValueByScreen as s,makeStyleResponsive as r}from"@gem-sdk/core";let Model3d=({src:a,alt:d,style:m,poster:i,reveal:p,loaded:f,loading:u,arStatus:c,aspectRatio:b,modelIsVisible:g,cameraControls:k,dataJsFocusVisible:v,dataShopifyFeature:w="1.12"})=>{let n=()=>({"gp-w-full gp-h-full model-viewer gp-z-[90]":!0}),y=()=>{let e={desktop:s(b,"desktop")||"1/1",tablet:s(b,"tablet")||"1/1",mobile:s(b,"mobile")||"1/1"};return{...r("aspect",e)}},$=()=>({src:a,alt:d,"data-shopify-feature":w,...m,...i?{poster:i}:{},...p?{reveal:p}:{},...f?{loaded:f}:{},...u?{loading:u}:{},...g?{modelIsVisible:g}:{},...c?{"ar-status":c}:{},...k?{"camera-controls":k}:{},...v?{"data-js-focus-visible":v}:{}}),h=e($()),M=t(y()),j=l(n());return o`
     <model-viewer
-      class="gp-w-full gp-h-full model-viewer gp-z-[90]"
-      ${{
-        ...style
-    }}
-      ${reveal ? `reveal="${reveal}"` : ''}
-      ${loading ? `loading="${loading}"` : ''}
-      ${loaded ? `loaded="${loaded}"` : ''}
-      ${modelIsVisible ? `modelIsVisible="${modelIsVisible}"` : ''}
-      src="${src}"
-      alt="${alt}"
-      camera-controls="${cameraControls}"
-      poster="${poster}"
-      data-js-focus-visible="${dataJsFocusVisible}"
-      data-shopify-feature="${dataShopifyFeature}"
-      ar-status="${arStatus}"
-      style="${{
-        ...makeStyleResponsive('aspect', customAspectRatio)
-    }}">
+      ${{...h}}
+      class="${j}"
+      style="${M}">
     </model-viewer>
-  `;
-};
-
-export { Model3d as default };
+  `};export{Model3d as default};

package/dist/esm/image/components/NextImage.js

@@ -1,66 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import Image from 'next/image';
-import { makeStyleResponsive } from '@gem-sdk/core';
-import { useMemo } from 'react';
-import { DEVICES } from '../helpers/getSrcSet.js';
-
-const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', alt = 'Alt image', width, height, style, priority, vw, imgRef, base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', backupFileKey, isNotLazyload, ...props })=>{
-    const { layout, aspectRatio } = setting ?? {};
-    const newWidth = width ? width : 800;
-    const newHeight = height ? height : 533;
-    const objectFits = useMemo(()=>{
-        return makeStyleResponsive('objf', layout);
-    }, [
-        layout
-    ]);
-    const aspectRatioUsed = useMemo(()=>{
-        let result = {};
-        DEVICES.forEach((device)=>{
-            const objectFitKey = `--objf${device !== 'desktop' ? `-${device}` : ''}`;
-            const objectFitByDevice = objectFits?.[objectFitKey] || objectFits?.['--objf'];
-            if (aspectRatio?.[device] === 'auto' && objectFitByDevice === 'contain') {
-                result = {
-                    ...result,
-                    [device]: 'auto'
-                };
-                return;
-            }
-            const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device] : `${width}/${height}`;
-            result = {
-                ...result,
-                [device]: value
-            };
-        });
-        return result;
-    }, [
-        aspectRatio,
-        objectFits,
-        height,
-        width
-    ]);
-    return /*#__PURE__*/ jsx(Image, {
-        ...props,
-        ref: imgRef,
-        src,
-        width: newWidth,
-        height: newHeight,
-        alt,
-        ...!priority && !isNotLazyload && base64 && {
-            placeholder: 'blur',
-            blurDataURL: base64
-        },
-        ...priority || isNotLazyload ? {
-            fetchpriority: 'high',
-            loading: 'eager'
-        } : {
-            loading: 'lazy'
-        },
-        style: {
-            ...makeStyleResponsive('aspect', aspectRatioUsed),
-            ...objectFits,
-            ...style
-        }
-    });
-};
-
-export { NextImage as default };
+'use client';
+import{jsx as m}from"react/jsx-runtime";import t from"next/image";import{createStyle as e,createClass as o}from"@gem-sdk/system";import{getNextImageClasses as r}from"../common/classes.js";import{getNextImageStyles as s}from"../common/styles.js";import{getNextImageReactAttrs as a}from"../common/attrs.js";let NextImage=i=>{let{style:f,imgRef:l,setting:c,priority:p,className:n,width:j,height:x,isNotLazyload:g,isDisableAspectStyle:u,enableLazyLoadImage:y=!0}=i,N=!g&&y&&!p,b=e({...f,...s({width:j,height:x,setting:c,isDisableAspectStyle:u,isDisableObjectFit:!1})}),d=o({...r({className:n,hasLazyLoad:N})}),I=a(i);return m(t,{ref:l,...I,style:b,className:d})};export{NextImage as default};

package/dist/esm/image/components/NextImage.liquid.js

@@ -1,123 +1,7 @@
-import { template, RenderIf, cls, makeStyleResponsive } from '@gem-sdk/core';
-import { getNewBackupFileKey, getImageSrc, getSrcSet } from '../helpers/getSrcSet.js';
-import { DEVICES } from '../../product/components/ProductVariants/index.js';
-import { createBlurDataURL } from './helpers.js';
-
-const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, pageContext, srcset, sizes, ...props })=>{
-    const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
-    const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
-    const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
-        src,
-        backupFileKey: newBackupFilekey,
-        backupFilePath,
-        storage
-    });
-    const srcSetImg = srcIsLiquidCode ? src : getSrcSet(newBackupFilekey ?? '', storage ?? 'THEME', src);
-    const { enableLazyLoadImage } = pageContext ?? {};
-    const getObjectFit = ()=>{
-        if (isDisableObjectFit) return {};
-        return makeStyleResponsive('objf', layout);
-    };
-    const aspectRatioGlobalSize = ()=>{
-        if (isDisableAspectStyle) return {};
-        let result = {};
-        const objectFits = getObjectFit();
-        DEVICES.forEach((device)=>{
-            const objectFitKey = `--objf${device !== 'desktop' ? `-${device}` : ''}`;
-            const objectFitByDevice = objectFits?.[objectFitKey] || objectFits?.['--objf'];
-            if (aspectRatio?.[device] === 'auto' && objectFitByDevice === 'contain') {
-                result = {
-                    ...result,
-                    [device]: 'auto'
-                };
-                return;
-            }
-            const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device] : `${width}/${height}`;
-            result = {
-                ...result,
-                [device]: value
-            };
-        });
-        return result;
-    };
-    const getAttrPropImage = ()=>{
-        const ignoreAttrInProps = [
-            'src',
-            'srcset',
-            'width',
-            'height',
-            'alt',
-            'base-src'
-        ];
-        const propsImage = {
-            ...props
-        };
-        ignoreAttrInProps.forEach((attr)=>{
-            if (propsImage[attr]) {
-                delete propsImage[attr];
-            }
-        });
-        return propsImage;
-    };
-    const attrProps = getAttrPropImage();
-    const imagePlaceholder = createBlurDataURL(width ?? 0, height ?? 0);
-    return template`
-  ${RenderIf(priority, template`<img
-      ${{
-        ...attrProps
-    }}
-      ${customAttrs}
-      draggable="false"
-      isNotLazyload="true"
-      class="${cls(className)}"
-      ${{
-        src: srcImage,
-        width,
-        height,
-        alt
-    }}
-      fetchpriority="high"
-      quality-type=${JSON.stringify(qualityType) || '{}'}
-      quality-percent=${JSON.stringify(qualityPercent) || '{}'}
-      data-sizes="auto"
-      srcset="${srcset}"
-      sizes="${sizes || '100vw'}"
-      style="${{
-        ...makeStyleResponsive('aspect', aspectRatioGlobalSize()),
-        ...getObjectFit(),
-        ...style
-    }}"
-    />`, template`<img
-      ${{
-        ...attrProps
-    }}
-      ${customAttrs}
-      draggable="false"
-      class="${cls(className, {
-        gp_lazyload: !customLazyload && enableLazyLoadImage
-    })}"
-      ${{
-        'data-src': srcImage,
-        'data-srcset': srcSetImg,
-        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
-        width,
-        height,
-        alt,
-        ...baseSrc ? {
-            'base-src': baseSrc
-        } : {}
-    }}
-      quality-type=${JSON.stringify(qualityType) || '{}'}
-      quality-percent=${JSON.stringify(qualityPercent) || '{}'}
-      data-sizes="auto"
-      sizes="100vw"
-      style="${{
-        ...makeStyleResponsive('aspect', aspectRatioGlobalSize()),
-        ...getObjectFit(),
-        ...style
-    }}"
-    />`)}
-  `;
-};
-
-export { NextImage as default };
+import{template as m}from"@gem-sdk/core";import{createStyle as s,createClass as t}from"@gem-sdk/system";import{getNextImageClasses as e}from"../common/classes.js";import{getNextImageStyles as o}from"../common/styles.js";import{getNextImageLiquidAttrs as r}from"../common/attrs.js";let NextImage=i=>{let{style:a,setting:l,priority:p,className:c,pageContext:f,width:n,height:d,customLazyload:g,isDisableObjectFit:$,isDisableAspectStyle:j,enableLazyLoadImage:x=!0}=i,y=!g&&x&&!p,k=s({...a,...o({width:n,height:d,setting:l,isDisableObjectFit:$,isDisableAspectStyle:j})}),u=t({...e({className:c,hasLazyLoad:y,isOptimizePlan:f?.isOptimizePlan})}),z=r(i);return m`
+    <img
+      ${z}
+      id="${i?.id}"
+      style="${k}"
+      class="${u}"
+    />`};export{NextImage as default};

package/dist/esm/image/components/Video.liquid.js

@@ -1,25 +1,8 @@
-import { template, makeStyleResponsive } from '@gem-sdk/core';
-
-const Video = ({ src, alt, allowfullscreen, allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', frameborder = '0', autoplay, controls, className = 'feature-video gp-w-full gp-h-full gp-relative', aspectRatio, style })=>{
-    return template`
+import{template as e,makeStyleResponsive as r}from"@gem-sdk/core";import{createAttr as t,createStyle as o,createClass as a}from"@gem-sdk/system";let DEFAULT_CLASS="feature-video gp-w-full gp-h-full gp-relative",DEFAULT_ALLOW="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",Video=({src:i,alt:l,style:p,autoplay:m,controls:s,aspectRatio:L,allowfullscreen:c,frameborder:d="0",allow:f=DEFAULT_ALLOW,className:u=DEFAULT_CLASS})=>{let A=()=>({[u]:!0}),g=()=>({...r("aspect",L)}),y=()=>({src:i,alt:l,allow:f,frameborder:d,...p,...m?{autoplay:m}:{},...s?{controls:s}:{},...c?{allowfullscreen:c}:{}}),D=t(y()),E=o(g()),F=a(A());return e`
     <iframe
-      ${{
-        ...style
-    }}
-      class="${className}"
-      src="${src}"
-      controls="${controls}"
-      allowfullscreen="${allowfullscreen}"
-      allow="${allow}"
-      frameborder="${frameborder}"
-      autoplay="${autoplay}"
-      alt="${alt}"
-      style="${{
-        ...makeStyleResponsive('aspect', aspectRatio)
-    }}"
+      ${{...D}}
+      style="${E}"
+      class="${F}"
     >
     </iframe>
-  `;
-};
-
-export { Video as default };
+  `};export{Video as default};

package/dist/esm/image/index.js

@@ -0,0 +1 @@
+import"react/jsx-runtime";import"@gem-sdk/core";import"@gem-sdk/system";import"./components/AdaptiveImage.js";import"next/image";import"react";import"next/link";import t from"./settings/Image.js";let imageSetting={Image:t};export{imageSetting};

package/dist/esm/image/next.js

@@ -1,16 +1 @@
-import dynamic from 'next/dynamic';
-import Loading from '../common/components/Loading.js';
-import 'react/jsx-runtime';
-
-const Image = dynamic(()=>import('./components/Image.js'), {
-    loading: Loading
-});
-const BackgroundImage = dynamic(()=>import('./components/BackgroundImage.js'), {
-    loading: Loading
-});
-var image = {
-    Image,
-    BackgroundImage
-};
-
-export { image as default };
+import m from"next/dynamic";import o from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let Image=m(()=>import("./components/Image.js"),{loading:o});var image={Image};export{image as default};