@gem-sdk/core 1.5.43 → 1.6.0

package/dist/cjs/contexts/ShopContext.js

@@ -9,6 +9,7 @@ var AddonContext = require('./AddonContext.js');
 const ShopContext = /*#__PURE__*/ react.createContext(null);
 const createShopStoreProvider = (data)=>zustand.createStore((set)=>({
             mobileOnly: false,
+            isStorefront: true,
             ...data,
             changeLocale: (locale)=>{
                 set({

package/dist/cjs/helpers/borders.js

@@ -3,6 +3,13 @@
 var colors = require('./colors.js');
 var makeStyle = require('./make-style.js');
 
+const getBorderStyle = (value)=>{
+    return makeStyle.makeStyle({
+        'b': value?.border,
+        'bc': value?.color,
+        'bw': value?.width
+    });
+};
 const handleConvertBorderStyle = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -128,6 +135,7 @@ const handleConvertClassColor = (value)=>{
     return colors.getGlobalColorStateClass('border', newVal);
 };
 
+exports.getBorderStyle = getBorderStyle;
 exports.handleConvertBorderColor = handleConvertBorderColor;
 exports.handleConvertBorderStyle = handleConvertBorderStyle;
 exports.handleConvertBorderWidth = handleConvertBorderWidth;

package/dist/cjs/helpers/compose-advance-style.js

@@ -114,6 +114,13 @@ function composeAdvanceStyle(data, tag) {
                             Object.assign(styles, shadow.getStyleShadowState(value, 'box-shadow', hasBoxShadow));
                             break;
                     }
+                } else {
+                    if (attr === 'border') {
+                        Object.assign(styles, borders.getBorderStyle(value));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, radius.getCornerCSSFromGlobal(value));
+                    }
                 }
             });
         } else {

package/dist/cjs/helpers/queries/get-collection.js

@@ -87,7 +87,7 @@ const loopFetchCollection = async (fetcher, arg)=>{
                 },
                 orderByProduct: productSortedByOrder(arg.orderBy),
                 whereProduct: {
-                    isStorefront: true,
+                    isStorefront: arg.isStorefront,
                     isSample: arg.isSample
                 },
                 productsAfter: productAfterFetcher
@@ -155,7 +155,7 @@ const mergeProductCollectionVariant = async (fetcher, collection, isSample)=>{
     };
     return newCollection;
 };
-const fetchVariantsByBaseIds = async (fetcher, { ids , isSample  })=>{
+const fetchVariantsByBaseIds = async (fetcher, { ids , isSample , isStorefront  })=>{
     const initVariables = {
         firstVariant: 100,
         first: ids?.length || 1,
@@ -164,7 +164,7 @@ const fetchVariantsByBaseIds = async (fetcher, { ids , isSample  })=>{
             direction: 'DESC'
         },
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...ids?.length && {
                 baseIDIn: ids.sort()

package/dist/cjs/helpers/queries/get-product-by-slug.js

@@ -27,12 +27,12 @@ const orderBy = {
     field: 'UPDATED_AT',
     direction: 'DESC'
 };
-const fetchProduct = async (fetcher, handle)=>{
+const fetchProduct = async (fetcher, handle, isStorefront)=>{
     const variables = {
         orderBy,
         where: {
             handle,
-            isStorefront: true
+            isStorefront
         }
     };
     const response = await fetcher([
@@ -41,12 +41,12 @@ const fetchProduct = async (fetcher, handle)=>{
     ]);
     return response.product?.edges?.[0]?.node;
 };
-const fetchVariants = async (fetcher, handle)=>{
+const fetchVariants = async (fetcher, handle, isStorefront)=>{
     const initVariables = {
         orderBy,
         where: {
             handle,
-            isStorefront: true
+            isStorefront
         }
     };
     const query = async (variables, olds)=>{
@@ -70,12 +70,12 @@ const fetchVariants = async (fetcher, handle)=>{
     };
     return query(initVariables, []);
 };
-const fetchMedias = async (fetcher, handle)=>{
+const fetchMedias = async (fetcher, handle, isStorefront)=>{
     const initVariables = {
         orderBy,
         where: {
             handle,
-            isStorefront: true
+            isStorefront
         },
         orderByMedia: {
             field: 'POSITION',

package/dist/cjs/helpers/queries/get-product.js

@@ -4,19 +4,22 @@ var productLittleDetail_generated = require('../../graphql/queries/product-littl
 var productMedias_generated = require('../../graphql/queries/product-medias.generated.js');
 var productVariants_generated = require('../../graphql/queries/product-variants.generated.js');
 
-const getProduct = async (fetcher, { id , isSample  })=>{
+const getProduct = async (fetcher, { id , isSample , isStorefront  })=>{
     const [product, variants, medias] = await Promise.all([
         fetchProduct(fetcher, {
             id,
-            isSample
+            isSample,
+            isStorefront
         }),
         fetchVariants(fetcher, {
             id,
-            isSample
+            isSample,
+            isStorefront
         }),
         fetchMedias(fetcher, {
             id,
-            isSample
+            isSample,
+            isStorefront
         })
     ]);
     if (!product) {
@@ -36,11 +39,11 @@ const orderBy = {
     field: 'UPDATED_AT',
     direction: 'DESC'
 };
-const fetchProduct = async (fetcher, { id , isSample  })=>{
+const fetchProduct = async (fetcher, { id , isSample , isStorefront  })=>{
     const variables = {
         orderBy,
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...id && id.toLowerCase() !== 'latest' && {
                 baseID: id
@@ -53,11 +56,11 @@ const fetchProduct = async (fetcher, { id , isSample  })=>{
     ]);
     return response.product?.edges?.[0]?.node;
 };
-const fetchVariants = async (fetcher, { id , isSample  })=>{
+const fetchVariants = async (fetcher, { id , isSample , isStorefront  })=>{
     const initVariables = {
         orderBy,
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...id && id.toLowerCase() !== 'latest' && {
                 baseID: id
@@ -85,11 +88,11 @@ const fetchVariants = async (fetcher, { id , isSample  })=>{
     };
     return query(initVariables, []);
 };
-const fetchMedias = async (fetcher, { id , isSample  })=>{
+const fetchMedias = async (fetcher, { id , isSample , isStorefront  })=>{
     const initVariables = {
         orderBy,
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...id && id.toLowerCase() !== 'latest' && {
                 baseID: id

package/dist/cjs/helpers/queries/get-products.js

@@ -4,17 +4,28 @@ var products_generated = require('../../graphql/queries/products.generated.js');
 var getCollection = require('./get-collection.js');
 var getProduct = require('./get-product.js');
 
-const getProducts = async (fetcher, { ids , isSample  })=>{
+const getProducts = async (fetcher, { ids , isSample , isStorefront  })=>{
     const products = await loopFetchProducts(fetcher, {
         ids,
-        isSample
+        isSample,
+        isStorefront
     });
     if (!products) {
         throw new Error('Product not found');
     }
     const [mergedVariant, mergedMedias] = await Promise.all([
-        mergeVariantsToProducts(fetcher, products, isSample),
-        mergeMediasToProducts(fetcher, products, isSample)
+        mergeVariantsToProducts({
+            fetcher,
+            products,
+            isSample,
+            isStorefront
+        }),
+        mergeMediasToProducts({
+            fetcher,
+            products,
+            isSample,
+            isStorefront
+        })
     ]);
     return {
         ...products,
@@ -50,7 +61,7 @@ const fetchProducts = async (fetcher, variables)=>{
         variables
     ]);
 };
-const loopFetchProducts = async (fetcher, { ids , isSample  })=>{
+const loopFetchProducts = async (fetcher, { ids , isSample , isStorefront  })=>{
     const numberOfProducts = (ids?.length == 0 ? 4 : ids?.length) ?? 4;
     const productsPerPage = 8; // number of products per page
     let variables; // variables of collection query
@@ -75,8 +86,8 @@ const loopFetchProducts = async (fetcher, { ids , isSample  })=>{
                 direction: 'ASC'
             },
             where: {
-                isStorefront: true,
-                isSample: isSample,
+                isStorefront,
+                isSample,
                 ...ids?.length ? {
                     baseIDIn: ids
                 } : {}
@@ -104,11 +115,12 @@ const loopFetchProducts = async (fetcher, { ids , isSample  })=>{
     }
     return dataProducts;
 };
-const mergeVariantsToProducts = async (fetcher, products, isSample)=>{
+const mergeVariantsToProducts = async ({ fetcher , products , isSample , isStorefront  })=>{
     const productsWithVariants = await Promise.all(products?.products?.edges?.map(async (product)=>{
         const variants = await getProduct.fetchVariants(fetcher, {
             id: product?.node?.baseID,
-            isSample
+            isSample,
+            isStorefront
         });
         return {
             productId: product?.node?.baseID,
@@ -117,11 +129,12 @@ const mergeVariantsToProducts = async (fetcher, products, isSample)=>{
     }) ?? []);
     return productsWithVariants;
 };
-const mergeMediasToProducts = async (fetcher, products, isSample)=>{
+const mergeMediasToProducts = async ({ fetcher , products , isSample , isStorefront  })=>{
     const productsWithMedias = await Promise.all(products?.products?.edges?.map(async (product)=>{
         const medias = await getProduct.fetchMedias(fetcher, {
             id: product?.node?.baseID,
-            isSample
+            isSample,
+            isStorefront
         });
         return {
             productId: product?.node?.baseID,

package/dist/cjs/helpers/radius.js

@@ -1,7 +1,18 @@
 'use strict';
 
 var constant = require('./constant.js');
+var makeStyle = require('./make-style.js');
 
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    return makeStyle.makeStyle({
+        'bblr': corner.bblr,
+        'bbrr': corner.bbrr,
+        'btlr': corner.btlr,
+        'btrr': corner.btrr,
+        'radius': `var(--g-radius-${corner.radiusType})`
+    });
+};
 const getRadiusCSSFromGlobal = (state, key, device)=>{
     if (!key || !state) return {};
     const suffix = device && device !== 'desktop' ? constant.devicesMapping?.[device] : '';
@@ -83,6 +94,7 @@ const getRadiusStyleActiveState = (radiusValue)=>{
 };
 
 exports.composeRadius = composeRadius;
+exports.getCornerCSSFromGlobal = getCornerCSSFromGlobal;
 exports.getCustomRadius = getCustomRadius;
 exports.getRadiusCSSFromGlobal = getRadiusCSSFromGlobal;
 exports.getRadiusStyleActiveState = getRadiusStyleActiveState;

package/dist/cjs/hooks/shop/use-product-query.js

@@ -8,11 +8,13 @@ var useFetchHandle = require('../useFetchHandle.js');
 const useProductQuery = (productId, options)=>{
     const fetcher = useFetchHandle.useFetchHandle();
     const isSample = shop.useIsSampleProduct();
+    const isStorefront = shop.useIsStorefrontProduct();
     return useSWR(productId ? [
         'query/product',
         {
             id: productId ?? 'latest',
-            isSample
+            isSample,
+            isStorefront
         }
     ] : null, async ([, arg])=>{
         return getProduct.getProduct(fetcher, arg);

package/dist/cjs/hooks/shop/use-products-query.js

@@ -8,13 +8,15 @@ var useFetchHandle = require('../useFetchHandle.js');
 const useProductsQuery = (ids, options)=>{
     const fetcher = useFetchHandle.useFetchHandle();
     const isSample = shop.useIsSampleProduct();
+    const isStorefront = shop.useIsStorefrontProduct();
     return useSWR([
         'query/products',
         {
             ids: [
                 ...ids ?? []
             ]?.sort(),
-            isSample
+            isSample,
+            isStorefront
         }
     ], async ([, arg])=>{
         return getProducts.getProducts(fetcher, arg);

package/dist/cjs/hooks/shop.js

@@ -84,7 +84,11 @@ function useConnectedShopify() {
 }
 function useIsSampleProduct() {
     const { storefrontToken  } = useStoreFront();
-    return !storefrontToken;
+    const isStorefront = ShopContext.useShopStore((state)=>state.isStorefront);
+    return isStorefront && !storefrontToken;
+}
+function useIsStorefrontProduct() {
+    return ShopContext.useShopStore((state)=>state.isStorefront);
 }
 function useCheckoutUrl(url) {
     const { storefrontToken  } = useStoreFront();
@@ -97,6 +101,7 @@ exports.useConnectedShopify = useConnectedShopify;
 exports.useCurrency = useCurrency;
 exports.useEditorMode = useEditorMode;
 exports.useIsSampleProduct = useIsSampleProduct;
+exports.useIsStorefrontProduct = useIsStorefrontProduct;
 exports.useLocale = useLocale;
 exports.useMatchMutate = useMatchMutate;
 exports.useMobileOnly = useMobileOnly;

package/dist/cjs/index.js

@@ -166,6 +166,7 @@ exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
 exports.genTypoClass = typography.genTypoClass;
 exports.composeRadius = radius.composeRadius;
+exports.getCornerCSSFromGlobal = radius.getCornerCSSFromGlobal;
 exports.getCustomRadius = radius.getCustomRadius;
 exports.getRadiusCSSFromGlobal = radius.getRadiusCSSFromGlobal;
 exports.getRadiusStyleActiveState = radius.getRadiusStyleActiveState;
@@ -191,6 +192,7 @@ exports.useConnectedShopify = shop.useConnectedShopify;
 exports.useCurrency = shop.useCurrency;
 exports.useEditorMode = shop.useEditorMode;
 exports.useIsSampleProduct = shop.useIsSampleProduct;
+exports.useIsStorefrontProduct = shop.useIsStorefrontProduct;
 exports.useLocale = shop.useLocale;
 exports.useMatchMutate = shop.useMatchMutate;
 exports.useMobileOnly = shop.useMobileOnly;

package/dist/esm/contexts/ShopContext.js

@@ -7,6 +7,7 @@ import { AddonProvider } from './AddonContext.js';
 const ShopContext = /*#__PURE__*/ createContext(null);
 const createShopStoreProvider = (data)=>createStore((set)=>({
             mobileOnly: false,
+            isStorefront: true,
             ...data,
             changeLocale: (locale)=>{
                 set({

package/dist/esm/helpers/borders.js

@@ -1,6 +1,13 @@
 import { getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass } from './colors.js';
-import { makeStyleResponsiveState, makeStyleState } from './make-style.js';
+import { makeStyleResponsiveState, makeStyleState, makeStyle } from './make-style.js';
 
+const getBorderStyle = (value)=>{
+    return makeStyle({
+        'b': value?.border,
+        'bc': value?.color,
+        'bw': value?.width
+    });
+};
 const handleConvertBorderStyle = (value)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
@@ -126,4 +133,4 @@ const handleConvertClassColor = (value)=>{
     return getGlobalColorStateClass('border', newVal);
 };
 
-export { handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };
+export { getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };

package/dist/esm/helpers/compose-advance-style.js

@@ -1,7 +1,7 @@
-import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor } from './borders.js';
+import { handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, getBorderStyle } from './borders.js';
 import { isColor } from './colors.js';
 import { layoutComponent } from './constant.js';
-import { composeRadius } from './radius.js';
+import { composeRadius, getCornerCSSFromGlobal } from './radius.js';
 import { getStyleShadowState } from './shadow.js';
 
 const composeSpacing = ({ source , spacing , type , suffix =''  })=>{
@@ -112,6 +112,13 @@ function composeAdvanceStyle(data, tag) {
                             Object.assign(styles, getStyleShadowState(value, 'box-shadow', hasBoxShadow));
                             break;
                     }
+                } else {
+                    if (attr === 'border') {
+                        Object.assign(styles, getBorderStyle(value));
+                    }
+                    if (attr === 'rounded') {
+                        Object.assign(styles, getCornerCSSFromGlobal(value));
+                    }
                 }
             });
         } else {

package/dist/esm/helpers/queries/get-collection.js

@@ -85,7 +85,7 @@ const loopFetchCollection = async (fetcher, arg)=>{
                 },
                 orderByProduct: productSortedByOrder(arg.orderBy),
                 whereProduct: {
-                    isStorefront: true,
+                    isStorefront: arg.isStorefront,
                     isSample: arg.isSample
                 },
                 productsAfter: productAfterFetcher
@@ -153,7 +153,7 @@ const mergeProductCollectionVariant = async (fetcher, collection, isSample)=>{
     };
     return newCollection;
 };
-const fetchVariantsByBaseIds = async (fetcher, { ids , isSample  })=>{
+const fetchVariantsByBaseIds = async (fetcher, { ids , isSample , isStorefront  })=>{
     const initVariables = {
         firstVariant: 100,
         first: ids?.length || 1,
@@ -162,7 +162,7 @@ const fetchVariantsByBaseIds = async (fetcher, { ids , isSample  })=>{
             direction: 'DESC'
         },
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...ids?.length && {
                 baseIDIn: ids.sort()

package/dist/esm/helpers/queries/get-product-by-slug.js

@@ -25,12 +25,12 @@ const orderBy = {
     field: 'UPDATED_AT',
     direction: 'DESC'
 };
-const fetchProduct = async (fetcher, handle)=>{
+const fetchProduct = async (fetcher, handle, isStorefront)=>{
     const variables = {
         orderBy,
         where: {
             handle,
-            isStorefront: true
+            isStorefront
         }
     };
     const response = await fetcher([
@@ -39,12 +39,12 @@ const fetchProduct = async (fetcher, handle)=>{
     ]);
     return response.product?.edges?.[0]?.node;
 };
-const fetchVariants = async (fetcher, handle)=>{
+const fetchVariants = async (fetcher, handle, isStorefront)=>{
     const initVariables = {
         orderBy,
         where: {
             handle,
-            isStorefront: true
+            isStorefront
         }
     };
     const query = async (variables, olds)=>{
@@ -68,12 +68,12 @@ const fetchVariants = async (fetcher, handle)=>{
     };
     return query(initVariables, []);
 };
-const fetchMedias = async (fetcher, handle)=>{
+const fetchMedias = async (fetcher, handle, isStorefront)=>{
     const initVariables = {
         orderBy,
         where: {
             handle,
-            isStorefront: true
+            isStorefront
         },
         orderByMedia: {
             field: 'POSITION',

package/dist/esm/helpers/queries/get-product.js

@@ -2,19 +2,22 @@ import { ProductLittleDetailDocument } from '../../graphql/queries/product-littl
 import { ProductMediasDocument } from '../../graphql/queries/product-medias.generated.js';
 import { ProductVariantsDocument } from '../../graphql/queries/product-variants.generated.js';
 
-const getProduct = async (fetcher, { id , isSample  })=>{
+const getProduct = async (fetcher, { id , isSample , isStorefront  })=>{
     const [product, variants, medias] = await Promise.all([
         fetchProduct(fetcher, {
             id,
-            isSample
+            isSample,
+            isStorefront
         }),
         fetchVariants(fetcher, {
             id,
-            isSample
+            isSample,
+            isStorefront
         }),
         fetchMedias(fetcher, {
             id,
-            isSample
+            isSample,
+            isStorefront
         })
     ]);
     if (!product) {
@@ -34,11 +37,11 @@ const orderBy = {
     field: 'UPDATED_AT',
     direction: 'DESC'
 };
-const fetchProduct = async (fetcher, { id , isSample  })=>{
+const fetchProduct = async (fetcher, { id , isSample , isStorefront  })=>{
     const variables = {
         orderBy,
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...id && id.toLowerCase() !== 'latest' && {
                 baseID: id
@@ -51,11 +54,11 @@ const fetchProduct = async (fetcher, { id , isSample  })=>{
     ]);
     return response.product?.edges?.[0]?.node;
 };
-const fetchVariants = async (fetcher, { id , isSample  })=>{
+const fetchVariants = async (fetcher, { id , isSample , isStorefront  })=>{
     const initVariables = {
         orderBy,
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...id && id.toLowerCase() !== 'latest' && {
                 baseID: id
@@ -83,11 +86,11 @@ const fetchVariants = async (fetcher, { id , isSample  })=>{
     };
     return query(initVariables, []);
 };
-const fetchMedias = async (fetcher, { id , isSample  })=>{
+const fetchMedias = async (fetcher, { id , isSample , isStorefront  })=>{
     const initVariables = {
         orderBy,
         where: {
-            isStorefront: true,
+            isStorefront,
             isSample,
             ...id && id.toLowerCase() !== 'latest' && {
                 baseID: id

package/dist/esm/helpers/queries/get-products.js

@@ -2,17 +2,28 @@ import { ProductsDocument } from '../../graphql/queries/products.generated.js';
 import { calculateFirstProduct } from './get-collection.js';
 import { fetchVariants, fetchMedias } from './get-product.js';
 
-const getProducts = async (fetcher, { ids , isSample  })=>{
+const getProducts = async (fetcher, { ids , isSample , isStorefront  })=>{
     const products = await loopFetchProducts(fetcher, {
         ids,
-        isSample
+        isSample,
+        isStorefront
     });
     if (!products) {
         throw new Error('Product not found');
     }
     const [mergedVariant, mergedMedias] = await Promise.all([
-        mergeVariantsToProducts(fetcher, products, isSample),
-        mergeMediasToProducts(fetcher, products, isSample)
+        mergeVariantsToProducts({
+            fetcher,
+            products,
+            isSample,
+            isStorefront
+        }),
+        mergeMediasToProducts({
+            fetcher,
+            products,
+            isSample,
+            isStorefront
+        })
     ]);
     return {
         ...products,
@@ -48,7 +59,7 @@ const fetchProducts = async (fetcher, variables)=>{
         variables
     ]);
 };
-const loopFetchProducts = async (fetcher, { ids , isSample  })=>{
+const loopFetchProducts = async (fetcher, { ids , isSample , isStorefront  })=>{
     const numberOfProducts = (ids?.length == 0 ? 4 : ids?.length) ?? 4;
     const productsPerPage = 8; // number of products per page
     let variables; // variables of collection query
@@ -73,8 +84,8 @@ const loopFetchProducts = async (fetcher, { ids , isSample  })=>{
                 direction: 'ASC'
             },
             where: {
-                isStorefront: true,
-                isSample: isSample,
+                isStorefront,
+                isSample,
                 ...ids?.length ? {
                     baseIDIn: ids
                 } : {}
@@ -102,11 +113,12 @@ const loopFetchProducts = async (fetcher, { ids , isSample  })=>{
     }
     return dataProducts;
 };
-const mergeVariantsToProducts = async (fetcher, products, isSample)=>{
+const mergeVariantsToProducts = async ({ fetcher , products , isSample , isStorefront  })=>{
     const productsWithVariants = await Promise.all(products?.products?.edges?.map(async (product)=>{
         const variants = await fetchVariants(fetcher, {
             id: product?.node?.baseID,
-            isSample
+            isSample,
+            isStorefront
         });
         return {
             productId: product?.node?.baseID,
@@ -115,11 +127,12 @@ const mergeVariantsToProducts = async (fetcher, products, isSample)=>{
     }) ?? []);
     return productsWithVariants;
 };
-const mergeMediasToProducts = async (fetcher, products, isSample)=>{
+const mergeMediasToProducts = async ({ fetcher , products , isSample , isStorefront  })=>{
     const productsWithMedias = await Promise.all(products?.products?.edges?.map(async (product)=>{
         const medias = await fetchMedias(fetcher, {
             id: product?.node?.baseID,
-            isSample
+            isSample,
+            isStorefront
         });
         return {
             productId: product?.node?.baseID,

package/dist/esm/helpers/radius.js

@@ -1,5 +1,16 @@
 import { devicesMapping, stateMapping } from './constant.js';
+import { makeStyle } from './make-style.js';
 
+const getCornerCSSFromGlobal = (corner)=>{
+    if (!corner.radiusType) return {};
+    return makeStyle({
+        'bblr': corner.bblr,
+        'bbrr': corner.bbrr,
+        'btlr': corner.btlr,
+        'btrr': corner.btrr,
+        'radius': `var(--g-radius-${corner.radiusType})`
+    });
+};
 const getRadiusCSSFromGlobal = (state, key, device)=>{
     if (!key || !state) return {};
     const suffix = device && device !== 'desktop' ? devicesMapping?.[device] : '';
@@ -80,4 +91,4 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
 
-export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };
+export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState };

package/dist/esm/hooks/shop/use-product-query.js

@@ -1,16 +1,18 @@
 import useSWR from 'swr';
 import { getProduct } from '../../helpers/queries/get-product.js';
-import { useIsSampleProduct } from '../shop.js';
+import { useIsSampleProduct, useIsStorefrontProduct } from '../shop.js';
 import { useFetchHandle } from '../useFetchHandle.js';
 
 const useProductQuery = (productId, options)=>{
     const fetcher = useFetchHandle();
     const isSample = useIsSampleProduct();
+    const isStorefront = useIsStorefrontProduct();
     return useSWR(productId ? [
         'query/product',
         {
             id: productId ?? 'latest',
-            isSample
+            isSample,
+            isStorefront
         }
     ] : null, async ([, arg])=>{
         return getProduct(fetcher, arg);

package/dist/esm/hooks/shop/use-products-query.js

@@ -1,18 +1,20 @@
 import useSWR from 'swr';
 import { getProducts } from '../../helpers/queries/get-products.js';
-import { useIsSampleProduct } from '../shop.js';
+import { useIsSampleProduct, useIsStorefrontProduct } from '../shop.js';
 import { useFetchHandle } from '../useFetchHandle.js';
 
 const useProductsQuery = (ids, options)=>{
     const fetcher = useFetchHandle();
     const isSample = useIsSampleProduct();
+    const isStorefront = useIsStorefrontProduct();
     return useSWR([
         'query/products',
         {
             ids: [
                 ...ids ?? []
             ]?.sort(),
-            isSample
+            isSample,
+            isStorefront
         }
     ], async ([, arg])=>{
         return getProducts(fetcher, arg);

package/dist/esm/hooks/shop.js

@@ -82,7 +82,11 @@ function useConnectedShopify() {
 }
 function useIsSampleProduct() {
     const { storefrontToken  } = useStoreFront();
-    return !storefrontToken;
+    const isStorefront = useShopStore((state)=>state.isStorefront);
+    return isStorefront && !storefrontToken;
+}
+function useIsStorefrontProduct() {
+    return useShopStore((state)=>state.isStorefront);
 }
 function useCheckoutUrl(url) {
     const { storefrontToken  } = useStoreFront();
@@ -90,4 +94,4 @@ function useCheckoutUrl(url) {
     return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
 }
 
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };

package/dist/esm/index.js

@@ -42,7 +42,7 @@ export { genVariable } from './helpers/css-variable.js';
 export { isDefined } from './helpers/is-defined.js';
 export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
 export { genTypoClass } from './helpers/typography.js';
-export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
+export { composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.js';
 export { fpixel };
@@ -59,7 +59,7 @@ export { useCartNoteUpdate } from './hooks/cart/use-cart-note-update.js';
 export { useCreateCart } from './hooks/cart/use-create-cart.js';
 export { useRemoveCartItem } from './hooks/cart/use-remove-cart-item.js';
 export { useUpdateCartItem } from './hooks/cart/use-update-cart-item.js';
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
 export { useCollectionQuery } from './hooks/shop/use-collection-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
 export { useProductsQuery } from './hooks/shop/use-products-query.js';

package/dist/types/index.d.ts

@@ -6982,6 +6982,7 @@ type ShopContextProps = {
     provider?: 'BIGCOMMERCE' | 'SHOPIFY';
     mobileOnly?: boolean;
     swatches?: GlobalSwatchesData[];
+    isStorefront?: boolean;
     changeLocale: (locale: string) => void;
     changeStorefrontInfo: (args: {
         url?: string;
@@ -7316,6 +7317,7 @@ declare const getGlobalColorStyle: (data?: ColorValueType) => React.CSSPropertie
 type TypographyClass = `g-${TypographyType}`;
 declare const genTypoClass: (name: TypographyType) => TypographyClass;
 
+declare const getCornerCSSFromGlobal: (corner: CornerRadius) => React.CSSProperties;
 declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, device?: NameDevices) => React.CSSProperties;
 declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
@@ -7445,7 +7447,8 @@ declare const useEditorMode: () => RenderMode | undefined;
 declare const useMobileOnly: () => boolean | undefined;
 declare const useMatchMutate: () => (matcher: RegExp, ...args: any[]) => Promise<any[][]>;
 declare function useConnectedShopify(): boolean;
-declare function useIsSampleProduct(): boolean;
+declare function useIsSampleProduct(): boolean | undefined;
+declare function useIsStorefrontProduct(): boolean | undefined;
 declare function useCheckoutUrl(url?: string): string | undefined;
 
 type Args$1 = {
@@ -7459,11 +7462,13 @@ declare const useCollectionQuery: (args: Args$1, options?: SWRConfiguration<Coll
 declare const useProductQuery: (productId?: string, options?: SWRConfiguration<ProductSelectFragment>) => swr__internal.SWRResponse<ProductSelectFragment, any, Partial<swr__internal.PublicConfiguration<ProductSelectFragment, any, (arg: ["query/product", {
     id?: string | undefined;
     isSample?: boolean | undefined;
+    isStorefront?: boolean | undefined;
 }]) => swr__internal.FetcherResponse<ProductSelectFragment>>> | undefined>;
 
 declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<ProductsQueryResponse>) => swr__internal.SWRResponse<ProductsQueryResponse, any, Partial<swr__internal.PublicConfiguration<ProductsQueryResponse, any, (arg: ["query/products", {
     ids?: string[] | undefined;
     isSample?: boolean | undefined;
+    isStorefront?: boolean | undefined;
 }]) => swr__internal.FetcherResponse<ProductsQueryResponse>>> | undefined>;
 
 declare const useCurrentDevice: () => NameDevices;
@@ -7589,6 +7594,7 @@ type Args = {
     numberOfProducts?: number;
     orderBy?: OrderByType;
     isSample?: boolean;
+    isStorefront?: boolean;
 };
 declare const getCollection: (fetcher: FetchFunc, arg: Args) => Promise<CollectionDetailFilterQueryResponse>;
 declare const calculateFirstProduct: (numberOfProducts: number, currentPage: number, productsPerPage: number) => number;
@@ -7596,17 +7602,18 @@ declare const calculateFirstProduct: (numberOfProducts: number, currentPage: num
 type FetchParams = {
     id?: string;
     isSample?: boolean;
+    isStorefront?: boolean;
 };
-declare const getProduct: (fetcher: FetchFunc, { id, isSample }: FetchParams) => Promise<ProductSelectFragment>;
+declare const getProduct: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchParams) => Promise<ProductSelectFragment>;
 type RequiredCursorEdge<T> = {
     cursor: string;
     node?: T;
 };
-declare const fetchVariants: (fetcher: FetchFunc, { id, isSample }: FetchParams) => Promise<RequiredCursorEdge<VariantSelectFragment>[]>;
-declare const fetchMedias: (fetcher: FetchFunc, { id, isSample }: FetchParams) => Promise<(Pick<MediaEdge, "cursor"> & {
+declare const fetchVariants: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchParams) => Promise<RequiredCursorEdge<VariantSelectFragment>[]>;
+declare const fetchMedias: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchParams) => Promise<(Pick<MediaEdge, "cursor"> & {
     node?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "src" | "alt">>;
 })[]>;
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getCollection, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, Border, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchFunc, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RoundedSize, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, calculateFirstProduct, cls, composeAdvanceStyle, composeRadius, composeSize, composeSpacing, fetchMedias, fetchVariants, flattenConnection, fpixel, genTypoClass, genVariable, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, prefetchQueries, props, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.5.43",
+  "version": "1.6.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",