@gem-sdk/core 1.45.0-dev.93 → 1.45.0

package/dist/esm/components/ComponentToolbarPreview.js

@@ -11,13 +11,12 @@ import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
 import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
-import { ThemeSectionStatusWrapper } from './theme-section/ThemeSectionStatus.js';
+import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
 import Resize from './resize/Resize.js';
 import { usePostPurchase } from '../hooks/useToolbarPostPurchase.js';
 import { ableGenerateContentElements } from './constant.js';
 import { AIContentGenerator } from './ai-generator/AIContentGenerator.js';
 import { AIGenContentLoading } from './ai-generator/AIGenContentLoading.js';
-import { InteractionSuffix } from './InteractionSuffix.js';
 import '../helpers/convert.js';
 
 const SECTION_LIMIT = 25;
@@ -44,7 +43,6 @@ const ComponentToolbarPreview = (props)=>{
     const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
     const [isDisableDelete, setIsUnableDelete] = useState(false);
     const [parentProductUid, setParentProductUid] = useState('');
-    const [articleUid, setArticleUid] = useState('');
     const [tooltipText, setTooltipText] = useState({
         width: '',
         text: ''
@@ -59,18 +57,6 @@ const ComponentToolbarPreview = (props)=>{
         'Product Description',
         'Product Price'
     ];
-    const editArticleElementList = [
-        'Article Title',
-        'Article Content',
-        'Article Image',
-        'Article Author',
-        'Article Category',
-        'Article Date'
-    ];
-    const editAbleElementList = [
-        ...editProductElementList,
-        ...editArticleElementList
-    ];
     const isOverToolbarPosition = (el, parent)=>{
         const parentLength = parents.length;
         const rect = el.getBoundingClientRect();
@@ -116,29 +102,15 @@ const ComponentToolbarPreview = (props)=>{
     }, [
         storefrontUrl
     ]);
-    const linkShopDefault = useMemo(()=>{
-        return `https://admin.shopify.com/store/${shopName}`;
+    const shopifyEditLink = useMemo(()=>{
+        return productId ? `https://admin.shopify.com/store/${shopName}/products/${productId}` : '';
     }, [
+        productId,
         shopName
     ]);
-    const linkEditProduct = useMemo(()=>{
-        return productId ? `${linkShopDefault}/products/${productId}` : '';
-    }, [
-        linkShopDefault,
-        productId
-    ]);
-    const linkEditArticle = useMemo(()=>{
-        return articleUid ? `${linkShopDefault}/articles/${articleUid}` : '';
-    }, [
-        articleUid,
-        linkShopDefault
-    ]);
     // Get parents
     const onActiveComponent = useCallback((e)=>{
         const detail = e.detail;
-        if (detail?.articleId) {
-            setArticleUid(detail.articleId);
-        }
         if (detail?.componentUid == props.uid) {
             getDeleteTooltipPosition();
             if (isSaleFunnelPage) {
@@ -230,15 +202,7 @@ const ComponentToolbarPreview = (props)=>{
         window.dispatchEvent(event);
     };
     const goToShopifyEditLink = ()=>{
-        if (editArticleElementList.includes(toolbarName() ?? '')) {
-            window.open(linkEditArticle, '_blank');
-            return;
-        }
-        if (editProductElementList.includes(toolbarName() ?? '')) {
-            window.open(linkEditProduct, '_blank');
-            return;
-        }
-        window.open(linkShopDefault, '_blank');
+        window.open(shopifyEditLink, '_blank');
     };
     const onDelete = (e)=>{
         e.preventDefault();
@@ -326,6 +290,7 @@ const ComponentToolbarPreview = (props)=>{
     const isEnableCreateThemeSection = ()=>{
         return editingPageType !== 'STATIC' && editingPageType !== 'POST_PURCHASE';
     };
+    // if (!isActive) return null;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxs("div", {
@@ -511,7 +476,7 @@ const ComponentToolbarPreview = (props)=>{
                             })
                         })
                     }),
-                    editAbleElementList.includes(toolbarName() ?? '') && /*#__PURE__*/ jsx(Tooltip, {
+                    editProductElementList.includes(toolbarName() ?? '') && /*#__PURE__*/ jsx(Tooltip, {
                         "data-toolbar-title": true,
                         enable: true,
                         "data-toolbar-disable": false,
@@ -590,14 +555,10 @@ const ComponentToolbarPreview = (props)=>{
                                 fill: "currentColor"
                             })
                         })
-                    }),
-                    /*#__PURE__*/ jsx(InteractionSuffix, {
-                        tag: props.tag,
-                        uid: props.uid
                     })
                 ]
             }, props.uid),
-            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatusWrapper, {
+            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
                 ...props
             }),
             /*#__PURE__*/ jsx("div", {
@@ -660,6 +621,6 @@ const ComponentToolbarPreview = (props)=>{
         ]
     });
 };
