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

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

@@ -0,0 +1 @@
+let filterTruthy=t=>Object.fromEntries(Object.entries(t||{}).filter(([,t])=>!!t));export{filterTruthy};

package/dist/esm/form/components/contact/Contact.js

@@ -1,11 +1,2 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { isEmptyChildren } from '@gem-sdk/core';
-import ChildrenDroppable from '../../../grid/components/ChildrenDroppable.js';
-
-const ContactForm = ({ children })=>{
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : children
-    });
-};
-
-export { ContactForm as default };
+'use client';
+import{jsx as o}from"react/jsx-runtime";import{isEmptyChildren as m}from"@gem-sdk/core";import r from"../../../grid/components/ChildrenDroppable.js";import{composeContainerStyles as t}from"./common/styles.js";import{createStyle as e,createAttr as s,createClass as i}from"@gem-sdk/system";import{composeContainerAttrs as n}from"../newsletter/common/attrs.js";import{composeContainerClasses as c}from"./common/classes.js";let ContactForm=({children:l,styles:p,setting:a,style:d,builderAttrs:f,builderProps:j})=>{let u=e(t(a,p,d)),g=s({...n({uid:j?.uid||""},a)}),y=i(c());return o("div",{className:y,...g,...f,style:u,children:m(l)?o(r,{}):l})};export{ContactForm as default};

package/dist/esm/form/components/contact/Contact.liquid.js

@@ -1,18 +1,3 @@
-import { template } from '@gem-sdk/core';
-import Newsletter from '../newsletter/Newsletter.liquid.js';
-
-const ContactForm = ({ builderProps, setting, children, style, advanced, pageContext })=>{
-    return template`
-    ${Newsletter({
-        builderProps: builderProps,
-        setting: setting,
-        style: style,
-        children: children,
-        formType: 'contact',
-        advanced,
-        pageContext
-    })}
-  `;
-};
-
-export { ContactForm as default };
+import{template as t}from"@gem-sdk/core";import e from"../newsletter/Newsletter.liquid.js";let ContactForm=({builderProps:r,setting:o,children:l,style:m,advanced:s,pageContext:i,styles:c})=>t`
+      ${e({builderProps:r,setting:o,style:m,children:l,formType:"contact",advanced:s,pageContext:i,styles:c})}
+  `;export{ContactForm as default};

package/dist/esm/form/components/contact/common/classes.js

@@ -0,0 +1 @@
+import{filterTruthy as s}from"../../../common/helpers.js";let composeClasses=o=>s(o),composeContainerClasses=()=>composeClasses({"gp-mx-auto gp-max-w-full":!0});export{composeContainerClasses};

package/dist/esm/form/components/contact/common/styles.js

@@ -0,0 +1 @@
+import{filterTruthy as e}from"../../../common/helpers.js";import{makeGlobalSize as o,composeBorderResponsive as t,getStyleBackgroundByDevice as r,getGradientBgrStyleByDevice as m}from"@gem-sdk/core";let composeStyles=o=>e(o),composeContainerStyles=(e,s,p)=>{let{background:i}=e??{},{globalSize:l}=s??{},n=o({...l});return composeStyles({...n?.width?.["--w"]?n.width:{"--w":"100%"},...n.padding,...t(s?.border),...r(i),...m(i),...p})};export{composeContainerStyles};

package/dist/esm/form/components/form-checkbox/FormCheckbox.js

@@ -1,48 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, makeStyle, getGlobalColorCSSProp, cls, getGlobalColorClass } from '@gem-sdk/core';
-import { useMemo } from 'react';
-
-const FormCheckbox = ({ builderProps, setting })=>{
-    const { name, description, selected, horizontalSpacing, align, typography, textColor } = setting ?? {};
-    const appendTypoClass = useMemo(()=>composeTypographyClassName(setting?.typo, typography), [
-        setting?.typo,
-        typography
-    ]);
-    const appendTypoStyle = useMemo(()=>composeTypographyStyle(setting?.typo, typography), [
-        setting?.typo,
-        typography
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        "data-id": builderProps?.uid,
-        style: {
-            ...makeStyleResponsive('ta', align)
-        },
-        children: /*#__PURE__*/ jsxs("label", {
-            style: {
-                ...makeStyle({
-                    c: getGlobalColorCSSProp(textColor)
-                }),
-                ...appendTypoStyle
-            },
-            className: cls(builderProps?.uid, 'gp-flex gp-items-center', appendTypoClass, getGlobalColorClass('text', textColor)),
-            children: [
-                /*#__PURE__*/ jsx("input", {
-                    className: "gp-h-[20px] gp-w-[20px]",
-                    name: name,
-                    type: "checkbox",
-                    checked: selected,
-                    onChange: (e)=>e.preventDefault
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: "gp-w-[calc(100%_-_20px)]",
-                    style: {
-                        ...makeStyleResponsive('pl', horizontalSpacing)
-                    },
-                    children: description
-                })
-            ]
-        })
-    });
-};
-
-export { FormCheckbox as default };
+'use client';
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{createStyle as t,createClass as m}from"@gem-sdk/system";import{composeContainerStyles as r,composeFormCheckboxStyles as o,composeFormCheckboxInputStyles as l,getComposedTextStyle as a}from"./common/styles.js";import{composeContainerClasses as c,composeFormCheckboxInputClasses as i,composeFormCheckboxLabelClasses as n}from"./common/classes.js";let FormCheckbox=({builderProps:d,setting:p,advanced:h,styles:u})=>{let{name:y,description:f,selected:k,required:x}=p??{},b=t(r(p)),j=t(o(p,u,d)),C=t(l()),N=t(a(p)),g=m(c(p,h,d)),v=m(i()),F=m(n());return e("div",{"data-id":d?.uid,style:b,children:s("label",{style:j,className:g,children:[e("input",{className:v,name:y,type:"checkbox",checked:k,required:x,onChange:e=>e.preventDefault,style:C}),e("span",{className:F,style:N,children:f})]})})};export{FormCheckbox as default};

package/dist/esm/form/components/form-checkbox/FormCheckbox.liquid.js

@@ -1,57 +1,24 @@
-import { composeMemo, composeTypographyClassName, composeTypographyStyle, template, makeStyleResponsive, makeStyle, getGlobalColorCSSProp, cls, getGlobalColorClass } from '@gem-sdk/core';
-import { getDynamicSourceLocales } from '../../../helpers.js';
-
-const FromCheckbox = ({ builderProps, setting, advanced, pageContext })=>{
-    const { name, description, selected, required, horizontalSpacing, align, typography, textColor, translate } = setting ?? {};
-    const appendTypoClass = composeMemo(()=>composeTypographyClassName(setting?.typo, typography));
-    const appendTypoStyle = composeMemo(()=>composeTypographyStyle(setting?.typo, typography));
-    const descriptionDisplay = getDynamicSourceLocales({
-        val: description,
-        uid: builderProps?.uid,
-        settingId: 'description',
-        pageContext,
-        translate
-    });
-    return template`
+import{template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as s}from"../../../helpers.js";import{createStyle as t,createClass as o,If as m}from"@gem-sdk/system";import{composeContainerStyles as r,composeFormCheckboxStyles as l,composeFormCheckboxInputStyles as i,getComposedTextStyle as a}from"./common/styles.js";import{composeContainerClasses as c,composeFormCheckboxInputClasses as d,composeFormCheckboxLabelClasses as p}from"./common/classes.js";let FromCheckbox=({builderProps:$,setting:n,advanced:u,pageContext:y,styles:f})=>{let{name:k,description:b,selected:h,required:x,translate:g}=n??{},j=s({val:b,uid:$?.uid,settingId:"description",pageContext:y,translate:g}),v=t(r(n)),C=t(l(n,f,$)),F=t(i()),q=t(a(n)),I=o(c(n,u,$)),w=o(d()),z=o(p());return e`
     <div
-    data-id="${builderProps?.uid}"
-      style="${{
-        ...makeStyleResponsive('ta', align)
-    }}"
+      data-id="${$?.uid}"
+      style="${v}"
     >
       <label
