@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/dist/esm/graphql/queries/published-theme-pages.generated.js

@@ -1,14 +1,25 @@
-import{PublishedThemePageSelect as e}from"../fragments/published-theme-page.generated.js";import{PublishedPageSectionSelect as s}from"../fragments/published-page-section.generated.js";import{PublishedCustomSectionSelect as t}from"../fragments/published-custom-section.generated.js";import{DataSeoSelect as m}from"../fragments/data-seo.generated.js";import{PublishedThemeStyleSelect as r}from"../fragments/published-theme-style.generated.js";import{AnalyticSelect as g}from"../fragments/analytic.generated.js";import{CustomCodeSelect as a}from"../fragments/custom-code.generated.js";import{CustomFontSelect as o}from"../fragments/custom-font.generated.js";let PublishedThemePagesDocument=`
+import { PublishedThemePageSelect } from '../fragments/published-theme-page.generated.js';
+import { PublishedPageSectionSelect } from '../fragments/published-page-section.generated.js';
+import { PublishedCustomSectionSelect } from '../fragments/published-custom-section.generated.js';
+import { DataSeoSelect } from '../fragments/data-seo.generated.js';
+import { PublishedThemeStyleSelect } from '../fragments/published-theme-style.generated.js';
+import { AnalyticSelect } from '../fragments/analytic.generated.js';
+import { CustomCodeSelect } from '../fragments/custom-code.generated.js';
+import { CustomFontSelect } from '../fragments/custom-font.generated.js';
+
+const PublishedThemePagesDocument = `
     query publishedThemePages($slug: String, $slugType: PublishedThemePageType!) {
   publishedThemePages(slug: $slug, slugType: $slugType) {
     ...PublishedThemePageSelect
   }
 }
-    ${e}
-${s}
-${t}
-${m}
-${r}
-${g}
-${a}
-${o}`;export{PublishedThemePagesDocument};
+    ${PublishedThemePageSelect}
+${PublishedPageSectionSelect}
+${PublishedCustomSectionSelect}
+${DataSeoSelect}
+${PublishedThemeStyleSelect}
+${AnalyticSelect}
+${CustomCodeSelect}
+${CustomFontSelect}`;
+
+export { PublishedThemePagesDocument };

package/dist/esm/graphql/queries/store-property.generated.js

@@ -1,4 +1,4 @@
-let StorePropertyDocument=`
+/* eslint-disable */ const StorePropertyDocument = `
     query storeProperty {
   storeProperty {
     favicon
@@ -6,4 +6,6 @@ let StorePropertyDocument=`
     primaryDomain
   }
 }
-    `;export{StorePropertyDocument};
+    `;
+
+export { StorePropertyDocument };

package/dist/esm/graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js

@@ -1,4 +1,4 @@
-let LibrarySaleFunnelDocument=`
+/* eslint-disable */ const LibrarySaleFunnelDocument = `
     query LibrarySaleFunnel($librarySaleFunnelId: ID!) {
   librarySaleFunnel(id: $librarySaleFunnelId) {
     id
@@ -18,4 +18,6 @@ let LibrarySaleFunnelDocument=`
     }
   }
 }
-    `;export{LibrarySaleFunnelDocument};
+    `;
+
+export { LibrarySaleFunnelDocument };

package/dist/esm/graphql-app-api/queries/LibraryTemplate.generated.js

@@ -1,4 +1,4 @@
-let LibraryTemplateDocument=`
+/* eslint-disable */ const LibraryTemplateDocument = `
     query LibraryTemplate($libraryTemplateId: ID!) {
   libraryTemplate(id: $libraryTemplateId) {
     id
@@ -10,4 +10,6 @@ let LibraryTemplateDocument=`
     }
   }
 }
-    `;export{LibraryTemplateDocument};
+    `;
+
+export { LibraryTemplateDocument };

package/dist/esm/graphql-app-api/queries/SaleFunnelDiscounts.generated.js

@@ -1,4 +1,4 @@
-let SaleFunnelDiscountsDocument=`
+/* eslint-disable */ const SaleFunnelDiscountsDocument = `
     query SaleFunnelDiscounts($where: SaleFunnelDiscountWhereInput, $orderBy: SaleFunnelDiscountOrder, $last: Int, $before: Cursor, $first: Int, $after: Cursor) {
   saleFunnelDiscounts(
     where: $where
@@ -31,4 +31,6 @@ let SaleFunnelDiscountsDocument=`
     totalCount
   }
 }