-var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview); /* gem-lint/disallow-import-from-package-path */
+var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview);
 
 export { ComponentToolbarPreview$1 as default };

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useEffect, isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
-import { useInteraction } from '../hooks/useInteraction.js';
 import { disableWrap, excludeApplyStyle } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
 import ComponentToolbarPreview from './ComponentToolbarPreview.js';
@@ -29,19 +28,6 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     }, [
         props.uid
     ]);
-    const currentProps = props;
-    const { getAnimationByUid } = useInteraction();
-    const animationByInteraction = getAnimationByUid(props.uid);
-    if (animationByInteraction) {
-        currentProps.advanced = {
-            ...currentProps.advanced,
-            animation: {
-                desktop: animationByInteraction,
-                tablet: animationByInteraction,
-                mobile: animationByInteraction
-            }
-        };
-    }
     const pageType = usePageType();
     if (props.type === 'section') {
         return null;
@@ -146,7 +132,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ComponentAnimation, {
-                    ...currentProps
+                    ...props
                 }),
                 /*#__PURE__*/ jsx(RenderCustomCode, {
                     uid: props.uid,
@@ -175,7 +161,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ComponentAnimation, {
-                ...currentProps
+                ...props
             }),
             /*#__PURE__*/ jsx(RenderCustomCode, {
                 uid: props.uid,

package/dist/esm/components/Render.liquid.js

@@ -35,6 +35,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
+        console.log('Miss component: ', item);
         return {
             liquid: '',
             extraFiles
@@ -216,6 +217,7 @@ const appendAnimation = (props, liquid)=>{
     const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
     const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
     const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
+    if (!enableAnimation) return liquid;
     const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
             'shake',
             'none'
@@ -230,8 +232,7 @@ const appendAnimation = (props, liquid)=>{
     gp-data='${JSON.stringify({
         config: animation,
         tag,
-        opacity,
-        isEnableInit: enableAnimation
+        opacity
     })}'
     style="${{
         display: 'contents'

package/dist/esm/components/RenderPreview.js

@@ -41,7 +41,6 @@ const RenderPreview = ({ uid, ...passProps })=>{
                     setting: item.settings,
                     ...passProps,
                     children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderPreviewMemo, {
-                            ...passProps,
                             uid: id
                         }, id))
                 }) : /*#__PURE__*/ jsx(Component, {

package/dist/esm/components/constant.js

@@ -35,10 +35,7 @@ const disableWrap = [
     'PostPurchaseProductImages',
     'Sticky',
     'Heading',
-    'EstimateDate',
-    'ProductBadge',
-    'Marquee',
-    'MarqueeItem'
+    'EstimateDate'
 ];
 const customRenderChildren = [
     'Accordion',
@@ -49,8 +46,7 @@ const customRenderChildren = [
 ];
 const excludeApplyStyle = [
     'IconListV2',
-    'IconList',
-    'ProductBadge'
+    'IconList'
 ];
 const postPurchaseRequiredElements = [
     'PostPurchaseProductOffer',

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

@@ -1,16 +1,7 @@
 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);
+const ThemeSectionStatus = ({ ...props })=>{
+    const isRenderThemeSectionStatus = props.tag === 'Section' && props?.isThemeSection && props?.needPublishing;
     return /*#__PURE__*/ jsx(Fragment, {
         children: isRenderThemeSectionStatus && /*#__PURE__*/ jsxs("div", {
             "data-theme-section-status": true,
@@ -31,13 +22,13 @@ const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
                         })
                     })
                 }),
-                statusMessage && /*#__PURE__*/ jsx("span", {
+                /*#__PURE__*/ jsx("span", {
                     "data-theme-section-status-text": true,
-                    children: statusMessage
+                    children: "Need to republish. Go to global edit and publish this section"
                 })
             ]
         })
     });
 };
 
