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

package/dist/cjs/third-party-slot/components/ThirdPartySlot.js

@@ -1,47 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-
-const ThirdPartySlot = ({ setting, builderProps })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        "data-uid": builderProps?.uid ?? '',
-        "data-index": setting?.index,
-        className: "third-party-slot gp-bg-[#f4f4f4] gp-border gp-border-[#D6D6D6] gp-flex gp-h-[56px] gp-w-full gp-items-center gp-justify-center gp-border-box",
-        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            className: "gp-font-[Inter] gp-h-[28px] gp-overflow-hidden gp-whitespace-nowrap gp-flex gp-justify-center gp-items-center gp-gap-2",
-            style: {
-                flexFlow: 'row wrap'
-            },
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                    height: "24",
-                    viewBox: "0 0 25 24",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx("path", {
-                            d: "M19.6475 5.16194C19.6416 5.1148 19.6197 5.0713 19.5857 5.03911C19.5516 5.00692 19.5076 4.9881 19.4614 4.98597C19.3835 4.98597 17.8469 4.95397 17.8469 4.95397C17.8469 4.95397 16.5588 3.67419 16.4342 3.5311C16.3104 3.40312 16.0619 3.43512 15.9684 3.46711L15.3166 3.67508C15.2361 3.40491 15.1323 3.14259 15.0067 2.89121C14.5566 1.99536 13.8727 1.51544 13.0659 1.51544C13.0044 1.51544 12.9577 1.51544 12.8954 1.53144C12.8642 1.49945 12.8486 1.46745 12.8175 1.45145C12.4608 1.06752 12.0107 0.875552 11.467 0.891549C10.4282 0.923543 9.38772 1.70741 8.53419 3.08318C7.94467 4.05901 7.49453 5.27392 7.3543 6.21776C6.15969 6.6017 5.32087 6.87365 5.29057 6.87365C4.68461 7.06562 4.66903 7.08161 4.59199 7.67351C4.56082 8.12144 2.97754 20.7415 2.97754 20.7415L16.2636 23.1091L22.022 21.6374C22.0064 21.6374 19.6631 5.27392 19.6475 5.16194ZM14.6492 3.89904C14.3062 4.00572 13.9648 4.11772 13.6251 4.23498C13.6251 3.69108 13.5472 2.92321 13.3143 2.28331C14.1064 2.41129 14.4942 3.33914 14.6492 3.89904ZM12.9265 4.44206C12.2279 4.66602 11.4679 4.90598 10.707 5.14594C10.9243 4.29808 11.3277 3.46623 11.8245 2.90632C12.033 2.66965 12.2863 2.47913 12.569 2.34641C12.8806 2.9712 12.9421 3.85105 12.9265 4.44206ZM11.4982 1.61143C11.7466 1.61143 11.9483 1.65942 12.1197 1.7874C11.8127 1.95192 11.5387 2.17444 11.3121 2.44329C10.6455 3.17916 10.1331 4.31408 9.93135 5.4179C9.29423 5.62586 8.67356 5.81783 8.11521 5.9938C8.48744 4.25009 9.89933 1.65942 11.4982 1.61143Z",
-                            fill: "#95BF47"
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("path", {
-                            d: "M19.4652 4.94733C19.3856 4.94733 17.816 4.91527 17.816 4.91527C17.816 4.91527 16.4986 3.63266 16.3721 3.48837C16.3266 3.43975 16.264 3.41098 16.1978 3.4082V23.1096L22.0833 21.6346L19.6714 5.12369C19.6404 5.01147 19.5448 4.94733 19.4652 4.94733Z",
-                            fill: "#5E8E3E"
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("path", {
-                            d: "M13.5575 8.51577L12.8029 10.8908C12.8029 10.8908 11.9602 10.5663 10.9599 10.6253C9.48595 10.6991 9.48595 11.4809 9.48595 11.6727C9.57404 12.7348 12.89 12.9709 13.0828 15.4631C13.2238 17.4251 11.8545 18.7675 9.85396 18.8708C7.46778 18.9733 6.15137 17.7939 6.15137 17.7939L6.66032 15.9794C6.66032 15.9794 7.99435 16.8203 9.0465 16.7613C9.73162 16.7318 9.9949 16.245 9.95967 15.9204C9.85396 14.5337 7.15165 14.6223 6.97645 12.3365C6.83551 10.4188 8.32712 8.48626 11.6265 8.30924C12.9076 8.23548 13.5575 8.51577 13.5575 8.51577Z",
-                            fill: "white"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "gp-text-[14px] gp-text-[#212121] gp-font-semibold gp-leading-[24px]",
-                    children: "Shopify App"
-                })
-            ]
-        })
-    });
-};
-
-exports.default = ThirdPartySlot;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),classes=require("../common/classes.js"),system=require("@gem-sdk/system"),helpers=require("../common/helpers.js"),styles=require("../common/styles.js");const ThirdPartySlot=e=>{let{setting:s,builderProps:t}=e,r=system.createClass(classes.getClassThirdPartyContainer()),a=system.createClass(classes.getClassIconThirdPartyContainer()),i=system.createClass(classes.getClassTextThirdPartyContainer()),n=system.createStyle(styles.getStyleIconThirdPartyContainer());return jsxRuntime.jsx(jsxRuntime.Fragment,{children:helpers.renderThirdPartySlot({setting:s,type:"react",componentsEditorMode:jsxRuntime.jsx("div",{"data-uid":t?.uid??"","data-index":s?.index,className:r,children:jsxRuntime.jsxs("div",{className:a,style:n,children:[jsxRuntime.jsx("span",{dangerouslySetInnerHTML:{__html:helpers.ICON_SHOPIFY_SLOT}}),jsxRuntime.jsx("div",{className:i,children:"Shopify App"})]})})})})};exports.default=ThirdPartySlot;

package/dist/cjs/third-party-slot/components/ThirdPartySlot.liquid.js

