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

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

@@ -0,0 +1,32 @@
+import{makeStyleResponsive,filterHoverVariables,getStyleShadowState,composeRadius,makeGlobalSize,composeTypographyStyle,getColor,getStyleShadow,getStyleBackgroundImage,getGlobalColorStateStyle,makeStyleState,composeBorderCss,composeCornerCss,GRADIENT_BGR_KEY}from"@gem-sdk/core";let getButtonWrapperStyles=(e,t)=>({...e,...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: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{...getStyleShadowState(r,"box-shadow",o)}},getRadiusStyles=e=>{let t=ignoreStateNoneValue(e?.roundedBtnV2||{},"value?.radiusType !== undefined");return composeRadius(t)},getIconSpacingStyle=(e,t)=>{let o=e?.iconSpacing||{desktop:"8px"};return t?.iconAlign==="left"?makeStyleResponsive("mr",o):makeStyleResponsive("ml",o)},getSizeStyles=e=>{let t=makeGlobalSize(e?.globalSize);return{...t.width,...t.height,...t.padding}},getTypographyStyles=e=>{let t=composeTypographyStyle(e?.typo,e?.typography),o={"--c":t?.["--c"]},r={...t};return delete r["--c"],{textColorStyle:{"--hvr-c":getColor(e?.textColor?.hover),...o},withoutTextColorStyles:r}},getTypoStyles=e=>({...getTypographyStyles(e).withoutTextColorStyles,...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||{},a=o?.[t],n=r?.[t];if(!a&&!n)return"";let l=`url(${a?.image?.src})`,s=n?`, ${n}`:"";return n?.includes?.(GRADIENT_BGR_KEY)&&a?.image?.src?`${l}${s}`:n?.includes?.(GRADIENT_BGR_KEY)&&!a?.image?.src?n:a?.image?.src?l:""},getBackgroundImageSource=e=>{let t={normal:getBgImageUrl(e,"normal"),hover:getBgImageUrl(e,"hover")};return makeStyleState("bgi",t)},getBackgroundStyles=e=>{let{backgroundColorV2:t,backgroundImage:o}=e||{},r={...o,hover:o?.hover?.image?o?.hover:o?.normal},a={...t,hover:t?.hover||t?.normal};return{...getStyleBackgroundImage(r,{ignoreBackgroundImage:!0}),...getBackgroundImageSource({backgroundImage:r,backgroundColorV2:a}),...getGlobalColorStateStyle("bg",a)}},getCustomCssStyles=({styles:e,uid:t,builderAttrs:o,enableHoverEffect:r})=>{if(!t)return"";let{borderBtnV2:a,roundedBtnV2:n}=e??{},l=ignoreStateNoneValue(a||{},"value?.border !== undefined"),s=ignoreStateNoneValue(n||{},"value?.radiusType !== undefined"),g=generateBorderCornerStyles({uid:t,borderBtn:l,roundedBtn:s,builderAttrs:o,enableHoverEffect:r});return`
+      ${g.normalStyles}
+      ${g.hoverStyles}
+    `.trim()},generateBorderCornerStyles=({uid:e,borderBtn:t,roundedBtn:o,builderAttrs:r,enableHoverEffect:a})=>{let n=r?.["data-component-tag"],l=({styleObj:e,state:t})=>{if(e)return e?.[t]},s=l({styleObj:t,state:"normal"}),g=l({styleObj:a?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;
+    ${composeBorderCss(s)}
+    ${composeCornerCss(d)}
+  `,y=`
+    [data-id="${e}"].gp-button-base::before, [data-id="${e}-interaction"].gp-button-base::before {
+      ${u}
+    }
+  `,S=`
+  [data-id="${e}"]:hover::before, [data-id="${e}-interaction"]:hover::before {
+    ${composeBorderCss(g)}
+    ${composeCornerCss(i)}
+  }
+`;if("ProductButton"===n){let t=r?.["data-is-in-stock"]??!1;y=`
+      [data-is-in-stock="${t}"]>.${e}.gp-button-base::before {
+        ${u}
+      }
+    `,S=`
+    [data-is-in-stock="${t}"]>.${e}.gp-button-base:hover::before {
+      ${composeBorderCss(g)}
+      ${composeCornerCss(i)}
+    }
+  `}return{normalStyles:y,hoverStyles:S}};export{generateBorderCornerStyles,getButtonIconStyles,getButtonStyles,getButtonWrapperStyles,getCustomCssStyles,getRadiusStyles,getShadowStyles,getTypoStyles};

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

@@ -1,189 +1,2 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { convertHTML, makeStyleResponsive, useEditorMode, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, globalEvent, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, getGradientBgrStyleForButton, makeStyle } from '@gem-sdk/core';
-import Link from 'next/link';
-import { useMemo } from '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 = 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 = useMemo(()=>{
-        const spacing = iconSpacing || {
-            desktop: '8px'
-        };
-        return iconAlign === 'left' ? makeStyleResponsive('mr', spacing) : makeStyleResponsive('ml', spacing);
-    }, [
-        iconAlign,
-        iconSpacing
-    ]);
-    // fix disabled still display hover color
-    if (disabled) {
-        delete backgroundColor?.hover;
-        delete backgroundColor?.focus;
-    }
-    const mode = useEditorMode();
-    const composeGlobalSize = makeGlobalSize(globalSize);
-    const textOverFlow = styles?.textOverFlow || false;
-    const appendTypoClass = composeTypographyClassName(styles?.typo, styles?.typography);
-    const appendTypoStyle = 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;
-      ${composeBorderCss(styles?.borderBtn?.normal)}
-      ${composeCornerCss(styles?.roundedBtn?.normal)}
-    }
-
-    .${builderProps?.uid}:hover::before {
-      ${composeBorderCss(styles?.borderBtn?.hover)}
-      ${composeCornerCss(styles?.roundedBtn?.hover)}
-    }
-
-    .${builderProps?.uid}:hover .gp-button-icon {
-      color: ${getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-    .${builderProps?.uid} .gp-button-icon {
-      color: ${getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-button-price {
-      color: ${getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-    .${builderProps?.uid} .gp-button-price {
-      color: ${getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid} .gp-product-dot-price {
-      color: ${getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-product-dot-price {
-      color: ${getSingleColorVariable(styles?.textColor?.hover)};
-    }
-  `;
-    return /*#__PURE__*/ jsxs("div", {
-        ...builderAttrs,
-        style: {
-            ...style,
-            ...makeStyleResponsive('ta', align)
-        },
-        children: [
-            /*#__PURE__*/ jsx("style", {
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: innerBorderCss
-                }
-            }),
-            /*#__PURE__*/ jsxs(Wrap, {
-                ...props,
-                "data-id": builderProps?.uid,
-                "aria-label": setting?.label,
-                onClick: (e)=>{
-                    onClick?.(e);
-                    if (btnLink?.link?.startsWith('#') && mode !== 'edit') {
-                        globalEvent.dispatch('onOpenDialog', {
-                            popupUId: btnLink.link
-                        });
-                    }
-                },
-                "data-state": loading ? 'loading' : 'idle',
-                className: 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', 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, getGlobalColorStateClass('text', textColor), !nodePrice ? appendTypoClass : {}),
-                style: {
-                    ...getGlobalColorStateStyle('bg', backgroundColor),
-                    ...composeRadius(roundedBtn),
-                    ...getStyleShadowState(styles?.boxShadowBtn, 'box-shadow', styles?.hasBoxShadowBtn),
-                    ...composeGlobalSize.width,
-                    ...composeGlobalSize.height,
-                    ...composeGlobalSize.padding,
-                    ...getGradientBgrStyleForButton(backgroundColor),
-                    ...getGlobalColorStateStyle('c', textColor),
-                    '--size': appendTypoStyle['--size'],
-                    '--size-tablet': appendTypoStyle['--size-tablet'],
-                    '--size-mobile': appendTypoStyle['--size-mobile'],
-                    ...!nodePrice && appendTypoStyle
-                },
-                disabled: disabled,
-                children: [
-                    loading ? /*#__PURE__*/ 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__*/ jsx("circle", {
-                                className: "gp-opacity-25",
-                                cx: "12",
-                                cy: "12",
-                                r: "10",
-                                stroke: "currentColor",
-                                strokeWidth: "4"
-                            }),
-                            /*#__PURE__*/ 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__*/ jsxs("div", {
-                        className: cls({
-                            'gp-flex-row-reverse': iconAlign === 'right'
-                        }, 'gp-inline-flex'),
-                        children: [
-                            !!iconSvg && iconVisible && /*#__PURE__*/ 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__*/ jsx("div", {
-                                "data-gp-text": true,
-                                className: 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: {
-                                    ...makeStyle({
-                                        tt: styles?.transform
-                                    }),
-                                    ...nodePrice && appendTypoStyle
-                                },
-                                dangerouslySetInnerHTML: {
-                                    __html: styles?.typo?.attrs?.transform === 'capitalize' ? label?.toString().toLocaleLowerCase() : label
-                                }
-                            })
-                        ]
-                    }),
-                    nodePrice && nodePrice
-                ]
-            }),
-            children
-        ]
-    });
-};
-
-export { Button as default };
+'use client';
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useEditorMode as s,usePageType as o}from"@gem-sdk/core";import{createStyle as r,createClass as m,createAttr as l,If as a}from"@gem-sdk/system";import{handleClickLink as i}from"../../helpers.js";import{getButtonAttributes as n}from"../common/attrs.js";import{getButtonStyles as c,getTypoStyles as d,getButtonIconStyles as f,getButtonWrapperStyles as p}from"../common/styles.js";import{getButtonClasses as g,getButtonIconClasses as u,getButtonLabelClasses as h,getButtonWrapperClasses as y,getButtonContentWrapperClasses as j,getButtonContainerClasses as b}from"../common/classes.js";import v from"./ButtonIcon.js";import B from"./ButtonLabel.js";import L from"./ButtonLoadingIndicator.js";import{getData as N,getInsertLinkData as k}from"../common/helpers.js";let Button=I=>{let{children:T,advanced:x,className:H,nodePrice:C,customAttrs:M,styles:S={},setting:_={},builderProps:E,builderAttrs:q,wrapClassName:w="",onClick:z}=I,{iconSvg:A,btnLink:D,htmlType:F,loading:G,disabled:J,shouldClearSpace:K,enableBtnLink:O}=_,{enableTextStyle:P=!0}=S,Q=s(),R=o(),{customCss:U,wrapStyle:V,restStyle:W,dataState:X,dataIdAttr:Y,isShowIcon:Z,isScrollToElement:$,getArialLabel:tt,getLabelToDisplay:te,checkIsShowLabel:ts,checkIsEditableLabel:to}=N(I),{HTMLTag:tr,urlData:tm,shouldRenderLink:tl}=k({enableBtnLink:O,htmlType:F,setting:D,defaultTag:"button",pageType:R}),ta=r({...c(S,_.enableHoverEffect)}),ti=r({...d(S)}),tn=r({...d(S),...f(S,_)}),tc=r({...p(W,S)}),td=m({...g({styles:S,className:H,shouldRenderLink:tl,uid:E?.uid,advanced:x})}),tf=m({...u(te(),K,P)}),tp=m({...h(S,to({mode:Q}))}),tg=m({...y(w,H,x?.cssClass)}),tu=m({...j(_)}),th=m({...b()}),ty=l({...n({disabled:J,dataState:X,dataId:Y,arialLabel:tt()})}),tj=t=>{z?.(t),i(D,Q)};return t("div",{style:V,className:th,children:e("div",{...q,style:tc,className:tg,children:[t("style",{type:"text/css",dangerouslySetInnerHTML:{__html:U}}),a($,t("a",{className:"gp-trigger-button-link gp-hidden",href:tm.href,target:tm.target})),e(tr,{...ty,...M,..."button"!==tr&&{setting:tm},style:ta,className:td,onClick:tj,children:[a(G,t(L,{})),e("div",{className:tu,children:[a(Z,t(v,{iconSvg:A??"",styles:tn,classes:tf})),a(P&&ts(),t(B,{label:te(),styles:ti,classes:tp}))]}),a(!!C,C??"")]}),T]})})};export{Button as default};

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

@@ -1,184 +1,31 @@
-import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
-import { getLinkDataConfigs, getDynamicSourceLocales } from '../../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] = splitStyle([
-        'pos',
-        'top',
-        'left',
-        'bottom',
-        'right',
-        'z'
-    ], style);
-    const { Wrap, urlData, shouldRenderLink } = getLinkDataConfigs({
-        defaultWrap: 'button',
-        setting: btnLink,
-        htmlType: htmlType
-    }, isGoToSalesPage);
-    const spacingDefault = {
-        desktop: '8px'
-    };
-    const iconSpacingStyle = iconAlign === 'left' ? makeStyleResponsive('mr', iconSpacing || spacingDefault) : makeStyleResponsive('ml', iconSpacing || spacingDefault);
-    // fix disabled still display hover color
-    if (disabled) {
-        delete backgroundColor?.hover;
-        delete backgroundColor?.focus;
-    }
-    const composeGlobalSize = makeGlobalSize(globalSize);
-    const appendTypoClass = composeTypographyClassName(styles?.typo, styles?.typography);
-    const appendTypoStyle = 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;
-      ${composeBorderCss(styles?.borderBtn?.normal)}
-      ${composeCornerCss(styles?.roundedBtn?.normal)}
-    }
-
-    .${builderProps?.uid}:hover::before {
-      ${composeBorderCss(styles?.borderBtn?.hover)}
-      ${composeCornerCss(styles?.roundedBtn?.hover)}
-    }
-
-    .${builderProps?.uid}:hover .gp-button-icon {
-      color: ${getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-     .${builderProps?.uid} .gp-button-icon {
-      color: ${getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-button-price {
-      color: ${getSingleColorVariable(styles?.textColor?.hover)};
-    }
-
-    .${builderProps?.uid} .gp-button-price {
-      color: ${getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid} .gp-product-dot-price {
-       color: ${getSingleColorVariable(styles?.textColor?.normal)};
-    }
-
-    .${builderProps?.uid}:hover .gp-product-dot-price {
-      color: ${getSingleColorVariable(styles?.textColor?.hover)};
-    }
-  `;
-    const labelValDisplay = !isUseTranslatedValue ? label : getDynamicSourceLocales({
-        val: label,
-        uid: builderProps?.uidTranslate ?? builderProps?.uid,
-        settingId: translate ?? 'label',
-        pageContext,
-        isCapitalize: styles?.typo?.attrs?.transform === 'capitalize',
-        translate
-    });
-    return template`
-  <gp-button style="${{
-        ...wrapStyle
-    }}">
-  <div
-    style="${{
-        ...restStyle,
-        ...makeStyleResponsive('ta', align)
-    }}"
-    class="${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="${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', getGlobalColorStateClass('bg', backgroundColor), 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="${{
-        ...getGlobalColorStateStyle('bg', backgroundColor),
-        ...composeRadius(roundedBtn),
-        ...getStyleShadowState(styles?.boxShadowBtn, 'box-shadow', styles?.hasBoxShadowBtn),
-        ...!styles?.btnSpacing?.type ? composeSize(styles?.btnSpacing?.custom) : {},
-        ...composeGlobalSize.width,
-        ...composeGlobalSize.height,
-        ...composeGlobalSize.padding,
-        ...getGradientBgrStyleForButton(backgroundColor),
-        ...getGlobalColorStateStyle('c', textColor),
-        '--size': appendTypoStyle['--size'],
-        '--size-tablet': appendTypoStyle['--size-tablet'],
-        '--size-mobile': appendTypoStyle['--size-mobile'],
-        ...!nodePrice ? appendTypoStyle : {}
-    }}"
+import{template as s,dataStringify as t,isLocalEnv as i,baseAssetURL as e}from"@gem-sdk/core";import{createStyle as o,createClass as r,createAttr as l,createStateOrContext as a,Liquid as d,If as m}from"@gem-sdk/system";import{getButtonAttributes as n}from"../common/attrs.js";import{getButtonStyles as p,getTypoStyles as c,getButtonIconStyles as u,getButtonWrapperStyles as $}from"../common/styles.js";import{getButtonClasses as f,getButtonIconClasses as g,getButtonLabelClasses as b,getButtonWrapperClasses as L,getButtonContentWrapperClasses as y,getButtonContainerClasses as j}from"../common/classes.js";import{getSettingPreloadData as v}from"../../helpers.js";import q from"./ButtonIcon.liquid.js";import k from"./ButtonLabel.liquid.js";import S from"./ButtonLoadingIndicator.liquid.js";import{getData as h,getInsertLinkData as B}from"../common/helpers.js";let Button=E=>{let{advanced:I,className:T,nodePrice:A,customAttrs:G,styles:H={},setting:M={},builderProps:_,wrapClassName:x=""}=E,{iconSvg:C,btnLink:N,htmlType:O,disabled:P,enableBtnLink:R,shouldClearSpace:V,disabledLoading:w=!0}=M,{enableTextStyle:z=!0}=H,{customCss:D,wrapStyle:F,restStyle:J,dataState:K,dataIdAttr:Q,isShowIcon:U,isScrollToElement:W,getArialLabel:X,getLabelToDisplay:Y,checkIsShowLabel:Z,checkIsEditableLabel:ss}=h(E),{HTMLTag:st,urlData:si,shouldRenderLink:se}=B({enableBtnLink:R,htmlType:O,setting:N,defaultTag:"button",isLiquid:!0}),so=o({...p(H,M?.enableHoverEffect)}),sr=o({...c(H)}),sl=o({...c(H),...u(H,M)}),sa=o({...$(J,H)}),sd=r({...f({styles:H,className:T,shouldRenderLink:se,uid:_?.uid,advanced:I})}),sm=r({...g(Y({isLiquid:!0}),V,z)}),sn=r({...b(H,ss({isLiquid:!0}))}),sp=r({...L(x,T,I?.cssClass)}),sc=r({...y(M)}),su=r({...j()}),s$=l({...n({disabled:P,dataState:K,dataId:Q,arialLabel:X({isLiquid:!0})})}),sf=a({btnLink:M?.btnLink});return d(s`
+    <gp-button
+      gp-data='${t(sf)}'
+      style="${{...F}}"
+      class="${su}"
     >
-      ${!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="${sa}" class="${sp}">
+        <style>${D}</style>
+        ${m(W,`<a
+            class="gp-trigger-button-link gp-hidden"
+            href=${si.href}
+            target=${si.target}
+          ></a>`)}
+        <${st}
+          ${{...s$}}
+          ${{...G}}
+          ${{...si}}
+          style="${so}"
+          class="${sd}"
         >
-          <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="${cls('gp-inline-flex', {
-        'gp-flex-row-reverse': iconAlign === 'right'
-    })}">
-    ${RenderIf(!!iconSvg && iconVisible, 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'],
-        ...getGlobalColorStateStyle('c', textColor)
-    }}"
-      >
-        ${labelValDisplay}
-      </span>
+        ${m(!w,S(),"")}
+        <div class="${sc}">
+          ${m(U,q({iconSvg:C??"",styles:sl,classes:sm}))}
+          ${m(z&&Z({isLiquid:!0}),k({label:Y({isLiquid:!0}),styles:sr,classes:sn}))}
+        </div>
+        ${m(!!A,A?.toString()??"","")}
+        </${st}>
       </div>
-    ${nodePrice ? nodePrice : ''}
-    </${Wrap}>
-  </div>
-  </gp-button>
-`;
-};
-
-export { Button as default };
+      ${m(i,`<script ${v('class="gps-link" delay',"src")}="{{ 'gp-button-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${v('class="gps-link" delay',"src")}="${e}/assets-v2/gp-button-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    </gp-button>
+  `)};export{Button as default};

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";let ButtonIcon=({iconSvg:e,classes:n,styles:o})=>t("span",{className:n,style:o,dangerouslySetInnerHTML:{__html:e}});export{ButtonIcon as default};

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

@@ -0,0 +1,8 @@
+import{template as t}from"@gem-sdk/core";let ButtonIcon=({iconSvg:o,classes:s,styles:e})=>t`
+    <span
+      style="${e}"
+      class="${s}"
+    >
+      ${o}
+    </span>
+  `;export{ButtonIcon as default};

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import"react";let ButtonLabel=({label:e,styles:a,classes:r})=>t("div",{"data-gp-text":!0,style:a,className:r,dangerouslySetInnerHTML:{__html:e}});export{ButtonLabel as default};

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

@@ -0,0 +1,8 @@
+import{template as t}from"@gem-sdk/core";let ButtonLabel=({label:a,styles:e,classes:s})=>t`
+    <span
+      data-gp-text
+      style="${e}"
+      class="${s}"
+    >
+      ${a}
+    </span>`;export{ButtonLabel as default};

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

@@ -0,0 +1 @@
+import{jsxs as t,jsx as a}from"react/jsx-runtime";import"react";let ButtonLoadingIndicator=()=>t("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:[a("circle",{className:"gp-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),a("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"})]});export{ButtonLoadingIndicator as default};

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

@@ -0,0 +1 @@
+import{template as o}from"@gem-sdk/core";import{LOADING_INDICATOR as t}from"../common/helpers.js";let ButtonLoadingIndicator=()=>o`${t}`;export{ButtonLoadingIndicator as default};

package/dist/esm/button/index.js

@@ -0,0 +1 @@
+import"react/jsx-runtime";import"@gem-sdk/core";import"@gem-sdk/system";import"react";import"next/link";import t from"./settings/Button.js";let buttonSetting={Button:t};export{buttonSetting};

package/dist/esm/button/next.js

@@ -1,12 +1 @@
-import dynamic from 'next/dynamic';
-import Loading from '../common/components/Loading.js';
-import 'react/jsx-runtime';
-
-const Button = dynamic(()=>import('./components/Button.js'), {
-    loading: Loading
-});
-var button = {
-    Button
-};
-
-export { button as default };
+import t from"next/dynamic";import o from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let Button=t(()=>import("./components/Button.js"),{loading:o});var button={Button};export{button as default};

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

@@ -0,0 +1,27 @@
+import{ButtonSettings as t}from"./configs/settings.js";import{SettingUIV1 as e}from"./configs/ui-v1.js";import{SettingUIV2 as o}from"./configs/ui-v2.js";let 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:t,ui:e,uiV2:o,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}}}}}};export{config as default};

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

@@ -0,0 +1,4 @@
+let 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"}}}]}];export{ButtonSettings};

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

@@ -0,0 +1 @@
+let 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"}}];export{SettingUIV1};

package/dist/esm/button/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+let SettingUIV2=[{label:{en:"Size"},controls:[{id:"Width",label:{en:"Width"},controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"globalSize",field:"width"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},layout:"horizontal"},{id:"Height",label:{en:"Height"},controlConfig:{id:"height",type:"dropdown:input",label:"height",inputType:"number",units:["px"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"globalSize",field:"height"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0}]},layout:"horizontal"},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{desktop:{default:{type:"medium",top:"12px",bottom:"12px",left:"24px",right:"24px"}}}}}]},{label:{en:"Background"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:{en:"Color"},setting:{id:"backgroundColorV2",state:"normal"}},{label:{en:"Image"},setting:{id:"backgroundImage",state:"normal"}}]},{label:{en:"Shape"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:{en:"Border"},setting:{id:"borderBtnV2",state:"normal"}},{label:{en:"Corner"},setting:{id:"roundedBtnV2",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadowBtn",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadowBtn",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadowBtn.normal.enable === true",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"normal",newValue:!0}},{condition:"boxShadowBtn.normal.enable === false",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:{en:"Icon"},setting:{id:"iconVisible"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:{en:"Icon"},setting:{id:"iconSvg"},conditionDisplay:"iconVisible == true"},{type:"control",label:{en:"Position"},setting:{id:"iconAlign"},conditionDisplay:"iconVisible == true"},{type:"control",label:{en:"Gap"},setting:{id:"iconSpacing"},conditionDisplay:"iconVisible == true"}]},{controls:[{label:{en:"Text"},setting:{id:"enableTextStyle"},options:{labelVariant:"primary",toggleStyle:"switch"},controlChangeTrigger:{settings:[{condition:'enableTextStyle === true && label === ""',source:["enableTextStyle","label"],action:{controlId:"label",groupType:"setting",controlType:"setting",newValue:"<p>Button</p>"}}],options:{noRecordHistory:!0}}},{id:"typo",label:{en:"Basic"},setting:{id:"typo"},conditionDisplay:"enableTextStyle == true",options:{hideLabel:!0,fullWidth:!0,updateFields:[{field:"attrs.textAlign",settingId:"textAlign"},{field:"attrs.color",settingId:"textColor",state:"normal"}]},layout:"vertical",controlChangeTrigger:{settings:[{action:{controlId:"textAlign",valueFromField:"attrs.textAlign",groupType:"style",controlType:"style"}},{action:{controlId:"textColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}}]},{label:{en:"Effect"},conditionDisplay:'pageType != "POST_PURCHASE"',controls:[{label:{en:"Hover"},iconName:"polaris-check-hover",type:"combo",fixedValue:"Styled",setting:{id:"enableHoverEffect"},popoverLabel:{en:"Hover"},state:"hover",controls:[{type:"group",label:{en:"Background"},controls:[{label:{en:"Color"},setting:{id:"backgroundColorV2",state:"hover"}},{label:{en:"Image"},setting:{id:"backgroundImage",state:"hover"}}]},{type:"group",label:{en:"Text"},controls:[{label:{en:"Text color"},setting:{id:"textColor",state:"hover"}}]},{type:"group",label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"borderBtnV2",state:"hover"}},{label:{en:"Corner"},setting:{id:"roundedBtnV2",state:"hover"}},{label:{en:"Shadow"},setting:{id:"boxShadowBtn",state:"hover"},options:{updateFields:[{field:"hover.enable",settingId:"hasBoxShadowBtn",state:"hover"}]},controlChangeTrigger:{settings:[{condition:"boxShadowBtn.hover.enable === true",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"hover",newValue:!0}},{condition:"boxShadowBtn.hover.enable === false",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"hover",newValue:!1}}],options:{noRecordHistory:!0}}},{label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"hover"},conditionDisplay:"false"}]}]}]},{controls:[{label:{en:"Link"},setting:{id:"enableBtnLink"},options:{labelVariant:"primary",toggleStyle:"switch"}},{layout:"vertical",controlConfig:{id:"linkedToPreSalesPageBanner",type:"banner",message:"Pre-sales page elements with link should redirect to the Sales page."},conditionDisplay:'pageType === "GP_PRE_SALE_PAGE" && enableBtnLink == true'},{type:"control",layout:"vertical",conditionDisplay:"enableBtnLink == true",setting:{id:"btnLink"}}]},{controls:[{label:{en:"Align"},conditionEnable:'!(globalSize.width === "default" || (parseInt(globalSize.width) >= 100 && globalSize.width?.includes("%")))',setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{SettingUIV2};

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

@@ -0,0 +1 @@
+import{DEVICES as e,makeStyleResponsive as a,makeWidth as s,getResponsiveValueByScreen as t}from"@gem-sdk/core";import{convertUnitToNumber as k}from"../../helpers.js";let getInitialWidthForCarouselItem=t=>{let k={};return e.forEach(e=>{if(!t?.vertical?.[e]){let e={...a("minw",s(getWidthForCarouselItem({spacing:t?.spacing,slidesToShow:t?.slidesToShow,sneakPeak:t?.sneakPeak,sneakPeakType:t?.sneakPeakType,sneakPeakOffsetCenter:t?.sneakPeakOffsetCenter,sneakPeakOffsetForward:t?.sneakPeakOffsetForward}))),...a("maxw",s(getWidthForCarouselItem({spacing:t?.spacing,slidesToShow:t?.slidesToShow,sneakPeak:t?.sneakPeak,sneakPeakType:t?.sneakPeakType,sneakPeakOffsetCenter:t?.sneakPeakOffsetCenter,sneakPeakOffsetForward:t?.sneakPeakOffsetForward})))};k={...k,...e}}}),k},getSlideToShow=a=>{let s={};return e.forEach(e=>{let k=t(a.sneakPeak,e),o=k?"center"===t(a.sneakPeakType,e)?t(a.sneakPeakOffsetCenter,e)??0:t(a.sneakPeakOffsetForward,e)??0:0,r=t(a.slidesToShow,e)||1,n="center"===t(a.sneakPeakType,e)?-2:-1;s[e]="auto"===r?r:r+o/100*n}),s},getWidthForCarouselItem=a=>{let s={};return e.forEach(e=>{let o=k(t(a.spacing,e),44),r=t(a.sneakPeak,e,!1),n=k(t(r?getSlideToShow({slidesToShow:a?.slidesToShow,sneakPeak:a?.sneakPeak,sneakPeakType:a?.sneakPeakType,sneakPeakOffsetCenter:a?.sneakPeakOffsetCenter,sneakPeakOffsetForward:a?.sneakPeakOffsetForward}):a.slidesToShow,e),4);s={...s,[e]:`calc(100% / ${n} - ${(n-1)*o/n}px)`}}),s},DOT_CONTAINER_SELECTOR="gp-carousel-dot-container";export{DOT_CONTAINER_SELECTOR,getInitialWidthForCarouselItem,getSlideToShow,getWidthForCarouselItem};

package/dist/esm/carousel/components/arrow/Arrow.js

@@ -0,0 +1,10 @@
+'use client';
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{getClass as r}from"./common/classes.js";import{getStyle as o}from"./common/styles.js";import{getData as s}from"./common/helpers.js";import{If as l}from"@gem-sdk/system";let Arrow=m=>{let{custom:a,left:n,onClick:i}=m,{isRenderCustomIcon:c}=s(m),{buttonClass:p,buttonContentClass:h}=r(m),{buttonStyle:u,buttonContentStyle:w,innerBorderCss:y}=o(m,"react"),d=l(c,a??"",`<svg
+      height="100%"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
+    </svg>`),g=e("div",{className:h,style:w,dangerouslySetInnerHTML:{__html:d||""}});return t("button",{type:"button","aria-label":`Carousel ${n?"Back":"Next"} Arrow`,className:p,style:u,onClick:i,children:[e("style",{type:"text/css",dangerouslySetInnerHTML:{__html:y}}),g]})};export{Arrow as default};