-export { ThemeSectionStatusWrapper };
+export { ThemeSectionStatus };

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -252,11 +252,7 @@ const createBuilderPreviewProvider = (args, pageName, isThemeSectionEditor)=>cre
                 }
             },
             getItem: (id)=>{
-                const item = get().state[id];
-                return {
-                    ...item,
-                    rawChildrens: item?.childrens?.map((v)=>get().state[v])
-                };
+                return get().state[id];
             },
             removeItem: (id)=>{
                 if (id === 'ROOT') {

package/dist/esm/contexts/ModalContext.js

@@ -5,8 +5,8 @@ import { useStore, createStore } from 'zustand';
 const ModalContext = /*#__PURE__*/ createContext(null);
 const createModalProvider = (data)=>createStore((set)=>({
             activeId: data,
-            setModalActive: (id, notPostMessage)=>{
-                !!notPostMessage && window?.parent?.postMessage?.(JSON.stringify({
+            setModalActive: (id)=>{
+                window?.parent?.postMessage?.(JSON.stringify({
                     type: 'active-element',
                     uid: id
                 }), '*');

package/dist/esm/contexts/PageContext.js

@@ -29,31 +29,6 @@ const createPageStoreProvider = (data)=>createStore((set)=>({
                 set({
                     publicStoreFrontData: publicStoreFrontData
                 });
-            },
-            setInteractionIsSelectOnPage: (value)=>{
-                set((state)=>({
-                        interactionData: {
-                            ...state.interactionData,
-                            isSelectOnPage: value
-                        }
-                    }));
-            },
-            setInteractionItem: (item)=>{
-                set((state)=>({
-                        interactionData: {
-                            ...state.interactionData,
-                            item,
-                            isSelectOnPage: state.interactionData?.isSelectOnPage || false
-                        }
-                    }));
-            },
-            setInteractionSelectType: (selectType)=>{
-                set((state)=>({
-                        interactionData: {
-                            ...state.interactionData,
-                            selectType
-                        }
-                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -61,10 +36,7 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             dynamicProduct,
             dynamicCollection,
             productOffers,
-            publicStoreFrontData,
-            interactionData: {
-                selectType: 'element'
-            }
+            publicStoreFrontData
         }), [
         dynamicProduct,
         dynamicCollection,

package/dist/esm/contexts/SectionContext.js

@@ -8,7 +8,6 @@ const SectionContext = /*#__PURE__*/ createContext(null);
 const createSectionProvider = (data)=>createStore((set, get)=>({
             data: data ?? {},
             getSection: (id)=>{
-                console.log('get().data', get().data);
                 const section = get().data[id];
                 return section ?? undefined;
             },

package/dist/esm/graphql/queries/blogs.generated.js

@@ -31,6 +31,9 @@ const BlogsDocument = `
               isSample
               platformCreatedAt
               author
+              content {
+                excerptHtml
+              }
               media {
                 width
                 src

package/dist/esm/helpers/colors.js

@@ -117,7 +117,7 @@ const getGlobalColorStateStyle = (type, data)=>{
     return Object.fromEntries(Object.entries(data).map(([state, value])=>{
         if (state === 'active') return [];
         return [
-            `-${stateMapping?.[state] || ''}-${type}`,
+            `-${stateMapping?.[state]}-${type}`,
             getSingleColorVariable(value)
         ];
     }).filter(isDefined));
@@ -154,7 +154,7 @@ const getSingleColorVariable = (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');
+    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
 }
 const getGlobalColorStyle = (data)=>{
     if (!data) return {};

package/dist/esm/helpers/shadow.js

@@ -25,7 +25,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     if (typeof value.distance == 'undefined') return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? stateMapping?.[state] : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{

package/dist/esm/helpers/size.js

@@ -179,8 +179,5 @@ function getCustomPaddingSizeCSSByDevice(globalSize, device) {
 const getPaddingGlobalSize = (globalSize)=>{
     return Object.assign({}, getCustomPaddingSizeCSSByDevice(globalSize, 'desktop'), getCustomPaddingSizeCSSByDevice(globalSize, 'tablet'), getCustomPaddingSizeCSSByDevice(globalSize, 'mobile'));
 };
-const getValueByDevice = (value, device)=>{
-    return value?.[device] === undefined ? value?.desktop === undefined ? value?.tablet : value?.desktop : value?.[device];
-};
 
-export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault };
+export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault };

package/dist/esm/hooks/animation/useAnimationPreview.js

@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 const useAnimationPreview = ({ props, playAnimation, cancelAnimation, setAnimationOnFinish, setToolbarActive })=>{
     const previewAnimation = useCallback((e)=>{
         const { uid, isCancel } = e.detail;
-        console.log('props.uid !== uid', props.uid !== uid, props.uid, uid);
         if (props.uid !== uid) return;
         cancelAnimation();
         if (isCancel) {

package/dist/esm/hooks/animation/useApplyAnimation.js

@@ -4,7 +4,6 @@ import { useAnimationTarget } from './useAnimationTarget.js';
 import { useAnimationConfig } from './useAnimationConfig.js';
 import { useAnimationActions } from './useAnimationActions.js';
 import { useAnimationPreview } from './useAnimationPreview.js';
-import '../../types/custom.js';
 import { AnimationType } from '../../types/animations.js';
 
 const useApplyAnimation = ({ props })=>{
@@ -37,7 +36,6 @@ const useApplyAnimation = ({ props })=>{
                 setting,
                 target: item.target
             }));
-        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/esm/hooks/articles/useArticlesQuery.js

@@ -16,7 +16,6 @@ const useArticlesQuery = (variables, options)=>{
 };
 const useBlogsQuery = (variables, options)=>{
     const fetcher = useFetchHandle();
-    //@ts-ignore
     const fetchBlogs = ()=>fetcher([
             BlogsDocument,
             variables ?? {}

package/dist/esm/hooks/useFormatMoney.js

@@ -3,69 +3,69 @@ import { useMoneyFormat } from './shop.js';
 const shopifyPriceRounding = (amount, precision)=>{
     return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
 };
-const formatMoney = function(cents, format) {
-    let value = '';
-    const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
-    const formatString = format || '${{amount}}';
-    /**
-   * check default
-   * @param opt opt
-   * @param def def
-   * @returns any
-   */ function defaultOption(opt, def) {
-        return typeof opt == 'undefined' ? def : opt;
-    }
-    /**
-   * formatWithDelimiters
-   * @param number number
-   * @param precision precision
-   * @param thousands thousands
-   * @param decimal decimal
-   * @returns any
-   */ // eslint-disable-next-line max-params
-    function formatWithDelimiters(number, precision, thousands, decimal) {
-        precision = defaultOption(precision, 2);
-        thousands = defaultOption(thousands, ',');
-        decimal = defaultOption(decimal, '.');
-        if (isNaN(number) || number == null) {
-            return 0;
-        }
-        // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
-        number = shopifyPriceRounding(number, Number(precision));
-        const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
-        return dollars + cents;
-    }
-    switch(formatString.match(placeholderRegex)[1]){
-        case 'amount':
-            value = formatWithDelimiters(cents, 2);
-            break;
-        case 'amount_no_decimals':
-            value = formatWithDelimiters(cents, 0);
-            break;
-        case 'amount_with_comma_separator':
-            value = formatWithDelimiters(cents, 2, '.', ',');
-            break;
-        case 'amount_no_decimals_with_comma_separator':
-            value = formatWithDelimiters(cents, 0, '.', ',');
-            break;
-        case 'amount_with_apostrophe_separator':
-            value = formatWithDelimiters(cents, 2, "'", '.');
-            break;
-        case 'amount_no_decimals_with_space_separator':
-            value = formatWithDelimiters(cents, 0, ' ');
-            break;
-        case 'amount_with_space_separator':
-            value = formatWithDelimiters(cents, 2, ' ', ',');
-            break;
-        case 'amount_with_period_and_space_separator':
-            value = formatWithDelimiters(cents, 2, ' ', '.');
-            break;
-    }
-    return formatString.replace(placeholderRegex, value);
-};
 const useFormatMoney = (amount, withCurrency)=>{
     const { moneyFormat, moneyWithCurrencyFormat } = useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                return 0;
+            }
+            // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
+            number = shopifyPriceRounding(number, Number(precision));
+            const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
+            return dollars + cents;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+            case 'amount_with_apostrophe_separator':
+                value = formatWithDelimiters(cents, 2, "'", '.');
+                break;
+            case 'amount_no_decimals_with_space_separator':
+                value = formatWithDelimiters(cents, 0, ' ');
+                break;
+            case 'amount_with_space_separator':
+                value = formatWithDelimiters(cents, 2, ' ', ',');
+                break;
+            case 'amount_with_period_and_space_separator':
+                value = formatWithDelimiters(cents, 2, ' ', '.');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
+    };
     return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-export { formatMoney, shopifyPriceRounding, useFormatMoney };
+export { shopifyPriceRounding, useFormatMoney };

package/dist/esm/index.js

@@ -61,13 +61,12 @@ export { composePositionLineHeight, composePostionIconList } from './helpers/ico
 export { isDefined } from './helpers/is-defined.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
-export { convertTextAlignToJustify } from './helpers/align.js';
 export { checkAvailableVariantInStock, getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
 export { composeCornerCss, composeRadius, composeRadiusResponsive, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { RenderIf, composeMemo, dataStringify, props, removeUndefinedValuesFromObject, styles, template } from './helpers/render.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
-export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault } from './helpers/size.js';
+export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getGlobalSizeGap, getHeightByShapeGlobalSize, getPaddingGlobalSize, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeGlobalSizeIcon, makeStyleWithDefault } from './helpers/size.js';
 export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass } from './helpers/typography.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';
@@ -82,7 +81,7 @@ export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
 export { useProductsQuery, useProductsQueryAll } from './hooks/shop/use-products-query.js';
 export { useCurrentDevice } from './hooks/use-current-device.js';
-export { formatMoney, shopifyPriceRounding, useFormatMoney } from './hooks/useFormatMoney.js';
+export { shopifyPriceRounding, useFormatMoney } from './hooks/useFormatMoney.js';
 export { useLazyVideo } from './hooks/use-lazy-video.js';
 export { default as useCartId } from './hooks/useCartId.js';
 export { default as useCartLine } from './hooks/useCartLine.js';
@@ -99,7 +98,6 @@ export { useProductList, useProductListProducts, useProductListSettings, useProd
 export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
 export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
 export { default as useInitialSwatchesOptions } from './hooks/useInitialSwatchesOptions.js';
-export { InteractionTargetEvent, InteractionTriggerEvent } from './types/custom.js';
 import * as shop from './types/shop.js';
 export { shop as ShopType };
 import * as appAPI from './types/appAPI.js';