@@ -1,60 +1,12 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-
-const ThirdPartySlot = ({ setting, advanced })=>{
-    return core.template`
-    {% assign app_blocks = section.blocks | where: "type", "@app" %}
-
-    {% assign filtered_block_ids_string = '' %}
-
-    {% for block in app_blocks %}
-      {% unless block.id contains 'gp_app' %}
-        {% unless filtered_block_ids_string == '' %}
-          {% assign filtered_block_ids_string = filtered_block_ids_string | append: ',' %}
-        {% endunless %}
-        {% assign filtered_block_ids_string = filtered_block_ids_string | append: block.id %}
-      {% endunless %}
-    {% endfor %}
-
-    {% assign filtered_block_ids = filtered_block_ids_string | split: ',' %}
-
-    {% if filtered_block_ids[${setting?.index ?? 0}] %}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var classes=require("../common/classes.js"),system=require("@gem-sdk/system"),helpers=require("../common/helpers.js"),styles=require("../common/styles.js");const ThirdPartySlot=e=>{let{setting:s,builderProps:t}=e,r=system.createClass(classes.getClassThirdPartyContainer()),a=system.createClass(classes.getClassIconThirdPartyContainer()),l=system.createClass(classes.getClassTextThirdPartyContainer()),i=system.createStyle(styles.getStyleIconThirdPartyContainer());return helpers.renderThirdPartySlot({setting:s,type:"liquid",componentsEditorMode:`
       <div
-        class="third-party-slot gp-w-full ${advanced?.cssClass}"
+        data-uid=${t?.uid??""}
+        data-index=${s?.index}
+        class="${r}"
       >
-        {% for block in app_blocks %}
-          {% for filtered_block_id in filtered_block_ids %}
-            {% if block.type == '@app' and forloop.index0 == ${setting?.index ?? 0} and block.id == filtered_block_id %}
-              {% render block %}
-            {% endif %}
-          {% endfor %}
-        {% endfor %}
-      </div>
-    {% elsif request.design_mode or request.visual_preview_mode %}
-      <div
-        class="third-party-slot gp-bg-[#f4f4f4] gp-border gp-border-[#D6D6D6] gp-flex gp-h-[56px] gp-w-full gp-items-center gp-justify-center gp-border-box ${advanced?.cssClass}"
-      >
-        <div
-          class="gp-h-[28px] gp-overflow-hidden gp-whitespace-nowrap gp-flex gp-justify-center gp-items-center gp-gap-2"
-          style="${{
-        'flex-flow': 'row wrap'
-    }}"
-        >
-          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M19.6475 5.16194C19.6416 5.1148 19.6197 5.0713 19.5857 5.03911C19.5516 5.00692 19.5076 4.9881 19.4614 4.98597C19.3835 4.98597 17.8469 4.95397 17.8469 4.95397C17.8469 4.95397 16.5588 3.67419 16.4342 3.5311C16.3104 3.40312 16.0619 3.43512 15.9684 3.46711L15.3166 3.67508C15.2361 3.40491 15.1323 3.14259 15.0067 2.89121C14.5566 1.99536 13.8727 1.51544 13.0659 1.51544C13.0044 1.51544 12.9577 1.51544 12.8954 1.53144C12.8642 1.49945 12.8486 1.46745 12.8175 1.45145C12.4608 1.06752 12.0107 0.875552 11.467 0.891549C10.4282 0.923543 9.38772 1.70741 8.53419 3.08318C7.94467 4.05901 7.49453 5.27392 7.3543 6.21776C6.15969 6.6017 5.32087 6.87365 5.29057 6.87365C4.68461 7.06562 4.66903 7.08161 4.59199 7.67351C4.56082 8.12144 2.97754 20.7415 2.97754 20.7415L16.2636 23.1091L22.022 21.6374C22.0064 21.6374 19.6631 5.27392 19.6475 5.16194ZM14.6492 3.89904C14.3062 4.00572 13.9648 4.11772 13.6251 4.23498C13.6251 3.69108 13.5472 2.92321 13.3143 2.28331C14.1064 2.41129 14.4942 3.33914 14.6492 3.89904ZM12.9265 4.44206C12.2279 4.66602 11.4679 4.90598 10.707 5.14594C10.9243 4.29808 11.3277 3.46623 11.8245 2.90632C12.033 2.66965 12.2863 2.47913 12.569 2.34641C12.8806 2.9712 12.9421 3.85105 12.9265 4.44206ZM11.4982 1.61143C11.7466 1.61143 11.9483 1.65942 12.1197 1.7874C11.8127 1.95192 11.5387 2.17444 11.3121 2.44329C10.6455 3.17916 10.1331 4.31408 9.93135 5.4179C9.29423 5.62586 8.67356 5.81783 8.11521 5.9938C8.48744 4.25009 9.89933 1.65942 11.4982 1.61143Z" fill="#95BF47"/>
-            <path d="M19.4652 4.94733C19.3856 4.94733 17.816 4.91527 17.816 4.91527C17.816 4.91527 16.4986 3.63266 16.3721 3.48837C16.3266 3.43975 16.264 3.41098 16.1978 3.4082V23.1096L22.0833 21.6346L19.6714 5.12369C19.6404 5.01147 19.5448 4.94733 19.4652 4.94733Z" fill="#5E8E3E"/>
-            <path d="M13.5575 8.51577L12.8029 10.8908C12.8029 10.8908 11.9602 10.5663 10.9599 10.6253C9.48595 10.6991 9.48595 11.4809 9.48595 11.6727C9.57404 12.7348 12.89 12.9709 13.0828 15.4631C13.2238 17.4251 11.8545 18.7675 9.85396 18.8708C7.46778 18.9733 6.15137 17.7939 6.15137 17.7939L6.66032 15.9794C6.66032 15.9794 7.99435 16.8203 9.0465 16.7613C9.73162 16.7318 9.9949 16.245 9.95967 15.9204C9.85396 14.5337 7.15165 14.6223 6.97645 12.3365C6.83551 10.4188 8.32712 8.48626 11.6265 8.30924C12.9076 8.23548 13.5575 8.51577 13.5575 8.51577Z" fill="white"/>
-          </svg>
-          <div class="gp-text-[14px] gp-text-[#212121] gp-font-semibold gp-leading-[24px]">Shopify App</div>
+        <div class="${a}" style="${i}" >
+          <span>${helpers.ICON_SHOPIFY_SLOT}</span>
+          <div class="${l}">Shopify App</div>
         </div>
       </div>
