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

package/dist/esm/icon-list-hoz/settings/configs/uiV2.js

@@ -0,0 +1 @@
+let SettingUIV2=[{label:{en:"Item management"},controls:[{label:{en:"Order"},setting:{id:"childItem"},options:{fullWidth:!0}}]},{label:{en:"Item spacing"},controls:[{type:"control",label:{en:"Gap"},setting:{id:"horizontalSpacing"}}]},{label:{en:"Background"},controls:[{type:"control",setting:{id:"background"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Align"},controls:[{type:"control",label:{en:"Horizontal"},setting:{id:"align"}},{type:"control",label:{en:"Vertical"},setting:{id:"verticalAlign"}}]}];export{SettingUIV2};

package/dist/esm/icon-list-v2/common/classes.js

@@ -0,0 +1 @@
+import{composeClasses as e,composeTypographyClassName as t}from"@gem-sdk/core";let getClassWraplistIcon=()=>e("gp-flex"),getClassColListIcon=()=>e("gp-inline-flex gp-flex-col"),getClassWrapItemIcon=({builderProps:t})=>e(`gp-icon-list-wrapper gp-flex gp-child-item-${t?.uid}`),getClassWrapIcon=()=>e("gp-icon-list-icon gp-inline-flex gp-shrink-0 gp-overflow-hidden"),getClassIcon=()=>e("gp-icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--size-desktop)] [&>svg]:!gp-w-[var(--size-desktop)] tablet:[&>svg]:!gp-h-[var(--size-tablet)] tablet:[&>svg]:!gp-w-[var(--size-tablet)] mobile:[&>svg]:!gp-h-[var(--size-mobile)] mobile:[&>svg]:!gp-w-[var(--size-mobile)]"),getClassTextItem=({setting:s})=>{let{textTypo:g}=s??{},l=t(g);return e(`${l} gp-w-full gp-border gp-border-transparent gp-text-left gp-icon-list-text`)};export{getClassColListIcon,getClassIcon,getClassTextItem,getClassWrapIcon,getClassWrapItemIcon,getClassWraplistIcon};

package/dist/esm/icon-list-v2/common/helpers.js

@@ -0,0 +1 @@
+import{composePositionLineHeight as e}from"@gem-sdk/core";import{getDynamicSourceLocales as t,getStaticLocale as o}from"../../helpers.js";let getTextIconNotFound=e=>"react"===e?"Icons not found":o("IconList","icons_not_found"),getTextIconTranslations=({setting:e,builderProps:o,pageContext:n,key:i,type:c})=>{let{childItem:r,translate:s}=e??{};return"react"===c?r?.[i]:t({val:r?.[i],uid:o?.uid,settingId:`childItem_${i}`,pageContext:n,translate:s,isReplaceLocationOrigin:!0})},getvalueMap=({setting:e})=>{let{childConfig:t,iconType:o,iconSvg:n}=e??{};return o&&"matching"!==o?"different"===o?t:void 0:Array(t?.length).fill(n)},composePostionIconList=(t,o,n)=>{let i={};return e({compose:i,lineHeight:t,device:"desktop",position:o,iconWidth:n}),e({compose:i,lineHeight:t,device:"tablet",position:o,iconWidth:n}),e({compose:i,lineHeight:t,device:"mobile",position:o,iconWidth:n}),i};export{composePostionIconList,getTextIconNotFound,getTextIconTranslations,getvalueMap};

package/dist/esm/icon-list-v2/common/styles.js

@@ -0,0 +1 @@
+import{makeStyleResponsive as t,composeBorderResponsive as e,getResponsiveStyleShadowWithoutState as l,composeRadiusResponsive as o,getStyleBackgroundByDevice as r,getResponsiveStylePadding as b,getGradientBgrStyleByDevice as n,makeGlobalSize as i,makeStyle as p,getSingleColorVariable as a}from"@gem-sdk/core";let filterStyles=t=>{let e=["--mb","--mb-mobile","--mb-tablet"];return e.forEach(e=>{delete t?.[e]}),t},getStyleContainerIconlistMain=({styles:e,style:l,type:o,advanced:r})=>{let{align:b}=e??{};return{...l="react"===o?filterStyles(l):l,...t("jc",b),...t("d",{desktop:r?.d?.desktop?"flex":"none",tablet:r?.d?.tablet?"flex":"none",mobile:r?.d?.mobile?"flex":"none"})}},getStyleWraplistIcon=({styles:i})=>{let{panelAlign:p,contentBoxPadding:a,contentBoxWidth:c,background:s,contentBoxBorder:y,contentBoxRounded:g,contentBoxShadow:d}=i??{};return{...e(y),...l(d,"box-shadow",d),...o(g),...r(s),...b(a),...t("w",c),...t("jc",p),...n(s,{desktop:!0,tablet:!0,mobile:!0})}},getStyleColListIcon=({styles:e})=>{let{verticalSpacing:l}=e??{};return{...t("rg",l)}},getStyleWrapItemIcon=({styles:e})=>{let{horizontalSpacing:l}=e??{};return{...t("cg",l)}},getStyleWrapIcon=({styles:t,setting:e})=>{let{iconBorder:l,backgroundColor:o,iconRounded:r}=t??{},{globalSize:b}=e??{},n=i(b);return{...n.padding,...p({bs:l?.border,bw:l?.width,bc:a(l?.color),bg:o,bblr:r?.bblr,bbrr:r?.bbrr,btlr:r?.btlr,btrr:r?.btrr})}},getStyleIcon=({styles:t,setting:e})=>{let{iconColor:l}=t||{},{iconWidth:o}=e??{};return{"--c":a(l),"--w":"100%","--h":"100%","--size-desktop":`${o?.desktop}px`,"--size-tablet":`${o?.tablet||o?.desktop}px`,"--size-mobile":`${o?.mobile||o?.tablet||o?.desktop}px`}},getStyleTypoText=({setting:t})=>({typo:t?.textTypo});export{getStyleColListIcon,getStyleContainerIconlistMain,getStyleIcon,getStyleTypoText,getStyleWrapIcon,getStyleWrapItemIcon,getStyleWraplistIcon};

package/dist/esm/icon-list-v2/components/IconList.js

@@ -1,143 +1,2 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useCurrentDevice, makeGlobalSize, composePostionIconList, getStyleBackgroundByDevice, cls, makeStyleResponsive, makeStyle, getSingleColorVariable } from '@gem-sdk/core';
-import Text from '../../text/components/Text.js';
-import { useRef, useMemo, useState, useEffect } from 'react';
-import { useGetProductId } from '../../hooks/useGetProductId.js';
-
-const IconListV2 = ({ builderProps, builderAttrs, style, setting, styles })=>{
-    const { textTypo, childItem, childConfig, iconWidth, iconType, iconSvg } = setting ?? {};
-    const { horizontalSpacing, verticalSpacing, position, align, iconColor, backgroundColor, iconBorder, iconRounded, background } = styles || {};
-    const currentDevice = useCurrentDevice();
-    const ref = useRef(null);
-    const composeGlobalSize = makeGlobalSize(setting?.globalSize);
-    const filterStyles = useMemo(()=>{
-        const delList = [
-            '--mb',
-            '--mb-mobile',
-            '--mb-tablet'
-        ];
-        delList.forEach((element)=>{
-            delete style?.[element];
-        });
-        return style;
-    }, [
-        style
-    ]);
-    const valueMap = useMemo(()=>{
-        if (!iconType || iconType === 'matching') {
-            return new Array(childConfig?.length).fill(iconSvg);
-        }
-        if (iconType === 'different') {
-            return childConfig;
-        }
-    }, [
-        iconType,
-        childConfig,
-        iconSvg
-    ]);
-    const [lineHeight, setLineHeight] = useState('');
-    useEffect(()=>{
-        if (ref?.current && iconWidth?.desktop) {
-            const refLineHeight = window.getComputedStyle(ref?.current).getPropertyValue('line-height');
-            setLineHeight(refLineHeight);
-        }
-    }, [
-        textTypo,
-        iconWidth,
-        currentDevice
-    ]);
-    const composePosition = composePostionIconList(lineHeight, position, iconWidth);
-    const { refContainer, productID } = useGetProductId();
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsx("div", {
-            ref: refContainer,
-            ...builderAttrs,
-            "data-id": builderProps?.uid,
-            style: {
-                ...filterStyles,
-                ...getStyleBackgroundByDevice(background)
-            },
-            className: cls(builderProps?.uid),
-            children: valueMap && valueMap.length <= 0 ? /*#__PURE__*/ jsx("div", {
-                children: "Icons not found"
-            }) : /*#__PURE__*/ jsx("div", {
-                className: "gp-flex",
-                style: {
-                    ...makeStyleResponsive('jc', align)
-                },
-                children: /*#__PURE__*/ jsx("div", {
-                    className: cls('gp-inline-flex gp-flex-col'),
-                    style: {
-                        ...makeStyleResponsive('rg', verticalSpacing)
-                    },
-                    children: valueMap?.map((node, key)=>{
-                        return /*#__PURE__*/ jsxs("div", {
-                            className: `gp-flex gp-child-item-${builderProps?.uid}`,
-                            "data-index": key,
-                            style: {
-                                ...makeStyleResponsive('cg', horizontalSpacing),
-                                ...composePosition.wrapper
-                            },
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "gp-relative gp-inline-flex gp-shrink-0 gp-overflow-hidden",
-                                    style: {
-                                        ...composeGlobalSize.padding,
-                                        ...makeStyle({
-                                            bs: iconBorder?.border,
-                                            bw: iconBorder?.width,
-                                            bc: getSingleColorVariable(iconBorder?.color),
-                                            bg: backgroundColor,
-                                            bblr: iconRounded?.bblr,
-                                            bbrr: iconRounded?.bbrr,
-                                            btlr: iconRounded?.btlr,
-                                            btrr: iconRounded?.btrr
-                                        }),
-                                        ...composePosition.content
-                                    },
-                                    children: /*#__PURE__*/ jsx("span", {
-                                        style: {
-                                            ...makeStyle({
-                                                c: iconColor
-                                            }),
-                                            '--w': `100%`,
-                                            '--h': `100%`,
-                                            '--size-desktop': `${iconWidth?.desktop}px`,
-                                            '--size-tablet': `${iconWidth?.tablet || iconWidth?.desktop}px`,
-                                            '--size-mobile': `${iconWidth?.mobile || iconWidth?.tablet || iconWidth?.desktop}px`
-                                        },
-                                        className: "gp-icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--size-desktop)] [&>svg]:!gp-w-[var(--size-desktop)] tablet:[&>svg]:!gp-h-[var(--size-tablet)] tablet:[&>svg]:!gp-w-[var(--size-tablet)] mobile:[&>svg]:!gp-h-[var(--size-mobile)] mobile:[&>svg]:!gp-w-[var(--size-mobile)]",
-                                        dangerouslySetInnerHTML: {
-                                            __html: node
-                                        }
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Text, {
-                                    setting: {
-                                        text: childItem?.[key],
-                                        htmlTag: 'div',
-                                        options: {
-                                            useState: true,
-                                            uniqueId: `${builderProps?.uid}-${key}-${productID}`,
-                                            productID,
-                                            customClass: {
-                                                wrapper: 'gp-w-full'
-                                            }
-                                        }
-                                    },
-                                    ref: ref,
-                                    styles: {
-                                        typo: setting?.textTypo
-                                    },
-                                    className: "gp-w-full gp-border gp-border-transparent gp-text-left"
-                                })
-                            ]
-                        }, key);
-                    })
-                })
-            })
-        })
-    });
-};
-
-export { IconListV2 as default };
+'use client';
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useGetProductId as s}from"../../hooks/useGetProductId.js";import o from"../../text/components/Text.js";import{createClass as i,createStyle as r,createAttr as m,If as l}from"@gem-sdk/system";import{getClassWraplistIcon as n,getClassColListIcon as a,getClassWrapItemIcon as c,getClassWrapIcon as d,getClassIcon as p,getClassTextItem as h}from"../common/classes.js";import{getStyleContainerIconlistMain as u,getStyleWraplistIcon as f,getStyleColListIcon as y,getStyleIcon as g,getStyleWrapIcon as j,getStyleWrapItemIcon as v,getStyleTypoText as N}from"../common/styles.js";import{getvalueMap as x,composePostionIconList as I,getTextIconTranslations as L,getTextIconNotFound as k}from"../common/helpers.js";import{useIconLineHeight as w}from"../hooks/useIconLineHeight.js";let IconListV2=S=>{let{builderProps:T,builderAttrs:W,style:$,setting:H,styles:V,pageContext:_,advanced:q}=S,C=i({[T?.uid??""]:!0}),G=i(n()),M=i(a()),P=i(c({builderProps:T})),b=i(d()),z=i(p()),A=i(h({setting:H})),B=r(u({styles:V,style:$,type:"react",advanced:q})),D=r(f({styles:V})),E=r(y({styles:V})),F=r(g({styles:V,setting:H})),J=N({setting:H}),K=m({...W}),O=k("react"),Q=x({setting:H}),{ref:R,lineHeight:U}=w({iconWidth:H?.iconWidth}),X=I(U,V?.position,H?.iconWidth),{refContainer:Y,productID:Z}=s(),ee=r({...j({styles:V,setting:H}),...X.content}),et=r({...v({styles:V}),...X.wrapper});return e("div",{...K,...T,"data-id":T?.uid,style:B,className:C,ref:Y,children:l(!Q||!Q.length,e("div",{children:O}),e("div",{className:G,style:D,children:e("div",{className:M,style:E,children:Q?.map((s,i)=>{let r=L({setting:H,builderProps:T,pageContext:_,key:i,type:"react"});return t("div",{"data-index":i,className:P,style:et,children:[e("div",{className:b,style:ee,children:e("span",{style:F,className:z,dangerouslySetInnerHTML:{__html:s}})}),e(o,{setting:{text:r?.toString(),htmlTag:"div",options:{useState:!0,uniqueId:`${T?.uid}-${i}-${Z}`,productID:Z,customClass:{wrapper:"gp-w-full"}}},styles:J,className:A,ref:R})]},i)})})}))})};export{IconListV2 as default};

package/dist/esm/icon-list-v2/components/IconList.liquid.js

@@ -1,114 +1,35 @@
-import { makeGlobalSize, composeTypographyStyle, composeTypographyClassName, template, dataStringify, getStyleBackgroundByDevice, RenderIf, makeStyleResponsive, makeStyle, getSingleColorVariable, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
-import { getStaticLocale, getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
-
-const IconListV2 = ({ builderProps, style, setting, styles, advanced, pageContext })=>{
-    const { childItem, childConfig, iconType, iconSvg, iconWidth, globalSize, textTypo, translate } = setting ?? {};
-    const { horizontalSpacing, verticalSpacing, position, align, iconColor, backgroundColor, iconBorder, iconRounded, background } = styles || {};
-    const composeGlobalSize = makeGlobalSize(globalSize);
-    const appendTypoStyle = composeTypographyStyle(textTypo);
-    const appendTypoClass = composeTypographyClassName(textTypo);
-    const getvalueMap = ()=>{
-        if (!iconType || iconType === 'matching') {
-            return new Array(childConfig?.length).fill(iconSvg);
-        }
-        if (iconType === 'different') {
-            return childConfig;
-        }
-    };
-    const valueMap = getvalueMap();
-    return template`
+import{template as s,dataStringify as i,RenderIf as t,isLocalEnv as e,baseAssetURL as l}from"@gem-sdk/core";import{getSettingPreloadData as o}from"../../helpers.js";import r from"../../text/components/Text.liquid.js";import{createClass as a,createStyle as d,createAttr as p,If as c}from"@gem-sdk/system";import{getClassWraplistIcon as n,getClassColListIcon as m,getClassWrapItemIcon as $,getClassWrapIcon as g,getClassIcon as u,getClassTextItem as v}from"../common/classes.js";import{getStyleContainerIconlistMain as f,getStyleWraplistIcon as y,getStyleColListIcon as j,getStyleWrapIcon as h,getStyleWrapItemIcon as S,getStyleIcon as k,getStyleTypoText as q}from"../common/styles.js";import{getvalueMap as x,getTextIconTranslations as E,getTextIconNotFound as V}from"../common/helpers.js";let IconListV2=A=>{let{builderProps:I,builderAttrs:N,style:T,setting:_,styles:w,pageContext:G}=A,L=I?.builderData?.advanced,O=a({[I?.uid??""]:!0}),W=a(n()),b=a(m()),C=a($({builderProps:I})),D=a(g()),F=a(u()),M=a(v({setting:_})),P=d(f({styles:w,style:T,type:"liquid",advanced:L})),R=d(y({styles:w})),z=d(j({styles:w})),B=d(h({styles:w,setting:_})),H=d(S({styles:w})),J=d(k({styles:w,setting:_})),K=q({setting:_}),Q=p({...N}),U=V("liquid"),X=x({setting:_});return s`
     {% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}
     <gp-icon-list
-      ${{
-        ...builderProps
-    }}
-      data-id="${builderProps?.uid}"
-      gp-data='${dataStringify({
-        position,
-        iconWidth
-    }).replaceAll("'", '&#039;')}'
-       style="${{
-        ...style,
-        ...getStyleBackgroundByDevice(background)
-    }}">
-     ${RenderIf(!valueMap, template`<div>${getStaticLocale('IconList', 'icons_not_found')}</div>`)}
-      ${RenderIf(!!valueMap, template`<div class="gp-flex" style="${{
-        ...makeStyleResponsive('jc', align)
-    }}">
-        <div
-        class="gp-inline-flex gp-flex-col ${advanced?.cssClass}"
-        style="${{
-        ...makeStyleResponsive('rg', verticalSpacing)
-    }}">
-        ${valueMap?.map((node, key)=>{
-        const textVal = getDynamicSourceLocales({
-            val: childItem?.[key],
-            uid: builderProps?.uid,
-            settingId: `childItem_${key}`,
-            pageContext,
-            translate,
-            isReplaceLocationOrigin: true
-        });
-        return template`
-           <div
-            class="gp-icon-list-wrapper gp-flex gp-child-item-${builderProps?.uid}"
-            style="${{
-            ...makeStyleResponsive('cg', horizontalSpacing),
-            ...makeStyleResponsive('ai', position)
-        }}"
-            data-index="${key}"
-          >
-            <div class="gp-icon-list-icon gp-inline-flex gp-shrink-0 gp-overflow-hidden" style="${{
-            ...composeGlobalSize.padding,
-            ...makeStyle({
-                bs: iconBorder?.border,
-                bw: iconBorder?.width,
-                bc: getSingleColorVariable(iconBorder?.color),
-                bg: backgroundColor,
-                bblr: iconRounded?.bblr,
-                bbrr: iconRounded?.bbrr,
-                btlr: iconRounded?.btlr,
-                btrr: iconRounded?.btrr
-            }),
-            ...makeStyleResponsive('pos', {
-                desktop: 'relative',
-                tablet: 'relative',
-                mobile: 'relative'
-            }),
-            ...makeStyleResponsive('top', {
-                desktop: 'inherit',
-                tablet: 'inherit',
-                mobile: 'inherit'
-            })
-        }}">
-              <span
-                class="gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--size-desktop)] tablet:[&>svg]:!gp-h-[var(--size-tablet)] mobile:[&>svg]:!gp-h-[var(--size-mobile)] [&>svg]:!gp-w-[var(--size-desktop)] tablet:[&>svg]:!gp-w-[var(--size-tablet)] mobile:[&>svg]:!gp-w-[var(--size-mobile)]"
-                style="${{
-            ...makeStyle({
-                c: iconColor
-            }),
-            '--w': `100%`,
-            '--h': `100%`,
-            '--size-desktop': `${iconWidth?.desktop}px`,
-            '--size-tablet': `${iconWidth?.tablet || iconWidth?.desktop}px`,
-            '--size-mobile': `${iconWidth?.mobile || iconWidth?.tablet || iconWidth?.desktop}px`
-        }}"
-              >
-               ${node}
-              </span>
+      ${{...Q}}
+      ${{...I}}
+      data-id="${I?.uid}"
+      style="${P}"
+      className="${O}"
+      gp-data='${i({position:w?.position,iconWidth:_?.iconWidth}).replaceAll("'","&#039;")}'
+    >
+      ${c(!X||!X.length,s`<div>${U}</div>`,s`
+          <div class="${W}" style="${R}">
+            <div class="${b}" style="${z}">
+              ${X?.map((i,t)=>{let e=E({setting:_,builderProps:I,pageContext:G,key:t,type:"liquid"});return s`
+                    <div
+                      key="${t}"
+                      data-index="${t}"
+                      class="${C}"
+                      style="${H}"
+                    >
+                      <div class="${D}" style="${B}">
+                        <span
+                          class="${F}"
+                          style="${J}"
+                        >
+                          ${i}
+                        </span>
+                      </div>
+                      ${r({setting:{text:e?.toString(),htmlTag:"div",options:{customClass:{wrapper:"gp-w-full"}},isForceValue:!0},styles:K,className:M})}
+                    </div>`}).join(" ")}
             </div>
-             <div class="${appendTypoClass} gp-text-left gp-icon-list-text" style="${{
-            ...appendTypoStyle
-        }}">
-                ${textVal}
-            </div>
-            </div>`;
-    }).join(' ')}
-      </div>
-      </div>`)}
+          </div>`)}
     </gp-icon-list>
-    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-icon-list.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-icon-list.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-export { IconListV2 as default };
+    ${t(e,`<script ${o('class="gps-link" delay',"src")}="{{ 'gp-icon-list-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${o('class="gps-link" delay',"src")}="${l}/assets-v2/gp-icon-list-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{IconListV2 as default};

package/dist/esm/icon-list-v2/hooks/useIconLineHeight.js

@@ -0,0 +1 @@
+import{useRef as e,useState as t,useEffect as r}from"react";let useIconLineHeight=({iconWidth:n})=>{let o=e(null),[i,l]=t("");return r(()=>{if(o?.current&&n?.desktop){let e=window.getComputedStyle(o?.current).getPropertyValue("line-height");l(e)}},[n?.desktop]),{ref:o,lineHeight:i}};export{useIconLineHeight};

package/dist/esm/icon-list-v2/index.js

@@ -0,0 +1 @@
+import"react/jsx-runtime";import"react";import"@gem-sdk/core";import"@gem-sdk/system";import"next/link";import t from"./settings/IconList.js";let iconListSettingV2={IconListV2:t};export{iconListSettingV2};

package/dist/esm/icon-list-v2/next.js

@@ -1,12 +1 @@
-import dynamic from 'next/dynamic';
-import Loading from '../common/components/Loading.js';
-import 'react/jsx-runtime';
-
-const IconListV2 = dynamic(()=>import('./components/IconList.js'), {
-    loading: Loading
-});
-var iconListV2 = {
-    IconListV2
-};
-
-export { iconListV2 as default };
+import o from"next/dynamic";import t from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let IconListV2=o(()=>import("./components/IconList.js"),{loading:t});var iconListV2={IconListV2};export{iconListV2 as default};

package/dist/esm/icon-list-v2/settings/IconList.js

@@ -0,0 +1,31 @@
+import{IconListSettings as e}from"./configs/settings.js";import{SettingUIV1 as t}from"./configs/ui-v1.js";import{SettingUIV2 as i}from"./configs/ui-v2.js";let config={tag:"IconListV2",label:"Item List",icon:`
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.75 3.72656C10.3358 3.72656 10 4.06235 10 4.47656C10 4.89078 10.3358 5.22656 10.75 5.22656L21.75 5.22656C22.1642 5.22656 22.5 4.89078 22.5 4.47656C22.5 4.06235 22.1642 3.72656 21.75 3.72656H10.75Z" fill="white"/>
+  <path d="M10.75 8.72656C10.3358 8.72656 10 9.06235 10 9.47656C10 9.89078 10.3358 10.2266 10.75 10.2266L21.75 10.2266C22.1642 10.2266 22.5 9.89078 22.5 9.47657C22.5 9.06235 22.1642 8.72657 21.75 8.72657L10.75 8.72656Z" fill="white"/>
+  <path d="M10 14.4767C10 14.0625 10.3358 13.7267 10.75 13.7267L21.75 13.7267C22.1642 13.7267 22.5 14.0625 22.5 14.4767C22.5 14.8909 22.1642 15.2267 21.75 15.2267L10.75 15.2267C10.3358 15.2267 10 14.8909 10 14.4767Z" fill="white"/>
+  <path d="M10.75 18.7267C10.3358 18.7267 10 19.0625 10 19.4767C10 19.8909 10.3358 20.2267 10.75 20.2267L21.75 20.2267C22.1642 20.2267 22.5 19.8909 22.5 19.4767C22.5 19.0625 22.1642 18.7267 21.75 18.7267L10.75 18.7267Z" fill="white"/>
+  <path d="M8.34611 12.8062C8.71437 12.9958 8.85917 13.448 8.66954 13.8163L5.69292 19.5967C5.2674 20.423 4.12091 20.5124 3.57244 19.762L1.64455 17.1244C1.40013 16.79 1.47307 16.3207 1.80748 16.0763C2.14189 15.8319 2.61113 15.9048 2.85555 16.2392L4.54463 18.5502L7.33596 13.1296C7.5256 12.7613 7.97786 12.6165 8.34611 12.8062Z" fill="white"/>
+  <path d="M8.66954 5.06642C8.85917 4.69816 8.71437 4.24591 8.34611 4.05627C7.97786 3.86664 7.5256 4.01144 7.33596 4.3797L4.54463 9.80029L2.85555 7.48937C2.61113 7.15496 2.14189 7.08201 1.80748 7.32643C1.47307 7.57086 1.40013 8.0401 1.64455 8.37451L3.57244 11.0122C4.12091 11.7625 5.2674 11.6732 5.69292 10.8468L8.66954 5.06642Z" fill="white"/>
+  </svg>
+
+  `,settings:e,ui:t,uiV2:i,editorConfigs:{slots:{children:!1},component:{validate:!0,excludeApplyStyle:!0}},presets:[{id:"icon-list-v2",name:{en:"Item List"},icon:{desktop:`
+        <svg width="110" height="80" viewBox="0 0 110 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6348 17.7261C19.792 17.9121 19.7878 18.2089 19.6255 18.389L13.7118 24.9515C13.5531 25.1275 13.3012 25.1275 13.1425 24.9515L10.8745 22.4345C10.7122 22.2544 10.708 21.9576 10.8652 21.7717C11.0224 21.5857 11.2814 21.5809 11.4437 21.761L13.4272 23.9622L19.0563 17.7155C19.2186 17.5354 19.4776 17.5402 19.6348 17.7261Z" fill="#F9F9F9"/>
+          <rect x="30" y="18.3335" width="72" height="6" rx="3" fill="#757575"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6348 36.3926C19.792 36.5786 19.7878 36.8754 19.6255 37.0555L13.7118 43.618C13.5531 43.794 13.3012 43.794 13.1425 43.618L10.8745 41.101C10.7122 40.9209 10.708 40.6241 10.8652 40.4382C11.0224 40.2522 11.2814 40.2474 11.4437 40.4276L13.4272 42.6287L19.0563 36.382C19.2186 36.2019 19.4776 36.2067 19.6348 36.3926Z" fill="#F9F9F9"/>
+          <rect x="30" y="37" width="72" height="6" rx="3" fill="#757575"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6348 55.0596C19.792 55.2456 19.7878 55.5424 19.6255 55.7225L13.7118 62.285C13.5531 62.461 13.3012 62.461 13.1425 62.285L10.8745 59.768C10.7122 59.5879 10.708 59.2911 10.8652 59.1051C11.0224 58.9192 11.2814 58.9144 11.4437 59.0945L13.4272 61.2957L19.0563 55.049C19.2186 54.8689 19.4776 54.8737 19.6348 55.0596Z" fill="#F9F9F9"/>
+          <rect x="30" y="55.667" width="72" height="6" rx="3" fill="#757575"/>
+        </svg>
+        `},components:[{tag:"IconListV2",settings:{childItem:["Your custom text goes here","Your custom text goes here","Your custom text goes here"],childConfig:[`<svg height="100%" width="100%" data-name="Heart-filled" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2.7213C11.8834 -1.1716 21.5926 5.64054 8 14.4C-5.59262 5.64139 4.11664 -1.1716 8 2.7213Z" fill="currentColor"/>
+</svg>
+`,`<svg height="100%" width="100%" data-name="Thumbs-up-filled"  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.65796 10.1358V13.5631V14.5631H5H11.6667C11.9222 14.5631 12.1667 14.4853 12.4 14.3298C12.6333 14.1742 12.8 13.9853 12.9 13.7631L14.9 9.06312C14.9338 8.98534 14.9589 8.90201 14.9753 8.81312C14.9918 8.72423 15 8.64089 15 8.56312V7.22978C15 6.87423 14.8667 6.56312 14.6 6.29645C14.3333 6.02978 14.0222 5.89645 13.6667 5.89645H11.0648H10.0333L10.2862 4.89645L10.7667 2.99645V2.76312C10.7671 2.64089 10.7422 2.51312 10.692 2.37978C10.6418 2.24645 10.5778 2.14089 10.5 2.06312L10.0202 1.58334C9.82496 1.38807 9.50838 1.38807 9.31311 1.58334L5 5.89645H4.65796V6.89645V10.1358Z" fill="currentColor"/>
+<rect x="1" y="5.91711" width="2.67773" height="8.64587" rx="0.6" fill="currentColor"/>
+</svg>
+`,`<svg height="100%" width="100%" data-name="Star-filled"  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99997 1.26318C8.19029 1.26318 8.36411 1.37123 8.44834 1.5419L10.3585 5.41227L14.6297 6.03292C14.818 6.06028 14.9745 6.1922 15.0333 6.37321C15.0921 6.55422 15.0431 6.75292 14.9068 6.88576L11.8161 9.89843L12.5457 14.1524C12.5779 14.34 12.5008 14.5295 12.3468 14.6414C12.1928 14.7533 11.9887 14.768 11.8203 14.6795L7.99997 12.671L4.17969 14.6795C4.01123 14.768 3.8071 14.7533 3.65312 14.6414C3.49915 14.5295 3.42204 14.34 3.45421 14.1524L4.18382 9.89843L1.09315 6.88576C0.956861 6.75292 0.907813 6.55422 0.966625 6.37321C1.02544 6.1922 1.18191 6.06028 1.37025 6.03292L5.64146 5.41227L7.55161 1.5419C7.63584 1.37123 7.80965 1.26318 7.99997 1.26318ZM7.99997 2.89296L6.42186 6.09056C6.34903 6.23813 6.20825 6.34042 6.04539 6.36408L2.51663 6.87684L5.07007 9.36582C5.18791 9.48069 5.24169 9.64619 5.21387 9.80839L4.61108 13.3229L7.7673 11.6636C7.91297 11.587 8.08698 11.587 8.23264 11.6636L11.3889 13.3229L10.7861 9.80839C10.7583 9.64619 10.812 9.48069 10.9299 9.36582L13.4833 6.87684L9.95455 6.36408C9.7917 6.34042 9.65092 6.23813 9.57808 6.09056L7.99997 2.89296Z" fill="#F9F9F9"/>
+<path d="M6.42186 6.09056L7.99997 2.89296L9.57808 6.09056C9.65092 6.23813 9.7917 6.34042 9.95455 6.36408L13.4833 6.87684L10.9299 9.36582C10.812 9.48069 10.7583 9.64619 10.7861 9.80839L11.3889 13.3229L8.23264 11.6636C8.08698 11.587 7.91297 11.587 7.7673 11.6636L4.61108 13.3229L5.21387 9.80839C5.24169 9.64619 5.18791 9.48069 5.07007 9.36582L2.51663 6.87684L6.04539 6.36408C6.20825 6.34042 6.34903 6.23813 6.42186 6.09056Z" fill="currentColor"/>
+</svg>
+`]},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}}}]}],locales:{editor:{en:{icons_not_found:"Icons not found"}}},rootOverride:{styles:{align:{desktop:"center"},contentBoxWidth:{desktop:"1200px"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};export{config as default};

package/dist/esm/icon-list-v2/settings/configs/items.js

@@ -0,0 +1 @@
+let itemControlTemplate={tag:"IconListItemV2",label:"Icon List Item",settings:{},styles:{},advanced:{},editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},slots:{children:!0},sideBar:{hide:!0},toolbar:{hide:!0},placeholder:{notAppendBeforeAfter:!0}},childrens:[{tag:"Col",settings:{},styles:{minWidth:{desktop:"200px"},justifyContent:{desktop:"normal"},alignItem:{desktop:"normal"},order:{desktop:0},fullWidth:!0},advanced:{},childrens:[{tag:"Text",label:"Text",settings:{text:"Your custom text goes here",htmlTag:"div"},styles:{typography:{type:"paragraph-1"},textAlign:{desktop:"left"},color:{normal:"text-1"},textShadow:{},hasLineClamp:{desktop:!1},transform:"default"},advanced:{},childrens:[]}],editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},slots:{children:!0},sideBar:{hide:!0},toolbar:{hide:!0},placeholder:{notAppendBeforeAfter:!0}}}]};export{itemControlTemplate};

package/dist/esm/icon-list-v2/settings/configs/settings.js

@@ -0,0 +1 @@
+import{itemControlTemplate as e}from"./items.js";let IconListSettings=[{id:"setting",controls:[{id:"childItem",label:"Item management",type:"child-item",default:["Icon 1","Icon 2"],childTemplate:e,isDisabledDuplicateIncrease:!0},{id:"translate",type:"input",default:"childItem"},{id:"textTypo",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"text-1"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0,textShadow:!0}},{id:"iconSvg",type:"icon",label:"Icon Parent",hideInput:!0,info:"Choose from list or paste any SVG icon",default:'<svg data-name="check-circle-filled" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>'},{id:"iconWidth",type:"input:stepper",label:"Icon Width",devices:{desktop:{default:24}},min:0},{id:"childConfig",type:"child-icon",label:"",default:[,,,].fill('<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414807831544168"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>')},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{padding:{type:"custom",top:"0px",bottom:"0px",left:"0px",right:"0px"}}}},hiddenShowMore:!0,hiddenSettings:["shape","width","height","gap"]},{id:"iconType",type:"option:illustration",enableTooltip:!0,label:"Icon type",options:[{label:"Matching icons",value:"matching",svgName:"gp-item-list-matching-icon"},{label:"Different icons",value:"different",svgName:"gp-item-list-different-icon"}],default:"matching"}]},{id:"style",controls:[{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"iconColor",type:"color-picker-v2",label:"Icon color",default:"text-1",compoDefaultValue:"text-1"},{id:"backgroundColor",type:"color-picker-v2",label:"Background color",default:"transparent",compoDefaultValue:"bg-1"},{id:"iconBorder",label:"Border",type:"border-v2",default:{},compoDefaultValue:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}},{id:"iconRounded",type:"corner-v2",label:"Border Radius",default:{radiusType:"none"},compoDefaultValue:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}},{id:"horizontalSpacing",label:"Horizontal Spacing",type:"input:slider",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"8px"}}},{id:"position",type:"option:illustration",enableTooltip:!0,label:"Position",options:[{label:"Align center",value:"center",type:"align-pos",svgName:"gp-align-position-center"},{label:"Align top",value:"baseline",type:"align-pos",svgName:"gp-align-position-top"}],devices:{desktop:{default:"center"},tablet:{default:"center"},mobile:{default:"center"}}},{id:"contentBoxWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}],devices:{desktop:{default:"100%"}}},{id:"contentBoxPadding",label:"Padding",type:"padding-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{top:"16px",bottom:"16px",left:"16px",right:"16px"}}}},{id:"contentBoxBorder",label:"Border",type:"border",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{border:"solid",width:"1px 1px 1px 1px",position:"bottom",color:"line-3",isCustom:!0,borderWidth:"Mixed"}}}},{id:"contentBoxRounded",type:"corner-v2",label:"Border Radius",devices:{desktop:{default:{radiusType:"none"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"contentBoxShadow",label:"Shadow",type:"shadow-v2",devices:{desktop:{default:{}}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}},{id:"panelAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"verticalSpacing",type:"input:slider",label:"Item gap",units:["px"],min:0,max:40,ignoreMax:!0,devices:{desktop:{default:"12px"}}}]}];export{IconListSettings};

package/dist/esm/icon-list-v2/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+let SettingUIV1=[{type:"control",label:{en:"Item management"},setting:{id:"childItem"},layout:"vertical"},{type:"group",options:{label:"large"},label:{en:"Icon"},controls:[{type:"control",label:{en:"Icon type "},setting:{id:"iconType"}},{type:"control",condition:'iconType === "matching"',setting:{id:"iconSvg"},layout:"vertical",options:{styleControl:{"max-width":"100%"}}},{type:"control",condition:'iconType === "different"',layout:"vertical",setting:{id:"childConfig"},options:{label:"large"}},{type:"control",label:{en:"Size"},setting:{id:"iconWidth"}},{type:"control",label:{en:"Icon color"},setting:{id:"iconColor"}},{type:"control",label:{en:"Background color"},setting:{id:"backgroundColor"},isMoreSetting:!0},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"iconBorder"},isMoreSetting:!0},{type:"control",label:{en:"Corner"},setting:{id:"iconRounded"},isMoreSetting:!0},{type:"control",setting:{id:"globalSize"},layout:"vertical",isMoreSetting:!0}]},{type:"control",label:{en:"Text"},setting:{id:"textTypo"},layout:"vertical"},{type:"group",label:{en:"Spacing"},controls:[{type:"control",label:{en:"Item gap"},setting:{id:"verticalSpacing"}},{type:"control",label:{en:"Icon & text"},setting:{id:"horizontalSpacing"}}]},{type:"control",label:{en:"Background"},options:{label:"large",styleLabel:{marginBottom:"4px"}},setting:{id:"background"},layout:"vertical"},{type:"control",label:{en:"Align"},setting:{id:"align"}}];export{SettingUIV1};

package/dist/esm/icon-list-v2/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+let SettingUIV2=[{label:{en:"Item management"},controls:[{label:{en:"Order"},setting:{id:"childItem"}}]},{label:{en:"Icon style"},controls:[{label:{en:"Icon type "},setting:{id:"iconType"}},{conditionDisplay:'iconType === "matching"',label:{en:"Icon"},setting:{id:"iconSvg"}},{conditionDisplay:'iconType === "different"',layout:"vertical",setting:{id:"childConfig"}},{label:{en:"Icon color"},setting:{id:"iconColor"}},{label:{en:"Icon size"},setting:{id:"iconWidth"}}],moreSettings:{type:"collapse",controls:[{label:{en:"Position"},setting:{id:"position"}},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{default:{top:"4px",right:"4px",bottom:"4px",left:"4px"}}}},{label:{en:"Background"},setting:{id:"backgroundColor"}},{label:{en:"Border"},setting:{id:"iconBorder"}},{label:{en:"Corner"},setting:{id:"iconRounded"}}]}},{label:{en:"Text"},controls:[{setting:{id:"textTypo"},layout:"vertical"}]},{label:{en:"Item spacing"},controls:[{label:{en:"Gap"},setting:{id:"verticalSpacing"}}]},{label:{en:"Item style"},controls:[{label:{en:"Icon & text gap"},setting:{id:"horizontalSpacing"}}]},{label:{en:"Background"},controls:[{setting:{id:"background"},layout:"vertical"}]},{label:{en:"Size"},controls:[{label:{en:"Width"},setting:{id:"contentBoxWidth"},layout:"horizontal"},{label:{en:"Padding"},setting:{id:"contentBoxPadding"},layout:"horizontal"},{label:{en:"Arrange"},setting:{id:"panelAlign"}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"contentBoxBorder"}},{label:{en:"Corner"},setting:{id:"contentBoxRounded"}},{label:{en:"Shadow"},setting:{id:"contentBoxShadow"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"},conditionEnable:'!contentBoxWidth?.includes("%") || (parseInt(contentBoxWidth) < 100 && contentBoxWidth?.includes("%"))'}]}];export{SettingUIV2};

package/dist/esm/image/common/attrs.js

@@ -0,0 +1 @@
+import{HREF_TO_SALES_PAGE as t}from"../../constant.js";import{getAspectRatio as e,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,NEXT_IMAGE_CONFIG as i,getSrcSet as g,IMAGE_PLACEHOLDER as l}from"./helpers.js";import{createAttr as o}from"@gem-sdk/system";import{handleClickLink as p}from"../../helpers.js";let getContainerAttrs=(t,e)=>({...t,...e&&{"data-id":e}}),getLinkWrapperAttrs=({urlData:e,imageLink:r,title:a,isLiquid:s=!1})=>{let i=s?{...e,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:e,title:a};return r?.type!=="go-to-sales-page"?r?.link?i:{}:s?{href:t,target:"_self"}:{setting:{href:t,target:"_self"}}},getImageLiquidAttrs=({pageContext:t,enableLazyLoadImage:e=!1})=>({...t&&{pageContext:t},...e&&{enableLazyLoadImage:e}}),getAdaptiveImageAttrs=({styles:t,setting:i,mode:g,isLiquid:l})=>{let{alt:o,srcSet:n,priority:c,qualityPercent:u,qualityType:d}=i??{},y=e({styles:t,setting:i}),A=()=>{p(i?.imageLink,g)},m={loading:"eager",fetchpriority:"high",priority:c},k=n?.desktop?.backupFileKey?r(n?.desktop?.backupFileKey??"",n?.desktop?.src??""):"",h=l?a({src:n?.desktop?.src,backupFileKey:k,backupFilePath:n?.desktop?.backupFilePath,storage:n?.desktop?.storage}):n?.desktop?.src??"",L=c?{}:{"base-src":h??"","quality-type":s(d),"quality-percent":s(u)};return{pictureClass:"gp-contents",...o&&{alt:o},...n&&{srcSet:n},...c&&m,...L,...t?.objectFit&&{layout:t.objectFit},onClick:A,aspectRatio:y}},getNextImageAttrs=({styles:t,setting:r})=>{let{objectFit:a}=t??{},{vw:s,alt:i,title:g,quality:l,priority:o,isNotLazyload:p,qualityType:n,qualityPercent:c}=r??{},u=e({styles:t,setting:r});return{...r?.image,...s&&{vw:s},...i&&{alt:i},...g&&{title:g},...l&&{quality:l},...o&&{priority:o},isNotLazyload:p,setting:{aspectRatio:u,layout:a,qualityType:n,qualityPercent:c}}},getNextImageLiquidAttrs=t=>{let{srcset:e,setting:p,storage:n,baseSrc:c,priority:u,customAttrs:d,width:y=2237,height:A=1678,isNotLazyload:m,backupFileKey:k,backupFilePath:h,srcIsLiquidCode:L,enableLazyLoadImage:F,alt:b,title:f,src:I=i.DEFAULT_SRC,sizes:q=i.DEFAULT_SIZES}=t,E=!m&&F&&!u,T=()=>{let t=k?r(k??"",I):"",s=L?c:a({src:I,backupFileKey:t,backupFilePath:h,storage:n}),i=L?I:g(t??"",n??"THEME",I),o={sizes:"100vw",src:l,...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...i?{"data-srcset":i}:{}},p={sizes:q,src:s??"",isNotLazyload:"true",srcset:e??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...E?o:p}},_=()=>{let{qualityPercent:t,qualityType:e}=p??{},r=!u&&e&&t?{"quality-type":s(e),"quality-percent":s(t)}:{"quality-type":"","quality-percent":""};return{...b&&{alt:b},...f&&{title:f},width:y,height:A,draggable:"false",...r}};return o({...d,..._(),...T()})},getNextImageReactAttrs=t=>{let{width:e=i.DEFAULT_WIDTH_PROPS,height:r=i.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:g,enableLazyLoadImage:p,base64:n=l,alt:c=i.DEFAULT_ALT,src:u=i.DEFAULT_SRC}=t,d=!g&&p&&!s,y=()=>{let t={loading:"lazy",placeholder:"blur",...n&&{blurDataURL:n}},e={loading:"eager",fetchpriority:"high"};return{...d?t:e}},A=()=>({src:u,alt:c,width:e,height:r,quality:a}),m=A(),k=o(y());return{...m,...k}};export{getAdaptiveImageAttrs,getContainerAttrs,getImageLiquidAttrs,getLinkWrapperAttrs,getNextImageAttrs,getNextImageLiquidAttrs,getNextImageReactAttrs};

package/dist/esm/image/common/classes.js

@@ -0,0 +1 @@
+import{getFlexGrowClassByShapeGlobalSize as e,handleConvertClassColor as a}from"@gem-sdk/core";let getContainerClasses=(a,g,s)=>{let l=e(s);return{"gp-group/image gp-relative":!0,[`force-publish-${new Date().getTime()}`]:!0,...l,...a&&{[a]:!0},...g&&{[g]:!0}}},getWrapperClasses=()=>({"gp-h-full gp-w-full gp-flex pointer-events-auto":!0}),getImageClasses=(e,g)=>{let s=a(g?.borderImg);return{...e&&{[e]:!0},...s&&{[s]:!0},"gp-inline-block gp-w-full gp-max-w-full":!0}},getNextImageClasses=({className:e,hasLazyLoad:a,isOptimizePlan:g=!1})=>({...e&&{[e]:!0},gp_lazyload:a,gp_force_load:g}),getAdaptiveImageClasses=({className:e,hasLazyLoad:a=!1,hasForceLoad:g=!1})=>({...e&&{[e]:!0},gp_lazyload:a,gp_force_load:g});export{getAdaptiveImageClasses,getContainerClasses,getImageClasses,getNextImageClasses,getWrapperClasses};

package/dist/esm/image/common/helpers.js

@@ -0,0 +1,12 @@
+import{getCornerCSSFromGlobal as e,getAspectRatioGlobalSize as t,makeStyleResponsive as i,DEVICES as r,getResponsiveValueByScreen as a}from"@gem-sdk/core";let overwriteDefaultRadius=t=>{let i={...t},r=!0;return i&&Object.keys(i??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let t=i[e]??{};"0px"!==t&&(r=!1)}}),r?e(i):{}},getAspectRatio=({styles:e,setting:i})=>{let{srcSet:r,image:a}=i??{},{customAspectRadio:l,shape:g}=e??{},o={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.desktop:a,custom:l}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.tablet:a,custom:l}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:i?.isAdaptive?r?.mobile:a,custom:l})};return g?t(g):o},composeAspectRatio=({device:e,aspect:t,custom:i,auto:r})=>{let a=t?.[e];return"auto"===a?r?.height?`${r.width}/${r.height}`:void 0:"custom"===a?i?.[e]?.height?`${i?.[e]?.width}/${i?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:i("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:i,width:a,height:l})=>{if(e)return{};let g={};return r.forEach(e=>{let r=`--objf${"desktop"!==e?`-${e}`:""}`,o=i?.[r]||i?.["--objf"];if(t?.[e]==="auto"&&"contain"===o){g[e]="auto";return}g[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${a}/${l}`}),g},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"&quot;"),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g-${e}-${t}">
+        <stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
+        <stop stop-color="rgba(51, 51, 51, 0)" offset="50%" />
+        <stop stop-color="rgba(51, 51, 51, 0)" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
+    <rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
+    <animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite"  />
+  </svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:i}=e,r=e=>{let{isLiquid:r}=e??{},a=getImageSrc(t?.desktop,"desktop",!r)||i||FALLBACK_IMAGE,l=(t?.tablet?getImageSrc(t.tablet,"tablet",!r):getImageSrc(t?.desktop,"tablet",!r))||i||FALLBACK_IMAGE,g=(t?.mobile?getImageSrc(t.mobile,"mobile",!r):getImageSrc(t?.tablet,"mobile",!r)||l)||i||FALLBACK_IMAGE;return{srcTablet:l,srcMobile:g,srcDesktop:a}};return{getDeviceSource:r}},getSrcSet=(e,t,i)=>e?getSrcSetLiquid(e,t):getSrcSetLink(i),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let i=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${i}' | file_url }} 768w, {{ '${i}' | file_url }} 1024w, {{ '${i}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${i}' | file_img_url: '768x' }} 768w, {{ '${i}' | file_img_url: '1024x' }} 1024w, {{ '${i}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,i)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let r=e?.backupFilePath??e?.src??"";if(i)r=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(r=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):r=`{{ "${t}" | asset_url }}`}if(t&&r?.includes("cdn.shopify"))switch(t){case"tablet":r=r?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":r=r?.replace(regexReplaceEndDot,"_768x.")}return r},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let i=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return i&&i!=e?i:e};function resizeImage(e,t){let i=e.match(/\.webp/g)?.length,r=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(i)return r;let a=replaceRegexLastMatch({str:r,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}let replaceRegexLastMatch=e=>{let t=e.str,i=e.str.match(e.reg)?.length;if(i){let r,a=1;for(;null!==(r=e.reg.exec(e.str));){if(a===i){let i=e.reg.lastIndex,a=i-r[0].length;e.isAdd&&(e.newString="_"+e.newString+r),t=t.slice(0,a)+e.newString+t.slice(i,t.length)}a++}}return t},getItemWidth=(e,t)=>{let i=getCurrentDevice(),r=t?.[i]||"auto";if(!r||"auto"===r||r.includes("%"))return e;let a=Number(r.replace("px",""));return a>e?e:Number(r.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:i,qualityType:r,qualityPercent:l}=e,g=getCurrentDevice(),o=getItemWidth(t,i),s=a(r,g,"finest"),c=a(l,g,100);switch(s){case"finest":default:return"auto";case"high":return Math.round(1.5*o)||1;case"medium":return Math.round(o)||1;case"custom":return Math.round(o*(Number(c)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return r.forEach(i=>{let r=a(e,i)?.width||"100%";t[i]=r}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return r.forEach(i=>{let r=a(e,i)?.width||"100%";t[i]=r}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:i,qualityPercent:r,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),g=getWidthOfImageListSetting(t),o=getWidthOfListImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:g,width:o,qualityType:i,qualityPercent:r})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:i,qualityPercent:r,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),g=getWidthOfFeatureImageSetting(t),o=getWidthOfFeatureImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:g,width:o,qualityType:i,qualityPercent:r})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:i,width:r,qualityType:a,qualityPercent:l}=e,g=getCurrentDevice(),o=t.querySelector("img");if(o){let e=getImageWidthFollowByQuality({itemWidthParam:r,imageWidthSetting:i,qualityType:a,qualityPercent:l}),t=o.getAttribute("base-src");if(!t)return;let s=getImageSrcByQuality(e,t),c=getImageSrcSet(t,s,g);o.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,i)=>`${"mobile"===i&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===i&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===i&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";export{FALLBACK_IMAGE,IMAGE_PLACEHOLDER,NEXT_IMAGE_CONFIG,composeAspectRatio,createBlurDataURL,getAdaptiveImageData,getAspectRatio,getAspectRatioNextImage,getCurrentDevice,getImageSrc,getImageWidthFollowByQuality,getNewBackupFileKey,getResponsiveObjectFit,getSrcSet,handleSetSrcForFeatureProductImage,handleSetSrcForProductImageList,isCannotResizeImage,overwriteDefaultRadius,regexReplaceEndDot,replaceBackupFileKeyFileContent,resizeImage,safeStringify,shimmer,toBase64};

package/dist/esm/image/common/styles.js

@@ -0,0 +1 @@
+import{makeStyleResponsive as e,getBorderStyle as t,getBorderRadiusStyle as a,getStyleShadow as r,getWidthByShapeGlobalSize as g,makeWidth as i,getHeightByShapeGlobalSize as s,makeStyleResponsiveState as l}from"@gem-sdk/core";import{overwriteDefaultRadius as d,getResponsiveObjectFit as p,getAspectRatioNextImage as o}from"./helpers.js";let getContainerStyles=(t,a)=>({...t,...e("ta",a?.align)}),getWrapperStyles=t=>({"border-radius":"inherit",...e("jc",t?.align)}),getImageStyles=(e,g)=>{let{wrapperBorder:i,borderRadius:s}=e??{};return{...getImageWidth(e),...getImageHeight(e),...t(i),...a(s),...d(g?.builderData?.advanced?.rounded),...r({value:e?.shadow,styleAppliedFor:"box-shadow",isEnableShadow:e?.shadow?.enable&&e?.shadow?.type!=="none"})}},getNextImageStyles=({width:t,height:a,setting:r,isDisableObjectFit:g,isDisableAspectStyle:i})=>{let{layout:s,aspectRatio:l}=r??{},d=p({layout:s,isDisableObjectFit:g}),h=o({isDisableAspectStyle:i,objectFits:d,aspectRatio:l,width:t,height:a});return{...e("aspect",h),...d}},getAdaptiveImageStyles=({layout:t,aspectRatio:a,borderRadius:r})=>{let g=p({layout:t,isDisableObjectFit:!1});return{...l("radius",r),...e("aspect",a),...g}},getAdaptivePictureStyles=()=>({"border-radius":"inherit"}),getImageWidth=t=>{let a=t?.shape?e("w",g(t.shape)):e("w",i(t?.width,t?.fullWidth));return a},getImageHeight=t=>e("h",s(t?.shape));export{getAdaptiveImageStyles,getAdaptivePictureStyles,getContainerStyles,getImageStyles,getNextImageStyles,getWrapperStyles};

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

@@ -1,57 +1,2 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import Head from 'next/head';
-import Img from './Img.js';
-import { useMemo } from 'react';
-import { DEVICES } from '../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 = useMemo(()=>{
-        if (!priority) return [];
-        return Array.from(new Set(DEVICES.map((device)=>srcSet?.[device]?.src).filter(Boolean)));
-    }, [
-        srcSet,
-        priority
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            imageLinkList.length > 0 && /*#__PURE__*/ jsx(Head, {
-                children: imageLinkList.map((link)=>/*#__PURE__*/ jsx("link", {
-                        rel: "preload",
-                        href: link,
-                        as: "image"
-                    }, link))
-            }),
-            /*#__PURE__*/ jsxs("picture", {
-                style: {
-                    borderRadius: 'inherit'
-                },
-                className: pictureClass,
-                children: [
-                    !!srcSet?.mobile?.src && /*#__PURE__*/ jsx("source", {
-                        media: "(max-width: 767px)",
-                        srcSet: srcSet.mobile.src || fallBackImage
-                    }),
-                    !!srcSet?.tablet?.src && /*#__PURE__*/ jsx("source", {
-                        media: "(max-width: 1024px)",
-                        srcSet: srcSet?.tablet?.src || fallBackImage
-                    }),
-                    /*#__PURE__*/ jsx(Img, {
-                        ...rest,
-                        loading: priority ? 'eager' : 'lazy',
-                        image: {
-                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop'] || fallBackImage
-                        }
-                    })
-                ]
-            })
-        ]
-    });
-};
-AdaptiveImage.defaultProps = {
-    layout: {
-        desktop: 'cover'
-    }
-};
-
-export { AdaptiveImage as default };
+'use client';
+import{jsx as e,Fragment as s,jsxs as a}from"react/jsx-runtime";import{FALLBACK_IMAGE as r,getAdaptiveImageData as t,IMAGE_PLACEHOLDER as m}from"../common/helpers.js";import{createAttr as o,createStyleReact as i,createStyle as l,createClass as d}from"@gem-sdk/system";import{getAdaptiveImageClasses as c}from"../common/classes.js";import{getAdaptivePictureStyles as p,getAdaptiveImageStyles as g}from"../common/styles.js";let AdaptiveImage=n=>{let{alt:f,style:h,srcSet:u,layout:y,priority:x,className:j,aspectRatio:v,borderRadius:k,pictureClass:w,enableLazyLoadImage:A,...I}=n,{getDeviceSource:z}=t(n),{srcTablet:L,srcMobile:N}=z(),S=o({loading:x?"eager":"lazy",src:u?.desktop?.src||r}),b=i({...p()}),P=l({...g({layout:y,aspectRatio:v,borderRadius:k}),...h}),q=d({...c({className:j,hasLazyLoad:!x&&A})}),B=()=>a(s,{children:[N&&e("source",{media:"(max-width: 767px)",srcSet:A?m:N}),L&&e("source",{media:"(max-width: 1024px)",srcSet:A?m:L})]}),C=()=>e("img",{...I,...S,alt:f,width:"100%",style:P,className:q,draggable:"false"});return e(s,{children:a("picture",{style:b,className:w,children:[B(),C()]})})};AdaptiveImage.defaultProps={layout:{desktop:"cover"}};export{AdaptiveImage as default};