-    `;export{SaleFunnelDiscountsDocument};
+    `;
+
+export { SaleFunnelDiscountsDocument };

package/dist/esm/graphql-app-api/queries/ShopLibraryPage.generated.js

@@ -0,0 +1,15 @@
+/* eslint-disable */ const ShopLibraryPageDocument = `
+    query ShopLibraryPage($shopLibraryPageId: ID!) {
+  shopLibraryPage(id: $shopLibraryPageId) {
+    id
+    name
+    sectionPosition
+    shopLibrarySections {
+      id
+      component
+    }
+  }
+}
+    `;
+
+export { ShopLibraryPageDocument };

package/dist/esm/graphql-app-api/queries/ThemePage.generated.js

@@ -1,4 +1,4 @@
-let ThemePageDocument=`
+/* eslint-disable */ const ThemePageDocument = `
     query ThemePage($themePageId: ID!, $first: Int, $where: ThemeStyleWhereInput) {
   themePage(id: $themePageId) {
     id
@@ -26,4 +26,6 @@ let ThemePageDocument=`
     }
   }
 }
-    `;export{ThemePageDocument};
+    `;
+
+export { ThemePageDocument };

package/dist/esm/helpers/GlobalEvent.js

@@ -1 +1,15 @@
-let globalEvent={subscribe(e,t){document.addEventListener(e,e=>t(e.detail))},dispatch(e,t){document.dispatchEvent(new CustomEvent(e,{detail:t}))},remove(e,t){document.removeEventListener(e,t)}};export{globalEvent as default};
+const globalEvent = {
+    subscribe (eventName, callback) {
+        document.addEventListener(eventName, (e)=>callback(e.detail));
+    },
+    dispatch (eventName, detail) {
+        document.dispatchEvent(new CustomEvent(eventName, {
+            detail
+        }));
+    },
+    remove (eventName, callback) {
+        document.removeEventListener(eventName, callback);
+    }
+};
+
+export { globalEvent as default };

package/dist/esm/helpers/align.js

@@ -0,0 +1,17 @@
+const convertTextAlignToJustify = (align)=>{
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const result = {};
+    devices.forEach((device)=>{
+        const deviceType = device === 'desktop' ? '' : `${device}:`;
+        result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
+        result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
+        result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
+    });
+    return result;
+};
+
+export { convertTextAlignToJustify };

package/dist/esm/helpers/animations.js

@@ -1 +1,220 @@
-let EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let r=r=>{let t=JSON.parse(JSON.stringify(r)),e=["delay","speed","scale","intensity"];return e.forEach(r=>{if(!t?.[r])return;if("scale"===r){if(!t?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[e,a]=t?.scale?.in??[1,1],[n,o]=t?.scale?.out??[1,1];t[r]={in:[Number(e)/100,Number(a)/100],out:[Number(n)/100,Number(o)/100]};return}let e=Number(t?.[r]);if("delay"===r?t[r]=1e3*e:t[r]=e,!isFinite(e))throw TypeError(`${r} must be a number`)}),t},t=(t,e)=>{let n=r(e),{direction:o,distance:i}=n,l=["left","right"].includes(o??"")?"X":"Y",f=["left","down"].includes(o??"")?"-":"",m=[{opacity:0,transform:`translate${l}(${f}${i??50}%)`},{opacity:1,transform:`translate${l}(0)`}];return s(t,m,{...a(n,500)})},e=(t,e)=>{let n=r(e),o=[{opacity:0},{opacity:1}];return s(t,o,{...a(n,500)})},a=(r,t)=>{let e=r=>r?1.5/r*1e3:t,{loop:a,delay:n,speed:o,easing:i}=r??{},s=e(o),l=n??0,f=a?s+l:s;return{iterations:a?1/0:1,duration:f,delay:l,easing:EASING[i??"linear"]}},n=(t,e)=>{let n=r(e),{scale:o,zoomDirection:i,isFade:l}=n,[f,m]=o.in,[u,c]=o.out,p=[{transform:`scale(${f}, ${f})`,opacity:l?0:1},{transform:`scale(${m??1.2}, ${m??1.2})`,opacity:1}],d=[{transform:`scale(${u}, ${u})`,opacity:l?0:1},{transform:`scale(${c??.8}, ${c??.8})`,opacity:1}],y="in"===i?p:d;return s(t,y,{...a(n,700)})},o=(r,t,e)=>{if(!t)return r;let a=t/e,n=[...r].pop();return[...r,{...n,offset:1-a}]},i=(t,e)=>{let n=r(e),{intensity:o}=n??{},i=[{transform:"translate3d(0, 0, 0)"}],l=[{transform:"translate3d(4px, 0, 0)"},{transform:"translate3d(-4px, 0, 0)"},{transform:"translate3d(4px, 0, 0)"}],f=[];Array.from(Array(o??1).keys()).forEach(()=>{f=[...f,...l]});let m=[{transform:"translate3d(-1px, 0, 0)"},{transform:"translate3d(2px, 0, 0)"},{transform:"translate3d(-4px, 0, 0)"},...f,{transform:"translate3d(-4px, 0, 0)"},{transform:"translate3d(2px, 0, 0)"},{transform:"translate3d(-1px, 0, 0)"}];return s(t,o?m:i,{...a(n??{},820)})},s=(r,t,e)=>{let a=new KeyframeEffect(r,e.iterations&&1===e.iterations?t:o(t,e?.delay??0,e?.duration??0),{...e});return new Animation(a,document.timeline)};return{zoom:n,shake:i,fade:e,slide:t}};export{animations};
+const EASING = {
+    ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
+    'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    linear: 'linear'
+};
+const animations = ()=>{
+    const normalizeOptions = (options)=>{
+        const cloneOptions = JSON.parse(JSON.stringify(options));
+        const numberMember = [
+            'delay',
+            'speed',
+            'scale',
+            'intensity'
+        ];
+        numberMember.forEach((keyName)=>{
+            if (!cloneOptions?.[keyName]) return;
+            if (keyName === 'scale') {
+                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
+                const [i1, i2] = cloneOptions?.scale?.in ?? [
+                    1,
+                    1
+                ];
+                const [o1, o2] = cloneOptions?.scale?.out ?? [
+                    1,
+                    1
+                ];
+                cloneOptions[keyName] = {
+                    in: [
+                        Number(i1) / 100,
+                        Number(i2) / 100
+                    ],
+                    out: [
+                        Number(o1) / 100,
+                        Number(o2) / 100
+                    ]
+                };
+                return;
+            }
+            const num = Number(cloneOptions?.[keyName]);
+            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
+            else cloneOptions[keyName] = num;
+            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
+        });
+        return cloneOptions;
+    };
+    const slide = (target, options, reverse)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { direction, distance } = normalizedOptions;
+        const coordinate = [
+            'left',
+            'right'
+        ].includes(direction ?? '') ? 'X' : 'Y';
+        let isNeg = [
+            'left',
+            'down'
+        ].includes(direction ?? '') ? '-' : '';
+        if (reverse) {
+            isNeg = [
+                'left',
+                'down'
+            ].includes(direction ?? '') ? '' : '-';
+        }
+        const preset = [
+            {
+                opacity: 0,
+                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
+            },
+            {
+                opacity: 1,
+                transform: `translate${coordinate}(0)`
+            }
+        ];
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const fade = (target, options, reverse)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const preset = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const generateOptions = (options, defaultDuration)=>{
+        const convertSpeedToDuration = (speed)=>{
+            if (!speed) return defaultDuration;
+            return 1.5 / speed * 1000;
+        };
+        const { loop, delay, speed, easing } = options ?? {};
+        const duration = convertSpeedToDuration(speed);
+        const actualDelay = delay ?? 0;
+        const actualDuration = loop ? duration + actualDelay : duration;
+        return {
+            iterations: loop ? Infinity : 1,
+            duration: actualDuration,
+            delay: actualDelay,
+            easing: EASING[easing ?? 'linear']
+        };
+    };
+    const zoom = (target, options, reverse)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { scale, zoomDirection, isFade } = normalizedOptions;
+        const [i1, i2] = scale.in;
+        const [o1, o2] = scale.out;
+        const zoomInPreset = [
+            {
+                transform: `scale(${i1}, ${i1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
+                opacity: 1
+            }
+        ];
+        const zoomOutPreset = [
+            {
+                transform: `scale(${o1}, ${o1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
+                opacity: 1
+            }
+        ];
+        let zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        if (reverse) {
+            zoomPreset = zoomDirection === 'in' ? zoomOutPreset : zoomInPreset;
+        }
+        return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
+            ...generateOptions(normalizedOptions, 700)
+        });
+    };
+    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
+        if (!delay) return keyframes;
+        const offset = delay / duration;
+        const keyframe = [
+            ...keyframes
+        ].pop();
+        return [
+            ...keyframes,
+            {
+                ...keyframe,
+                offset: 1 - offset
+            }
+        ];
+    };
+    const shake = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { intensity } = normalizedOptions ?? {};
+        const zeroIntensity = [
+            {
+                transform: 'translate3d(0, 0, 0)'
+            }
+        ];
+        const unitIntensity = [
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            }
+        ];
+        let keyframes = [];
+        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
+            keyframes = [
+                ...keyframes,
+                ...unitIntensity
+            ];
+        });
+        const shakePreset = [
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            ...keyframes,
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            }
+        ];
+        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
+            ...generateOptions(normalizedOptions ?? {}, 820)
+        });
+    };
+    const generateAnimationInstance = (target, effectPreset, options)=>{
+        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
+            ...options
+        });
+        return new Animation(effect, document.timeline);
+    };
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+export { animations };

package/dist/esm/helpers/background.js

@@ -1 +1,226 @@
-import{devicesMapping as e}from"./constant.js";import{isColor as t,getSingleColorVariable as g}from"./colors.js";import{makeStyleResponsive as o}from"./make-style.js";let getStyleBackgroundByDevice=(e,t)=>e?{...getStyleBgColor(e),...t?.ignoreBackgroundImage?{}:{...getStyleBgImage(e,t),...getStyleBgPosition(e),...getStyleBgSize(e),...getStyleBgRepeat(e)},...t?.ignoreBgAttachment?{}:getStyleBgAttachment(e)}:{},getStyleBgColor=e=>{let t={desktop:getBgColorByDevice(e,"desktop"),tablet:getBgColorByDevice(e,"tablet"),mobile:getBgColorByDevice(e,"mobile")};return o("bgc",t)},getBgColorByDevice=(e,t)=>getColor(e?.[t]?.color),getColor=e=>e?t(e?.toString())?e:`var(--g-c-${e})`:void 0,getStyleBgImage=(e,t)=>{let g={desktop:getBgImageByDevice(e,"desktop",t),tablet:getBgImageByDevice(e,"tablet",t),mobile:getBgImageByDevice(e,"mobile",t)};return o("bgi",g)},getBgImageByDevice=(e,t,g)=>{let o=e?.[t]?.type==="video";if(o)return;let i=e?.[t]?.image?.backupFileKey,l=e?.[t]?.image?.storage,a=e?.[t]?.image?.src,r=i,B=a?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp))$/)?.[1];if(B&&B!=i&&(r=B),"FILE_CONTENT"===l&&g?.liquid&&r&&(a=`{{ "${r.replace(".jpeg",".jpg")}" | file_url }}`),("THEME"===l||!l)&&g?.liquid&&r&&(a=`{{ "${r}" | asset_url }}`),"string"==typeof a)return`url(${a})`},getStyleBgPosition=e=>{let t={desktop:getBgPositionByDevice(e,"desktop"),tablet:getBgPositionByDevice(e,"tablet"),mobile:getBgPositionByDevice(e,"mobile")};return o("bgp",t)},getBgPositionByDevice=(e,t)=>{let g=e?.[t]?.position;return g&&`${g.x}% ${g.y}%`},getStyleBgSize=e=>{let t={desktop:getBgSizeByDevice(e,"desktop"),tablet:getBgSizeByDevice(e,"tablet"),mobile:getBgSizeByDevice(e,"mobile")};return o("bgs",t)},getBgSizeByDevice=(e,t)=>e?.[t]?.size,getStyleBgRepeat=e=>{let t={desktop:getBgRepeatByDevice(e,"desktop"),tablet:getBgRepeatByDevice(e,"tablet"),mobile:getBgRepeatByDevice(e,"mobile")};return o("bgr",t)},getBgRepeatByDevice=(e,t)=>e?.[t]?.repeat,getStyleBgAttachment=e=>{let t={desktop:getBgAttachmentByDevice(e,"desktop"),tablet:getBgAttachmentByDevice(e,"tablet"),mobile:getBgAttachmentByDevice(e,"mobile")};return o("bga",t)},getBgAttachmentByDevice=(e,t)=>e?.[t]?.attachment,composeBackgroundCss=e=>`${e?`background-color: ${g(e)} !important;`:void 0}`,makeFixedBgAttachment=e=>{if(!e)return;e.tablet=e.tablet?e.tablet:e.desktop,e.mobile=e.mobile?e.mobile:e.tablet;let t={desktop:getBgAttachmentByDevice(e,"desktop"),tablet:getBgAttachmentByDevice(e,"tablet"),mobile:getBgAttachmentByDevice(e,"mobile")},g={desktop:{...makeFixedBgAttachmentByDevice("desktop",t.desktop)},tablet:{...makeFixedBgAttachmentByDevice("tablet",t.tablet)},mobile:{...makeFixedBgAttachmentByDevice("mobile",t.mobile)}};return{wrapper:{...g.desktop?.wrapper,...g.tablet?.wrapper,...g.mobile?.wrapper},content:{...g.desktop?.content,...g.tablet?.content,...g.mobile?.content}}},makeFixedBgAttachmentByDevice=(t,g)=>{let o=e[t]??"";return"fixed"===g?{wrapper:{[`--pos${o}`]:"absolute",[`--top${o}`]:"0",[`--left${o}`]:"0",[`--w${o}`]:"100%",[`--h${o}`]:"100%"},content:{[`--pos${o}`]:"fixed",[`--w${o}`]:"100vw",[`--h${o}`]:"100vh",[`--bga${o}`]:"unset"}}:{wrapper:{[`--pos${o}`]:"absolute"},content:{[`--w${o}`]:"100%",[`--h${o}`]:"100%",[`--pos${o}`]:"absolute",[`--bga${o}`]:g}}},GRADIENT_BGR_KEY="linear-gradient",getGradientBgrStyleForButton=e=>{if(!e)return;let t={};return Object.keys(e).forEach(g=>{e[g]?.startsWith(GRADIENT_BGR_KEY)&&("normal"===g?Object.assign(t,{"--bg":e[g]}):Object.assign(t,{"--hvr-bg":e[g]}))}),t},getGradientBgrStyleByDevice=e=>{if(!e)return;let t={};return["desktop","tablet","mobile"].forEach(g=>{e[g]?.color?.includes(GRADIENT_BGR_KEY)&&Object.assign(t,{[`--bgc${"desktop"!==g?"-"+g:""}`]:"transparent",[`--bgi${"desktop"!==g?"-"+g:""}`]:`${getBgImageByDevice(e,g)||"url()"}, ${e[g]?.color}`})}),t};export{GRADIENT_BGR_KEY,composeBackgroundCss,getBgImageByDevice,getGradientBgrStyleByDevice,getGradientBgrStyleForButton,getStyleBackgroundByDevice,makeFixedBgAttachment};
+import { devicesMapping } from './constant.js';
+import { isColor, getSingleColorVariable } from './colors.js';
+import { makeStyleResponsive } from './make-style.js';
+
+const getStyleBackgroundByDevice = (background, options)=>{
+    if (!background) {
+        return {};
+    }
+    return {
+        ...!options?.ignoreBackgroundColor ? {
+            ...getStyleBgColor(background)
+        } : {},
+        ...!options?.ignoreBackgroundImage ? {
+            ...getStyleBgImage(background, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
+            ...getStyleBgPosition(background),
+            ...getStyleBgSize(background),
+            ...getStyleBgRepeat(background)
+        } : {},
+        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
+    };
+};
+const getStyleBgColor = (background)=>{
+    const bgColor = {
+        desktop: getBgColorByDevice(background, 'desktop'),
+        tablet: getBgColorByDevice(background, 'tablet'),
+        mobile: getBgColorByDevice(background, 'mobile')
+    };
+    return makeStyleResponsive('bgc', bgColor);
+};
+const getBgColorByDevice = (background, device)=>{
+    return getColor(background?.[device]?.color);
+};
+const getColor = (color)=>{
+    if (!color) {
+        return;
+    }
+    if (isColor(color?.toString())) {
+        return color;
+    }
+    return `var(--g-c-${color})`;
+};
+const getStyleBgImage = (background, options)=>{
+    const bgImage = {
+        desktop: getBgImageByDevice(background, 'desktop', options),
+        tablet: getBgImageByDevice(background, 'tablet', options),
+        mobile: getBgImageByDevice(background, 'mobile', options)
+    };
+    return makeStyleResponsive('bgi', bgImage);
+};
+const getBgImageByDevice = (background, device, options)=>{
+    const isBgVideo = background?.[device]?.type === 'video';
+    if (isBgVideo) return;
+    const backupFileKey = background?.[device]?.image?.backupFileKey;
+    const storage = background?.[device]?.image?.storage;
+    let imageByDevice = background?.[device]?.image?.src;
+    let newBackupFilekey = backupFileKey;
+    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
+    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
+    if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
+        newBackupFilekey = shopifyHandleName;
+    }
+    if (storage === 'FILE_CONTENT') {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
+        }
+    }
+    if (storage === 'THEME' || !storage) {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
+        }
+    }
+    if (typeof imageByDevice === 'string') {
+        return `url(${imageByDevice})`;
+    }
+};
+const getStyleBgPosition = (background)=>{
+    const bgPosition = {
+        desktop: getBgPositionByDevice(background, 'desktop'),
+        tablet: getBgPositionByDevice(background, 'tablet'),
+        mobile: getBgPositionByDevice(background, 'mobile')
+    };
+    return makeStyleResponsive('bgp', bgPosition);
+};
+const getBgPositionByDevice = (background, device)=>{
+    const positionByDevice = background?.[device]?.position;
+    return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
+};
+const getStyleBgSize = (background)=>{
+    const bgSize = {
+        desktop: getBgSizeByDevice(background, 'desktop'),
+        tablet: getBgSizeByDevice(background, 'tablet'),
+        mobile: getBgSizeByDevice(background, 'mobile')
+    };
+    return makeStyleResponsive('bgs', bgSize);
+};
+const getBgSizeByDevice = (background, device)=>{
+    return background?.[device]?.size;
+};
+const getStyleBgRepeat = (background)=>{
+    const bgRepeat = {
+        desktop: getBgRepeatByDevice(background, 'desktop'),
+        tablet: getBgRepeatByDevice(background, 'tablet'),
+        mobile: getBgRepeatByDevice(background, 'mobile')
+    };
+    return makeStyleResponsive('bgr', bgRepeat);
+};
+const getBgRepeatByDevice = (background, device)=>{
+    return background?.[device]?.repeat;
+};
+const getStyleBgAttachment = (background)=>{
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    return makeStyleResponsive('bga', bgAttachment);
+};
+const getBgAttachmentByDevice = (background, device)=>{
+    return background?.[device]?.attachment;
+};
+const composeBackgroundCss = (backgroundColor)=>{
+    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)};` : undefined}`;
+};
+const makeFixedBgAttachment = (background)=>{
+    if (!background) return;
+    background.tablet = background.tablet ? background.tablet : background.desktop;
+    background.mobile = background.mobile ? background.mobile : background.tablet;
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    const composeFixed = {
+        desktop: {
+            ...makeFixedBgAttachmentByDevice('desktop', bgAttachment.desktop)
+        },
+        tablet: {
+            ...makeFixedBgAttachmentByDevice('tablet', bgAttachment.tablet)
+        },
+        mobile: {
+            ...makeFixedBgAttachmentByDevice('mobile', bgAttachment.mobile)
+        }
+    };
+    return {
+        wrapper: {
+            ...composeFixed.desktop?.wrapper,
+            ...composeFixed.tablet?.wrapper,
+            ...composeFixed.mobile?.wrapper
+        },
+        content: {
+            ...composeFixed.desktop?.content,
+            ...composeFixed.tablet?.content,
+            ...composeFixed.mobile?.content
+        }
+    };
+};
+const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
+    const suffix = devicesMapping[device] ?? '';
+    if (bgAttachment === 'fixed') {
+        return {
+            wrapper: {
+                [`--pos${suffix}`]: 'absolute',
+                [`--top${suffix}`]: '0',
+                [`--left${suffix}`]: '0',
+                [`--w${suffix}`]: '100%',
+                [`--h${suffix}`]: '100%'
+            },
+            content: {
+                [`--pos${suffix}`]: 'fixed',
+                [`--w${suffix}`]: '100vw',
+                [`--h${suffix}`]: '100vh',
+                [`--bga${suffix}`]: 'unset'
+            }
+        };
+    }
+    return {
+        wrapper: {
+            [`--pos${suffix}`]: 'absolute'
+        },
+        content: {
+            [`--w${suffix}`]: '100%',
+            [`--h${suffix}`]: '100%',
+            [`--pos${suffix}`]: 'absolute',
+            [`--bga${suffix}`]: bgAttachment
+        }
+    };
+};
+const GRADIENT_BGR_KEY = 'linear-gradient';
+const getGradientBgrStyleForButton = (backgroundStyle)=>{
+    if (!backgroundStyle) return;
+    const bgrStyle = {};
+    Object.keys(backgroundStyle).forEach((state)=>{
+        if (!backgroundStyle[state]?.startsWith(GRADIENT_BGR_KEY)) return;
+        if (state === 'normal') {
+            Object.assign(bgrStyle, {
+                '--bg': backgroundStyle[state]
+            });
+        } else {
+            Object.assign(bgrStyle, {
+                '--hvr-bg': backgroundStyle[state]
+            });
+        }
+    });
+    return bgrStyle;
+};
+const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
+    if (!backgroundStyle) return;
+    const bgrStyle = {};
+    [
+        'desktop',
+        'tablet',
+        'mobile'
+    ].forEach((device)=>{
+        if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
+            Object.assign(bgrStyle, {
+                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: backgroundStyle[device]?.color,
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+            });
+        }
+    });
+    return bgrStyle;
+};
+
+export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment };