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

package/dist/cjs/form/components/form-dropdown/FormDropdown.js

@@ -1,73 +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 FormDropdown = ({ builderProps, builderAttrs, setting, advanced, children })=>{
-    const { name, childItem, typography, align, width, fullWidth, size } = setting ?? {};
-    const inputWidth = core.makeStyleResponsive('w', core.makeWidth(width, fullWidth));
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
-    const spacingSetting = advanced?.['spacing-setting'];
-    const inputStyle = core.composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = core.composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = React.useMemo(()=>core.composeTypographyClassName(setting?.typo, typography), [
-        setting?.typo,
-        typography
-    ]);
-    const appendTypoStyle = React.useMemo(()=>core.composeTypographyStyle(setting?.typo, typography), [
-        setting?.typo,
-        typography
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        "data-id": builderProps?.uid,
-        className: core.cls(builderProps?.uid),
-        style: {
-            ...wrapStyle,
-            ...core.makeStyleResponsive('ta', align)
-        },
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("select", {
-                className: core.cls(appendTypoClass, size?.type ? core.genSizeClass(size.type) : '', 'gp-cursor-default', 'gp-outline-none'),
-                style: {
-                    ...inputWidth,
-                    ...inputStyle,
-                    ...!size?.type ? core.composeSize(size?.custom) : {},
-                    ...appendTypoStyle,
-                    appearance: 'none',
-                    backgroundImage: 'url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundPosition: 'right 10px center'
-                },
-                name: name,
-                children: childItem?.map((item, index)=>/*#__PURE__*/ jsxRuntime.jsx("option", {
-                        value: item,
-                        children: item
-                    }, index))
-            }),
-            children
-        ]
-    });
-};
-
-exports.default = FormDropdown;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),useGetColorContent=require("../../hooks/useGetColorContent.js");const FormDropdown=({builderProps:e,builderAttrs:s,setting:t,advanced:o,children:l,styles:r})=>{let{name:n,childItem:a,required:m}=t??{},{handleOnChange:i,getTextColor:c}=useGetColorContent.useGetColorContent(t),u=system.createStyle(styles.composeContainerStyles(o,t)),d=system.createStyle({...styles.composeFormDropdownStyles(o,t,r),...c}),y=system.createStyle(styles.getStyleOption(t)),p=system.createClass(classes.composeContainerClasses(o,e)),C=system.createClass(classes.composeFormDropdownClasses(t));return jsxRuntime.jsxs("div",{...s,"data-id":e?.uid,className:p,style:u,children:[jsxRuntime.jsxs("select",{className:C,style:d,required:m,name:n,onChange:i,children:[system.If(!Number(t?.defaultOption),jsxRuntime.jsx("option",{className:"gp-hidden",value:"",disabled:!0,selected:!0,children:t?.placeholder})),a?.map((e,s)=>jsxRuntime.jsx("option",{value:e,style:y,...!!Number(t?.defaultOption)&&{selected:e===a[Number(t?.defaultOption)-1]},children:e},s))]}),l]})};exports.default=FormDropdown;

package/dist/cjs/form/components/form-dropdown/FormDropdown.liquid.js

@@ -1,79 +1,29 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var helpers = require('../../../helpers.js');
-
-const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
-    const { name, childItem, typography, align, width, fullWidth, size, required, translate } = setting ?? {};
-    const inputWidth = core.makeStyleResponsive('w', core.makeWidth(width, fullWidth));
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
-    const spacingSetting = advanced?.['spacing-setting'];
-    const inputStyle = core.composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = core.composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = core.composeMemo(()=>core.composeTypographyClassName(setting?.typo, typography));
-    const appendTypoStyle = core.composeMemo(()=>core.composeTypographyStyle(setting?.typo, typography));
-    const childItemVal = childItem?.map((item, index)=>helpers.getDynamicSourceLocales({
-            val: item,
-            uid: builderProps?.uid,
-            settingId: `childItem_${index}`,
-            pageContext,
-            translate
-        }));
-    return core.template`
-    <div
-    data-id="${builderProps?.uid}"
-      class="${core.cls(builderProps?.uid, advanced?.cssClass)}"
-      style="${{
-        ...wrapStyle,
-        ...core.makeStyleResponsive('ta', align)
-    }}"
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js");const FormDropdown=({builderProps:e,setting:s,advanced:t,pageContext:r,styles:o})=>{let{name:l,childItem:a,required:p,translate:c}=s??{},d=a?.map((s,t)=>helpers.getDynamicSourceLocales({val:s,uid:e?.uid,settingId:`childItem_${t}`,pageContext:r,translate:c})),i=system.createStyle(styles.composeContainerStyles(t,s)),m=system.createStyle({...styles.composeFormDropdownStyles(t,s,o),...styles.getAppendTypoStyleFirstTime(s)}),n=system.createStyle(styles.getStyleOption(s)),y=system.createClass(classes.composeContainerClasses(t,e)),u=system.createClass(classes.composeFormDropdownClasses(s));return core.template`
+    <gp-form-dropdown
+      data-id="${e?.uid}"
+      class="${y}"
+      style="${i}"
     >
       <select
         type="email"
-        class="gp-form-item ${core.cls(appendTypoClass, size?.type ? `!${core.genSizeClass(size.type)}` : '', '!gp-outline-none !gp-h-auto focus:!gp-shadow-none hover:!gp-shadow-none')}"
-        style="${{
-        ...inputWidth,
-        ...inputStyle,
-        ...!size?.type ? core.composeSize(size?.custom) : {},
-        ...appendTypoStyle,
-        appearance: 'none',
-        'background-image': 'url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)',
-        'background-repeat': 'no-repeat',
-        'background-position': 'right 10px center'
-    }}"
-        {% if ${required} %}
-        required
-        {% endif %}
-        name="${name}"
+        class="${u}"
+        style="${m}"
+        ${system.If(p,"required")}
+        name="${l}"
+        gp-data='${JSON.stringify(s).replaceAll("'","&#039;")}'
       >
-        ${childItemVal?.map((item)=>core.template /* liquid */ `
+        ${system.If(!Number(s?.defaultOption),`<option class="gp-hidden" value="" disabled selected>
+            ${s?.placeholder}
+          </option>`)}
+        ${d?.map(e=>core.template`
             <option
-              value="${item}"
+              value="${e}"
+              style="${n}"
+              ${system.If(!!Number(s?.defaultOption),`selected: ${e===d[Number(s?.defaultOption)-1]}`)}
             >
-              ${item}
-            </option>`).join('')}
+              ${e}
+            </option>`).join("")}
       </select>
-    </div>
-  `;
-};
-
-exports.default = FormDropdown;
+    </gp-form-dropdown>
+    ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-form-dropdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-form-dropdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};exports.default=FormDropdown;

package/dist/cjs/form/components/form-dropdown/common/classes.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../common/helpers.js"),core=require("@gem-sdk/core");const composeClasses=s=>helpers.filterTruthy(s),composeContainerClasses=(s,e)=>composeClasses({[e?.uid]:!!e?.uid,[s?.cssClass]:!!s?.cssClass}),composeFormDropdownClasses=s=>{let{typography:e}=s??{},o=core.composeTypographyClassName(s?.typo,e);return composeClasses({[o]:!!o,[`${core.genSizeClass(s?.size?.type)}`]:!!s?.size?.type,"gp-form-item !gp-outline-none ":!0})};exports.composeContainerClasses=composeContainerClasses,exports.composeFormDropdownClasses=composeFormDropdownClasses;

package/dist/cjs/form/components/form-dropdown/common/styles.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../common/helpers.js"),core=require("@gem-sdk/core");const composeStyles=e=>helpers.filterTruthy(e),composeContainerStyles=(e,o)=>{let{pos:t,d:r,op:s,right:p,top:c,left:l,bottom:n,z:i,padding:g,margin:a}=e??{},y=e?.["spacing-setting"],m=core.composeAdvanceStyle({pos:t,d:r,op:s,right:p,top:c,left:l,bottom:n,z:i,margin:a,padding:g,"spacing-setting":y});return composeStyles({...m,...core.makeStyleResponsive("ta",o?.align)})},composeFormDropdownStyles=(e,o,t)=>{let{border:r,rounded:s,hasBoxShadow:p,boxShadow:c}=e??{},{background:l,size:n}=o??{},{globalSize:i,backgroundColorV2Active:g}=t??{},a=core.composeAdvanceStyle({border:r,rounded:s,hasBoxShadow:p,boxShadow:c}),y=core.makeGlobalSize(i);return composeStyles({...y?.width?.["--w"]?y.width:{"--w":"100%"},...y?.height?.["--h"]?y.height:{"--h":"auto"},...y.padding,...a,...n?.type?{}:core.composeSize(n?.custom),appearance:"none",...core.getStyleBackgroundByDevice(l,{ignoreBackgroundImageProperties:!0}),"--bgi":getBgImageUrl(l?.desktop?.color),"background-repeat":"no-repeat","background-position":"right 10px center, 0 0","--focus-bgi":getBgImageUrl(g?.active)})},getBgImageUrl=e=>`url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031) ${e?.includes("linear-gradient")?","+e:""}`,getAppendTypoStyleFirstTime=e=>{let o=core.composeTypographyStyle(e?.typo,e?.typography);return composeStyles({...o,...!Number(e?.defaultOption)&&{"--c":e?.placeholderColor}})},getStyleOption=e=>{let{typography:o,typo:t}=e??{},r=core.composeTypographyStyle(t,o);return composeStyles({...r})};exports.composeContainerStyles=composeContainerStyles,exports.composeFormDropdownStyles=composeFormDropdownStyles,exports.getAppendTypoStyleFirstTime=getAppendTypoStyleFirstTime,exports.getStyleOption=getStyleOption;

package/dist/cjs/form/components/form-email/FormEmail.js

@@ -1,60 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-
-const FormEmail = ({ builderProps, builderAttrs, setting, advanced, children })=>{
-    const { placeholder, hideOnClient, typography, align, width, fullWidth, size } = setting ?? {};
-    const name = 'contact[email]';
-    const inputWidth = core.makeStyleResponsive('w', core.makeWidth(width, fullWidth));
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
-    const spacingSetting = advanced?.['spacing-setting'];
-    const inputStyle = core.composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = core.composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = core.composeTypographyClassName(setting?.typo, typography);
-    const appendTypoStyle = core.composeTypographyStyle(setting?.typo, typography);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        "qdata-id": builderProps?.uid,
-        className: core.cls(builderProps?.uid),
-        style: {
-            ...wrapStyle,
-            ...core.makeStyleResponsive('ta', align)
-        },
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("input", {
-                className: core.cls(appendTypoClass, size?.type ? core.genSizeClass(size.type) : '', 'gp-cursor-default', 'focus:gp-outline-none', hideOnClient ? 'gp-opacity-50' : ''),
-                style: {
-                    ...appendTypoStyle,
-                    ...!size?.type ? core.composeSize(size?.custom) : {},
-                    ...inputWidth,
-                    ...inputStyle
-                },
-                placeholder: placeholder,
-                name: name
-            }),
-            children
-        ]
-    });
-};
-
-exports.default = FormEmail;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js");const FormEmail=({builderProps:e,builderAttrs:s,setting:t,advanced:a,children:l,styles:r})=>{let{placeholder:m,required:c,title:i,showTitle:o}=t??{},n=system.createStyle(styles.composeContainerStyles(t,a)),y=system.createStyle(styles.composeInnerStyles(t,a,r)),u=system.createClass(classes.composeContainerClasses({setting:t,advanced:a,builderProps:e,type:"react"})),p=system.createClass(classes.composeInnerClasses(t,e)),d=system.createClass(classes.getClassTitle());return jsxRuntime.jsxs("div",{...s,"data-id":e?.uid,className:u,style:n,children:[system.If(o,jsxRuntime.jsx("span",{className:d,children:i})),jsxRuntime.jsx("input",{type:"email",className:p,style:y,placeholder:m,name:"contact[email]",required:c,autoComplete:"email"}),l]})};exports.default=FormEmail;

package/dist/cjs/form/components/form-email/FormEmail.liquid.js

@@ -1,77 +1,20 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var helpers = require('../../../helpers.js');
-
-const FormEmail = ({ builderProps, setting, advanced, pageContext })=>{
-    const { placeholder, required, hideOnClient, defaultEmail, typography, align, width, fullWidth, size, translate } = setting ?? {};
-    const inputWidth = core.makeStyleResponsive('w', core.makeWidth(width, fullWidth));
-    const name = 'contact[email]';
-    const { border, rounded, hasBoxShadow, boxShadow, pos, d, op, right, top, left, bottom, z, margin, padding } = advanced ?? {};
-    const spacingSetting = advanced?.['spacing-setting'];
-    const inputStyle = core.composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = core.composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = core.composeTypographyClassName(setting?.typo, typography);
-    const appendTypoStyle = core.composeTypographyStyle(setting?.typo, typography);
-    const placeholderVal = helpers.getDynamicSourceLocales({
-        val: placeholder,
-        uid: builderProps?.uid,
-        settingId: 'placeholder',
-        pageContext,
-        translate
-    });
-    return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js");const FormEmail=({builderProps:e,builderAttrs:s,setting:t,advanced:l,pageContext:a,styles:r})=>{let{placeholder:c,required:m,hideOnClient:o,defaultEmail:i,translate:y,showTitle:n,title:p}=t??{},u=helpers.getDynamicSourceLocales({val:c,uid:e?.uid,settingId:"placeholder",pageContext:a,translate:y}),d=system.createStyle(styles.composeContainerStyles(t,l)),$=system.createStyle(styles.composeInnerStyles(t,l,r)),C=system.createClass(classes.composeContainerClasses({setting:t,advanced:l,builderProps:e,type:"liquid"})),q=system.createClass(classes.composeInnerClasses(t,e)),v=system.createClass(classes.getClassTitle());return core.template`
     <div
-    data-id="${builderProps?.uid}"
-      class="${core.cls(builderProps?.uid, hideOnClient ? '!gp-hidden' : '', advanced?.cssClass)}"
-      style="${{
-        ...wrapStyle,
-        ...core.makeStyleResponsive('ta', align)
-    }}"
+      ${{...s}}
+      data-id="${e?.uid}"
+      class="${C}"
+      style="${d}"
     >
+      ${system.If(n,`<span className="${v}">${p}</span>`)}
       <input
         type="email"
-        class="gp-form-item ${core.cls(appendTypoClass, size?.type ? `!${core.genSizeClass(size.type)}` : '', '!gp-outline-none !gp-h-auto focus:!gp-shadow-none hover:!gp-shadow-none !gp-bg-none')}"
-        style="${{
-        ...appendTypoStyle,
-        ...!size?.type ? core.composeSize(size?.custom) : {},
-        ...inputWidth,
-        ...inputStyle,
-        ...core.getStyleShadow({
-            value: boxShadow,
-            styleAppliedFor: 'box-shadow',
-            isEnableShadow: hasBoxShadow
-        })
-    }}"
-        placeholder="${placeholderVal}"
-        {% if ${required} %}
-        required
-        {% endif %}
-        name="${name}"
-        value="${hideOnClient ? defaultEmail : ''}"
+        class="${q}"
+        style="${$}"
+        placeholder="${u}"
+        name="${"contact[email]"}"
+        ${system.If(m,"required")}
         autocomplete="email"
+        ${system.If(o,`value="${i}"`)}
       ></input>
     </div>
-  `;
-};
-
-exports.default = FormEmail;
+  `};exports.default=FormEmail;

package/dist/cjs/form/components/form-email/common/classes.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../common/helpers.js"),core=require("@gem-sdk/core");const composeClasses=e=>helpers.filterTruthy(e),composeContainerClasses=({setting:e,advanced:s,builderProps:o,type:l})=>{let{hideOnClient:r}=e??{};return composeClasses({[o?.uid]:!!o?.uid,"!gp-hidden":r&&"liquid"===l,[s?.cssClass]:!!s?.cssClass,"flex flex-col":!0})},composeInnerClasses=(e,s)=>{let{typography:o,size:l,hideOnClient:r}=e??{},{uid:t}=s??{},p=core.composeTypographyClassName(e?.typo,o);return composeClasses({"gp-form-item":!0,[p]:!!p,[core.genSizeClass(l?.type)]:!!l?.type,"!gp-outline-none !gp-bg-none":!0,"gp-opacity-50":r,[`email-form-${t}`]:!0})},getClassTitle=()=>({"gp-text-16":!0,"gp-text-[#121212]":!0});exports.composeContainerClasses=composeContainerClasses,exports.composeInnerClasses=composeInnerClasses,exports.getClassTitle=getClassTitle;

package/dist/cjs/form/components/form-email/common/styles.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../common/helpers.js"),core=require("@gem-sdk/core");const composeStyles=e=>helpers.filterTruthy(e),composeContainerStyles=(e,o)=>{let{align:t}=e??{},{pos:r,d:s,op:a,right:c,top:l,left:i,bottom:n,z:y,margin:S,padding:g}=o??{},p=o?.["spacing-setting"],h=core.composeAdvanceStyle({pos:r,d:s,op:a,right:c,top:l,left:i,bottom:n,z:y,margin:S,padding:g,"spacing-setting":p});return composeStyles({...h,...core.makeStyleResponsive("ta",t)})},composeInnerStyles=(e,o,t)=>{let{border:r,rounded:s,hasBoxShadow:a,boxShadow:c}=o??{},{wrapperBorder:l,borderRadius:i,globalSize:n,boxShadowEmailHover:y,boxShadowEmailActive:S,roundedEmailHover:g,textColorActive:p,roundedEmailActive:h,textColorHover:d,borderEmailHover:u,borderEmailActive:v,backgroundColorV2Active:m,backgroundColorV2Hover:b}=t??{},{typography:w,size:T,background:$}=e??{},f=core.composeAdvanceStyle({border:r,rounded:s,hasBoxShadow:a,boxShadow:c}),k=core.composeTypographyStyle(e?.typo,w),x=core.makeGlobalSize(n);return composeStyles({...x?.width?.["--w"]?x.width:{"--w":"auto"},...x?.height?.["--h"]?x.height:{"--h":"auto"},...x.padding,...k,...T?.type?{}:core.composeSize(T?.custom),...core.getBorderStyle(l),...core.getBorderRadiusStyle(i),...f,...core.getStyleShadow({value:c,styleAppliedFor:"box-shadow",isEnableShadow:a}),...core.getStyleBackgroundByDevice($),...core.getGradientBgrStyleByDevice($),...core.getStyleShadow({value:S?.active,state:"focus",styleAppliedFor:"box-shadow",isEnableShadow:!0}),...core.getStyleShadow({value:y?.hover,state:"hover",styleAppliedFor:"box-shadow",isEnableShadow:!0}),"--hvr-c":d?.hover??"","--focus-c":p?.active??"",...generateStylesTarget({state:"hover",borderStyle:u?.hover,background:b?.hover,radius:g?.hover}),...generateStylesTarget({state:"focus",borderStyle:v?.active,background:m?.active,radius:h?.active})})},generateStylesTarget=({state:e,borderStyle:o,background:t,radius:r})=>{let{border:s,width:a,color:c}=o??{},l={hover:"hvr",focus:"focus"}[e];return{...a&&{[`--${l}-bw`]:`${a}`},...s&&{[`--${l}-b`]:`${s} ${core.getSingleColorVariable(c)}`},...t&&{[`--${l}-bgc`]:`${core.getSingleColorVariable(t)}`},...core.getCustomRadius(e,r)}};exports.composeContainerStyles=composeContainerStyles,exports.composeInnerStyles=composeInnerStyles,exports.generateStylesTarget=generateStylesTarget;

package/dist/cjs/form/components/newsletter/Newsletter.js

@@ -1,15 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var ChildrenDroppable = require('../../../grid/components/ChildrenDroppable.js');
-
-const Newsletter = ({ children })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : children
-    });
-};
-
-exports.default = Newsletter;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../../grid/components/ChildrenDroppable.js"),system=require("@gem-sdk/system"),styles=require("../contact/common/styles.js"),attrs=require("./common/attrs.js"),classes=require("../contact/common/classes.js");const getAttr=({uid:e})=>({"data-id":e}),Newsletter=({children:e,setting:s,styles:t,style:r,builderAttrs:o,builderProps:a})=>{let l=system.createStyle(styles.composeContainerStyles(s,t,r)),i=system.createAttr({...attrs.composeContainerAttrs({uid:a?.uid||""},s)}),c=system.createClass(classes.composeContainerClasses());return jsxRuntime.jsx("div",{className:c,...i,...o,style:l,children:core.isEmptyChildren(e)?jsxRuntime.jsx(ChildrenDroppable.default,{}):e})};exports.default=Newsletter,exports.getAttr=getAttr;

package/dist/cjs/form/components/newsletter/Newsletter.liquid.js

@@ -1,83 +1,38 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var helpers = require('../../../helpers.js');
-
-const Newsletter = ({ builderProps, setting, children, style, formType, advanced, pageContext })=>{
-    const errorMessage = helpers.getDynamicSourceLocales({
-        val: setting?.errorMessage,
-        uid: builderProps?.uid,
-        settingId: 'errorMessage',
-        pageContext,
-        defaultVal: pageContext?.isPreviewing ? `Can’t send email. Please try again later.` : helpers.getStaticLocale('Newsletter', 'err_msg_default'),
-        translate: setting?.translate
-    });
-    const successMessage = helpers.getDynamicSourceLocales({
-        val: setting?.successMessage,
-        uid: builderProps?.uid,
-        settingId: 'successMessage',
-        pageContext,
-        defaultVal: pageContext?.isPreviewing ? `Thanks for contacting us. We'll get back to you as soon as possible.` : helpers.getStaticLocale('Newsletter', 'success_msg_default'),
-        translate: setting?.translate
-    });
-    const { urlData } = helpers.getInsertLinkData('', setting?.callbackURL);
-    return core.template`
-    <gp-form
-      id="${builderProps?.uid}"
-      data-id="${builderProps?.uid}"
-      style="${{
-        ...style
-    }}"
-      data-submit-action='${setting?.afterSubmitAction}'
-      data-callback='${JSON.stringify(setting?.callbackURL)}'
-    >
-      <a
-        hidden
-        id="gp-form-callback-${builderProps?.uid}"
-        href="${urlData?.href}" target="${urlData?.target}"
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../../helpers.js"),attrs=require("./common/attrs.js"),system=require("@gem-sdk/system"),styles=require("./common/styles.js"),classes=require("./common/classes.js"),styles$1=require("../contact/common/styles.js"),classes$1=require("../contact/common/classes.js");const Newsletter=({builderProps:e,setting:s,children:t,style:r,formType:a,advanced:l,pageContext:o,styles:c})=>{let i=helpers.getDynamicSourceLocales({val:s?.errorMessage,uid:e?.uid,settingId:"errorMessage",pageContext:o,defaultVal:o?.isPreviewing?`Can’t send email. Please try again later.`:helpers.getStaticLocale("Newsletter","err_msg_default"),translate:s?.translate}),m=helpers.getDynamicSourceLocales({val:s?.successMessage,uid:e?.uid,settingId:"successMessage",pageContext:o,defaultVal:o?.isPreviewing?"Thanks for subscribing":helpers.getStaticLocale("Newsletter","success_msg_default"),translate:s?.translate}),n=attrs.composeContainerAttrs(e,s),d=attrs.composeAnchorAttrs(e,s),p=system.createClass(classes.composeFormClasses()),y=system.createStyle(styles.composeFormStyles("error",s)),u=system.createStyle(styles.composeFormStyles("success",s)),g=attrs.composeFormAttrs(e,"error"),$=attrs.composeFormAttrs(e,"success"),f=attrs.composePopoverAttrs(e),v=styles.popoverStyles(e),S=system.createStyle(styles$1.composeContainerStyles(s,c,r)),h=system.createClass(classes$1.composeContainerClasses());return core.template`
+    <div class="${h}" style="${S}">
+      <gp-form
+        ${{...n}}
+        data-callback='${JSON.stringify(s?.callbackURL)}'
       >
-      </a>
-      {% form '${formType ? formType : 'customer'}', class: 'gp-form-${builderProps?.uid} ${advanced?.cssClass}', id: 'contact_form_${builderProps?.uid}' %}
-        {% if form.errors %}
-          <div
-            id="gp-form-error-${builderProps?.uid}"
-            class="gp-form-message ${core.cls('gp-hidden', 'gp-top-[27px]', 'gp-z-100', 'gp-fixed', 'gp-rounded', 'gp-p-[16px]', 'gp-text-[14px]', 'gp-leading-normal')}"
-            style="${{
-        'background-color': '#FFE9E9',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        color: '#EA3335'
-    }}"
-          >
-            ${errorMessage}
-          </div>
-        {% endif %}
-        <div popover id="my-popover-${builderProps?.uid}">
-        <style>
-            #my-popover-${builderProps?.uid}::backdrop {
-              width: fit-content;
-              height: fit-content;
-            }
-        </style>
-        <div
-          id="gp-form-success-${builderProps?.uid}"
-          class="gp-form-message ${core.cls('gp-hidden', 'gp-top-[27px]', 'gp-z-100', 'gp-fixed', 'gp-rounded', 'gp-p-[16px]', 'gp-text-[14px]', 'gp-leading-normal')}"
-          style="${{
-        'background-color': '#F2FFEC',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        color: '#52C41A'
-    }}"
+        <a
+          ${{...d}}
         >
-          ${successMessage}
-        </div></div>
-        ${children}
-      {% endform %}
-    </gp-form>
-    ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-form.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-form.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-exports.default = Newsletter;
+        </a>
+        {% form '${a||"customer"}', class: 'gp-form-${e?.uid} ${l?.cssClass}', id: 'contact_form_${e?.uid}' %}
+          {% if form.errors %}
+            <div
+              ${{...g}}
+              class="${p}"
+              style="${y}"
+            >
+              ${i}
+            </div>
+          {% endif %}
+          <div popover ${{...f}}>
+            <style>
+              ${v}
+            </style>
+            <div
+              ${{...$}}
+              class="${p}"
+              style="${u}"
+            >
+              ${m}
+            </div>
+          </div>
+          ${t}
+        {% endform %}
+      </gp-form>
+    </div>
+    ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-form-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-form-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};exports.default=Newsletter;

package/dist/cjs/form/components/newsletter/common/attrs.js

@@ -0,0 +1 @@
+"use strict";var helpers$1=require("../../../common/helpers.js"),helpers=require("../../../../helpers.js");const composeContainerAttrs=(t,e)=>composeAttribute({"data-id":t?.uid,id:t?.uid,"data-submit-action":e?.afterSubmitAction}),composeAnchorAttrs=(t,e)=>{let{urlData:o}=helpers.getInsertLinkData("",e?.callbackURL);return composeAttribute({hidden:!0,id:`gp-form-callback-${t?.uid}`,href:o?.href,target:o?.target})},composeFormAttrs=(t,e)=>"success"===e?composeAttribute({id:`gp-form-success-${t?.uid}`}):composeAttribute({id:`gp-form-error-${t?.uid}`}),composePopoverAttrs=t=>composeAttribute({id:`my-popover-${t?.uid}`}),composeAttribute=t=>helpers$1.filterTruthy(t);exports.composeAnchorAttrs=composeAnchorAttrs,exports.composeAttribute=composeAttribute,exports.composeContainerAttrs=composeContainerAttrs,exports.composeFormAttrs=composeFormAttrs,exports.composePopoverAttrs=composePopoverAttrs;

package/dist/cjs/form/components/newsletter/common/classes.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../common/helpers.js");const composeClasses=s=>helpers.filterTruthy(s),composeFormClasses=()=>composeClasses({"gp-form-message gp-hidden gp-top-[27px] gp-fixed gp-rounded gp-p-[16px] gp-text-[14px] gp-leading-normal gp-z-[100]":!0});exports.composeFormClasses=composeFormClasses;

package/dist/cjs/form/components/newsletter/common/styles.js

@@ -0,0 +1,6 @@
+"use strict";var helpers=require("../../../common/helpers.js");const composeStyles=o=>helpers.filterTruthy(o),composeFormStyles=(o,e)=>{let{errorColor:t,successColor:r}=e??{};return"success"===o?composeStyles({"background-color":"#F2FFEC",left:"50%",transform:"translateX(-50%)",color:r}):composeStyles({"background-color":"#FFE9E9",left:"50%",transform:"translateX(-50%)",color:t})},popoverStyles=o=>`
+    #my-popover-${o?.uid}::backdrop {
+      width: fit-content;
+      height: fit-content;
+    }
+  `;exports.composeFormStyles=composeFormStyles,exports.popoverStyles=popoverStyles;

