@gem-sdk/core 3.0.0-pre-production.15 → 3.0.6

package/dist/esm/components/resize/Spacing.js

@@ -1,256 +1,2 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useEffect } from 'react';
-import 'zustand';
-import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
-import 'react-transition-group';
-import '@gem-sdk/core';
-import 'swr';
-import 'swr/infinite';
-import { usePageType } from '../../hooks/shop.js';
-import 'classnames';
-import 'dayjs';
-import '../../helpers/convert.js';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'vanilla-lazyload';
-import '../../hooks/useCartUI.js';
-
-function Spacing(props) {
-    const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
-    const pageType = usePageType();
-    const $bottomDrag = useRef(null);
-    const $bottomBg = useRef(null);
-    const delayMouseMove = useRef(null);
-    const isDragging = useRef(false);
-    const startY = useRef(0);
-    const marginBottom = useRef(0);
-    const $visualNumberValue = useRef(null);
-    const [marginBottomValue, setMarginBottomValue] = useState(0);
-    const [isShowVisual, setIsShowVisual] = useState(false);
-    const hideVisualNumberValue = useRef(null);
-    const getNewValueMargin = (event)=>{
-        const top = event.clientY;
-        const diffY = Math.ceil(top - startY.current);
-        const currentValue = marginBottom.current || 0;
-        const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
-        return {
-            newValue
-        };
-    };
-    const onMouseMoveDocument = (event)=>{
-        if ($bottomDrag.current && $bottomBg.current) {
-            // $bottomDrag.current.
-            const { newValue } = getNewValueMargin(event);
-            $bottomBg.current.style.height = newValue;
-            $bottomDrag.current.style.top = newValue;
-            const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
-            if ($component) {
-                $component.style.marginBottom = newValue;
-                onShowMarginBottomNumber(newValue);
-            }
-        }
-    };
-    const onMouseUpDocument = ()=>{
-        endDrag();
-    };
-    const startDrag = ()=>{
-        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
-        delayMouseMove.current = setTimeout(()=>{
-            isDragging.current = true;
-            const event = new CustomEvent('editor:toolbar:resize-spacing', {
-                bubbles: true,
-                detail: {
-                    value: true
-                }
-            });
-            window.dispatchEvent(event);
-            document.addEventListener('mousemove', onMouseMoveDocument);
-            document.addEventListener('mouseup', onMouseUpDocument);
-        }, 100);
-    };
-    const endDrag = ()=>{
-        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
-        isDragging.current = false;
-        const event = new CustomEvent('editor:toolbar:resize-spacing', {
-            bubbles: true,
-            detail: {
-                value: false
-            }
-        });
-        window.dispatchEvent(event);
-        if ($bottomDrag.current) {
-            const style = getComputedStyle($bottomDrag.current);
-            const marginBottom = style.top;
-            const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
-                bubbles: true,
-                detail: {
-                    componentUid: props.uid,
-                    marginBottom
-                }
-            });
-            window.dispatchEvent(event);
-        }
-        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        if ($component) {
-            $component.style.marginBottom = '';
-        }
-        document.removeEventListener('mousemove', onMouseMoveDocument);
-        document.removeEventListener('mouseup', onMouseUpDocument);
-    };
-    const onMouseDown = (event)=>{
-        if ($bottomDrag.current) {
-            const style = getComputedStyle($bottomDrag.current);
-            startY.current = event.clientY;
-            marginBottom.current = parseFloat(style.top);
-            startDrag();
-        }
-    };
-    const onMouseUp = ()=>{
-        endDrag();
-    };
-    const getChildrenByAttrSelector = ($el, attrSelector)=>{
-        const childLen = $el.children.length;
-        if (childLen) {
-            for(let i = 0; i < childLen; i++){
-                const children = $el.children[i];
-                if (children) {
-                    const is = children.getAttribute(attrSelector);
-                    if (is) {
-                        return children;
-                    }
-                }
-            }
-        }
-    };
-    const isLayoutElement = (el)=>{
-        const tag = el.getAttribute('data-component-tag');
-        return tag === 'Row' || tag === 'Product';
-    };
-    const updateSpacing = useCallback((isShowVisualize)=>{
-        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
-        if (!$component) return;
-        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        if (!toolbar) return;
-        const isActive = toolbar.getAttribute('data-toolbar-active');
-        if (!isActive) return;
-        const style = getComputedStyle($component);
-        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
-        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
-        if ($marginBottom) {
-            if ($bottomBg.current && $bottomDrag.current) {
-                let value = style.marginBottom;
-                isShowVisualize && onShowMarginBottomNumber(value);
-                if (parseFloat(value) < 0) {
-                    value = '0';
-                }
-                $bottomBg.current.style.height = value;
-                $bottomDrag.current.style.top = value;
-                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
-                if (isLayoutElement($component)) {
-                    $bottomBg.current.style.left = '0';
-                } else {
-                    const paddingLeft = style.paddingLeft;
-                    const leftValue = `-${paddingLeft}`;
-                    const translateCss = `translate(${leftValue}, -100%)`;
-                    $bottomBg.current.style.left = leftValue;
-                    $bottomDrag.current.style.transform = translateCss;
-                }
-            }
-        }
-    }, []);
-    const onShowMarginBottomNumber = (value)=>{
-        const parsedValue = parseFloat(value);
-        setMarginBottomValue(parsedValue);
-        setIsShowVisual(true);
-        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
-        hideVisualNumberValue.current = setTimeout(()=>{
-            setIsShowVisual(false);
-        }, 2000);
-        // break point 28px
-        const topPosition = parsedValue <= 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
-        if ($visualNumberValue.current) {
-            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
-        }
-    };
-    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
-    useEffect(()=>{
-        // validate margin bottom setting changed
-        const isShowVisualize = verifyMarginBottomChanged(previousAdvanced, props.advanced?.['spacing-setting']);
-        updateSpacing(isShowVisualize);
-    }, [
-        previousAdvanced,
-        props.advanced,
-        updateSpacing
-    ]);
-    const verifyMarginBottomChanged = (prevValue, newValue)=>{
-        const listDevices = [
-            'desktop',
-            'tablet',
-            'mobile'
-        ];
-        return listDevices.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
-    };
-    const onWindowResize = useCallback(()=>{
-        updateSpacing();
-    }, [
-        updateSpacing
-    ]);
-    useEffect(()=>{
-        window.addEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
-        window.addEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
-        window.addEventListener('resize', onWindowResize);
-        return ()=>{
-            window.removeEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
-            window.removeEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
-            window.removeEventListener('resize', onWindowResize);
-        };
-    }, [
-        onWindowResize,
-        updateSpacing
-    ]);
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: props.tag !== 'Section' && pageType !== 'POST_PURCHASE' && /*#__PURE__*/ jsx("div", {
-            "data-spacing": true,
-            "data-spacing-theme-section": isThemeSectionEditor,
-            className: "gp-absolute gp-w-full gp-bottom-0",
-            children: /*#__PURE__*/ jsxs("div", {
-                "data-spacing-margin-bottom": true,
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        "data-spacing-margin-bottom-bg": true,
-                        ref: $bottomBg,
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                "data-spacing-margin-bottom-value": true
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                "data-active": isShowVisual,
-                                "data-value-number": true,
-                                ref: $visualNumberValue,
-                                children: marginBottomValue
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        ref: $bottomDrag,
-                        "data-spacing-margin-bottom-drag": true,
-                        onMouseDown: onMouseDown,
-                        onMouseUp: onMouseUp,
-                        role: "presentation"
-                    })
-                ]
-            })
-        })
-    });
-}
-const usePrevious = (value)=>{
-    const ref = useRef();
-    useEffect(()=>{
-        ref.current = value;
-    }, [
-        value
-    ]);
-    return ref.current;
-};
-
-export { Spacing as default };
+'use client';
+import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as n,useState as o,useCallback as i,useEffect as a}from"react";import"zustand";import{useBuilderPreviewStore as l}from"../../contexts/BuilderPreviewContext.js";import{DEVICES as s}from"../../constants/device.js";import"react-transition-group";import"@gem-sdk/core";import"swr";import"swr/infinite";import{usePageType as u}from"../../hooks/shop.js";import"classnames";import"dayjs";import"../../helpers/convert.js";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"../../hooks/useCartUI.js";import"../../hooks/useStickyStore.js";function Spacing(c){let d=l(t=>t.isThemeSectionEditor),m=u(),p=n(null),g=n(null),v=n(null),b=n(!1),f=n(0),w=n(0),h=n(null),[y,E]=o(0),[S,L]=o(!1),C=n(null),j=t=>{let e=t.clientY,r=Math.ceil(e-f.current),n=w.current||0,o=n+r>=0?`${n+r}px`:"0px";return{newValue:o}},x=t=>{if(p.current&&g.current){let{newValue:e}=j(t);g.current.style.height=e,p.current.style.top=e;let r=p.current.closest("[data-toolbar-wrap]");r&&(r.style.marginBottom=e,U(e))}},T=()=>{z()},k=()=>{v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{b.current=!0;let t=new CustomEvent("editor:toolbar:resize-spacing",{bubbles:!0,detail:{value:!0}});window.dispatchEvent(t),document.addEventListener("mousemove",x),document.addEventListener("mouseup",T)},100)},z=()=>{v.current&&clearTimeout(v.current),b.current=!1;let t=new CustomEvent("editor:toolbar:resize-spacing",{bubbles:!0,detail:{value:!1}});if(window.dispatchEvent(t),p.current){let t=getComputedStyle(p.current),e=t.top,r=new CustomEvent("editor:toolbar:change-margin-bottom",{bubbles:!0,detail:{componentUid:c.uid,marginBottom:e}});window.dispatchEvent(r)}let e=p.current?.closest("[data-toolbar-wrap]");e&&(e.style.marginBottom=""),document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",T)},P=(t,e)=>{let r=t.children.length;if(r)for(let n=0;n<r;n++){let r=t.children[n];if(r){let t=r.getAttribute(e);if(t)return r}}},A=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},B=i(t=>{let e=p.current?.closest("[data-toolbar-wrap]");if(!e)return;let r=P(e,"data-toolbar");if(!r)return;let n=r.getAttribute("data-toolbar-active");if(!n)return;let o=getComputedStyle(e),i=P(e,"data-spacing"),a=i?.querySelector("[data-spacing-margin-bottom]")||null;if(a&&g.current&&p.current){let r=o.marginBottom;if(t&&U(r),0>parseFloat(r)&&(r="0"),g.current.style.height=r,p.current.style.top=r,a.setAttribute("data-spacing-margin-bottom-active","true"),A(e))g.current.style.left="0";else{let t=o.paddingLeft,e=`-${t}`,r=`translate(${e}, -100%)`;g.current.style.left=e,p.current.style.transform=r}}},[]),U=t=>{let e=parseFloat(t);E(e),L(!0),C.current&&clearTimeout(C.current),C.current=setTimeout(()=>{L(!1)},2e3);let r=e<=28&&e>=0?e/2+16:e>28?0:16;h.current&&(h.current.style.transform=`translateY(${r}px)`)},$=usePrevious(c.advanced?.["spacing-setting"]);a(()=>{let t=F($,c.advanced?.["spacing-setting"]);B(t)},[$,c.advanced,B]);let F=(t,e)=>s.some(r=>JSON.stringify(t?.[r]?.margin?.bottom)!==JSON.stringify(e?.[r]?.margin?.bottom)),M=i(()=>{B()},[B]);return a(()=>(window.addEventListener("editor:toolbar:update-margin-bottom",()=>B),window.addEventListener("editor:toolbar:update-padding-left",()=>B),window.addEventListener("resize",M),()=>{window.removeEventListener("editor:toolbar:update-margin-bottom",()=>B),window.removeEventListener("editor:toolbar:update-padding-left",()=>B),window.removeEventListener("resize",M)}),[M,B]),t(e,{children:"Section"!==c.tag&&"POST_PURCHASE"!==m&&t("div",{"data-spacing":!0,"data-spacing-theme-section":d,className:"gp-absolute gp-w-full gp-bottom-0",children:r("div",{"data-spacing-margin-bottom":!0,children:[r("div",{"data-spacing-margin-bottom-bg":!0,ref:g,children:[t("div",{"data-spacing-margin-bottom-value":!0}),t("div",{"data-active":S,"data-value-number":!0,ref:h,children:y})]}),t("div",{ref:p,"data-spacing-margin-bottom-drag":!0,onMouseDown:t=>{if(p.current){let e=getComputedStyle(p.current);f.current=t.clientY,w.current=parseFloat(e.top),k()}},onMouseUp:()=>{z()},role:"presentation"})]})})})}let usePrevious=t=>{let e=n();return a(()=>{e.current=t},[t]),e.current};export{Spacing as default};

package/dist/esm/components/src/product/helpers/variant-presets.js

@@ -1,54 +1 @@
-const colorPreset = {
-    black: '#000000',
-    white: '#FFFFFF',
-    gray: '#808080',
-    red: '#FF0000',
-    blue: '#0000FF',
-    green: '#008000',
-    yellow: '#FFFF00',
-    orange: '#FFA500',
-    pink: '#FFC0CB',
-    purple: '#800080',
-    brown: '#A52A2A',
-    cyan: '#00FFFF',
-    magenta: '#FF00FF',
-    teal: '#008080',
-    navy: '#000080',
-    maroon: '#800000',
-    gold: '#FFD700',
-    silver: '#C0C0C0',
-    beige: '#F5F5DC',
-    ivory: '#FFFFF0',
-    lavender: '#E6E6FA',
-    indigo: '#4B0082',
-    coral: '#FF7F50',
-    mint: '#98FF98',
-    'sky blue': '#87CEEB',
-    salmon: '#FA8072',
-    olive: '#808000',
-    lilac: '#C8A2C8',
-    peach: '#FFDAB9',
-    turquoise: '#40E0D0',
-    ruby: '#E0115F',
-    bronze: '#CD7F32',
-    slate: '#708090',
-    charcoal: '#36454F',
-    sand: '#C2B280',
-    mauve: '#E0B0FF',
-    tangerine: '#FF4500',
-    'mint green': '#00FF99',
-    'forest green': '#228B22',
-    'ruby red': '#9B111E',
-    marigold: '#FFB928',
-    eggplant: '#990066',
-    'coral pink': '#F88379',
-    mustard: '#FFDB58',
-    'sky gray': '#B0C4DE',
-    'dusty rose': '#FF9BAE',
-    'olive green': '#556B2F',
-    coffee: '#6F4E37',
-    'lilac gray': '#C8A2C8',
-    'steel blue': '#4682B4'
-};
-
-export { colorPreset };
+let colorPreset={black:"#000000",white:"#FFFFFF",gray:"#808080",red:"#D0312D",blue:"#3944BC",green:"#3CB043",yellow:"#FFFF00",orange:"#ED7014",pink:"#F699CD",purple:"#A32CC4",brown:"#A52A2A",cyan:"#00FFFF",magenta:"#FF00FF",teal:"#48AAAD",navy:"#0A1172",maroon:"#800000",gold:"#FFD700",silver:"#ADADC9",beige:"#EEDC9A",ivory:"#FFFFF0",lavender:"#E6E6FA",indigo:"#281E5D",coral:"#FF7F50",mint:"#99EDC3","sky blue":"#87CEEB",salmon:"#FF9999",olive:"#98BF64",lilac:"#C8A2C8",peach:"#FC9483",turquoise:"#40E0D0",ruby:"#900603",bronze:"#B2560D",slate:"#757C88",charcoal:"#28231D",sand:"#D8B863",mauve:"#7A4988",tangerine:"#FA8128","mint green":"#00FF99","forest green":"#0B6623","ruby red":"#9B111E",marigold:"#FFB928",eggplant:"#311432","coral pink":"#FE7D6A",mustard:"#FEDC56","sky gray":"#B0C4DE","dusty rose":"#FF9BAE","olive green":"#556B2F",coffee:"#6F4E37","lilac gray":"#C8A2C8","steel blue":"#4682B4","cherry red":"#990F02",rose:"#FC94AF",jam:"#60100B",merlot:"#541E1B",garnet:"#610C04",crimson:"#B90E0A",scarlet:"#900D09",wine:"#4E0707",brick:"#7E2811",apple:"#A91B0D",mahogany:"#420C09",blood:"#710C04","sangria red":"#5E1916",berry:"#7A1712",currant:"#680C07","blush red":"#BC544B",candy:"#D21404",lipstick:"#9B1003",carmine:"#960018","persian red":"#CA3433",vermilion:"#7E191B","imperial red":"#ED2939","indian red":"#CD5C5C","chili red":"#C21807","fire brick":"#B22222",desire:"#EA3C53",raspberry:"#D21F3C","candy apple":"#FF0800",hibiscus:"#B43757","u.s. flag":"#BF0A30",ferrari:"#FF2800",burgundy:"#8D021F","dark red":"#8B0000","prismatic red":"#D03D33","49ers red":"#AA0000","cardinals red":"#BD2031","ajax red":"#D2122E","alabama crimson":"#9E1B32","alizarin crimson":"#E32636","amaranth red":"#F4364C","american rose":"#FF033E","angels red":"#BA0021","arsenal red":"#DB0007","auburn red":"#A52A2A","bu scarlet":"#CC0000","bills red":"#C60C30","bittersweet shimmer":"#BF4F51",merigold:"#FCAE1E",cider:"#B56727",rust:"#8D4004",ginger:"#BE5504",tiger:"#FC6A03",fire:"#DD571C",cantaloupe:"#FDA172",apricot:"#ED820E",clay:"#80400B",honey:"#EC9706",carrot:"#ED7117",squash:"#C95B0C",spice:"#7A3803",marmalade:"#D16002",amber:"#893101",sandstone:"#D67229",yam:"#CC5801",tangelo:"#FC4C02",flame:"#E34A27",fulvous:"#E68000","dark orange":"#FF8C00","vivid orange":"#FF5E0E","orange-red":"#FF4500","metallic orange":"#E26310",pumpkin:"#F5761A","smashed pumpkin":"#FD673A","international orange":"#FF4F00","spanish orange":"#F06105","princeton orange":"#FF8F00","deep saffron":"#FFA52C","alloy orange":"#C35214","halloween orange":"#EE5921",gamboge:"#E89611","medium vermilion":"#CF5B2E","pastel orange":"#FEBA4F","philippine orange":"#F26E01","royal orange":"#FF9944","dark coral":"#D75341","cadmium orange":"#E6812F",rajah:"#FABA5F","mango tango":"#FB8842","orange peel":"#FF9F00","vivid tangelo":"#EC7625",persimmon:"#EC5800","browns orange":"#FF3C00","burnt orange":"#CC5500",tan:"#E6DBAC",macaroon:"#F9E076","hazel wood":"#C9BB8E",granola:"#D6B85A",oat:"#DFC98A","egg nog":"#FAE29C",fawn:"#C8A951","sugar cookie":"#F3EAAF",sepia:"#E3B778",latte:"#E7C27D",oyster:"#DCD7A0",biscotti:"#E3C565",parmesan:"#FDE992",hazelnut:"#BDA55D",sandcastle:"#DAC17C",buttermilk:"#FDEFB2","sand dollar":"#EDE8BA",shortbread:"#FBE790",citrine:"#E4D00A",flax:"#EEDC82",xanthic:"#EEED09","sunshine yellow":"#FFFD37","canary yellow":"#FFEF00","lemon yellow":"#FDFF00","pale goldenrod":"#EEE8AA","light khaki":"#F0E68C","clover lime":"#FCE883","royal yellow":"#FADA5E","safety yellow":"#EED202",laguna:"#F8E473","bright yellow":"#FFFD01","greenish yellow":"#EEEA62",sunflower:"#FFDA03",bumblebee:"#FCE205",butter:"#FFFD74","yellow tan":"#FFE36E",banana:"#FFE135",tuscany:"#FCD12A",dijon:"#C49102","maximum yellow":"#FAFA37","mellow yellow":"#F8DE7E","unmellow yellow":"#FFFF66","lemon curry":"#CCA01D",aureolin:"#FDEE00","electric yellow":"#FFFF33","pastel yellow":"#FFFE71",chartreuse:"#B0FC38",juniper:"#3A5311",sage:"#728C69",lime:"#AEF359",fern:"#5DBB63",emerald:"#028A0F",pear:"#74B72E",moss:"#466D1D",shamrock:"#03AC13",seafoam:"#3DED97",pine:"#234F1E",parakeet:"#03C04A",seaweed:"#354A21",pickle:"#597D35",pistachio:"#B2D3C2",basil:"#32612D",crocodile:"#607D3B",amazon:"#3B7A57",avocado:"#568203",celadon:"#ACE1AF","hunter green":"#3F704D","artichoke green":"#8F9779","jungle green":"#29AB87","tropical rainforest":"#00755E","persian green":"#00A693","sea green":"#2E8B57","jade green":"#00A86B","laurel green":"#A9BA9D","army green":"#4B5320","kelly green":"#4CBB17","paris green":"#50C878","pakistan green":"#006600",spring:"#00F0A8",chateau:"#48A860",swamp:"#A8C090",mantis:"#74C365",fun:"#007848",viridian:"#609078","reseda green":"#6C7C59",verdun:"#487800","castleton green":"#00563B","bottle green":"#006A4E","cadmium green":"#006B3C","camouflage green":"#78866B","dollar bill":"#85BB65",inchworm:"#B2EC5D",sky:"#63C5DA",cobalt:"#1338BE",ocean:"#016064",peacock:"#022D36",azure:"#1520A6",cerulean:"#0492C2",lapis:"#2832C2",spruce:"#2C3E4C",stone:"#59788E",aegean:"#1F456E",blueberry:"#241571",denim:"#151E3D",admiral:"#051094",sapphire:"#52B2BF",arctic:"#82EEFD",steel:"#4682B4","b’dazzled":"#2E5894","powder blue":"#B0E0E6","us air force academy blue":"#004F98","baby blue":"#89CFF0","beau blue":"#BCD4E6","little boy blue":"#6CA0DC","tiffany blue":"#81D8D0","carolina blue":"#4B9CD3","turkish blue":"#4F97A3","maya blue":"#73C2FB","cornflower blue":"#6495ED","blue sapphire":"#126180","egyptian blue":"#1034A6","yale blue":"#00356B","space cadet":"#1D2951","imperial blue":"#005A92","ruddy blue":"#76ABDF","air superiority blue":"#72A0C1","aquamarine blue":"#6BCAE2","argentina blue":"#6CB4EE","astros navy":"#002D62","bayern blue":"#0066B2","berry blue":"#4F86F7","blue yonder":"#5072A7","bleu de france":"#318CE7","blue-gray":"#6699CC","boeing blue":"#0039A6","braves navy":"#13274F","dark violet":"#710193",boysenberry:"#630436","electric lavender":"#E39FF6",plum:"#601A35","strong magenta":"#A1045A","deep lilac":"#B65FCF",grape:"#663046","royal periwinkle":"#BE93D4","sangria purple":"#4D0F28","jazzberry jam":"#67032F",iris:"#9867C5",heather:"#9E7BB5",amethyst:"#A45EE5",raisin:"#290916","medium orchid":"#AF69EF","dark mulberry":"#4C0121","deep wine":"#2C041C",thistle:"#D8BFD8",orchid:"#DA70D6","electric violet":"#8F00FF","medium purple":"#9370DB","dark orchid":"#9932CC","dark magenta":"#8B008B",veronica:"#A020F0",heliotrope:"#DF73FF",purpureus:"#9A4EAE","northwestern purple":"#4E2A84","ksu purple":"#512888","pomp and power":"#86608E","mardi gras":"#880085",eminence:"#6C3082","pansy purple":"#78184A",palatinate:"#72246C","dark purple":"#301934",byzantium:"#702963","english violet":"#563C5C",affair:"#6F4685","long distance":"#6F456E","prince charming":"#493F5E","lipstick stain":"#8E4785",pompadour:"#720058","grape color":"#6F2DA8","pizza edge":"#9A2CA0","tyrian purple":"#66023C","ultra violet":"#645394","electric purple":"#BF00FF",studio:"#7851A9","french fuchsia":"#FC46AA",punch:"#F25278","blush pink":"#FEC5E5",watermelon:"#FE7F9C",flamingo:"#FDA4BA",rouge:"#F26B8A","light salmon":"#FDAB9F",strawberry:"#FC4C4E",rosewood:"#9E4244",lemonade:"#FCBACB",taffy:"#FA86C4",bubblegum:"#FD5DA8","ballet slipper":"#F79AC0","lemonade crepe":"#F2B8C6","magenta process":"#E11584","hot pink":"#FF1694","amaranth pink":"#E52B50",razzmatazz:"#E3256B",carnation:"#FFA6C9",light:"PINK\xa0#FFB6C1","pastel pink":"#FFD1DC","cherry blossom":"#FFB7C5",baby:"PINK\xa0#F4C2C2",dark:"PINK\xa0#E75480",bright:"PINK\xa0#FF007F","neon pink":"#FF6EC7","tulip pink":"#FF8E8E","piggy pink":"#FDDDE6","cotton candy":"#FFBCD9","cameo pink":"#EFBBCC","french pink":"#F64A8A","persian pink":"#F77FBE","candy pink":"#E4717A","cherry pink":"#DE3163","dark terra cotta":"#CC4E5C","deep pink":"#FF1493","dust storm":"#E5CCC9","nadeshiko pink":"#F6ADC6","wild strawberry":"#FF43A4","rubine red":"#D10056","hollywood cerise":"#F400A1","mexican pink":"#E4007C","steel pink":"#CC3366","rose bonbon":"#F9429E","brown oil":"#231709","roasted coffee":"#4B371C",mocha:"#3C280D","peanut brown":"#795C34",carob:"#362511",hickory:"#371D10",wood:"#3F301D",pecan:"#4A2511",walnut:"#432616",caramel:"#65350F",gingerbread:"#5E2C04",syrup:"#481F01","dark chocolate":"#2E1503",tortilla:"#9A7B4F",umber:"#352315",tawny:"#80471C",brunette:"#3B1E08","cinnamon brown":"#652A0E",penny:"#532915","cedar brown":"#4A3728",beaver:"#9F8170",bistre:"#3D2B1F",bole:"#79443B","burnt umber":"#8A3324","cafe au lait":"#A67B5B","cafe noir":"#4B3621","deep coffee":"#704241",copper:"#B87333","dark brown":"#654321",taupe:"#483C32",ecru:"#C2B280","golden brown":"#996515",khaki:"#C3B091",ochre:"#CC7722","light brown":"#B5651D","saddle brown":"#8B4513",russet:"#80461B",sienna:"#A0522D","antique brass":"#CD9575",burlywood:"#DEB887",peru:"#CD853F",tumbleweed:"#DEAA88","dark vanilla":"#D1BEA8","wood brown":"#C19A6B",chamoisee:"#A0785A",deer:"#BA8759",dirt:"#9B7653",coconut:"#965A3E","windsor tan":"#A75502",ebony:"#080402",crow:"#0D0907",midnight:"#040406",ink:"#070504",raven:"#050301",oil:"#050100",grease:"#0A0806",onyx:"#030104",pitch:"#030001",soot:"#160D08",sable:"#060606","jet black":"#030303",coal:"#0C0908",metal:"#0E0C0A",obsidian:"#020403",jade:"#000302",spider:"#040200",leather:"#0B0705",asphalt:"#0C0404",licorice:"#1A1110",night:"#0C090A","charleston green":"#232B2B","dark jungle green":"#1A2421","eerie black":"#1B1B1B","raisin black":"#242124","smoky black":"#100C08","black rock":"#010127","neutral black":"#0B0B0B","black denim":"#191C27","vampire black":"#0F0404","cool black":"#151922","frost black":"#191C20","power black":"#0E0C01","premium black":"#100E09","black magic":"#0B0510","alien black":"#1A2228","black chocolate":"#1B1811","gothic grape":"#120321",metropolis:"#1A1A1A","night shadow":"#1C1C1C","dark raisin":"#1A0F0F","tea bag":"#161311","tech black":"#0D0E0E","dull black":"#161616","dark black":"#010203","natural black":"#07000B","retro black":"#1F201F","deep black":"#050203",shadow:"#373737",graphite:"#594D5B",iron:"#322D31",pewter:"#696880",cloud:"#C5C6D0",smoke:"#59515E","dark slate":"#3E3D53",anchor:"#41424C",ash:"#564C4D",porpoise:"#4D4C5C",dove:"#7C6E7F",fog:"#655967",flint:"#7F7D9C","charcoal gray":"#232023",pebble:"#333333",lead:"#3F3F4E",coin:"#9897A9",fossil:"#787276",arsenic:"#3B444B",nevada:"#666A6D",scorpion:"#5E5E5E","battleship gray":"#848482","carbon gray":"#625D5D","davy’s gray":"#555555","dim gray":"#696969","gray cloud":"#B6B6B4","gray dolphin":"#5C5858","gray wolf":"#504A4B",gunmetal:"#2A3439",marengo:"#4C5866","medium gray":"#BEBEBE",nickel:"#727472","stone gray":"#928E85","outer space":"#414A4C","rocket metallic":"#8A7F8D","silver chalice":"#ACACAC","smokey gray":"#726E6D","sonic gray":"#757575","spanish gray":"#989898","taupe gray":"#8B8589","vampire gray":"#565051","x11 gray":"#BBBCB6","dark silver":"#746D69","pastel gray":"#CCCDC6","misty gray":"#BCC2C2","vintage gray":"#989692","zombie gray":"#63645E","perfect gray":"#A1A1A1",pearl:"#FBFCF8",alabaster:"#FEF9F3",snow:"#F5FEFD","pale ivory":"#FDF6E4",cream:"#FFFADA",eggshell:"#FFF9E3",cotton:"#FBFBF9",chiffon:"#FBFAF2","pink salt":"#F8EEEC",lace:"#F8F2ED","coconut milk":"#FFF1E6",linen:"#F3EAD3",bone:"#E7DECC",daisy:"#FAFAFA",powder:"#FBFCFA",frost:"#ECFBFC",porcelain:"#FFFEFC",parchment:"#FBF5DF",rice:"#FAF5EF",seashell:"#FFF5EE",peppermint:"#F1F9EC",milk:"#FDFFF5","ghost white":"#F8F8FF","white smoke":"#F5F5F5","baby powder":"#FEFEFA","floral white":"#FFFAF0","link white":"#ECF3F9","rose white":"#FFFAFA","vista white":"#FDFCFA","snow drift":"#F8FBF8","island spice":"#FFFCEC","soft peach":"#F6F1F4",harp:"#EBF5F0","cough mixture":"#F6F4F1","cup cake":"#EBF6F7",magnolia:"#F8F4FF","anti-flash white":"#F2F3F4","cascading white":"#F7F5F6","cotton ball":"#F2F7FD","photon white":"#F8F8E8","white heat":"#FDF9EF",whitewash:"#FEFFFC","shadow white":"#EEF1EA","acoustic white":"#EFECE1","aircraft white":"#EDF2F8",ceramic:"#FCFFF9","bright white":"#F4F5F0","brilliant white":"#EDF1FE"};export{colorPreset};

package/dist/esm/components/theme-section/CreateThemeSection.js

@@ -1,121 +1,2 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useState } from 'react';
-import { ThemeSectionTooltip } from './ThemeSectionTooltip.js';
-import 'zustand';
-import { useShopStore } from '../../contexts/ShopContext.js';
-import 'swr';
-import 'swr/infinite';
-import 'classnames';
-import 'dayjs';
-import '../../helpers/convert.js';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'vanilla-lazyload';
-import '../../hooks/useCartUI.js';
-
-const SHOW_TOOLTIP_TIMEOUT = 600;
-const NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP = 1;
-const LIMIT_PLANS = [
-    'starter',
-    'trial',
-    'trial2022'
-];
-const CreateThemeSection = ({ ...props })=>{
-    const shopPlan = useShopStore((s)=>s.plan);
-    const createThemeSectionCount = useShopStore((s)=>s.createThemeSectionCount);
-    const limitCreateThemeSection = useShopStore((s)=>s.limitCreateThemeSection);
-    const isFreeLimit = LIMIT_PLANS.includes(shopPlan ?? '');
-    const isLimit = isFreeLimit || limitCreateThemeSection?.isLimit;
-    const isRenderTooltip = isLimit || createThemeSectionCount === undefined || createThemeSectionCount < NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP;
-    const timeoutRef = useRef();
-    const [isShowTooltip, setIsShowTooltip] = useState(false);
-    const showTooltip = ()=>{
-        if (!isRenderTooltip) return;
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(()=>{
-            setIsShowTooltip(true);
-        }, SHOW_TOOLTIP_TIMEOUT);
-    };
-    const hideTooltip = ()=>{
-        if (!isRenderTooltip) return;
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        setIsShowTooltip(false);
-    };
-    const onActions = (e, options)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        if (options?.disabled) return;
-        isLimit ? onUpgrade() : onCreate();
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        setIsShowTooltip(false);
-    };
-    const onUpgrade = ()=>{
-        const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
-            bubbles: true
-        });
-        window.dispatchEvent(eventUpgrade);
-    };
-    const onCreate = ()=>{
-        const eventCreate = new CustomEvent('editor:toolbar:create-theme-section', {
-            bubbles: true,
-            detail: {
-                componentUid: props.uid
-            }
-        });
-        window.dispatchEvent(eventCreate);
-    };
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsxs(ThemeSectionTooltip, {
-            isFreeLimit: isFreeLimit,
-            limitCreateThemeSection: limitCreateThemeSection,
-            isShow: isShowTooltip,
-            isRender: isRenderTooltip,
-            onActions: onActions,
-            onMouseEnter: showTooltip,
-            onMouseLeave: hideTooltip,
-            children: [
-                isRenderTooltip && /*#__PURE__*/ jsx("div", {
-                    "data-toolbar-create-theme-section": true,
-                    children: "You can create reusable sections"
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    "data-toolbar-active-create-theme-section-wrapper": true,
-                    children: /*#__PURE__*/ jsxs("div", {
-                        "data-toolbar-active-create-theme-section": true,
-                        onClick: (e)=>onActions(e, {
-                                disabled: !!isLimit
-                            }),
-                        "aria-hidden": "true",
-                        children: [
-                            /*#__PURE__*/ jsxs("svg", {
-                                width: "16",
-                                height: "16",
-                                viewBox: "0 0 16 16",
-                                fill: "none",
-                                children: [
-                                    /*#__PURE__*/ jsx("path", {
-                                        d: "M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",
-                                        fill: "#F9F9F9"
-                                    }),
-                                    /*#__PURE__*/ jsx("path", {
-                                        d: "M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",
-                                        fill: "#F9F9F9"
-                                    }),
-                                    /*#__PURE__*/ jsx("path", {
-                                        d: "M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",
-                                        fill: "#F9F9F9"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx("p", {
-                                children: "Create Theme Section"
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-};
-
-export { CreateThemeSection };
+'use client';
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useRef as r,useState as o}from"react";import{ThemeSectionTooltip as n}from"./ThemeSectionTooltip.js";import"zustand";import{useI18nStore as a}from"../../contexts/I18nContext.js";import{useShopStore as c}from"../../contexts/ShopContext.js";import"swr";import"swr/infinite";import"classnames";import"dayjs";import"../../helpers/convert.js";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"../../hooks/useCartUI.js";import"../../hooks/useStickyStore.js";let SHOW_TOOLTIP_TIMEOUT=600,NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP=1,LIMIT_PLANS=["starter","trial","trial2022"],CreateThemeSection=({...s})=>{let{t:l}=a(),m=c(e=>e.plan),d=c(e=>e.createThemeSectionCount),p=c(e=>e.limitCreateThemeSection),h=LIMIT_PLANS.includes(m??""),u=h||p?.isLimit,C=u||void 0===d||d<1,T=r(),[v,S]=o(!1),b=()=>{C&&(T.current&&clearTimeout(T.current),T.current=setTimeout(()=>{S(!0)},600))},w=()=>{C&&(T.current&&clearTimeout(T.current),S(!1))},f=(e,t)=>{e.preventDefault(),e.stopPropagation(),t?.disabled||(u?E():F(),T.current&&clearTimeout(T.current),S(!1))},E=()=>{let e=new CustomEvent("editor:toolbar:upgrade",{bubbles:!0});window.dispatchEvent(e)},F=()=>{let e=new CustomEvent("editor:toolbar:create-theme-section",{bubbles:!0,detail:{componentUid:s.uid}});window.dispatchEvent(e)};return e(t,{children:i(n,{isFreeLimit:h,limitCreateThemeSection:p,isShow:v,isRender:C,onActions:f,onMouseEnter:b,onMouseLeave:w,children:[C&&e("div",{"data-toolbar-create-theme-section":!0,children:"You can create reusable sections"}),e("div",{"data-toolbar-active-create-theme-section-wrapper":!0,children:i("div",{"data-toolbar-active-create-theme-section":!0,onClick:e=>f(e,{disabled:!!u}),"aria-hidden":"true",children:[i("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[e("path",{d:"M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",fill:"#F9F9F9"}),e("path",{d:"M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",fill:"#F9F9F9"}),e("path",{d:"M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",fill:"#F9F9F9"})]}),e("p",{children:l("Create Theme Section")})]})})]})})};export{CreateThemeSection};

package/dist/esm/components/theme-section/ThemeSectionStatus.js

@@ -1,43 +1,2 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-const getStatusMessage = (status)=>{
-    switch(status){
-        case 'DRAFT':
-            return 'This Theme Section is Draft. Publish page will also publish Theme Section.';
-        case 'NEED_PUBLISHING':
-            return 'Need to republish. Go to global edit and publish this section';
-    }
-};
-const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
-    const isRenderThemeSectionStatus = tag === 'Section' && isThemeSection && (status === 'DRAFT' || status === 'NEED_PUBLISHING');
-    const statusMessage = getStatusMessage(status);
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: isRenderThemeSectionStatus && /*#__PURE__*/ jsxs("div", {
-            "data-theme-section-status": true,
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    "data-theme-section-status-icon": true,
-                    children: /*#__PURE__*/ jsx("svg", {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "16",
-                        height: "16",
-                        viewBox: "0 0 16 16",
-                        fill: "none",
-                        children: /*#__PURE__*/ jsx("path", {
-                            fillRule: "evenodd",
-                            clipRule: "evenodd",
-                            d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8.4668 4.61597C8.4668 4.89211 8.24294 5.11597 7.9668 5.11597C7.69065 5.11597 7.4668 4.89211 7.4668 4.61597C7.4668 4.33982 7.69065 4.11597 7.9668 4.11597C8.24294 4.11597 8.4668 4.33982 8.4668 4.61597ZM6.91309 5.48633C6.63694 5.48633 6.41309 5.71019 6.41309 5.98633C6.41309 6.26247 6.63694 6.48633 6.91309 6.48633H7.56006V10.3839C7.56006 10.9362 8.00777 11.3839 8.56006 11.3839H9.57144C9.84758 11.3839 10.0714 11.1601 10.0714 10.8839C10.0714 10.6078 9.84758 10.3839 9.57144 10.3839H8.56006V6.48633C8.56006 5.93404 8.11234 5.48633 7.56006 5.48633H6.91309Z",
-                            fill: "#9144DA"
-                        })
-                    })
-                }),
-                statusMessage && /*#__PURE__*/ jsx("span", {
-                    "data-theme-section-status-text": true,
-                    children: statusMessage
-                })
-            ]
-        })
-    });
-};
-
-export { ThemeSectionStatusWrapper };
+'use client';
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";let getStatusMessage=e=>{switch(e){case"DRAFT":return"This Theme Section is Draft. Publish page will also publish Theme Section.";case"NEED_PUBLISHING":return"Need to republish. Go to global edit and publish this section"}},ThemeSectionStatusWrapper=({tag:s,status:a,isThemeSection:l})=>{let n="Section"===s&&l&&("DRAFT"===a||"NEED_PUBLISHING"===a),h=getStatusMessage(a);return e(t,{children:n&&i("div",{"data-theme-section-status":!0,children:[e("div",{"data-theme-section-status-icon":!0,children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8.4668 4.61597C8.4668 4.89211 8.24294 5.11597 7.9668 5.11597C7.69065 5.11597 7.4668 4.89211 7.4668 4.61597C7.4668 4.33982 7.69065 4.11597 7.9668 4.11597C8.24294 4.11597 8.4668 4.33982 8.4668 4.61597ZM6.91309 5.48633C6.63694 5.48633 6.41309 5.71019 6.41309 5.98633C6.41309 6.26247 6.63694 6.48633 6.91309 6.48633H7.56006V10.3839C7.56006 10.9362 8.00777 11.3839 8.56006 11.3839H9.57144C9.84758 11.3839 10.0714 11.1601 10.0714 10.8839C10.0714 10.6078 9.84758 10.3839 9.57144 10.3839H8.56006V6.48633C8.56006 5.93404 8.11234 5.48633 7.56006 5.48633H6.91309Z",fill:"#9144DA"})})}),h&&e("span",{"data-theme-section-status-text":!0,children:h})]})})};export{ThemeSectionStatusWrapper};