@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/dist/esm/helpers/borders.js

@@ -1,4 +1,189 @@
-import{getSingleColorVariable as o,getGlobalColorStateResponsiveStyle as e,getGlobalColorStateStyle as r,getGlobalColorStateResponsiveClass as t,getGlobalColorStateClass as l,getGlobalColorStateResponsiveClassDynamicBtn as n,getGlobalColorStateClassDynamicBtn as s}from"./colors.js";import{makeStyle as b,makeStyleResponsiveState as d,makeStyleState as m}from"./make-style.js";let getBorderStyle=e=>b({b:e?.border,bc:o(e?.color),bw:e?.width}),handleConvertBorderStyle=(o,e)=>{if(!o)return;if("desktop"in o||"tablet"in o||"mobile"in o){let r={desktop:{normal:"button"!==e||o.desktop?.normal?.borderType!=="none"||o.desktop?.normal?.isCustom?o.desktop?.normal?.border:"solid",hover:"button"!==e||o.desktop?.hover?.borderType!=="none"||o.desktop?.hover?.isCustom?o.desktop?.hover?.border:"solid",focus:"button"!==e||o.desktop?.focus?.borderType!=="none"||o.desktop?.focus?.isCustom?o.desktop?.focus?.border:"solid"},tablet:{normal:"button"!==e||o.tablet?.normal?.borderType!=="none"||o.tablet?.normal?.isCustom?o.tablet?.normal?.border:"solid",hover:"button"!==e||o.tablet?.hover?.borderType!=="none"||o.tablet?.hover?.isCustom?o.tablet?.hover?.border:"solid",focus:"button"!==e||o.tablet?.focus?.borderType!=="none"||o.tablet?.focus?.isCustom?o.tablet?.focus?.border:"solid"},mobile:{normal:"button"!==e||o.mobile?.normal?.borderType!=="none"||o.mobile?.normal?.isCustom?o.mobile?.normal?.border:"solid",hover:"button"!==e||o.mobile?.hover?.borderType!=="none"||o.mobile?.hover?.isCustom?o.mobile?.hover?.border:"solid",focus:"button"!==e||o.mobile?.focus?.borderType!=="none"||o.mobile?.focus?.isCustom?o.mobile?.focus?.border:"solid"}};return d("bs",r)}let r={normal:"button"!==e||o.normal?.borderType!=="none"||o.normal?.isCustom?o?.normal?.border:"solid",hover:"button"!==e||o.hover?.borderType!=="none"||o.hover?.isCustom?o?.hover?.border:"solid",focus:"button"!==e||o.focus?.borderType!=="none"||o.focus?.isCustom?o?.focus?.border:"solid"};return m("bs",r)},handleConvertBorderWidth=(o,e)=>{if(!o)return;if("desktop"in o||"tablet"in o||"mobile"in o){let r={desktop:{normal:"button"!==e||o.desktop?.normal?.borderType!=="none"||o?.desktop?.normal?.isCustom?o.desktop?.normal?.width:"1px 1px 1px 1px",hover:"button"!==e||o.desktop?.hover?.borderType!=="none"||o?.desktop?.normal?.isCustom?o.desktop?.hover?.width:"1px 1px 1px 1px",focus:"button"!==e||o.desktop?.focus?.borderType!=="none"||o?.desktop?.normal?.isCustom?o.desktop?.focus?.width:"1px 1px 1px 1px"},tablet:{normal:"button"!==e||o.tablet?.normal?.borderType!=="none"||o?.tablet?.normal?.isCustom?o.tablet?.normal?.width:"1px 1px 1px 1px",hover:"button"!==e||o.tablet?.hover?.borderType!=="none"||o?.tablet?.hover?.isCustom?o.tablet?.hover?.width:"1px 1px 1px 1px",focus:"button"!==e||o.tablet?.focus?.borderType!=="none"||o?.tablet?.focus?.isCustom?o.tablet?.focus?.width:"1px 1px 1px 1px"},mobile:{normal:"button"!==e||o.mobile?.normal?.borderType!=="none"||o?.mobile?.normal?.isCustom?o.mobile?.normal?.width:"1px 1px 1px 1px",hover:"button"!==e||o.mobile?.hover?.borderType!=="none"||o?.mobile?.hover?.isCustom?o.mobile?.hover?.width:"1px 1px 1px 1px",focus:"button"!==e||o.mobile?.focus?.borderType!=="none"||o?.mobile?.focus?.isCustom?o.mobile?.focus?.width:"1px 1px 1px 1px"}};return d("bw",r)}let r={normal:"button"!==e||o.normal?.borderType!=="none"||o.normal?.isCustom?o?.normal?.width:"1px 1px 1px 1px",hover:"button"!==e||o.hover?.borderType!=="none"||o.hover?.isCustom?o?.hover?.width:"1px 1px 1px 1px",focus:"button"!==e||o.focus?.borderType!=="none"||o.focus?.isCustom?o?.focus?.width:"1px 1px 1px 1px"};return m("bw",r)},handleConvertBorderColor=o=>{if(!o)return;if("desktop"in o||"tablet"in o||"mobile"in o){let r={desktop:{normal:o.desktop?.normal?.color,hover:o.desktop?.hover?.color,focus:o.desktop?.focus?.color},tablet:{normal:o.tablet?.normal?.color,hover:o.tablet?.hover?.color,focus:o.tablet?.focus?.color},mobile:{normal:o.mobile?.normal?.color,hover:o.mobile?.hover?.color,focus:o.mobile?.focus?.color}};return e("bc",r)}let t={normal:o?.normal?.color,hover:o?.hover?.color,focus:o?.focus?.color};return r("bc",t)},handleConvertClassColor=o=>{if(!o)return;if("desktop"in o||"tablet"in o||"mobile"in o){let e={desktop:{normal:o.desktop?.normal?.color,hover:o.desktop?.hover?.color,focus:o.desktop?.focus?.color},tablet:{normal:o.tablet?.normal?.color,hover:o.tablet?.hover?.color,focus:o.tablet?.focus?.color},mobile:{normal:o.mobile?.normal?.color,hover:o.mobile?.hover?.color,focus:o.mobile?.focus?.color}};return t("border",e)}let e={normal:o?.normal?.color,hover:o?.hover?.color,focus:o?.focus?.color};return l("border",e)},handleConvertClassColorDynamicBtn=o=>{if(!o)return;if("desktop"in o||"tablet"in o||"mobile"in o){let e={desktop:{normal:o.desktop?.normal?.color,hover:o.desktop?.hover?.color,focus:o.desktop?.focus?.color},tablet:{normal:o.tablet?.normal?.color,hover:o.tablet?.hover?.color,focus:o.tablet?.focus?.color},mobile:{normal:o.mobile?.normal?.color,hover:o.mobile?.hover?.color,focus:o.mobile?.focus?.color}};return n("border",e)}let e={normal:o?.normal?.color,hover:o?.hover?.color,focus:o?.focus?.color};return s("border",e)},composeBorderCss=e=>{if(!e)return"";let{border:r,width:t,color:l}=e;return`${r?`border-style: ${r};`:""}
-  ${t?`border-width: ${t};`:""}
-  ${l?`border-color: ${o(l)};`:""}
-  `};export{composeBorderCss,getBorderStyle,handleConvertBorderColor,handleConvertBorderStyle,handleConvertBorderWidth,handleConvertClassColor,handleConvertClassColorDynamicBtn};
+import { getSingleColorVariable, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateClassDynamicBtn } from './colors.js';
+import { makeStyle, makeStyleResponsiveState, makeStyleState } from './make-style.js';
+
+const getBorderStyle = (value)=>{
+    return makeStyle({
+        b: value?.border,
+        bc: getSingleColorVariable(value?.color),
+        bw: value?.width
+    });
+};
+const getBorderRadiusStyle = (borderRadius, shapeRadius)=>{
+    const initialRadius = Object.entries(shapeRadius || {}).reduce((shapeRadius, [position, value])=>{
+        return {
+            ...shapeRadius,
+            [`--${position}`]: value
+        };
+    }, {});
+    return Object.entries(borderRadius || {}).reduce((borderRadius, [position, value])=>{
+        return {
+            ...borderRadius,
+            [`--${position}`]: value
+        };
+    }, initialRadius);
+};
+const handleConvertBorderStyle = (value, type)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: type === 'button' && data.desktop?.normal?.borderType === 'none' && !data.desktop?.normal?.isCustom ? 'solid' : data.desktop?.normal?.border,
+                hover: type === 'button' && data.desktop?.hover?.borderType === 'none' && !data.desktop?.hover?.isCustom ? 'solid' : data.desktop?.hover?.border,
+                focus: type === 'button' && data.desktop?.focus?.borderType === 'none' && !data.desktop?.focus?.isCustom ? 'solid' : data.desktop?.focus?.border
+            },
+            tablet: {
+                normal: type === 'button' && data.tablet?.normal?.borderType === 'none' && !data.tablet?.normal?.isCustom ? 'solid' : data.tablet?.normal?.border,
+                hover: type === 'button' && data.tablet?.hover?.borderType === 'none' && !data.tablet?.hover?.isCustom ? 'solid' : data.tablet?.hover?.border,
+                focus: type === 'button' && data.tablet?.focus?.borderType === 'none' && !data.tablet?.focus?.isCustom ? 'solid' : data.tablet?.focus?.border
+            },
+            mobile: {
+                normal: type === 'button' && data.mobile?.normal?.borderType === 'none' && !data.mobile?.normal?.isCustom ? 'solid' : data.mobile?.normal?.border,
+                hover: type === 'button' && data.mobile?.hover?.borderType === 'none' && !data.mobile?.hover?.isCustom ? 'solid' : data.mobile?.hover?.border,
+                focus: type === 'button' && data.mobile?.focus?.borderType === 'none' && !data.mobile?.focus?.isCustom ? 'solid' : data.mobile?.focus?.border
+            }
+        };
+        return makeStyleResponsiveState('bs', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: type === 'button' && data.normal?.borderType === 'none' && !data.normal?.isCustom ? 'solid' : data?.normal?.border,
+        hover: type === 'button' && data.hover?.borderType === 'none' && !data.hover?.isCustom ? 'solid' : data?.hover?.border,
+        focus: type === 'button' && data.focus?.borderType === 'none' && !data.focus?.isCustom ? 'solid' : data?.focus?.border
+    };
+    return makeStyleState('bs', newVal);
+};
+const handleConvertBorderWidth = (value, type)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: type === 'button' && data.desktop?.normal?.borderType === 'none' && !data?.desktop?.normal?.isCustom ? '1px 1px 1px 1px' : data.desktop?.normal?.width,
+                hover: type === 'button' && data.desktop?.hover?.borderType === 'none' && !data?.desktop?.normal?.isCustom ? '1px 1px 1px 1px' : data.desktop?.hover?.width,
+                focus: type === 'button' && data.desktop?.focus?.borderType === 'none' && !data?.desktop?.normal?.isCustom ? '1px 1px 1px 1px' : data.desktop?.focus?.width
+            },
+            tablet: {
+                normal: type === 'button' && data.tablet?.normal?.borderType === 'none' && !data?.tablet?.normal?.isCustom ? '1px 1px 1px 1px' : data.tablet?.normal?.width,
+                hover: type === 'button' && data.tablet?.hover?.borderType === 'none' && !data?.tablet?.hover?.isCustom ? '1px 1px 1px 1px' : data.tablet?.hover?.width,
+                focus: type === 'button' && data.tablet?.focus?.borderType === 'none' && !data?.tablet?.focus?.isCustom ? '1px 1px 1px 1px' : data.tablet?.focus?.width
+            },
+            mobile: {
+                normal: type === 'button' && data.mobile?.normal?.borderType === 'none' && !data?.mobile?.normal?.isCustom ? '1px 1px 1px 1px' : data.mobile?.normal?.width,
+                hover: type === 'button' && data.mobile?.hover?.borderType === 'none' && !data?.mobile?.hover?.isCustom ? '1px 1px 1px 1px' : data.mobile?.hover?.width,
+                focus: type === 'button' && data.mobile?.focus?.borderType === 'none' && !data?.mobile?.focus?.isCustom ? '1px 1px 1px 1px' : data.mobile?.focus?.width
+            }
+        };
+        return makeStyleResponsiveState('bw', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: type === 'button' && data.normal?.borderType === 'none' && !data.normal?.isCustom ? '1px 1px 1px 1px' : data?.normal?.width,
+        hover: type === 'button' && data.hover?.borderType === 'none' && !data.hover?.isCustom ? '1px 1px 1px 1px' : data?.hover?.width,
+        focus: type === 'button' && data.focus?.borderType === 'none' && !data.focus?.isCustom ? '1px 1px 1px 1px' : data?.focus?.width
+    };
+    return makeStyleState('bw', newVal);
+};
+const handleConvertBorderColor = (value)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color
+            }
+        };
+        return getGlobalColorStateResponsiveStyle('bc', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return getGlobalColorStateStyle('bc', newVal);
+};
+const handleConvertClassColor = (value)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color
+            }
+        };
+        return getGlobalColorStateResponsiveClass('border', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return getGlobalColorStateClass('border', newVal);
+};
+const handleConvertClassColorDynamicBtn = (value)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        const data = value;
+        const newVal = {
+            desktop: {
+                normal: data.desktop?.normal?.color,
+                hover: data.desktop?.hover?.color,
+                focus: data.desktop?.focus?.color
+            },
+            tablet: {
+                normal: data.tablet?.normal?.color,
+                hover: data.tablet?.hover?.color,
+                focus: data.tablet?.focus?.color
+            },
+            mobile: {
+                normal: data.mobile?.normal?.color,
+                hover: data.mobile?.hover?.color,
+                focus: data.mobile?.focus?.color
+            }
+        };
+        return getGlobalColorStateResponsiveClassDynamicBtn('border', newVal);
+    }
+    const data = value;
+    const newVal = {
+        normal: data?.normal?.color,
+        hover: data?.hover?.color,
+        focus: data?.focus?.color
+    };
+    return getGlobalColorStateClassDynamicBtn('border', newVal);
+};
+const composeBorderCss = (borderV)=>{
+    if (!borderV) return '';
+    const { border, width, color } = borderV;
+    return `${border ? `border-style: ${border};` : ''}
+  ${width ? `border-width: ${width};` : ''}
+  ${color ? `border-color: ${getSingleColorVariable(color)};` : ''}
+  `;
+};
+
+export { composeBorderCss, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn };

package/dist/esm/helpers/carousel.js

@@ -1 +1,51 @@
-import{getResponsiveValueByScreen as e}from"./get-resonsive-value.js";let getCarouselContainerHeight=(t,o,l)=>{let a=(e,t,o)=>"outside"===e?`calc(100% - ${t??"0"}px - ${o&&"Auto"!==o?o:"0"}px)`:"100%";return{desktop:a(e(t,"desktop"),e(o,"desktop"),e(l,"desktop")),tablet:a(e(t,"tablet"),e(o,"tablet"),e(l,"tablet")),mobile:a(e(t,"mobile"),e(o,"mobile"),e(l,"mobile"))}},makeContainerWidthOrHeight=t=>{let o=e=>e?"w":"h",l=getCarouselContainerHeight(t.dotStyle,t.dotSize,t.dotGapToCarousel);return{[`--${o(e(t?.vertical,"desktop"))}`]:l.desktop,[`--${o(e(t?.vertical,"tablet"))}-tablet`]:l.tablet,[`--${o(e(t?.vertical,"mobile"))}-mobile`]:l.mobile}},makeDotGapToCarouselStyle=(t,o,l)=>{let a={},i=["desktop","tablet","mobile"],r=(e,t)=>"outside"===e?t?"ml":"mt":t?"right":"bottom";return i.map(t=>{let l=e(o,t,0);a={...a,[t]:`${l&&"Auto"!==l?l:"0"}px`}}),{[`--${r(t?.desktop,l?.desktop)}`]:a.desktop,[`--${r(t?.tablet,l?.tablet)}-tablet`]:a.tablet,[`--${r(t?.mobile,l?.mobile)}-mobile`]:a.mobile}};export{getCarouselContainerHeight,makeContainerWidthOrHeight,makeDotGapToCarouselStyle};
+import { getResponsiveValueByScreen } from './get-resonsive-value.js';
+
+const getCarouselContainerHeight = (dotStyle)=>{
+    const getVal = (dotStyle)=>{
+        return dotStyle === 'outside' ? 'auto' : '100%';
+    };
+    return {
+        desktop: getVal(getResponsiveValueByScreen(dotStyle, 'desktop')),
+        tablet: getVal(getResponsiveValueByScreen(dotStyle, 'tablet')),
+        mobile: getVal(getResponsiveValueByScreen(dotStyle, 'mobile'))
+    };
+};
+const makeContainerWidthOrHeight = (setting)=>{
+    const getStyleName = (vertical)=>{
+        return vertical ? 'w' : 'h';
+    };
+    const result = getCarouselContainerHeight(setting.dotStyle);
+    return {
+        [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'desktop'))}`]: result.desktop,
+        [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'tablet'))}-tablet`]: result.tablet,
+        [`--${getStyleName(getResponsiveValueByScreen(setting?.vertical, 'mobile'))}-mobile`]: result.mobile
+    };
+};
+const makeDotGapToCarouselStyle = (dotStyle, dotGapToCarousel, vertical)=>{
+    let result = {};
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const getStyleName = (dotStyle, vertical)=>{
+        if (dotStyle === 'outside') {
+            return vertical ? 'ml' : 'mt';
+        }
+        return vertical ? 'right' : 'bottom';
+    };
+    devices.map((device)=>{
+        const gapToCarousel = getResponsiveValueByScreen(dotGapToCarousel, device, 0);
+        result = {
+            ...result,
+            [device]: `${!gapToCarousel || gapToCarousel === 'Auto' ? '0' : gapToCarousel}px`
+        };
+    });
+    return {
+        [`--${getStyleName(getResponsiveValueByScreen(dotStyle, 'desktop'), getResponsiveValueByScreen(vertical, 'desktop'))}`]: result.desktop,
+        [`--${getStyleName(getResponsiveValueByScreen(dotStyle, 'tablet'), getResponsiveValueByScreen(vertical, 'tablet'))}-tablet`]: result.tablet,
+        [`--${getStyleName(getResponsiveValueByScreen(dotStyle, 'mobile'), getResponsiveValueByScreen(vertical, 'mobile'))}-mobile`]: result.mobile
+    };
+};
+
+export { getCarouselContainerHeight, makeContainerWidthOrHeight, makeDotGapToCarouselStyle };