package/dist/cjs/form/components/submit-button/SubmitButton.js

@@ -1,31 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../../../button/components/Button.js');
-
-const SubmitButton = ({ setting, builderProps, builderAttrs, style, styles, advanced, children })=>{
-    const { ...buttonStyles } = styles ?? {};
-    const { label, iconSvg, iconAlign, iconVisible, shouldClearSpace } = setting ?? {};
-    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: /*#__PURE__*/ jsxRuntime.jsx(Button.default, {
-            builderProps: builderProps,
-            builderAttrs: builderAttrs,
-            advanced: advanced,
-            setting: {
-                label,
-                htmlType: 'submit',
-                iconAlign: iconAlign,
-                iconSvg: iconSvg,
-                iconVisible: iconVisible,
-                shouldClearSpace
-            },
-            style: style,
-            styles: buttonStyles,
-            children: children
-        })
-    });
-};
-
-exports.default = SubmitButton;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),Button=require("../../../button/components/Button.js"),helpers=require("./common/helpers.js"),system=require("@gem-sdk/system"),styles=require("./common/styles.js");const SubmitButton=({setting:e,builderProps:t,builderAttrs:s,style:r,styles:u,advanced:o,children:n})=>{let{...l}=u??{},i=helpers.composeSetting(e),m=system.createStyle(styles.composeContainerStyles(u,r));return jsxRuntime.jsx(Button.default,{builderProps:t,builderAttrs:s,advanced:o,setting:i,style:m,styles:l,children:n})};exports.default=SubmitButton;

package/dist/cjs/form/components/submit-button/SubmitButton.liquid.js

@@ -1,34 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var Button_liquid = require('../../../button/components/Button.liquid.js');
-
-const SubmitButton = ({ setting, builderProps, builderAttrs, style, styles, advanced, pageContext })=>{
-    const { ...buttonStyles } = styles ?? {};
-    const { label, iconSvg, iconAlign, iconVisible, translate } = setting ?? {};
-    return core.template`
-    ${Button_liquid.default({
-        builderProps: builderProps,
-        builderAttrs: builderAttrs,
-        setting: {
-            label: label,
-            htmlType: 'submit',
-            iconAlign: iconAlign,
-            iconSvg: iconSvg,
-            iconVisible: iconVisible,
-            translate
-        },
-        style: {
-            ...style,
-            ...core.makeStyleResponsive('ta', styles?.align)
-        },
-        styles: buttonStyles,
-        advanced,
-        pageContext
-    })}
-  `;
-};
-
-exports.default = SubmitButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Button_liquid=require("../../../button/components/Button.liquid.js"),helpers=require("./common/helpers.js"),styles=require("./common/styles.js"),system=require("@gem-sdk/system");const SubmitButton=({setting:e,builderProps:t,builderAttrs:s,style:r,styles:o,advanced:u,pageContext:l})=>{let{...i}=o??{},n=helpers.composeSetting(e),m=system.createStyle(styles.composeContainerStyles(o,r));return core.template`
+    ${Button_liquid.default({builderProps:t,builderAttrs:s,setting:n,style:m,styles:i,advanced:u,pageContext:l})}
+  `};exports.default=SubmitButton;

package/dist/cjs/form/components/submit-button/common/helpers.js

@@ -0,0 +1 @@
+"use strict";const composeSetting=t=>{let{label:e,iconSvg:i,iconAlign:o,iconVisible:n,translate:s,enableHoverEffect:c}=t??{};return{label:e,htmlType:"submit",iconAlign:o,iconSvg:i,iconVisible:n,translate:s,enableHoverEffect:c}};exports.composeSetting=composeSetting;

package/dist/cjs/form/components/submit-button/common/styles.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../common/helpers.js"),core=require("@gem-sdk/core");const composeStyles=e=>helpers.filterTruthy(e),composeContainerStyles=(e,o)=>composeStyles({...o,...core.makeStyleResponsive("ta",e?.align)});exports.composeContainerStyles=composeContainerStyles;