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

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

@@ -0,0 +1,22 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),Link=require("../../link/components/Link.js"),constant=require("../../constant.js"),styles=require("./styles.js");const getCleanedStyles=(e,t)=>{if(!t)return e;let l={...e},a=["hover","focus"];return a.forEach(e=>{delete l?.backgroundColorV2?.[e]}),l},handleGetLabelToDisplay=({label:e,styles:t,translate:l,pageContext:a,isUseTranslatedValue:s,builderProps:r,isLiquid:o=!1})=>{let n=s?helpers.getDynamicSourceLocales({translate:l,val:e,pageContext:a,settingId:l??"label",uid:r?.uidTranslate??r?.uid,isCapitalize:t?.typo?.attrs?.transform==="capitalize"}):e;return o?n?.toString()??"":core.convertHTML(e)},checkIsShowIcon=(e,t)=>!!e&&t,handleCheckIsShowLabel=(e,t)=>!!e||!t,handleCheckIsEditableLabel=({mode:e,options:t,isLiquid:l=!1})=>l?!t?.isCannotEditing:"edit"===e&&!t?.isCannotEditing,checkIsScrollToElement=e=>!!e?.link?.startsWith("#")&&("_self"===e.target||"scroll-to"===e.type),getSplitStyles=e=>core.splitStyle(["pos","top","left","bottom","right","z"],e),getDataState=e=>e?"loading":"idle",getDataId=(e,t,l)=>e??(t||l)??"",handleGetArialLabel=({label:e,isLiquid:t=!1})=>t?e?.toString().replaceAll("'","'").replaceAll('"',"'")??"":e?.toString()??"",getInsertLinkData=({setting:e,htmlType:t,defaultTag:l,enableBtnLink:a,isLiquid:s=!1,pageType:r})=>{let o=["product.url"],n=["#","mailto:","tel:"],i=e?.link??"",c="/"===i,p=e?.link!==void 0&&""!==e.link,h=new RegExp(/^https?:\/\//i),g=p&&h.test(i),d=new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart)\/?/i),u=p&&!h.test(i)&&d.test(i),I=()=>{if(o.find(e=>i.includes(e)))return!0;let t=n.find(e=>i.startsWith(e));return!(!t||helpers.checkIsScrollToTop(e)||"STATIC"===r&&helpers.checkIsOpenPopup(e))},S=helpers.isLinkedToSalesPage(e?.type),k=!!a&&(g||u||I()||c||S),b=i;s&&(u||c)&&(b=e?.isTranslate?"$locationOrigin"+i:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+i);let y=k?s?"a":Link.default:l,L={href:b,target:e?.target,...e?.noFollow&&{rel:"nofollow"}},C=k?L:p?{...L,type:t}:{type:t};return S&&(C={href:constant.HREF_TO_SALES_PAGE,target:"_self"}),{HTMLTag:y,urlData:C,shouldRenderLink:k}},getData=e=>{let{style:t,dataId:l,pageContext:a,styles:s={},setting:r={},builderProps:o,builderAttrs:n,isUseTranslatedValue:i=!0}=e,{label:c,iconSvg:p,btnLink:h,loading:g,options:d,disabled:u,translate:I,iconVisible:S,shouldClearSpace:k}=r,[b,y]=getSplitStyles(t),L=getCleanedStyles(s,u),C=styles.getCustomCssStyles({styles:s,uid:o?.uid,builderAttrs:n,enableHoverEffect:r.enableHoverEffect??!0}),D=getDataState(g),f=getDataId(o?.uidInteraction,l,o?.uid),T=e=>{let{isLiquid:t}=e??{};return handleGetArialLabel({label:c,isLiquid:t})},w=e=>{let{isLiquid:t}=e??{};return handleGetLabelToDisplay({label:c,builderProps:o,styles:L,isLiquid:t,...t&&{translate:I},...t&&{pageContext:a},...t&&{isUseTranslatedValue:i}})},x=e=>{let{isLiquid:t}=e??{},l=w({isLiquid:t});return handleCheckIsShowLabel(l,k)},E=e=>{let{isLiquid:t,mode:l}=e??{};return handleCheckIsEditableLabel({options:d,isLiquid:t,...!t&&l&&{mode:l}})},A=checkIsShowIcon(p,S),m=checkIsScrollToElement(h);return{customCss:C,wrapStyle:b,restStyle:y,dataState:D,dataIdAttr:f,isShowIcon:A,isScrollToElement:m,getArialLabel:T,getLabelToDisplay:w,checkIsShowLabel:x,checkIsEditableLabel:E}},LOADING_INDICATOR=`
+  <svg
+    class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]:gp-animate-spin group-data-[state=loading]:gp-visible"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="gp-opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="gp-opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+`;exports.LOADING_INDICATOR=LOADING_INDICATOR,exports.checkIsScrollToElement=checkIsScrollToElement,exports.checkIsShowIcon=checkIsShowIcon,exports.getCleanedStyles=getCleanedStyles,exports.getData=getData,exports.getDataId=getDataId,exports.getDataState=getDataState,exports.getInsertLinkData=getInsertLinkData,exports.getSplitStyles=getSplitStyles,exports.handleCheckIsEditableLabel=handleCheckIsEditableLabel,exports.handleCheckIsShowLabel=handleCheckIsShowLabel,exports.handleGetArialLabel=handleGetArialLabel,exports.handleGetLabelToDisplay=handleGetLabelToDisplay;

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

@@ -0,0 +1,32 @@
+"use strict";var core=require("@gem-sdk/core");const getButtonWrapperStyles=(e,t)=>({...e,...core.makeStyleResponsive("ta",t?.align)}),getButtonStyles=(e,t)=>{let o={...getSizeStyles(e),...getRadiusStyles(e),...getShadowStyles(e),...getBackgroundStyles(e),...getTypographyStyles(e).textColorStyle,...getTypographyStyles(e).withoutTextColorStyles};return t?o:core.filterHoverVariables(o)},getButtonIconStyles=(e,t)=>({...getIconSpacingStyle(e,t),"--height-desktop":`${e?.size?.desktop}`,"--height-tablet":`${e?.size?.desktop||e?.size?.tablet}`,"--height-mobile":`${e?.size?.mobile||e?.size?.tablet||e?.size?.desktop}`}),ignoreStateNoneValue=(obj,condition)=>Object.entries(obj).reduce((acc,[key,value])=>((!["hover","focus","normal","active"].includes(key)||eval(condition))&&(acc[key]=value),acc),{}),getShadowStyles=e=>{let{boxShadowBtn:t,hasBoxShadowBtn:o}=e||{},r=ignoreStateNoneValue(t||{},"value?.type !== undefined ");return{...core.getStyleShadowState(r,"box-shadow",o)}},getRadiusStyles=e=>{let t=ignoreStateNoneValue(e?.roundedBtnV2||{},"value?.radiusType !== undefined");return core.composeRadius(t)},getIconSpacingStyle=(e,t)=>{let o=e?.iconSpacing||{desktop:"8px"};return t?.iconAlign==="left"?core.makeStyleResponsive("mr",o):core.makeStyleResponsive("ml",o)},getSizeStyles=e=>{let t=core.makeGlobalSize(e?.globalSize);return{...t.width,...t.height,...t.padding}},getTypographyStyles=e=>{let t=core.composeTypographyStyle(e?.typo,e?.typography),o={"--c":t?.["--c"]},r={...t};return delete r["--c"],{textColorStyle:{"--hvr-c":core.getColor(e?.textColor?.hover),...o},withoutTextColorStyles:r}},getTypoStyles=e=>({...getTypographyStyles(e).withoutTextColorStyles,...core.getStyleShadow({styleAppliedFor:"text-shadow",value:e?.typo?.custom?.textShadow,isEnableShadow:e?.typo?.custom?.hasShadowText}),"word-break":"break-word"}),getBgImageUrl=(e,t)=>{let{backgroundImage:o,backgroundColorV2:r}=e||{},s=o?.[t],a=r?.[t];if(!s&&!a)return"";let l=`url(${s?.image?.src})`,n=a?`, ${a}`:"";return a?.includes?.(core.GRADIENT_BGR_KEY)&&s?.image?.src?`${l}${n}`:a?.includes?.(core.GRADIENT_BGR_KEY)&&!s?.image?.src?a:s?.image?.src?l:""},getBackgroundImageSource=e=>{let t={normal:getBgImageUrl(e,"normal"),hover:getBgImageUrl(e,"hover")};return core.makeStyleState("bgi",t)},getBackgroundStyles=e=>{let{backgroundColorV2:t,backgroundImage:o}=e||{},r={...o,hover:o?.hover?.image?o?.hover:o?.normal},s={...t,hover:t?.hover||t?.normal};return{...core.getStyleBackgroundImage(r,{ignoreBackgroundImage:!0}),...getBackgroundImageSource({backgroundImage:r,backgroundColorV2:s}),...core.getGlobalColorStateStyle("bg",s)}},getCustomCssStyles=({styles:e,uid:t,builderAttrs:o,enableHoverEffect:r})=>{if(!t)return"";let{borderBtnV2:s,roundedBtnV2:a}=e??{},l=ignoreStateNoneValue(s||{},"value?.border !== undefined"),n=ignoreStateNoneValue(a||{},"value?.radiusType !== undefined"),g=generateBorderCornerStyles({uid:t,borderBtn:l,roundedBtn:n,builderAttrs:o,enableHoverEffect:r});return`
+      ${g.normalStyles}
+      ${g.hoverStyles}
+    `.trim()},generateBorderCornerStyles=({uid:e,borderBtn:t,roundedBtn:o,builderAttrs:r,enableHoverEffect:s})=>{let a=r?.["data-component-tag"],l=({styleObj:e,state:t})=>{if(e)return e?.[t]},n=l({styleObj:t,state:"normal"}),g=l({styleObj:s?t:void 0,state:"hover"}),d=l({styleObj:o,state:"normal"}),i=l({styleObj:o,state:"hover"}),u=`
+    content: "";
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    ${core.composeBorderCss(n)}
+    ${core.composeCornerCss(d)}
+  `,c=`
+    [data-id="${e}"].gp-button-base::before, [data-id="${e}-interaction"].gp-button-base::before {
+      ${u}
+    }
+  `,y=`
+  [data-id="${e}"]:hover::before, [data-id="${e}-interaction"]:hover::before {
+    ${core.composeBorderCss(g)}
+    ${core.composeCornerCss(i)}
+  }
+`;if("ProductButton"===a){let t=r?.["data-is-in-stock"]??!1;c=`
+      [data-is-in-stock="${t}"]>.${e}.gp-button-base::before {
+        ${u}
+      }
+    `,y=`
+    [data-is-in-stock="${t}"]>.${e}.gp-button-base:hover::before {
+      ${core.composeBorderCss(g)}
+      ${core.composeCornerCss(i)}
+    }
+  `}return{normalStyles:c,hoverStyles:y}};exports.generateBorderCornerStyles=generateBorderCornerStyles,exports.getButtonIconStyles=getButtonIconStyles,exports.getButtonStyles=getButtonStyles,exports.getButtonWrapperStyles=getButtonWrapperStyles,exports.getCustomCssStyles=getCustomCssStyles,exports.getRadiusStyles=getRadiusStyles,exports.getShadowStyles=getShadowStyles,exports.getTypoStyles=getTypoStyles;

package/dist/cjs/button/components/Button.js

@@ -1,193 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var Link = require('next/link');
-var React = require('react');
-
-const Button = ({ className, onClick, builderProps, builderAttrs, setting = {}, styles, style, children, nodePrice })=>{
-    const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles ?? {};
-    const { iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, options, shouldClearSpace } = setting;
-    const label = core.convertHTML(setting?.label);
-    const Wrap = btnLink?.link !== undefined && btnLink.link !== '' ? Link : 'button';
-    const props = btnLink?.link !== undefined && btnLink.link !== '' ? {
-        href: btnLink?.link,
-        target: btnLink?.target
-    } : {
-        type: htmlType
-    };
-    const iconSpacingStyle = React.useMemo(()=>{
-        const spacing = iconSpacing || {
-            desktop: '8px'
-        };
-        return iconAlign === 'left' ? core.makeStyleResponsive('mr', spacing) : core.makeStyleResponsive('ml', spacing);
-    }, [
-        iconAlign,
-        iconSpacing
-    ]);
-    // fix disabled still display hover color
-    if (disabled) {
-        delete backgroundColor?.hover;
-        delete backgroundColor?.focus;
-    }
-    const mode = core.useEditorMode();
-    const composeGlobalSize = core.makeGlobalSize(globalSize);
-    const textOverFlow = styles?.textOverFlow || false;
-    const appendTypoClass = core.composeTypographyClassName(styles?.typo, styles?.typography);
-    const appendTypoStyle = core.composeTypographyStyle(styles?.typo, styles?.typography);
-    delete appendTypoStyle['--c'];
-    const innerBorderCss = `
-    .${builderProps?.uid}.gp-button-base::before {
-      content: "";
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      pointer-events: none;
-      ${core.composeBorderCss(styles?.borderBtn?.normal)}
-      ${core.composeCornerCss(styles?.roundedBtn?.normal)}
-    }
-
-    .${builderProps?.uid}:hover::before {
-      ${core.composeBorderCss(styles?.borderBtn?.hover)}
-      ${core.composeCornerCss(styles?.roundedBtn?.hover)}
-    }
-
-    .${builderProps?.uid}:hover .gp-button-icon {
-      color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-    .${builderProps?.uid} .gp-button-icon {
-      color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-button-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-    .${builderProps?.uid} .gp-button-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid} .gp-product-dot-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-product-dot-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
-    }
-  `;
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        style: {
-            ...style,
-            ...core.makeStyleResponsive('ta', align)
-        },
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("style", {
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: innerBorderCss
-                }
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(Wrap, {
-                ...props,
-                "data-id": builderProps?.uid,
-                "aria-label": setting?.label,
-                onClick: (e)=>{
-                    onClick?.(e);
-                    if (btnLink?.link?.startsWith('#') && mode !== 'edit') {
-                        core.globalEvent.dispatch('onOpenDialog', {
-                            popupUId: btnLink.link
-                        });
-                    }
-                },
-                "data-state": loading ? 'loading' : 'idle',
-                className: core.cls(builderProps?.uid, 'gp-button-base gp-group/button gp-relative gp-inline-flex gp-max-w-full gp-items-center gp-justify-center gp-no-underline gp-transition-colors gp-duration-300 disabled:gp-btn-disabled disabled:gp-opacity-30', core.getGlobalColorStateClass('bg', backgroundColor), {
-                    'gp-animate-bounce': styles?.animation?.normal === 'bounce',
-                    'hover:gp-animate-bounce': styles?.animation?.hover === 'bounce',
-                    'gp-scale-[1.1]': styles?.animation?.normal === 'grow',
-                    'hover:gp-scale-[1.1]': styles?.animation?.hover === 'grow',
-                    'gp-max-w-full': textOverFlow,
-                    'gp-text-center': !!btnLink?.link
-                }, className, core.getGlobalColorStateClass('text', textColor), !nodePrice ? appendTypoClass : {}),
-                style: {
-                    ...core.getGlobalColorStateStyle('bg', backgroundColor),
-                    ...core.composeRadius(roundedBtn),
-                    ...core.getStyleShadowState(styles?.boxShadowBtn, 'box-shadow', styles?.hasBoxShadowBtn),
-                    ...composeGlobalSize.width,
-                    ...composeGlobalSize.height,
-                    ...composeGlobalSize.padding,
-                    ...core.getGradientBgrStyleForButton(backgroundColor),
-                    ...core.getGlobalColorStateStyle('c', textColor),
-                    '--size': appendTypoStyle['--size'],
-                    '--size-tablet': appendTypoStyle['--size-tablet'],
-                    '--size-mobile': appendTypoStyle['--size-mobile'],
-                    ...!nodePrice && appendTypoStyle
-                },
-                disabled: disabled,
-                children: [
-                    loading ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                        className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]/button:gp-visible gp-absolute",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("circle", {
-                                className: "gp-opacity-25",
-                                cx: "12",
-                                cy: "12",
-                                r: "10",
-                                stroke: "currentColor",
-                                strokeWidth: "4"
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                className: "gp-opacity-75",
-                                fill: "currentColor",
-                                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                            })
-                        ]
-                    }) : '',
-                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: core.cls({
-                            'gp-flex-row-reverse': iconAlign === 'right'
-                        }, 'gp-inline-flex'),
-                        children: [
-                            !!iconSvg && iconVisible && /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                className: `
-                gp-button-icon  gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
-                                style: {
-                                    ...iconSpacingStyle,
-                                    '--height-desktop': `${size?.desktop}`,
-                                    '--height-tablet': `${size?.desktop || size?.tablet}`,
-                                    '--height-mobile': `${size?.mobile || size?.tablet || size?.desktop}`
-                                },
-                                dangerouslySetInnerHTML: {
-                                    __html: iconSvg
-                                }
-                            }),
-                            (!!label || !shouldClearSpace) && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                "data-gp-text": true,
-                                className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
-                                style: {
-                                    ...core.makeStyle({
-                                        tt: styles?.transform
-                                    }),
-                                    ...nodePrice && appendTypoStyle
-                                },
-                                dangerouslySetInnerHTML: {
-                                    __html: styles?.typo?.attrs?.transform === 'capitalize' ? label?.toString().toLocaleLowerCase() : label
-                                }
-                            })
-                        ]
-                    }),
-                    nodePrice && nodePrice
-                ]
-            }),
-            children
-        ]
-    });
-};
-
-exports.default = Button;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),ButtonIcon=require("./ButtonIcon.js"),ButtonLabel=require("./ButtonLabel.js"),ButtonLoadingIndicator=require("./ButtonLoadingIndicator.js"),helpers=require("../common/helpers.js");const Button=e=>{let{children:s,advanced:t,className:a,nodePrice:l,customAttrs:r,styles:n={},setting:o={},builderProps:u,builderAttrs:c,wrapClassName:i="",onClick:y}=e,{iconSvg:m,btnLink:d,htmlType:g,loading:j,disabled:x,shouldClearSpace:p,enableBtnLink:B}=o,{enableTextStyle:C=!0}=n,h=core.useEditorMode(),I=core.usePageType(),{customCss:f,wrapStyle:b,restStyle:L,dataState:q,dataIdAttr:S,isShowIcon:R,isScrollToElement:k,getArialLabel:v,getLabelToDisplay:T,checkIsShowLabel:N,checkIsEditableLabel:M}=helpers.getData(e),{HTMLTag:_,urlData:H,shouldRenderLink:W}=helpers.getInsertLinkData({enableBtnLink:B,htmlType:g,setting:d,defaultTag:"button",pageType:I}),A=system.createStyle({...styles.getButtonStyles(n,o.enableHoverEffect)}),D=system.createStyle({...styles.getTypoStyles(n)}),E=system.createStyle({...styles.getTypoStyles(n),...styles.getButtonIconStyles(n,o)}),P=system.createStyle({...styles.getButtonWrapperStyles(L,n)}),$=system.createClass({...classes.getButtonClasses({styles:n,className:a,shouldRenderLink:W,uid:u?.uid,advanced:t})}),O=system.createClass({...classes.getButtonIconClasses(T(),p,C)}),w=system.createClass({...classes.getButtonLabelClasses(n,M({mode:h}))}),z=system.createClass({...classes.getButtonWrapperClasses(i,a,t?.cssClass)}),F=system.createClass({...classes.getButtonContentWrapperClasses(o)}),G=system.createClass({...classes.getButtonContainerClasses()}),J=system.createAttr({...attrs.getButtonAttributes({disabled:x,dataState:q,dataId:S,arialLabel:v()})}),K=e=>{y?.(e),helpers$1.handleClickLink(d,h)};return jsxRuntime.jsx("div",{style:b,className:G,children:jsxRuntime.jsxs("div",{...c,style:P,className:z,children:[jsxRuntime.jsx("style",{type:"text/css",dangerouslySetInnerHTML:{__html:f}}),system.If(k,jsxRuntime.jsx("a",{className:"gp-trigger-button-link gp-hidden",href:H.href,target:H.target})),jsxRuntime.jsxs(_,{...J,...r,..."button"!==_&&{setting:H},style:A,className:$,onClick:K,children:[system.If(j,jsxRuntime.jsx(ButtonLoadingIndicator.default,{})),jsxRuntime.jsxs("div",{className:F,children:[system.If(R,jsxRuntime.jsx(ButtonIcon.default,{iconSvg:m??"",styles:E,classes:O})),system.If(C&&N(),jsxRuntime.jsx(ButtonLabel.default,{label:T(),styles:D,classes:w}))]}),system.If(!!l,l??"")]}),s]})})};exports.default=Button;

package/dist/cjs/button/components/Button.liquid.js

@@ -1,188 +1,31 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var helpers = require('../../helpers.js');
-
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isUseTranslatedValue = true })=>{
-    const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
-    const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true, isGoToSalesPage } = setting;
-    const [wrapStyle, restStyle] = core.splitStyle([
-        'pos',
-        'top',
-        'left',
-        'bottom',
-        'right',
-        'z'
-    ], style);
-    const { Wrap, urlData, shouldRenderLink } = helpers.getLinkDataConfigs({
-        defaultWrap: 'button',
-        setting: btnLink,
-        htmlType: htmlType
-    }, isGoToSalesPage);
-    const spacingDefault = {
-        desktop: '8px'
-    };
-    const iconSpacingStyle = iconAlign === 'left' ? core.makeStyleResponsive('mr', iconSpacing || spacingDefault) : core.makeStyleResponsive('ml', iconSpacing || spacingDefault);
-    // fix disabled still display hover color
-    if (disabled) {
-        delete backgroundColor?.hover;
-        delete backgroundColor?.focus;
-    }
-    const composeGlobalSize = core.makeGlobalSize(globalSize);
-    const appendTypoClass = core.composeTypographyClassName(styles?.typo, styles?.typography);
-    const appendTypoStyle = core.composeTypographyStyle(styles?.typo, styles?.typography);
-    delete appendTypoStyle['--c'];
-    const innerBorderCss = `
-    .${builderProps?.uid}.gp-button-base::before {
-      content: "";
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      pointer-events: none;
-      ${core.composeBorderCss(styles?.borderBtn?.normal)}
-      ${core.composeCornerCss(styles?.roundedBtn?.normal)}
-    }
-
-    .${builderProps?.uid}:hover::before {
-      ${core.composeBorderCss(styles?.borderBtn?.hover)}
-      ${core.composeCornerCss(styles?.roundedBtn?.hover)}
-    }
-
-    .${builderProps?.uid}:hover .gp-button-icon {
-      color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-     .${builderProps?.uid} .gp-button-icon {
-      color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-button-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-    .${builderProps?.uid} .gp-button-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid} .gp-product-dot-price {
-       color: ${core.getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-product-dot-price {
-      color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
-    }
-  `;
-    const labelValDisplay = !isUseTranslatedValue ? label : helpers.getDynamicSourceLocales({
-        val: label,
-        uid: builderProps?.uidTranslate ?? builderProps?.uid,
-        settingId: translate ?? 'label',
-        pageContext,
-        isCapitalize: styles?.typo?.attrs?.transform === 'capitalize',
-        translate
-    });
-    return core.template`
-  <gp-button style="${{
-        ...wrapStyle
-    }}">
-  <div
-    style="${{
-        ...restStyle,
-        ...core.makeStyleResponsive('ta', align)
-    }}"
-    class="${core.cls(wrapClassName, className?.includes('gp-button-atc') ? '' : advanced?.cssClass)}"
-  >
-    <style>${innerBorderCss}</style>
-    <${Wrap}
-      ${{
-        ...urlData,
-        'data-id': builderProps?.uidInteraction ?? (dataId || builderProps?.uid),
-        'aria-label': setting?.label?.toString().replaceAll("'", '&#039;').replaceAll('"', "'"),
-        ...disabled && typeof disabled === 'boolean' || disabled ? {
-            disabled: 'disabled'
-        } : {}
-    }}
-      ${{
-        ...customAttrs
-    }}
-      data-state="${loading ? 'loading' : 'idle'}"
-      class="${core.cls(builderProps?.uid, 'gp-button-base gp-group/button gp-rounded-none gp-max-w-full gp-relative gp-inline-flex gp-items-center gp-justify-center gp-no-underline gp-transition-colors gp-duration-300 disabled:gp-btn-disabled disabled:gp-opacity-30 disabled:gp-pointer-events-none', core.getGlobalColorStateClass('bg', backgroundColor), core.getGlobalColorStateClass('text', textColor), {
-        'gp-animate-bounce': styles?.animation?.normal === 'bounce',
-        'hover:gp-animate-bounce': styles?.animation?.hover === 'bounce',
-        'gp-scale-[1.1]': styles?.animation?.normal === 'grow',
-        'hover:gp-scale-[1.1]': styles?.animation?.hover === 'grow',
-        'gp-text-center': shouldRenderLink
-    }, className, className?.includes('gp-button-atc') && advanced ? advanced?.cssClass : '', !nodePrice ? appendTypoClass : {})}"
-      style="${{
-        ...core.getGlobalColorStateStyle('bg', backgroundColor),
-        ...core.composeRadius(roundedBtn),
-        ...core.getStyleShadowState(styles?.boxShadowBtn, 'box-shadow', styles?.hasBoxShadowBtn),
-        ...!styles?.btnSpacing?.type ? core.composeSize(styles?.btnSpacing?.custom) : {},
-        ...composeGlobalSize.width,
-        ...composeGlobalSize.height,
-        ...composeGlobalSize.padding,
-        ...core.getGradientBgrStyleForButton(backgroundColor),
-        ...core.getGlobalColorStateStyle('c', textColor),
-        '--size': appendTypoStyle['--size'],
-        '--size-tablet': appendTypoStyle['--size-tablet'],
-        '--size-mobile': appendTypoStyle['--size-mobile'],
-        ...!nodePrice ? appendTypoStyle : {}
-    }}"
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers$1=require("../../helpers.js"),ButtonIcon_liquid=require("./ButtonIcon.liquid.js"),ButtonLabel_liquid=require("./ButtonLabel.liquid.js"),ButtonLoadingIndicator_liquid=require("./ButtonLoadingIndicator.liquid.js"),helpers=require("../common/helpers.js");const Button=e=>{let{advanced:s,className:t,nodePrice:a,customAttrs:l,styles:r={},setting:i={},builderProps:o,wrapClassName:n=""}=e,{iconSvg:u,btnLink:c,htmlType:d,disabled:y,enableBtnLink:g,shouldClearSpace:p,disabledLoading:m=!0}=i,{enableTextStyle:$=!0}=r,{customCss:q,wrapStyle:f,restStyle:B,dataState:L,dataIdAttr:S,isShowIcon:b,isScrollToElement:I,getArialLabel:C,getLabelToDisplay:v,checkIsShowLabel:h,checkIsEditableLabel:j}=helpers.getData(e),{HTMLTag:_,urlData:k,shouldRenderLink:E}=helpers.getInsertLinkData({enableBtnLink:g,htmlType:d,setting:c,defaultTag:"button",isLiquid:!0}),T=system.createStyle({...styles.getButtonStyles(r,i?.enableHoverEffect)}),A=system.createStyle({...styles.getTypoStyles(r)}),D=system.createStyle({...styles.getTypoStyles(r),...styles.getButtonIconStyles(r,i)}),P=system.createStyle({...styles.getButtonWrapperStyles(B,r)}),x=system.createClass({...classes.getButtonClasses({styles:r,className:t,shouldRenderLink:E,uid:o?.uid,advanced:s})}),M=system.createClass({...classes.getButtonIconClasses(v({isLiquid:!0}),p,$)}),O=system.createClass({...classes.getButtonLabelClasses(r,j({isLiquid:!0}))}),W=system.createClass({...classes.getButtonWrapperClasses(n,t,s?.cssClass)}),G=system.createClass({...classes.getButtonContentWrapperClasses(i)}),H=system.createClass({...classes.getButtonContainerClasses()}),R=system.createAttr({...attrs.getButtonAttributes({disabled:y,dataState:L,dataId:S,arialLabel:C({isLiquid:!0})})}),N=system.createStateOrContext({btnLink:i?.btnLink});return system.Liquid(core.template`
+    <gp-button
+      gp-data='${core.dataStringify(N)}'
+      style="${{...f}}"
+      class="${H}"
     >
-      ${!disabledLoading ? `  <svg
-          class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]/button:gp-animate-spin group-data-[state=loading]/button:gp-visible"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
+      <div style="${P}" class="${W}">
+        <style>${q}</style>
+        ${system.If(I,`<a
+            class="gp-trigger-button-link gp-hidden"
+            href=${k.href}
+            target=${k.target}
+          ></a>`)}
+        <${_}
+          ${{...R}}
+          ${{...l}}
+          ${{...k}}
+          style="${T}"
+          class="${x}"
         >
-          <circle
-            class="gp-opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          ></circle>
-          <path
-            class="gp-opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>` : ''}
-    <div
-    class="${core.cls('gp-inline-flex', {
-        'gp-flex-row-reverse': iconAlign === 'right'
-    })}">
-    ${core.RenderIf(!!iconSvg && iconVisible, core.template`<span
-        class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
-        style="${{
-        ...label ? iconSpacingStyle : {},
-        '--height-desktop': `${size?.desktop}`,
-        '--height-tablet': `${size?.desktop ?? size?.tablet}`,
-        '--height-mobile': `${size?.mobile ?? size?.tablet ?? size?.desktop}`
-    }}"
-      >${iconSvg}</span>`)}
-      <span
-        data-gp-text
-        class="${`gp-content-product-button group-hover/button:!gp-text-inherit group-active/button:!gp-text-inherit  gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
-        ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
-        style="${{
-        ...nodePrice && appendTypoStyle,
-        '--size': appendTypoStyle['--size'],
-        '--size-tablet': appendTypoStyle['--size-tablet'],
-        '--size-mobile': appendTypoStyle['--size-mobile'],
-        ...core.getGlobalColorStateStyle('c', textColor)
-    }}"
-      >
-        ${labelValDisplay}
-      </span>
+        ${system.If(!m,ButtonLoadingIndicator_liquid.default(),"")}
+        <div class="${G}">
+          ${system.If(b,ButtonIcon_liquid.default({iconSvg:u??"",styles:D,classes:M}))}
+          ${system.If($&&h({isLiquid:!0}),ButtonLabel_liquid.default({label:v({isLiquid:!0}),styles:A,classes:O}))}
+        </div>
+        ${system.If(!!a,a?.toString()??"","")}
+        </${_}>
       </div>
-    ${nodePrice ? nodePrice : ''}
-    </${Wrap}>
-  </div>
-  </gp-button>
-`;
-};
-
-exports.default = Button;
+      ${system.If(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-button-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-button-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    </gp-button>
+  `)};exports.default=Button;

package/dist/cjs/button/components/ButtonIcon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime");const ButtonIcon=({iconSvg:e,classes:t,styles:s})=>jsxRuntime.jsx("span",{className:t,style:s,dangerouslySetInnerHTML:{__html:e}});exports.default=ButtonIcon;

package/dist/cjs/button/components/ButtonIcon.liquid.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core");const ButtonIcon=({iconSvg:e,classes:t,styles:o})=>core.template`
+    <span
+      style="${o}"
+      class="${t}"
+    >
+      ${e}
+    </span>
+  `;exports.default=ButtonIcon;

package/dist/cjs/button/components/ButtonLabel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime");require("react");const ButtonLabel=({label:e,styles:t,classes:r})=>jsxRuntime.jsx("div",{"data-gp-text":!0,style:t,className:r,dangerouslySetInnerHTML:{__html:e}});exports.default=ButtonLabel;

package/dist/cjs/button/components/ButtonLabel.liquid.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core");const ButtonLabel=({label:e,styles:t,classes:s})=>core.template`
+    <span
+      data-gp-text
+      style="${t}"
+      class="${s}"
+    >
+      ${e}
+    </span>`;exports.default=ButtonLabel;

package/dist/cjs/button/components/ButtonLoadingIndicator.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime");require("react");const ButtonLoadingIndicator=()=>jsxRuntime.jsxs("svg",{className:"gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]:gp-visible gp-absolute",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsxRuntime.jsx("circle",{className:"gp-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"gp-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]});exports.default=ButtonLoadingIndicator;

package/dist/cjs/button/components/ButtonLoadingIndicator.liquid.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../common/helpers.js");const ButtonLoadingIndicator=()=>core.template`${helpers.LOADING_INDICATOR}`;exports.default=ButtonLoadingIndicator;

package/dist/cjs/button/index.js

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

package/dist/cjs/button/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 Button = dynamic(()=>Promise.resolve().then(function () { return require('./components/Button.js'); }), {
-    loading: Loading.default
-});
-var button = {
-    Button
-};
-
-exports.default = button;
+"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 Button=dynamic(()=>Promise.resolve().then(function(){return require("./components/Button.js")}),{loading:Loading.default});var button={Button};exports.default=button;

package/dist/cjs/button/settings/Button.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"Button",label:"Button",icon:`
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.16699 6.66663C2.89085 6.66663 2.66699 6.89048 2.66699 7.16663V26.1666C2.66699 26.4428 2.89085 26.6666 3.16699 26.6666H13.5531C13.8587 26.6666 14.0929 26.3948 14.0475 26.0925L13.7975 24.4258C13.7608 24.181 13.5506 24 13.3031 24H5.33366V9.33329H34.667V24H32.5003C32.2242 24 32.0003 24.2238 32.0003 24.5V25.1121C32.0003 25.253 32.0597 25.3873 32.164 25.4821L33.324 26.5366C33.416 26.6203 33.5359 26.6666 33.6603 26.6666H36.8337C37.1098 26.6666 37.3337 26.4428 37.3337 26.1666V7.16663C37.3337 6.89048 37.1098 6.66663 36.8337 6.66663H3.16699ZM19.8589 29.6767C19.9172 30.0846 20.4161 30.2509 20.7074 29.9595L22.667 28L27.6468 32.9797C27.842 33.175 28.1586 33.175 28.3539 32.9797L30.3134 31.0202C30.5087 30.8249 30.5087 30.5083 30.3134 30.3131L25.3337 25.3333L27.2932 23.3737C27.5846 23.0824 27.4183 22.5835 27.0104 22.5252L19.327 21.4276C18.997 21.3804 18.7141 21.6633 18.7613 21.9933L19.8589 29.6767Z" fill="currentColor"/>
+  </svg>
+  `,settings:settings.ButtonSettings,ui:uiV1.SettingUIV1,uiV2:uiV2.SettingUIV2,editorConfigs:{slots:{children:!1}},presets:[{id:"button",name:{en:"Button"},icon:{desktop:`
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <rect x="21.5" y="20" width="53" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `},components:[{tag:"Button",advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:"button.{{rootClassName}} {\n\n}"}}}]},{id:"button-icon",name:{en:"Button"},icon:{desktop:`
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <path d="M23.6415 17.8126C23.7882 17.5153 24.2121 17.5153 24.3589 17.8126L26.1255 21.3922C26.1838 21.5102 26.2964 21.5921 26.4267 21.611L30.377 22.185C30.7051 22.2327 30.8361 22.6359 30.5987 22.8673L27.7402 25.6536C27.6459 25.7455 27.6029 25.8779 27.6252 26.0077L28.3 29.9421C28.356 30.2688 28.0131 30.518 27.7196 30.3638L24.1863 28.5062C24.0698 28.4449 23.9306 28.4449 23.814 28.5062L20.2807 30.3637C19.9873 30.518 19.6443 30.2688 19.7004 29.9421L20.3752 26.0077C20.3974 25.8779 20.3544 25.7455 20.2601 25.6536L17.4016 22.8673C17.1642 22.6359 17.2952 22.2327 17.6233 22.185L21.5737 21.611C21.7039 21.5921 21.8166 21.5102 21.8748 21.3922L23.6415 17.8126Z" fill="#F9F9F9"/>
+          <rect x="40" y="20" width="40" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `},components:[{tag:"Button",settings:{iconVisible:!0,iconAlign:"left",iconSvg:'<svg height="20" width="20" data-name="star-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg>'},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}},editorData:{cssPlaceholder:"button.{{rootClassName}} {\n\n}"}}}]},{id:"button-pre-sales-page",name:{en:"Button"},icon:{desktop:`
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <rect x="21.5" y="20" width="53" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `},components:[{tag:"Button",advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:"button.{{rootClassName}} {\n\n}"}},settings:{btnLink:{type:"go-to-sales-page"},enableBtnLink:!0}}]},{id:"button-icon-pre-sales-page",name:{en:"Button"},icon:{desktop:`
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <path d="M23.6415 17.8126C23.7882 17.5153 24.2121 17.5153 24.3589 17.8126L26.1255 21.3922C26.1838 21.5102 26.2964 21.5921 26.4267 21.611L30.377 22.185C30.7051 22.2327 30.8361 22.6359 30.5987 22.8673L27.7402 25.6536C27.6459 25.7455 27.6029 25.8779 27.6252 26.0077L28.3 29.9421C28.356 30.2688 28.0131 30.518 27.7196 30.3638L24.1863 28.5062C24.0698 28.4449 23.9306 28.4449 23.814 28.5062L20.2807 30.3637C19.9873 30.518 19.6443 30.2688 19.7004 29.9421L20.3752 26.0077C20.3974 25.8779 20.3544 25.7455 20.2601 25.6536L17.4016 22.8673C17.1642 22.6359 17.2952 22.2327 17.6233 22.185L21.5737 21.611C21.7039 21.5921 21.8166 21.5102 21.8748 21.3922L23.6415 17.8126Z" fill="#F9F9F9"/>
+          <rect x="40" y="20" width="40" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `},components:[{tag:"Button",settings:{iconVisible:!0,iconAlign:"left",iconSvg:'<svg data-name="star-filled" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6"  viewBox="0 0 512 512" fill="currentColor"> <path fill="currentColor" strokeLinecap="round" strokeLinejoin="round" fill="currentColor" d="M115.584 494.176c-12.352 6.336 -26.368 -4.768 -23.872 -18.944l26.56 -151.36L5.536 216.48c-10.528 -10.048 -5.056 -28.416 9.056 -30.4l156.736 -22.272L241.216 25.344c6.304 -12.48 23.36 -12.48 29.664 0l69.888 138.464 156.736 22.272c14.112 1.984 19.584 20.352 9.024 30.4l-112.704 107.392 26.56 151.36c2.496 14.176 -11.52 25.28 -23.872 18.944L256 421.984l-140.448 72.192z" /></svg>',btnLink:{type:"go-to-sales-page"},enableBtnLink:!0},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}},editorData:{cssPlaceholder:"button.{{rootClassName}} {\n\n}"}}}]}],rootOverride:{styles:{width:{desktop:"auto"},align:{desktop:"center"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};exports.default=config;

package/dist/cjs/button/settings/configs/settings.js

@@ -0,0 +1,4 @@
+"use strict";const ButtonSettings=[{id:"setting",controls:[{id:"label",label:"Text",type:"input",default:"<p>Button</p>"},{id:"translate",type:"input",default:"label"},{id:"enableBtnLink",type:"toggle",default:!1},{id:"enableHoverEffect",type:"toggle",default:!0},{id:"btnLink",type:"pick-link",pickLinkLabel:"Button link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{id:"iconGroup",type:"group",label:"Icon",controls:[{id:"iconVisible",label:"Icon Visible",type:"toggle",default:!1},{id:"iconSvg",label:"SVG Icon",type:"icon",default:`
+              <svg height="20" width="20" data-name="star-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817759863701864">
+              <path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg>
+            `},{id:"iconAlign",label:"Icon Alignment",type:"option:value",options:[{label:"Left",value:"left"},{label:"Right",value:"right"}],default:"left"}]},{id:"htmlType",label:"HTML Type",type:"select",default:"button",options:[{label:"Open link, popup & scroll to",value:"button"},{label:"Clear form",value:"reset"},{label:"Submit form",value:"submit"}]},{id:"disabled",label:"Disabled",type:"toggle",default:!1},{id:"shouldClearSpace",label:"",type:"toggle",default:!1}]},{id:"style",controls:[{id:"borderBtnV2",type:"border-v2",default:{normal:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-3",isCustom:!0}},compoDefaultValue:{normal:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"},hover:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}}},{id:"roundedBtnV2",type:"corner-v2",default:{normal:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}},compoDefaultValue:{normal:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},{id:"hasBoxShadowBtn",type:"toggle",label:"Enable Button Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowBtn",type:"shadow-v2",compoDefaultValue:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}},{id:"backgroundColorV2",type:"color-picker-v2",default:{normal:"brand",hover:"highlight"},compoDefaultValue:{normal:"brand",hover:"highlight"},enableGradient:!0},{id:"backgroundImage",type:"background-image",compoDefaultValue:{normal:{size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480,hiddenSEO:!0}},hover:{size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:480,hiddenSEO:!0}}}},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"enableTextStyle",label:"",type:"toggle",default:!0},{id:"typo",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"text-3"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0}},{id:"textColor",type:"color-picker-v2",default:{normal:"text-3"},state:{hover:!0,normal:!0},enableGradient:!1},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"dimensions1",type:"group",label:"Icon Dimension",controls:[{id:"iconSizeAuto",type:"toggle",label:"Icon Auto Size",default:!0},{id:"size",label:"Size Icon",type:"select",options:[{label:"Large",value:"1.2em"},{label:"Medium",value:"1em"},{label:"Small",value:"0.8em"}],devices:{desktop:{default:"1em"}}},{id:"iconDimension",type:"input:slider",label:"Size",hide:!0,min:0,max:100,step:1,units:["px","em","rem"],devices:{desktop:{default:"24px"}}}]},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{width:"Auto",height:"Auto",padding:{type:"medium",top:"12px",bottom:"12px",left:"24px",right:"24px"}}}},settingConfig:{width:{displayOptions:["full","auto"],sizeConfig:{small:"100px",medium:"116px",large:"132px"}},height:{displayOptions:["auto"],sizeConfig:{small:"28px",medium:"36px",large:"44px"}}},hiddenSettings:["shape","gap"]},{id:"iconSpacing",type:"input:slider",units:["px"],step:1,max:40,ignoreMax:!0,devices:{desktop:{default:"8px"}}},{id:"textAlign",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"text",tooltip:"Align left",iconName:"gp-text-align-left"},{label:"Center",value:"center",type:"text",tooltip:"Align center",iconName:"gp-text-align-center"},{label:"Right",value:"right",type:"text",tooltip:"Align right",iconName:"gp-text-align-right"},{label:"Justify",value:"justify",type:"text",tooltip:"Align justify",iconName:"gp-text-align-justify"}],devices:{desktop:{default:"left"}}}]}];exports.ButtonSettings=ButtonSettings;

package/dist/cjs/button/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV1=[{type:"group",controls:[{type:"control",label:{en:"Icon"},options:{label:"large"},setting:{id:"iconVisible"}},{type:"group",condition:"iconVisible == true",controls:[{type:"control",layout:"vertical",setting:{id:"iconSvg"}},{type:"control",label:{en:"Position"},setting:{id:"iconAlign"}},{type:"control",label:{en:"Spacing"},setting:{id:"iconSpacing"},options:{styleWrapper:{marginBottom:"0 !important"}}}]}]},{type:"control",label:{en:"Insert link"},layout:"vertical",setting:{id:"btnLink"}},{type:"group",label:{en:"Size"},controls:[{type:"control",setting:{id:"globalSize"},layout:"vertical"}]},{type:"group",label:{en:"States"},options:{labelSpacing:"small"},controls:[{type:"tab",controls:[{type:"group",label:{en:"Normal"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"backgroundColor",state:"normal"}},{type:"control",label:{en:"Text color"},setting:{id:"textColor",state:"normal"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderBtn",state:"normal"}},{type:"control",label:{en:"Corner"},setting:{id:"roundedBtn",state:"normal"}},{type:"control",label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"normal"}},{type:"group",condition:"hasBoxShadowBtn.normal == true",controls:[{type:"control",layout:"vertical",setting:{id:"boxShadowBtn",state:"normal"}}]}]},{type:"group",label:{en:"Hover"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"backgroundColor",state:"hover"}},{type:"control",label:{en:"Text color"},setting:{id:"textColor",state:"hover"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderBtn",state:"hover"}},{type:"control",label:{en:"Corner"},setting:{id:"roundedBtn",state:"hover"}},{type:"control",label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"hover"}},{type:"group",condition:"hasBoxShadowBtn.hover == true",controls:[{type:"control",setting:{id:"boxShadowBtn",state:"hover"},layout:"vertical"}]}]}]}]},{type:"group",label:{en:"Text"},controls:[{type:"control",setting:{id:"typo"},layout:"vertical"}]},{type:"control",label:{en:"Align"},condition:"globalSize.width !== '100%'",options:{label:"large"},setting:{id:"align"}}];exports.SettingUIV1=SettingUIV1;