package/dist/esm/helpers/clone-deep.js

@@ -1 +1,3 @@
-let cloneDeep=e=>JSON.parse(JSON.stringify(e));export{cloneDeep};
+const cloneDeep = (data)=>JSON.parse(JSON.stringify(data));
+
+export { cloneDeep };

package/dist/esm/helpers/cls.js

@@ -1 +1,14 @@
-function toVal(t){return"string"==typeof t?t:"object"==typeof t&&null!==t&&Object.keys(t).filter(o=>t[o]).join(" ")}function cls(...t){return t.map(toVal).filter(Boolean).join(" ")}export{cls};
+function toVal(mix) {
+    if (typeof mix === 'string') {
+        return mix;
+    } else if (typeof mix === 'object' && mix !== null) {
+        return Object.keys(mix).filter((key)=>mix[key]).join(' ');
+    } else {
+        return false;
+    }
+}
+function cls(...classes) {
+    return classes.map(toVal).filter(Boolean).join(' ');
+}
+
+export { cls };

package/dist/esm/helpers/colors.js

@@ -1 +1,169 @@
-import{isDefined as t}from"./is-defined.js";import{stateMapping as e}from"./constant.js";let getGlobalColorCSSProp=t=>getSingleColorVariable(t),getGlobalColorClass=(t,e)=>"string"!=typeof e||!e||e?.startsWith("#")||e?.startsWith("rgb")||e?.startsWith("hsl")||e?.startsWith("transparent")?"":`gp-${t}-g-${e}`,getGlobalColorResponsiveClass=(e,o)=>o?Object.entries(o).map(([t,o])=>{let l=getGlobalColorClass(e,o);if(l)return"desktop"===t?l:`${t}:${l}`}).filter(t).join(" "):"",getGlobalColorStateClass=(e,o)=>o?Object.entries(o).map(([t,o])=>{let l=getGlobalColorClass(e,o);if(l)return"normal"===t?l:`${t}:${l}`}).filter(t).join(" "):"",getGlobalColorStateClassDynamicBtn=(e,o)=>o?Object.entries(o).map(([t,o])=>{let l=getGlobalColorClass(e,o);if(l)return"normal"===t?String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${l}`:String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${t}:${l}`}).filter(t).join(" "):"",getGlobalColorStateResponsiveClass=(e,o)=>o?Object.entries(o).map(([o,l])=>"desktop"===o?Object.entries(l).map(([t,o])=>{let l=getGlobalColorClass(e,o);if(l)return"normal"===t?l:`${t}:${l}`}).filter(t).join(" "):Object.entries(l).map(([t,l])=>{let r=getGlobalColorClass(e,l);if(r)return"normal"===t?`${o}:${r}`:`${o}:${t}:${r}`}).filter(t).join(" ")).filter(Boolean).join(" "):"",getGlobalColorStateResponsiveClassDynamicBtn=(e,o)=>o?Object.entries(o).map(([o,l])=>"desktop"===o?Object.entries(l).map(([t,o])=>{let l=getGlobalColorClass(e,o);if(l)return"normal"===t?String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${l}`:String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${t}:${l}`}).filter(t).join(" "):Object.entries(l).map(([t,l])=>{let r=getGlobalColorClass(e,l);if(r)return"normal"===t?String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${o}:${r}`:String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${o}:${t}:${r}`}).filter(t).join(" ")).filter(Boolean).join(" "):"",getGlobalColorResponsiveStyle=(t,e)=>e?Object.fromEntries(Object.entries(e).map(([e,o])=>"desktop"===e?[`--${t}`,getSingleColorVariable(o)]:[`--${t}-${e}`,getSingleColorVariable(o)])):{},getGlobalColorStateStyle=(o,l)=>l?Object.fromEntries(Object.entries(l).map(([t,l])=>"active"===t?[]:[`-${e?.[t]}-${o}`,getSingleColorVariable(l)]).filter(t)):{},getGlobalColorStateResponsiveStyle=(o,l)=>l?Object.entries(l).map(([l,r])=>"desktop"===l?Object.fromEntries(Object.entries(r).map(([t,l])=>"active"===t?[]:[`-${e[t]}-${o}`,getSingleColorVariable(l)]).filter(t)):Object.fromEntries(Object.entries(r).map(([t,r])=>"active"===t?[]:[`-${e[t]}-${o}-${l}`,getSingleColorVariable(r)]).filter(t))).reduce((t,e)=>({...t,...e}),{}):{},getSingleColorVariable=t=>{if(t&&"string"==typeof t)return isColor(t)?t:`var(--g-c-${t}, ${t})`};function isColor(t){return!!t&&"string"==typeof t&&(t?.startsWith("#")||t?.startsWith("rgb")||t?.startsWith("hsl")||t?.startsWith("transparent"))}let getGlobalColorStyle=t=>t?{"--c":getSingleColorVariable(t)}:{},composeTextColorCss=t=>`${t?`color: ${getSingleColorVariable(t)} !important;`:""}`;export{composeTextColorCss,getGlobalColorCSSProp,getGlobalColorClass,getGlobalColorResponsiveClass,getGlobalColorResponsiveStyle,getGlobalColorStateClass,getGlobalColorStateClassDynamicBtn,getGlobalColorStateResponsiveClass,getGlobalColorStateResponsiveClassDynamicBtn,getGlobalColorStateResponsiveStyle,getGlobalColorStateStyle,getGlobalColorStyle,getSingleColorVariable,isColor};
+import { isDefined } from './is-defined.js';
+import { stateMapping } from './constant.js';
+
+const getGlobalColorCSSProp = (color)=>{
+    return getSingleColorVariable(color);
+};
+const getGlobalColorClass = (type, color)=>{
+    if (typeof color !== 'string' || !color || color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent')) return '';
+    return `gp-${type}-g-${color}`;
+};
+const getGlobalColorResponsiveClass = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (device === 'desktop') {
+            return clName;
+        } else {
+            return `${device}:${clName}`;
+        }
+    }).filter(isDefined).join(' ');
+};
+const getGlobalColorStateClass = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([state, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (state === 'normal') {
+            return clName;
+        } else {
+            return `${state}:${clName}`;
+        }
+    }).filter(isDefined).join(' ');
+};
+const getGlobalColorStateClassDynamicBtn = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([state, value])=>{
+        const clName = getGlobalColorClass(type, value);
+        if (!clName) return undefined;
+        if (state === 'normal') {
+            return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${clName}`;
+        } else {
+            return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${state}:${clName}`;
+        }
+    }).filter(isDefined).join(' ');
+};
+const getGlobalColorStateResponsiveClass = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return clName;
+                } else {
+                    return `${state}:${clName}`;
+                }
+            }).filter(isDefined).join(' ');
+        } else {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return `${device}:${clName}`;
+                } else {
+                    return `${device}:${state}:${clName}`;
+                }
+            }).filter(isDefined).join(' ');
+        }
+    }).filter(Boolean).join(' ');
+};
+const getGlobalColorStateResponsiveClassDynamicBtn = (type, data)=>{
+    if (!data) return '';
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${clName}`;
+                } else {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${state}:${clName}`;
+                }
+            }).filter(isDefined).join(' ');
+        } else {
+            return Object.entries(objectState).map(([state, value])=>{
+                const clName = getGlobalColorClass(type, value);
+                if (!clName) return undefined;
+                if (state === 'normal') {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${device}:${clName}`;
+                } else {
+                    return String.raw`[&_.shopify-payment-button\_\_button--unbranded]:${device}:${state}:${clName}`;
+                }
+            }).filter(isDefined).join(' ');
+        }
+    }).filter(Boolean).join(' ');
+};
+const getGlobalColorResponsiveStyle = (type, data)=>{
+    if (!data) return {};
+    return Object.fromEntries(Object.entries(data).map(([device, value])=>{
+        if (device === 'desktop') {
+            return [
+                `--${type}`,
+                getSingleColorVariable(value)
+            ];
+        } else {
+            return [
+                `--${type}-${device}`,
+                getSingleColorVariable(value)
+            ];
+        }
+    }));
+};
+const getGlobalColorStateStyle = (type, data)=>{
+    if (!data) return {};
+    return Object.fromEntries(Object.entries(data).map(([state, value])=>{
+        if (state === 'active') return [];
+        return [
+            `-${stateMapping?.[state] || ''}-${type}`,
+            getSingleColorVariable(value)
+        ];
+    }).filter(isDefined));
+};
+const getGlobalColorStateResponsiveStyle = (type, data)=>{
+    if (!data) return {};
+    return Object.entries(data).map(([device, objectState])=>{
+        if (device === 'desktop') {
+            return Object.fromEntries(Object.entries(objectState).map(([state, value])=>{
+                if (state === 'active') return [];
+                return [
+                    `-${stateMapping[state]}-${type}`,
+                    getSingleColorVariable(value)
+                ];
+            }).filter(isDefined));
+        } else {
+            return Object.fromEntries(Object.entries(objectState).map(([state, value])=>{
+                if (state === 'active') return [];
+                return [
+                    `-${stateMapping[state]}-${type}-${device}`,
+                    getSingleColorVariable(value)
+                ];
+            }).filter(isDefined));
+        }
+    }).reduce((acc, curr)=>({
+            ...acc,
+            ...curr
+        }), {});
+};
+const getSingleColorVariable = (color)=>{
+    if (!color) return undefined;
+    if (isColor(color)) return color;
+    return `var(--g-c-${color}, ${color})`;
+};
+function isColor(color) {
+    if (!color || typeof color !== 'string') return false;
+    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent') || color?.startsWith('linear-gradient');
+}
+const getGlobalColorStyle = (data)=>{
+    if (!data) return {};
+    return {
+        '--c': getSingleColorVariable(data)
+    };
+};
+const composeTextColorCss = (color)=>{
+    return `${color ? `color: ${getSingleColorVariable(color)} !important;` : ''}`;
+};
+
+export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor };