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

package/dist/cjs/image/components/AdaptiveImage.js

@@ -1,61 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var Head = require('next/head');
-var Img = require('./Img.js');
-var React = require('react');
-var getSrcSet = require('../helpers/getSrcSet.js');
-
-const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
-    const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
-    const imageLinkList = React.useMemo(()=>{
-        if (!priority) return [];
-        return Array.from(new Set(getSrcSet.DEVICES.map((device)=>srcSet?.[device]?.src).filter(Boolean)));
-    }, [
-        srcSet,
-        priority
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            imageLinkList.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(Head, {
-                children: imageLinkList.map((link)=>/*#__PURE__*/ jsxRuntime.jsx("link", {
-                        rel: "preload",
-                        href: link,
-                        as: "image"
-                    }, link))
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("picture", {
-                style: {
-                    borderRadius: 'inherit'
-                },
-                className: pictureClass,
-                children: [
-                    !!srcSet?.mobile?.src && /*#__PURE__*/ jsxRuntime.jsx("source", {
-                        media: "(max-width: 767px)",
-                        srcSet: srcSet.mobile.src || fallBackImage
-                    }),
-                    !!srcSet?.tablet?.src && /*#__PURE__*/ jsxRuntime.jsx("source", {
-                        media: "(max-width: 1024px)",
-                        srcSet: srcSet?.tablet?.src || fallBackImage
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(Img.default, {
-                        ...rest,
-                        loading: priority ? 'eager' : 'lazy',
-                        image: {
-                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop'] || fallBackImage
-                        }
-                    })
-                ]
-            })
-        ]
-    });
-};
-AdaptiveImage.defaultProps = {
-    layout: {
-        desktop: 'cover'
-    }
-};
-
-exports.default = AdaptiveImage;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const AdaptiveImage=e=>{let{alt:s,style:t,srcSet:a,layout:r,priority:m,className:l,aspectRatio:i,borderRadius:c,pictureClass:u,enableLazyLoadImage:d,...n}=e,{getDeviceSource:p}=helpers.getAdaptiveImageData(e),{srcTablet:x,srcMobile:j}=p(),o=system.createAttr({loading:m?"eager":"lazy",src:a?.desktop?.src||helpers.FALLBACK_IMAGE}),y=system.createStyleReact({...styles.getAdaptivePictureStyles()}),g=system.createStyle({...styles.getAdaptiveImageStyles({layout:r,aspectRatio:i,borderRadius:c}),...t}),A=system.createClass({...classes.getAdaptiveImageClasses({className:l,hasLazyLoad:!m&&d})}),h=()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[j&&jsxRuntime.jsx("source",{media:"(max-width: 767px)",srcSet:d?helpers.IMAGE_PLACEHOLDER:j}),x&&jsxRuntime.jsx("source",{media:"(max-width: 1024px)",srcSet:d?helpers.IMAGE_PLACEHOLDER:x})]}),R=()=>jsxRuntime.jsx("img",{...n,...o,alt:s,width:"100%",style:g,className:A,draggable:"false"});return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("picture",{style:y,className:u,children:[h(),R()]})})};AdaptiveImage.defaultProps={layout:{desktop:"cover"}},exports.default=AdaptiveImage;

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

@@ -1,58 +1,18 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var getSrcSet = require('../helpers/getSrcSet.js');
-var helpers = require('./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 = getSrcSet.getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
-    const srcTablet = getSrcSet.getImageSrc(srcSet?.tablet, 'tablet') || getSrcSet.getImageSrc(srcSet?.desktop, 'tablet') || fallBackImage;
-    const srcMobile = getSrcSet.getImageSrc(srcSet?.mobile, 'mobile') || getSrcSet.getImageSrc(srcSet?.tablet, 'mobile') || getSrcSet.getImageSrc(srcSet?.desktop, 'mobile') || fallBackImage;
-    const { enableLazyLoadImage } = pageContext ?? {};
-    return core.template`
-  <picture style="border-radius: inherit" class="${core.cls(pictureClass)}">
-  ${core.RenderIf(priority, core.template`
-      ${srcMobile ? `<source media="(max-width: 767px)" srcset="${srcMobile}" />` : ``}
-      ${srcTablet ? `<source media="(max-width: 1024px)" srcset="${srcTablet}" />` : ``}
+"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
-        ${{
-        ...props
-    }}
-        class="${core.cls(className)}"
-        src="${srcDesktop}"
-        alt="${alt}"
-        fetchpriority="high"
-        style="${{
-        ...core.makeStyleResponsive('aspect', aspectRatio),
-        ...core.makeStyleResponsive('objf', layout),
-        ...style
-    }}"
-      />
-    `, core.template`
-      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? helpers.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'] ?? helpers.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
-      <img
-        ${{
-        ...props
-    }}
-        class="${core.cls(className, {
-        gp_lazyload: enableLazyLoadImage
-    })}"
-        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
-        data-src="${srcDesktop}"
+        ${{...p}}
+        ${{...w}}
+        alt="${t}"
         width="100%"
-        alt="${alt}"
-        style="${{
-        ...core.makeStyleResponsive('aspect', aspectRatio),
-        ...core.makeStyleResponsive('objf', layout),
-        ...style
-    }}"
+        style="${v}"
+        class="${b}"
       />
-    `)}
-  </picture>`;
-};
-
-exports.default = AdaptiveImage;
+    `;return core.template`
+    <picture style="${k}" class="${m}">
+      ${n()}
+      ${A()}
+    </picture>
+  `};exports.default=AdaptiveImage;

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

@@ -1,156 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var Link = require('../../link/components/Link.js');
-var AdaptiveImage = require('./AdaptiveImage.js');
-var NextImage = require('./NextImage.js');
-var helpers = require('./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.default : '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 ? core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape)) : core.makeStyleResponsive('w', core.makeWidth(styles?.width, styles?.fullWidth));
-    const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
-    const imageFlexGrowClass = core.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 ? core.getCornerCSSFromGlobal(builderProps?.builderData?.advanced?.rounded) : {};
-    };
-    const aspectRatio = {
-        desktop: helpers.composeAspectRatio({
-            device: 'desktop',
-            aspect: styles?.aspectRatio,
-            auto: setting?.isAdaptive ? srcSet?.desktop : image,
-            custom: customAspectRadio
-        }),
-        tablet: helpers.composeAspectRatio({
-            device: 'tablet',
-            aspect: styles?.aspectRatio,
-            auto: setting?.isAdaptive ? srcSet?.tablet : image,
-            custom: customAspectRadio
-        }),
-        mobile: helpers.composeAspectRatio({
-            device: 'mobile',
-            aspect: styles?.aspectRatio,
-            auto: setting?.isAdaptive ? srcSet?.mobile : image,
-            custom: customAspectRadio
-        })
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        "data-id": builderProps?.uid,
-        onClick: onClick,
-        role: "presentation",
-        className: core.cls('gp-group/image gp-relative', builderProps?.uid, {
-            ...imageFlexGrowClass
-        }),
-        style: {
-            ...style,
-            ...core.makeStyleResponsive('ta', styles?.align)
-        },
-        children: [
-            /*#__PURE__*/ jsxRuntime.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: {
-                    ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
-                    borderRadius: 'inherit',
-                    ...core.makeStyleResponsive('jc', styles?.align)
-                },
-                children: [
-                    setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
-                        srcSet: setting.srcSet,
-                        pictureClass: "gp-block",
-                        className: core.cls(className, 'gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
-                        alt: setting.alt,
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight,
-                            // ...handleConvertBorderStyle(styles?.borderImg),
-                            // ...handleConvertBorderWidth(styles?.borderImg),
-                            // ...handleConvertBorderColor(styles?.borderImg),
-                            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-                            ...core.getBorderStyle(styles?.wrapperBorder),
-                            ...core.getBorderRadiusStyle(styles?.borderRadius),
-                            ...core.getStyleShadow({
-                                value: styles?.shadow,
-                                styleAppliedFor: 'box-shadow',
-                                isEnableShadow: styles?.hasActiveShadow
-                            })
-                        },
-                        aspectRatio: shape ? core.getAspectRatioGlobalSize(styles?.shape) : aspectRatio,
-                        layout: styles?.objectFit,
-                        priority: setting?.priority
-                    }) : /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                        ...setting?.image,
-                        priority: setting?.priority,
-                        quality: setting?.quality,
-                        isNotLazyload: isNotLazyload,
-                        className: core.cls(className, 'gp-inline gp-h-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
-                        onLoad: onLoad,
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight,
-                            // ...handleConvertBorderStyle(styles?.borderImg),
-                            // ...handleConvertBorderWidth(styles?.borderImg),
-                            // ...handleConvertBorderColor(styles?.borderImg),
-                            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-                            ...core.getBorderStyle(styles?.wrapperBorder),
-                            ...core.getBorderRadiusStyle(styles?.borderRadius),
-                            ...core.getStyleShadow({
-                                value: styles?.shadow,
-                                styleAppliedFor: 'box-shadow',
-                                isEnableShadow: styles?.hasActiveShadow
-                            })
-                        },
-                        alt: setting?.alt,
-                        title: setting?.title,
-                        vw: setting?.vw,
-                        setting: {
-                            aspectRatio: shape ? core.getAspectRatioGlobalSize(styles?.shape) : aspectRatio,
-                            layout: styles?.objectFit
-                        }
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: core.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))]', core.getGlobalColorStateClass('bg', styles?.opacityColor)),
-                        style: {
-                            ...core.getGlobalColorStateStyle('bgc', styles?.opacityColor),
-                            ...core.makeStyleState('op', opacity)
-                        }
-                    })
-                ]
-            }),
-            children
-        ]
-    });
-};
-
-exports.default = Image;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),AdaptiveImage=require("./AdaptiveImage.js"),NextImage=require("./NextImage.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../../helpers.js");const Image=({style:e,styles:s,setting:t,children:a,advanced:r,className:l,builderAttrs:m,builderProps:i,onLoad:c,onClick:y})=>{let{imageLink:n,isAdaptive:g,enableImageLink:u}=t??{},o=core.useEditorMode(),{Wrapper:d,urlData:p}=helpers.getLinkData({defaultWrap:"div",setting:n,enableImageLink:u}),j=system.createStyleReact(styles.getWrapperStyles(s)),x=system.createStyle(styles.getImageStyles(s,i)),I=system.createStyle(styles.getContainerStyles(e,s)),C=system.createClass(classes.getWrapperClasses()),q=system.createClass(classes.getImageClasses(l,s)),A=system.createClass(classes.getContainerClasses(i?.uid,r?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(m,i?.uid)),N=attrs.getLinkWrapperAttrs({urlData:p,imageLink:n,title:t?.title}),f=attrs.getAdaptiveImageAttrs({styles:s,setting:t,mode:o}),h=attrs.getNextImageAttrs({styles:s,setting:t}),R=()=>system.If(g,jsxRuntime.jsx(AdaptiveImage.default,{...f,style:x,className:q}),jsxRuntime.jsx(NextImage.default,{...h,style:x,className:q,onLoad:c}));return jsxRuntime.jsxs("div",{role:"presentation",...v,style:I,className:A,onClick:y,children:[jsxRuntime.jsx(d,{...N,style:j,className:C,children:R()}),a]})};exports.default=Image;

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

@@ -1,120 +1,16 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var AdaptiveImage_liquid = require('./AdaptiveImage.liquid.js');
-var NextImage_liquid = require('./NextImage.liquid.js');
-var helpers = require('../../helpers.js');
-
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, pageContext })=>{
-    const { imageLink, isNotLazyload, isGoToSalesPage } = setting ?? {};
-    const { Wrap: WrapLink, urlData, shouldRenderLink } = helpers.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 ? core.getCornerCSSFromGlobal(builderProps?.builderData?.advanced?.rounded) : {};
-    };
-    const imageWidth = core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape));
-    const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
-    const imageFlexGrowClass = core.getFlexGrowClassByShapeGlobalSize(shape);
-    return core.template`<div
-    ${{
-        ...builderAttrs
-    }}
-     data-id="${builderProps?.uid}"
-    role="presentation"
-    class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass, {
-        ...imageFlexGrowClass
-    })}"
-    style="${{
-        ...style,
-        ...core.makeStyleResponsive('ta', styles?.align)
-    }}"
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers=require("../../helpers.js"),AdaptiveImage_liquid=require("./AdaptiveImage.liquid.js"),NextImage_liquid=require("./NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js");const Image=({style:e,styles:s,setting:t,advanced:a,className:r,pageContext:l,builderAttrs:i,builderProps:m})=>{let{imageLink:y,isAdaptive:g,enableImageLink:u}=t??{},{enableLazyLoadImage:d}=l??{},{Wrapper:c,urlData:p}=helpers.getLinkData({defaultWrap:"div",setting:y,enableImageLink:u,isLiquid:!0}),o=system.createStyle(styles.getWrapperStyles(s)),q=system.createStyle(styles.getImageStyles(s,m)),n=system.createStyle(styles.getContainerStyles(e,s)),I=system.createClass(classes.getWrapperClasses()),A=system.createClass(classes.getImageClasses(r,s)),C=system.createClass(classes.getContainerClasses(m?.uid,a?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(i,m?.uid)),$=attrs.getLinkWrapperAttrs({urlData:p,imageLink:y,title:t?.title,isLiquid:!0}),j=attrs.getAdaptiveImageAttrs({styles:s,setting:t,isLiquid:!0}),f=attrs.getNextImageAttrs({styles:s,setting:t}),x=attrs.getImageLiquidAttrs({pageContext:l,enableLazyLoadImage:d}),L=()=>system.If(g,AdaptiveImage_liquid.default({...x,...j,style:q,className:A}),NextImage_liquid.default({...x,...f,style:q,className:A})),N=()=>L();return core.template`
+    <div
+      role="presentation"
+      ${{...v}}
+      style="${n}"
+      class="${C}"
     >
-      <${WrapLink}
-        class="pointer-events-auto gp-h-full gp-flex"
-        ${shouldRenderLink ? {
-        ...urlData,
-        title: setting?.title
-    } : {}}
-        class="gp-h-full gp-w-full"
-        style="${{
-        ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
-        'border-radius': 'inherit',
-        ...core.makeStyleResponsive('jc', styles?.align)
-    }}"
+      <${c}
+        ${$}
+        style="${o}"
+        class="${I}"
       >
-        ${setting?.isAdaptive ? AdaptiveImage_liquid.default({
-        srcSet: setting.srcSet,
-        className: core.cls(className, 'gp-h-full gp-max-w-full gp-flex', core.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),
-            ...core.getBorderStyle(styles?.wrapperBorder),
-            ...core.getBorderRadiusStyle(styles?.borderRadius),
-            ...core.getStyleShadow({
-                value: styles?.shadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: styles?.hasActiveShadow
-            })
-        },
-        aspectRatio: core.getAspectRatioGlobalSize(styles?.shape),
-        layout: styles?.objectFit,
-        priority: setting?.priority,
-        pageContext
-    }) : NextImage_liquid.default({
-        ...setting?.image,
-        priority: setting?.priority,
-        quality: setting?.quality,
-        className: core.cls(className, '!gp-inline gp-h-full gp-max-w-full gp-flex', core.handleConvertClassColor(styles?.borderImg)),
-        style: {
-            ...imageWidth,
-            ...imageHeight,
-            // ...handleConvertBorderStyle(styles?.borderImg),
-            // ...handleConvertBorderWidth(styles?.borderImg),
-            // ...handleConvertBorderColor(styles?.borderImg),
-            ...overwriteDefaultRadius(builderProps?.builderData?.advanced?.rounded),
-            ...core.getBorderStyle(styles?.wrapperBorder),
-            ...core.getBorderRadiusStyle(styles?.borderRadius),
-            ...core.getStyleShadow({
-                value: styles?.shadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: styles?.hasActiveShadow
-            })
-        },
-        alt: setting?.alt,
-        title: setting?.title,
-        vw: setting?.vw,
-        setting: {
-            aspectRatio: core.getAspectRatioGlobalSize(styles?.shape),
-            layout: styles?.objectFit
-        },
-        isNotLazyload,
-        pageContext
-    })}
-      </${WrapLink}>
-  </div>`;
-};
-
-exports.default = Image;
+        ${N()}
+      </${c}>
+    </div>
+  `};exports.default=Image;

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

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

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

@@ -1,70 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var Image = require('next/image');
-var core = require('@gem-sdk/core');
-var React = require('react');
-var getSrcSet = require('../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 = React.useMemo(()=>{
-        return core.makeStyleResponsive('objf', layout);
-    }, [
-        layout
-    ]);
-    const aspectRatioUsed = React.useMemo(()=>{
-        let result = {};
-        getSrcSet.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__*/ jsxRuntime.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: {
-            ...core.makeStyleResponsive('aspect', aspectRatioUsed),
-            ...objectFits,
-            ...style
-        }
-    });
-};
-
-exports.default = NextImage;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),Image=require("next/image"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const NextImage=e=>{let{style:s,imgRef:t,setting:r,priority:a,className:m,width:l,height:c,isNotLazyload:i,isDisableAspectStyle:u,enableLazyLoadImage:g=!0}=e,x=!i&&g&&!a,o=system.createStyle({...s,...styles.getNextImageStyles({width:l,height:c,setting:r,isDisableAspectStyle:u,isDisableObjectFit:!1})}),y=system.createClass({...classes.getNextImageClasses({className:m,hasLazyLoad:x})}),n=attrs.getNextImageReactAttrs(e);return jsxRuntime.jsx(Image,{ref:t,...n,style:o,className:y})};exports.default=NextImage;