-    {% else %}
-      <div class="gp-hidden"></div>  
-    {% endif %}
-  `;
-};
-
-exports.default = ThirdPartySlot;
+    `})};exports.default=ThirdPartySlot;

package/dist/cjs/third-party-slot/index.js

@@ -0,0 +1 @@
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core");var ThirdPartySlot$1=require("./settings/ThirdPartySlot.js");const thirdPartySlotSetting={ThirdPartySlot:ThirdPartySlot$1.default};exports.thirdPartySlotSetting=thirdPartySlotSetting;

package/dist/cjs/third-party-slot/next.js

@@ -1,16 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dynamic = require('next/dynamic');
-var Loading = require('../common/components/Loading.js');
-require('react/jsx-runtime');
-
-const ThirdPartySlot = dynamic(()=>Promise.resolve().then(function () { return require('./components/ThirdPartySlot.js'); }), {
-    loading: Loading.default
-});
-var thirdPartySlot = {
-    ThirdPartySlot
-};
-
-exports.default = thirdPartySlot;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const ThirdPartySlot=dynamic(()=>Promise.resolve().then(function(){return require("./components/ThirdPartySlot.js")}),{loading:Loading.default});var thirdPartySlot={ThirdPartySlot};exports.default=thirdPartySlot;

package/dist/cjs/third-party-slot/settings/ThirdPartySlot.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js"),settings=require("./configs/settings.js");const icon=`
+<div class="w-full flex flex-col items-center">
+  <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.1475 5.16194C17.1416 5.1148 17.1197 5.0713 17.0857 5.03911C17.0516 5.00692 17.0076 4.9881 16.9614 4.98597C16.8835 4.98597 15.3469 4.95397 15.3469 4.95397C15.3469 4.95397 14.0588 3.67419 13.9342 3.5311C13.8104 3.40312 13.5619 3.43512 13.4684 3.46711L12.8166 3.67508C12.7361 3.40491 12.6323 3.14259 12.5067 2.89121C12.0566 1.99536 11.3727 1.51544 10.5659 1.51544C10.5044 1.51544 10.4577 1.51544 10.3954 1.53144C10.3642 1.49945 10.3486 1.46745 10.3175 1.45145C9.9608 1.06752 9.51066 0.875552 8.96703 0.891549C7.92824 0.923543 6.88772 1.70741 6.03419 3.08318C5.44467 4.05901 4.99453 5.27392 4.8543 6.21776C3.65969 6.6017 2.82087 6.87365 2.79057 6.87365C2.18461 7.06562 2.16903 7.08161 2.09199 7.67351C2.06082 8.12144 0.477539 20.7415 0.477539 20.7415L13.7636 23.1091L19.522 21.6374C19.5064 21.6374 17.1631 5.27392 17.1475 5.16194ZM12.1492 3.89904C11.8062 4.00572 11.4648 4.11772 11.1251 4.23498C11.1251 3.69108 11.0472 2.92321 10.8143 2.28331C11.6064 2.41129 11.9942 3.33914 12.1492 3.89904ZM10.4265 4.44206C9.72794 4.66602 8.96789 4.90598 8.20698 5.14594C8.42426 4.29808 8.82766 3.46623 9.32454 2.90632C9.53303 2.66965 9.78635 2.47913 10.069 2.34641C10.3806 2.9712 10.4421 3.85105 10.4265 4.44206ZM8.99819 1.61143C9.24664 1.61143 9.44833 1.65942 9.61973 1.7874C9.31273 1.95192 9.03871 2.17444 8.81208 2.44329C8.14552 3.17916 7.63305 4.31408 7.43135 5.4179C6.79423 5.62586 6.17356 5.81783 5.61521 5.9938C5.98744 4.25009 7.39933 1.65942 8.99819 1.61143Z" fill="#95BF47"/>
+    <path d="M16.9652 4.94709C16.8856 4.94709 15.316 4.91503 15.316 4.91503C15.316 4.91503 13.9986 3.63242 13.8721 3.48812C13.8266 3.43951 13.764 3.41074 13.6978 3.40796V23.1094L19.5833 21.6344L17.1714 5.12345C17.1404 5.01122 17.0448 4.94709 16.9652 4.94709Z" fill="#5E8E3E"/>
+    <path d="M11.0575 8.51577L10.3029 10.8908C10.3029 10.8908 9.46022 10.5663 8.45994 10.6253C6.98595 10.6991 6.98595 11.4809 6.98595 11.6727C7.07404 12.7348 10.39 12.9709 10.5828 15.4631C10.7238 17.4251 9.35452 18.7675 7.35396 18.8708C4.96778 18.9733 3.65137 17.7939 3.65137 17.7939L4.16032 15.9794C4.16032 15.9794 5.49435 16.8203 6.5465 16.7613C7.23162 16.7318 7.4949 16.245 7.45967 15.9204C7.35396 14.5337 4.65165 14.6223 4.47645 12.3365C4.33551 10.4188 5.82712 8.48626 9.12647 8.30924C10.4076 8.23548 11.0575 8.51577 11.0575 8.51577Z" fill="white"/>
+  </svg>
+  <span class="preset-item-title">Shopify App</span>
+</div>
+`,config={tag:"AnyShopifyApps",label:"Shopify App",icon,settings:settings.ThirdPartySlotSettings,ui:uiV1.default,uiV2:uiV2.default,presets:[{id:"third-party-slot",name:{en:"Shopify App"},icon:{desktop:icon},components:[{tag:"ThirdPartySlot",advanced:{margin:{desktop:{bottom:"var(--g-s-l)"}}}}]}]};exports.default=config;

package/dist/cjs/third-party-slot/settings/configs/settings.js

@@ -0,0 +1 @@
+"use strict";const ThirdPartySlotSettings=[{id:"setting",controls:[{id:"setupGuide",label:"",title:"Setup in Shopify",type:"steps-guide",info:"You can integrate your store with Shopify Apps using this element",steps:[{label:"Publish this page",icon:'<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="18" rx="9" fill="#D6D6D6"/><path d="M10.2021 5.22727V12.5H8.88459V6.50923H8.84197L7.14098 7.59588V6.38849L8.94851 5.22727H10.2021Z" fill="#212121"/></svg>',value:"step-1"},{label:"Open Shopify editor & add app block you want",icon:'<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="18" rx="9" fill="#D6D6D6"/><path d="M6.54084 12.5V11.5483L9.0657 9.07315C9.30717 8.82931 9.5084 8.61269 9.66939 8.4233C9.83037 8.2339 9.95111 8.05043 10.0316 7.87287C10.1121 7.69531 10.1523 7.50592 10.1523 7.30469C10.1523 7.07505 10.1003 6.87855 9.99609 6.7152C9.89193 6.54948 9.7487 6.42164 9.56641 6.33168C9.38411 6.24171 9.17696 6.19673 8.94496 6.19673C8.70585 6.19673 8.49633 6.24645 8.31641 6.34588C8.13648 6.44294 7.9968 6.58144 7.89737 6.76136C7.80031 6.94129 7.75178 7.15554 7.75178 7.40412H6.49822C6.49822 6.94247 6.60357 6.54119 6.81428 6.20028C7.02498 5.85937 7.31499 5.59541 7.6843 5.40838C8.05599 5.22135 8.48213 5.12784 8.96271 5.12784C9.4504 5.12784 9.87891 5.21899 10.2482 5.40128C10.6175 5.58357 10.904 5.83333 11.1076 6.15057C11.3136 6.4678 11.4165 6.83002 11.4165 7.23722C11.4165 7.50947 11.3645 7.77699 11.2603 8.03977C11.1561 8.30256 10.9727 8.59375 10.7099 8.91335C10.4495 9.23295 10.0837 9.62003 9.61257 10.0746L8.35902 11.3494V11.3991H11.5266V12.5H6.54084Z" fill="#212121"/></svg>',value:"step-2",actions:[{label:"Open Shopify editor",type:"tertiary",size:"medium",icon:'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 2C2.22386 2 2 2.22386 2 2.5V13.5C2 13.7761 2.22386 14 2.5 14H13.5C13.7761 14 14 13.7761 14 13.5L14 10C14 9.72386 14.2239 9.5 14.5 9.5C14.7761 9.5 15 9.72386 15 10L15 13.5C15 14.3284 14.3284 15 13.5 15H2.5C1.67157 15 1 14.3284 1 13.5V2.5C1 1.67157 1.67157 1 2.5 1H6C6.27614 1 6.5 1.22386 6.5 1.5C6.5 1.77614 6.27614 2 6 2H2.5Z" fill="#F9F9F9"/><path d="M14 2.70709V6.5C14 6.77614 14.2239 7 14.5 7C14.7761 7 15 6.77614 15 6.5V1.5C15 1.22386 14.7761 1 14.5 1H9.5C9.22386 1 9 1.22386 9 1.5C9 1.77614 9.22386 2 9.5 2H13.2929L5.5269 9.76597C5.33164 9.96124 5.33164 10.2778 5.5269 10.4731C5.72217 10.6683 6.03875 10.6683 6.23401 10.4731L14 2.70709Z" fill="#F9F9F9"/></svg>',iconPosition:"right",buttonType:"link"}]}],default:"step-1"},{id:"index",type:"input:number",default:0}]}];exports.ThirdPartySlotSettings=ThirdPartySlotSettings;

package/dist/cjs/third-party-slot/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const SettingUIV1=[{type:"group",label:{en:"Setup guides"},options:{labelSpacing:"small",hideOnPages:["THEME_SECTION"]},controls:[{type:"control",label:{en:""},layout:"vertical",setting:{id:"setupGuide"}}]}];exports.default=SettingUIV1;

package/dist/cjs/third-party-slot/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const SettingUIV2=[{controls:[{type:"control",label:{en:""},layout:"vertical",setting:{id:"setupGuide"}}]}];exports.default=SettingUIV2;

package/dist/cjs/validates/background.js

@@ -0,0 +1 @@
+"use strict";const BackgroundSettingValidate={type:"object",properties:{color:{type:"string"},size:{type:"string",enum:["cover","contain"]},image:{type:"object",properties:{image:{type:"object",required:["src","width","height"]}}},position:{type:"object",properties:{x:{type:"number",maximum:100},y:{type:"number",maximum:100}}},repeat:{type:"string",enum:["no-repeat","none","repeat-x","repeat-y"]},attachment:{type:"string",enum:["scroll","fixed","local"]},preload:{type:"boolean"}}};exports.BackgroundSettingValidate=BackgroundSettingValidate;

package/dist/cjs/video/common/attrs.js

@@ -0,0 +1 @@
+"use strict";const getAttr=({uid:t})=>({"data-id":t}),getHtml5Attr=({videoId:t,title:e,autoplay:r,preloadThumbnail:a,offLazyLoad:s,src:d,thumbnail:o})=>({id:`${t}`,title:`${e}`,preload:`${r&&!a||s?"metadata":"none"}`,"data-src":`${d}`,poster:o||"","data-poster":o||""});exports.getAttr=getAttr,exports.getHtml5Attr=getHtml5Attr;

package/dist/cjs/video/common/classes.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getClasses=({className:e,builderProps:s,isInstantLP:t,advancedCssClass:l})=>{let g=`!gp-max-w-none gp-bg-black gp-overflow-hidden [&_>_article]:gp-aspect-[var(--aspect)] tablet:[&_>_article]:gp-aspect-[var(--aspect-tablet,_var(--aspect))] mobile:[&_>_article]:gp-aspect-[var(--aspect-mobile,_var(--aspect-tablet,_var(--aspect)))] ${s?.uid}`;return t||(g+=" gp-relative"),e&&(g+=` ${e}`),l&&(g+=` ${l}`),{...s?.uid&&{[s.uid]:!0},...composeClasses(g)}},getButtonThumbnailClasses=()=>({...composeClasses("gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]")}),getFallbackImageClasses=()=>({...composeClasses("gp-w-full gp-h-full gp-object-cover")}),getWrapThumbnailClasses=e=>{let s="gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video gp-h-full";return e&&(s+=" gp-hidden"),{...composeClasses(s)}},getImageThumbnailClasses=()=>({...composeClasses("gp-w-full gp-h-full gp-object-cover")}),getArticleVimeoClasses=(e,s)=>{let t="gp-relative gp-bg-cover gp-bg-center gp-lite-vimeo-embed-article",l=core.getResponsiveValueByScreen(s,"desktop"),g=core.getResponsiveValueByScreen(s,"tablet"),a=core.getResponsiveValueByScreen(s,"mobile");return e||l&&"auto"!=l||(t+=" !gp-aspect-video"),e||g&&"auto"!=g||(t+=" tablet:!gp-aspect-video"),e||a&&"auto"!=a||(t+=" mobile:!gp-aspect-video"),{...composeClasses(t)}},getVideoYoutubeClasses=(e,s)=>{let t="gp-w-full";return e&&(t+=` ${e}`),s||(t+=" gp-lazyload-video"),{...composeClasses(t)}},getImageVimeoClasses=e=>{let s="gp-h-full gp-w-full gp-relative gp-top-0 gp-left-0 gp-z-9";return e&&(s+="  gp-invisible gp-opacity-0"),{...composeClasses(s)}},getButtonVimeoClasses=e=>{let s="gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800] gp-z-10 gp-lite-vimeo-embed-button";return e&&(s+="  gp-invisible gp-opacity-0"),{...composeClasses(s)}},getIframeVimeoClasses=()=>({...composeClasses("gp-inset-0 gp-w-full gp-bg-black")}),getButtonYoutubeClasses=e=>{let s="gp-absolute gp-left-1/2 gp-top-1/2 gp-w-[68px] -gp-translate-x-1/2 -gp-translate-y-1/2 gp-lite-youtube-embed-button";return e?s+=" gp-opacity-0":s+=" gp-visible gp-opacity-100",{...composeClasses(s)}},getImageYoutubeClasses=()=>({...composeClasses("gp-invisible gp-w-full gp-h-full gp_lazyforbg")}),getArticleYoutubeClasses=(e,s)=>{let t="gp-relative gp-bg-cover gp-bg-center gp-lite-youtube-embed-article";return e||(t+=" gp_lazybg"),s&&(t+=` ${s}`),{...composeClasses(t)}},getIframeYoutubeClasses=e=>{let s="gp-inset-0 gp-w-full gp-bg-black ";return e&&(s+=` ${e}`),{...composeClasses(s)}},getYoutubeContentClasses=()=>({...composeClasses("gp-absolute gp-left-0 gp-top-0 gp-aspect-video gp-h-full gp-w-full")});exports.getArticleVimeoClasses=getArticleVimeoClasses,exports.getArticleYoutubeClasses=getArticleYoutubeClasses,exports.getButtonThumbnailClasses=getButtonThumbnailClasses,exports.getButtonVimeoClasses=getButtonVimeoClasses,exports.getButtonYoutubeClasses=getButtonYoutubeClasses,exports.getClasses=getClasses,exports.getFallbackImageClasses=getFallbackImageClasses,exports.getIframeVimeoClasses=getIframeVimeoClasses,exports.getIframeYoutubeClasses=getIframeYoutubeClasses,exports.getImageThumbnailClasses=getImageThumbnailClasses,exports.getImageVimeoClasses=getImageVimeoClasses,exports.getImageYoutubeClasses=getImageYoutubeClasses,exports.getVideoYoutubeClasses=getVideoYoutubeClasses,exports.getWrapThumbnailClasses=getWrapThumbnailClasses,exports.getYoutubeContentClasses=getYoutubeContentClasses;

package/dist/cjs/video/common/helpers.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core");const getAspectRatioSettings=(e,t)=>{let o={desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width},s={desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height},i={desktop:t?.desktop==="custom"?`${core.getResponsiveValueByScreen(o,"desktop")}/${core.getResponsiveValueByScreen(s,"desktop")}`:t?.desktop==="cover"?"unset":t?.desktop,tablet:t?.tablet==="custom"?`${core.getResponsiveValueByScreen(o,"tablet")}/${core.getResponsiveValueByScreen(s,"tablet")}`:t?.tablet==="cover"?"unset":t?.tablet,mobile:t?.mobile==="custom"?`${core.getResponsiveValueByScreen(o,"mobile")}/${core.getResponsiveValueByScreen(s,"mobile")}`:t?.mobile==="cover"?"unset":t?.mobile};return i},listSourceVideoSupport=[".mp4",".mov"],getYoutubeParams=e=>{let{id:t,params:o,muted:s,webp:i,controls:p,adNetwork:r,autoplay:a,lazy:l}=e,m=encodeURIComponent(t),u="hqdefault",d=`${o}`||"",b=s?"&mute=1":"",c=i?"webp":"jpg",n=i?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${n}/${m}/${u}.${c}`,V=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",v=`${V}/embed/${m}?autoplay=${!!l||a}&state=1${b}${d}&controls=${p?1:0}`,h=r||!1;return{videoId:m,posterImp:u,paramsImp:d,mutedImp:b,format:c,vi:n,posterUrl:g,ytUrl:V,iframeSrc:v,adNetworkImp:h}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:s,controls:i,loop:p,lazy:r}=e,a=encodeURIComponent(t),l=`?&autoplay=${r?1:o?1:0}&muted=${s?1:0}&loop=${p?1:0}&controls=${i}&autopause=false`,m=`https://player.vimeo.com/video/${a}${l}`;return{videoId:a,params:l,iframeSrc:m}},makeStyleResponsiveRatio=(e,t,o)=>({[`--${e}`]:o&&t?.desktop==="auto"?o:t?.desktop,[`--${e}-tablet`]:o&&t?.tablet==="auto"?o:t?.tablet,[`--${e}-mobile`]:o&&t?.mobile==="auto"?o:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,s]=t.split("=");return"loop"!==o?{...e,[o]:s}:e},{})},isSettingLoop=e=>e.includes("loop=1");exports.covertStrParamsToObj=covertStrParamsToObj,exports.fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",exports.getAspectRatioSettings=getAspectRatioSettings,exports.getVimeoParams=getVimeoParams,exports.getVimeoVideoId=getVimeoVideoId,exports.getYoutubeParams=getYoutubeParams,exports.getYoutubeVideoId=getYoutubeVideoId,exports.isSettingLoop=isSettingLoop,exports.listSourceVideoSupport=listSourceVideoSupport,exports.makeStyleResponsiveRatio=makeStyleResponsiveRatio,exports.parseTimeVideo=parseTimeVideo,exports.vimeoVideoRegex=vimeoVideoRegex,exports.youtubeVideoRegex=youtubeVideoRegex;

package/dist/cjs/video/common/styles.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}const getStyle=(e,t)=>{let{aspectRatio:l}=e||{},r={...t,...core.makeStyleResponsive("aspect",l)};return filterTruthyStyles(r)},getYoutubeStyle=e=>{let t={...core.makeStyleResponsive("aspect",e)};return filterTruthyStyles(t)},getVimeoStyle=e=>{let t={...core.makeStyleResponsive("aspect",e)};return filterTruthyStyles(t)},getHtml5Style=e=>{let t={...core.makeStyleResponsive("aspect",e)};return filterTruthyStyles(t)},getFallBackImageStyle=e=>{let t={...core.makeStyleResponsive("aspect",e)};return filterTruthyStyles(t)},getPreloadImageStyle=()=>{let e={"--op":0,"--z":-1,display:"none",width:"100%",height:"auto"};return filterTruthyStyles(e)},getIframeVimeoStyle=e=>{let t={...core.makeStyleResponsive("aspect",e),position:"absolute",height:"100%",width:"100%"};return filterTruthyStyles(t)},getArticleVimeoStyle=(e,t,l)=>{let r={backgroundImage:`url(${t})`,...helpers.makeStyleResponsiveRatio("aspect",e,l)};return filterTruthyStyles(r)},getIframeYoutubeStyle=e=>{let t={...e,position:"absolute",height:"100%",width:"100%"};return filterTruthyStyles(t)},getArticleYoutubeStyle=(e,t)=>{let l={...e};return t&&(l={"background-image":`url(${t})`,...l}),filterTruthyStyles(l)};exports.getArticleVimeoStyle=getArticleVimeoStyle,exports.getArticleYoutubeStyle=getArticleYoutubeStyle,exports.getFallBackImageStyle=getFallBackImageStyle,exports.getHtml5Style=getHtml5Style,exports.getIframeVimeoStyle=getIframeVimeoStyle,exports.getIframeYoutubeStyle=getIframeYoutubeStyle,exports.getPreloadImageStyle=getPreloadImageStyle,exports.getStyle=getStyle,exports.getVimeoStyle=getVimeoStyle,exports.getYoutubeStyle=getYoutubeStyle;

package/dist/cjs/video/components/HTML5Embed.js

@@ -1,83 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-
-const listSourceVideoSupport = [
-    '.mp4',
-    '.mov'
-];
-const HTML5Embed = (props)=>{
-    const mode = core.useEditorMode();
-    const videoRef = React.useRef(null);
-    const [showThumbnail, setShowThumbnail] = React.useState(!props.autoplay);
-    React.useEffect(()=>{
-        videoRef.current?.load();
-    }, [
-        props.src
-    ]);
-    const playVideoAndTurnOffThumbnail = ()=>{
-        setShowThumbnail(false);
-        if (videoRef?.current) {
-            videoRef.current.play();
-        }
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("video", {
-                ref: videoRef,
-                ...mode === 'edit' && {
-                    poster: props.thumbnail
-                },
-                className: core.cls('lazy gp-w-full', props.className),
-                style: props.style,
-                controls: props.controls,
-                loop: props.loop,
-                muted: props.muted ? true : undefined,
-                autoPlay: props.autoplay,
-                title: props.title,
-                preload: props.autoplay ? 'metadata' : 'none',
-                "data-src": props.src,
-                "data-poster": props.thumbnail,
-                playsInline: props.autoplay,
-                children: listSourceVideoSupport.some((ext)=>props.src.endsWith(ext)) && /*#__PURE__*/ jsxRuntime.jsx("source", {
-                    "data-src": props.src,
-                    src: props.src,
-                    type: "video/mp4"
-                })
-            }),
-            props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
-                onClick: playVideoAndTurnOffThumbnail,
-                style: props.style,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("img", {
-                        id: "video-thumbnail",
-                        src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
-                        alt: "Video Thumbnail"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("button", {
-                        type: "button",
-                        className: core.cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]'),
-                        "aria-label": "Play",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                            className: "gp-w-5 gp-text-white",
-                            viewBox: "0 0 24 24",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                fill: "currentColor",
-                                d: "M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
-                            })
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-exports.default = HTML5Embed;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),NextImage=require("../../image/components/NextImage.js"),useLiteHtml5Embed=require("../hooks/useLiteHtml5Embed.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let s=core.useEditorMode(),t="edit"!==s,{thumbnail:l,muted:r,autoplay:a,loop:i,controls:m,src:o,style:u,title:c,className:n,lazy:d,poster:x}=e,{playVideoAndTurnOffThumbnail:j,videoRef:y,showThumbnail:p}=useLiteHtml5Embed.useLiteHtml5Embed(a,r,o),g=!t&&a&&r&&!!l,b=!d&&e.isVideoComponent&&t,h=helpers.listSourceVideoSupport.some(e=>o?.endsWith(e)),C=!l||!p,R=b&&!t?o:void 0,q=system.createAttr({...attrs.getHtml5Attr({title:c,autoplay:a,preloadThumbnail:g,offLazyLoad:b,src:o,thumbnail:l})}),v=system.createClass({...classes.getWrapThumbnailClasses(C)}),L=system.createStyle({...styles.getPreloadImageStyle()}),N=system.createClass({...classes.getButtonThumbnailClasses()}),I=system.createClass({...classes.getImageThumbnailClasses()}),E=system.createClass({...classes.getVideoYoutubeClasses(n,b)}),H=()=>g?jsxRuntime.jsx(NextImage.default,{src:l,alt:c,priority:!0,style:L}):"",T=()=>jsxRuntime.jsxs("div",{role:"presentation",style:u,className:v,onClick:j,children:[jsxRuntime.jsx(NextImage.default,{id:"video-thumbnail",src:l??"",alt:x?.altText,title:x?.imageTitle,priority:x?.preload&&t,className:I,isDisableAspectStyle:!0,enableLazyLoadImage:!0}),jsxRuntime.jsx("button",{type:"button",className:N,"aria-label":"Play",children:jsxRuntime.jsx("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"})})})]});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[H(),jsxRuntime.jsx("video",{ref:y,...q,style:u,className:E,controls:m,loop:i,muted:r,autoPlay:a,playsInline:!0,src:R,children:h&&jsxRuntime.jsx("source",{"data-src":o,src:o,type:"video/mp4"})}),!C&&T()]})};exports.default=HTML5Embed;

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -1,33 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
-var helpers = require('../../helpers.js');
-
-const HTML5Embed = (props)=>{
-    const { pageContext } = props;
-    const videoId = `gp-video-${props.uid}`;
-    const preloadThumbnail = props.autoplay && props.thumbnail;
-    const offLazyVideo = !props.lazy && props.isVideoComponent;
-    const srcUnLazyVideo = offLazyVideo ? props.src : '';
-    const initPreloadPoster = ()=>{
-        if (!preloadThumbnail) return '';
-        return core.template`${NextImage_liquid.default({
-            src: props.thumbnail,
-            alt: props.title,
-            priority: true,
-            width: '100%',
-            height: 'auto',
-            style: {
-                '--op': 0,
-                '--z': -1,
-                display: 'none'
-            },
-            pageContext
-        })}
-    ${core.RenderIf(props.autoplay, `<script>
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:l,loop:r,controls:o,src:i,style:n,title:d,className:c,lazy:m,poster:u}=e,p=l&&a&&!!s,y=!m&&e.isVideoComponent,g=i.endsWith(".mp4"),v=!s||l&&a,$=y?i:void 0,b=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:d,autoplay:l,preloadThumbnail:p,offLazyLoad:y,src:i,thumbnail:s})}),h=system.createClass({...classes.getWrapThumbnailClasses(v)}),f=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),I=system.createClass({...classes.getImageThumbnailClasses()}),E=system.createClass({...classes.getVideoYoutubeClasses(c,y)}),A=()=>p?core.template`${NextImage_liquid.default({src:s,alt:d,priority:u?.preload,enableLazyLoadImage:!0,style:f})}
+    ${system.If(l,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
           const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -42,66 +14,45 @@ const HTML5Embed = (props)=>{
               });
           }
           function runAutoPlayVideo() {
-              document.getElementById('${videoId}').setAttribute('autoplay','true');
-              document.getElementById('${videoId}').setAttribute('playsinline','true');
-              document.getElementById('${videoId}').play();
+              document.getElementById('${t}').setAttribute('autoplay','true');
+              document.getElementById('${t}').setAttribute('playsinline','true');
+              document.getElementById('${t}').play();
           }
         });
-      </script>`, '')}
-      `;
-    };
-    return core.template`
+      </script>`)}
+      `:"",C=()=>core.template`
+     <div
+        role="presentation"
+        style="${n}"
+        class="${h}"
+        >
+           ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:u?.altText,title:u?.imageTitle,className:I,isDisableAspectStyle:!0,priority:u?.preload,enableLazyLoadImage:!0})}
+          <button type="button" class="${L}" aria-label="Play">
+            <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
+              />
+            </svg>
+          </button>
+        </div>
+  `;return core.template`
   <gp-lite-html5-embed>
-    ${initPreloadPoster()}
+    ${A()}
     <video
-      id="${videoId}"
-      class="${core.cls(' gp-w-full', props.className, props.isVideoComponent && !props.lazy ? '' : 'lazy')}"
-      style="${props.style}"
-      ${props.controls ? 'controls' : undefined}
-      ${props.loop ? 'loop' : undefined}
-      ${props.muted ? 'muted' : undefined}
-      ${props.autoplay && !preloadThumbnail ? 'autoplay' : undefined}
-      title="${props.title}"
-      preload="${props.autoplay && !preloadThumbnail || offLazyVideo ? 'metadata' : 'none'}"
-      data-src="${props.src}"
-      src="${srcUnLazyVideo}"
-      poster="${props.thumbnail}"
+    ${{...b}}
+      style="${n}"
+      class="${E}"
+      ${o?"controls":void 0}
+      ${r?"loop":void 0}
+      ${a?"muted":void 0}
+      ${l?"autoplay":void 0}
       playsinline
+      src="${$}"
     >
-    ${core.RenderIf(props.src.endsWith('.mp4'), `<source data-src="${props.src}" src="${srcUnLazyVideo}" type="video/mp4"></source>`)}
-  </video>
-    <div
-      style="${props.style}"
-      class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
-        'gp-hidden': !props.thumbnail || props.autoplay
-    })}"
-    >
-      <img
-        id="video-thumbnail"
-        src="${props.thumbnail ?? ''}"
-        class="gp-w-full gp-h-full gp-object-cover"
-        alt="Video Thumbnail"
-      ></img>
-      <button
-        type="button"
-        class="${core.cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]')}"
-        aria-label="Play"
-      >
-        <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
-          />
-        </svg>
-      </button>
-    </div>
-    </gp-lite-html5-embed>
-    ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-lite-html5-embed.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js" defer="defer"></script>
-    <script>
-        if(lazyLoadInstance){lazyLoadInstance.update()}else{var lazyLoadInstance = new LazyLoad()}
-    </script>
-  `;
-};
-
-exports.default = HTML5Embed;
+      ${system.If(g,`<source data-src="${i}" src="${$}" type="video/mp4"></source>`)}
+    </video>
+    ${system.If(!v,C())}
+  </gp-lite-html5-embed>
+        ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};exports.default=HTML5Embed;

package/dist/cjs/video/components/LiteVimeoEmbed.js

@@ -1,117 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var Head = require('next/head');
-var React = require('react');
-
-const LiteVimeoEmbed = (props)=>{
-    const { autoplay, muted, loop, controls } = props;
-    const [thumbnail, setThumbnail] = React.useState();
-    const [iframe, setIframe] = React.useState(!props.lazy);
-    const videoId = encodeURIComponent(props.id);
-    const videoTitle = props.title;
-    const posterUrl = props.thumbnail || thumbnail;
-    const currentDevice = core.useCurrentDevice();
-    const aspectRatioResponsive = core.getResponsiveValueByScreen(props.aspectRatio, currentDevice);
-    const styleAspectRatio = core.makeStyleResponsive('aspect', props.aspectRatio);
-    const params = `?&autoplay=${autoplay}` + `&muted=${muted}` + `&loop=${loop}` + `&controls=${controls}` + '&autopause=false';
-    const iframeSrc = `https://player.vimeo.com/video/${videoId}${params}`;
-    React.useEffect(()=>{
-        fetch(`https://vimeo.com/api/v2/video/${videoId}.json`).then((res)=>{
-            return res.json();
-        }).then(([video])=>{
-            setThumbnail(video?.thumbnail_large);
-        });
-    }, [
-        videoId
-    ]);
-    const addIframe = ()=>{
-        if (iframe) return;
-        setIframe(true);
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            !!props.thumbnail && /*#__PURE__*/ jsxRuntime.jsx("link", {
-                rel: "preload",
-                href: posterUrl,
-                as: "image"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(Head, {
-                children: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx("link", {
-                            rel: "preconnect",
-                            href: "https://player.vimeo.com"
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("link", {
-                            rel: "preconnect",
-                            href: "https://i.vimeocdn.com"
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("link", {
-                            rel: "preconnect",
-                            href: "https://f.vimeocdn.com"
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("link", {
-                            rel: "preconnect",
-                            href: "https://fresnel.vimeocdn.com"
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("article", {
-                "aria-hidden": true,
-                onClick: addIframe,
-                className: core.cls('gp-relative gp-bg-cover gp-bg-center', {
-                    '!gp-aspect-video': !posterUrl && (!aspectRatioResponsive || aspectRatioResponsive == 'auto')
-                }),
-                "data-title": videoTitle,
-                style: {
-                    backgroundImage: `url(${posterUrl})`,
-                    ...styleAspectRatio
-                },
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("img", {
-                        src: posterUrl,
-                        alt: "Poster",
-                        className: "gp-invisible gp-h-full gp-w-full"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("button", {
-                        type: "button",
-                        className: core.cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]', {
-                            'gp-invisible gp-opacity-0': iframe,
-                            'gp-visible gp-opacity-100': !iframe
-                        }),
-                        "aria-label": "Play",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                            className: "gp-w-5 gp-text-white",
-                            viewBox: "0 0 24 24",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                fill: "currentColor",
-                                d: "M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
-                            })
-                        })
-                    }),
-                    iframe && /*#__PURE__*/ jsxRuntime.jsx("iframe", {
-                        className: "gp-inset-0 gp-w-full gp-bg-black",
-                        style: {
-                            ...styleAspectRatio,
-                            position: 'absolute',
-                            height: '100%',
-                            width: '100%'
-                        },
-                        title: videoTitle,
-                        frameBorder: "0",
-                        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
-                        allowFullScreen: true,
-                        src: iframeSrc
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-exports.default = LiteVimeoEmbed;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),useLiteVimeoEmbed=require("../hooks/useLiteVimeoEmbed.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers=require("../common/helpers.js"),NextImage=require("../../image/components/NextImage.js");const LiteVimeoEmbed=e=>{let{title:s,lazy:t,aspectRatio:l,poster:a}=e,{iframeSrc:i,videoId:m}=helpers.getVimeoParams(e),{addIframe:r,thumbnail:c,iframe:o,originRatio:u}=useLiteVimeoEmbed.useLiteVimeoEmbed(t,m),n=e.thumbnail||c,y=system.createStyle({...styles.getIframeVimeoStyle(l)}),x=system.createStyle({...styles.getArticleVimeoStyle(l,n,u)}),d=system.createClass({...classes.getArticleVimeoClasses(n,l)}),j=system.createClass({...classes.getImageVimeoClasses(o)}),g=system.createClass({...classes.getButtonVimeoClasses(o)}),p=system.createClass({...classes.getIframeVimeoClasses()});return jsxRuntime.jsxs("article",{"aria-hidden":!0,className:d,"data-title":s,style:x,onClick:r,children:[jsxRuntime.jsx(NextImage.default,{src:n,alt:a?.altText,title:a?.imageTitle,className:j,isDisableAspectStyle:!0,onClick:r}),jsxRuntime.jsx("button",{type:"button",className:g,"aria-label":"Play",children:jsxRuntime.jsx("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"})})}),o&&jsxRuntime.jsx("iframe",{style:y,title:s,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:i,className:p})]})};exports.default=LiteVimeoEmbed;