-        style="${{
-        ...makeStyle({
-            c: getGlobalColorCSSProp(textColor)
-        }),
-        ...appendTypoStyle
-    }}"
-        class="${cls(builderProps?.uid, advanced?.cssClass, 'gp-flex gp-items-center', appendTypoClass, getGlobalColorClass('text', textColor), '!gp-normal-case')}"
+        style="${C}"
+        class="${I}"
       >
         <input
-          name="${name}"
+          class="${w}"
+          name="${k}"
           type="checkbox"
-          {% if ${selected} %}
-          checked
-          {% endif %}
-          {% if ${required} %}
-          required
-          {% endif %}
-          class="gp-h-[20px] gp-w-[20px] !gp-inline-block !gp-static"
-          style="appearance: auto"
+          ${m(h,"checked")}
+          ${m(x,"required")}
+          style="${F}"
         >
         </input>
-        <span
-          class="gp-w-[calc(100%_-_20px)]"
-          style="${{
-        ...makeStyleResponsive('pl', horizontalSpacing)
-    }}"
-        >
-          ${descriptionDisplay}
+        <span class="${z}" style="${q}">
+          ${j}
         </span>
       </label>
     </div>
-  `;
-};
-
-export { FromCheckbox as default };
+  `};export{FromCheckbox as default};

package/dist/esm/form/components/form-checkbox/common/classes.js

@@ -0,0 +1 @@
+import{filterTruthy as s}from"../../../common/helpers.js";import{composeTypographyClassName as e}from"@gem-sdk/core";let composeClasses=e=>s(e),composeContainerClasses=(s,o,p)=>{let{typography:c}=s??{},l=e(s?.typo,c);return composeClasses({[p?.uid]:!!p?.uid,[o?.cssClass]:!!o?.cssClass,"gp-flex gp-flex-wrap gp-items-center":!0,[l]:!!l})},composeFormCheckboxInputClasses=()=>composeClasses({"gp-h-[20px] gp-w-[20px] !gp-inline-block !gp-static":!0}),composeFormCheckboxLabelClasses=()=>composeClasses({"w-auto":!0,"gp-w-[calc(100%_-_20px)]":!0});export{composeContainerClasses,composeFormCheckboxInputClasses,composeFormCheckboxLabelClasses};

package/dist/esm/form/components/form-checkbox/common/styles.js

@@ -0,0 +1 @@
+import{filterTruthy as e}from"../../../common/helpers.js";import{makeStyleResponsive as o,composeTypographyStyle as t,makeGlobalSize as s,getStyleBackgroundByDevice as m,makeStyle as p,getBorderStyle as l,getBorderRadiusStyle as r,getStyleShadow as c}from"@gem-sdk/core";import{overwriteDefaultRadius as a}from"../../../../image/common/helpers.js";let composeStyles=o=>e(o),composeContainerStyles=e=>composeStyles({...o("ta",e?.align)}),composeFormCheckboxStyles=(e,o,n)=>{let{typography:d,horizontalSpacing:y}=e??{},{wrapperBorder:S,borderRadius:i,shadow:h,globalSize:u}=o??{},b=t(e?.typo,d),g=s(u);return composeStyles({...g?.width?.["--w"]?g.width:{"--w":"100%"},...b,...m(e?.background),...p({cg:y}),...l(S),...r(i),...a(n?.builderData?.advanced?.rounded),...c({value:h,styleAppliedFor:"box-shadow",isEnableShadow:h?.type!=="none"}),...g.padding})},composeFormCheckboxInputStyles=()=>composeStyles({appearance:"auto"}),getComposedTextStyle=e=>{let{horizontalSpacing:t}=e??{};return composeStyles({...o("pl",t)})};export{composeContainerStyles,composeFormCheckboxInputStyles,composeFormCheckboxStyles,getComposedTextStyle};

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

@@ -1,69 +1,2 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyClassName, composeTypographyStyle, cls, genSizeClass, composeSize } from '@gem-sdk/core';
-import { useMemo } from 'react';
-
-const FormDropdown = ({ builderProps, builderAttrs, setting, advanced, children })=>{
-    const { name, childItem, typography, align, width, fullWidth, size } = setting ?? {};
-    const inputWidth = makeStyleResponsive('w', 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 = composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = useMemo(()=>composeTypographyClassName(setting?.typo, typography), [
-        setting?.typo,
-        typography
-    ]);
-    const appendTypoStyle = useMemo(()=>composeTypographyStyle(setting?.typo, typography), [
-        setting?.typo,
-        typography
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        ...builderAttrs,
-        "data-id": builderProps?.uid,
-        className: cls(builderProps?.uid),
-        style: {
-            ...wrapStyle,
-            ...makeStyleResponsive('ta', align)
-        },
-        children: [
-            /*#__PURE__*/ jsx("select", {
-                className: cls(appendTypoClass, size?.type ? genSizeClass(size.type) : '', 'gp-cursor-default', 'gp-outline-none'),
-                style: {
-                    ...inputWidth,
-                    ...inputStyle,
-                    ...!size?.type ? 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__*/ jsx("option", {
-                        value: item,
-                        children: item
-                    }, index))
-            }),
-            children
-        ]
-    });
-};
-
-export { FormDropdown as default };
+'use client';
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{createStyle as t,createClass as r,If as s}from"@gem-sdk/system";import{composeContainerStyles as l,composeFormDropdownStyles as m,getStyleOption as d}from"./common/styles.js";import{composeContainerClasses as a,composeFormDropdownClasses as i}from"./common/classes.js";import{useGetColorContent as n}from"../../hooks/useGetColorContent.js";let FormDropdown=({builderProps:p,builderAttrs:c,setting:u,advanced:f,children:h,styles:N})=>{let{name:y,childItem:b,required:j}=u??{},{handleOnChange:g,getTextColor:v}=n(u),C=t(l(f,u)),O=t({...m(f,u,N),...v}),k=t(d(u)),w=r(a(f,p)),x=r(i(u));return e("div",{...c,"data-id":p?.uid,className:w,style:C,children:[e("select",{className:x,style:O,required:j,name:y,onChange:g,children:[s(!Number(u?.defaultOption),o("option",{className:"gp-hidden",value:"",disabled:!0,selected:!0,children:u?.placeholder})),b?.map((e,t)=>o("option",{value:e,style:k,...!!Number(u?.defaultOption)&&{selected:e===b[Number(u?.defaultOption)-1]},children:e},t))]}),h]})};export{FormDropdown as default};

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

@@ -1,75 +1,29 @@
-import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeMemo, composeTypographyClassName, composeTypographyStyle, template, cls, genSizeClass, composeSize } from '@gem-sdk/core';
-import { getDynamicSourceLocales } from '../../../helpers.js';
-
-const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
-    const { name, childItem, typography, align, width, fullWidth, size, required, translate } = setting ?? {};
-    const inputWidth = makeStyleResponsive('w', 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 = composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = composeMemo(()=>composeTypographyClassName(setting?.typo, typography));
-    const appendTypoStyle = composeMemo(()=>composeTypographyStyle(setting?.typo, typography));
-    const childItemVal = childItem?.map((item, index)=>getDynamicSourceLocales({
-            val: item,
-            uid: builderProps?.uid,
-            settingId: `childItem_${index}`,
-            pageContext,
-            translate
-        }));
-    return template`
-    <div
-    data-id="${builderProps?.uid}"
-      class="${cls(builderProps?.uid, advanced?.cssClass)}"
-      style="${{
-        ...wrapStyle,
-        ...makeStyleResponsive('ta', align)
-    }}"
+import{template as e,RenderIf as s,isLocalEnv as o,baseAssetURL as r}from"@gem-sdk/core";import{getDynamicSourceLocales as t,getSettingPreloadData as d}from"../../../helpers.js";import{createStyle as l,createClass as p,If as i}from"@gem-sdk/system";import{composeContainerStyles as m,composeFormDropdownStyles as a,getAppendTypoStyleFirstTime as n,getStyleOption as c}from"./common/styles.js";import{composeContainerClasses as $,composeFormDropdownClasses as f}from"./common/classes.js";let FormDropdown=({builderProps:u,setting:g,advanced:y,pageContext:v,styles:j})=>{let{name:w,childItem:S,required:h,translate:N}=g??{},O=S?.map((e,s)=>t({val:e,uid:u?.uid,settingId:`childItem_${s}`,pageContext:v,translate:N})),b=l(m(y,g)),k=l({...a(y,g,j),...n(g)}),E=l(c(g)),A=p($(y,u)),I=p(f(g));return e`
+    <gp-form-dropdown
+      data-id="${u?.uid}"
+      class="${A}"
+      style="${b}"
     >
       <select
         type="email"
-        class="gp-form-item ${cls(appendTypoClass, size?.type ? `!${genSizeClass(size.type)}` : '', '!gp-outline-none !gp-h-auto focus:!gp-shadow-none hover:!gp-shadow-none')}"
-        style="${{
-        ...inputWidth,
-        ...inputStyle,
-        ...!size?.type ? 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="${I}"
+        style="${k}"
+        ${i(h,"required")}
+        name="${w}"
+        gp-data='${JSON.stringify(g).replaceAll("'","&#039;")}'
       >
-        ${childItemVal?.map((item)=>template /* liquid */ `
+        ${i(!Number(g?.defaultOption),`<option class="gp-hidden" value="" disabled selected>
+            ${g?.placeholder}
+          </option>`)}
+        ${O?.map(s=>e`
             <option
-              value="${item}"
+              value="${s}"
+              style="${E}"
+              ${i(!!Number(g?.defaultOption),`selected: ${s===O[Number(g?.defaultOption)-1]}`)}
             >
-              ${item}
-            </option>`).join('')}
+              ${s}
+            </option>`).join("")}
       </select>
-    </div>
-  `;
-};
-
-export { FormDropdown as default };
+    </gp-form-dropdown>
+    ${s(o,`<script ${d('class="gps-link" delay',"src")}="{{ 'gp-form-dropdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${d('class="gps-link" delay',"src")}="${r}/assets-v2/gp-form-dropdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{FormDropdown as default};

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

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

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

@@ -0,0 +1 @@
+import{filterTruthy as e}from"../../../common/helpers.js";import{composeAdvanceStyle as t,makeStyleResponsive as o,makeGlobalSize as r,composeSize as p,getStyleBackgroundByDevice as s,composeTypographyStyle as n}from"@gem-sdk/core";let composeStyles=t=>e(t),composeContainerStyles=(e,r)=>{let{pos:p,d:s,op:n,right:i,top:g,left:l,bottom:c,z:a,padding:m,margin:y}=e??{},d=e?.["spacing-setting"],h=t({pos:p,d:s,op:n,right:i,top:g,left:l,bottom:c,z:a,margin:y,padding:m,"spacing-setting":d});return composeStyles({...h,...o("ta",r?.align)})},composeFormDropdownStyles=(e,o,n)=>{let{border:i,rounded:g,hasBoxShadow:l,boxShadow:c}=e??{},{background:a,size:m}=o??{},{globalSize:y,backgroundColorV2Active:d}=n??{},h=t({border:i,rounded:g,hasBoxShadow:l,boxShadow:c}),u=r(y);return composeStyles({...u?.width?.["--w"]?u.width:{"--w":"100%"},...u?.height?.["--h"]?u.height:{"--h":"auto"},...u.padding,...h,...m?.type?{}:p(m?.custom),appearance:"none",...s(a,{ignoreBackgroundImageProperties:!0}),"--bgi":getBgImageUrl(a?.desktop?.color),"background-repeat":"no-repeat","background-position":"right 10px center, 0 0","--focus-bgi":getBgImageUrl(d?.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 t=n(e?.typo,e?.typography);return composeStyles({...t,...!Number(e?.defaultOption)&&{"--c":e?.placeholderColor}})},getStyleOption=e=>{let{typography:t,typo:o}=e??{},r=n(o,t);return composeStyles({...r})};export{composeContainerStyles,composeFormDropdownStyles,getAppendTypoStyleFirstTime,getStyleOption};

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

@@ -1,56 +1,2 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyClassName, composeTypographyStyle, cls, genSizeClass, composeSize } from '@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 = makeStyleResponsive('w', 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 = composeAdvanceStyle({
-        border,
-        rounded,
-        hasBoxShadow,
-        boxShadow
-    });
-    const wrapStyle = composeAdvanceStyle({
-        pos,
-        d,
-        op,
-        right,
-        top,
-        left,
-        bottom,
-        z,
-        margin,
-        padding,
-        'spacing-setting': spacingSetting
-    });
-    const appendTypoClass = composeTypographyClassName(setting?.typo, typography);
-    const appendTypoStyle = composeTypographyStyle(setting?.typo, typography);
-    return /*#__PURE__*/ jsxs("div", {
-        ...builderAttrs,
-        "qdata-id": builderProps?.uid,
-        className: cls(builderProps?.uid),
-        style: {
-            ...wrapStyle,
-            ...makeStyleResponsive('ta', align)
-        },
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                className: cls(appendTypoClass, size?.type ? genSizeClass(size.type) : '', 'gp-cursor-default', 'focus:gp-outline-none', hideOnClient ? 'gp-opacity-50' : ''),
-                style: {
-                    ...appendTypoStyle,
-                    ...!size?.type ? composeSize(size?.custom) : {},
-                    ...inputWidth,
-                    ...inputStyle
-                },
-                placeholder: placeholder,
-                name: name
-            }),
-            children
-        ]
-    });
-};
-
-export { FormEmail as default };
+'use client';
+import{jsxs as e,jsx as m}from"react/jsx-runtime";import{createStyle as t,createClass as a,If as r}from"@gem-sdk/system";import{composeContainerStyles as s,composeInnerStyles as l}from"./common/styles.js";import{composeContainerClasses as o,composeInnerClasses as i,getClassTitle as c}from"./common/classes.js";let FormEmail=({builderProps:p,builderAttrs:d,setting:n,advanced:u,children:y,styles:f})=>{let{placeholder:h,required:j,title:N,showTitle:x}=n??{},E=t(s(n,u)),F=t(l(n,u,f)),g=a(o({setting:n,advanced:u,builderProps:p,type:"react"})),k=a(i(n,p)),q=a(c());return e("div",{...d,"data-id":p?.uid,className:g,style:E,children:[r(x,m("span",{className:q,children:N})),m("input",{type:"email",className:k,style:F,placeholder:h,name:"contact[email]",required:j,autoComplete:"email"}),y]})};export{FormEmail as default};

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

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

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

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

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

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

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

@@ -1,11 +1,2 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { isEmptyChildren } from '@gem-sdk/core';
-import ChildrenDroppable from '../../../grid/components/ChildrenDroppable.js';
-
-const Newsletter = ({ children })=>{
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : children
-    });
-};
-
-export { Newsletter as default };
+'use client';
+import{jsx as t}from"react/jsx-runtime";import{isEmptyChildren as r}from"@gem-sdk/core";import e from"../../../grid/components/ChildrenDroppable.js";import{createStyle as o,createAttr as m,createClass as s}from"@gem-sdk/system";import{composeContainerStyles as i}from"../contact/common/styles.js";import{composeContainerAttrs as c}from"./common/attrs.js";import{composeContainerClasses as a}from"../contact/common/classes.js";let getAttr=({uid:t})=>({"data-id":t}),Newsletter=({children:l,setting:d,styles:n,style:p,builderAttrs:f,builderProps:g})=>{let j=o(i(d,n,p)),u=m({...c({uid:g?.uid||""},d)}),y=s(a());return t("div",{className:y,...u,...f,style:j,children:r(l)?t(e,{}):l})};export{Newsletter as default,getAttr};