@gem-sdk/core 1.58.0-dev.13 → 1.58.0-dev.134

package/dist/esm/components/ai-generator/components/ToneAndVoice.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { DropdownIcon, TickIcon } from '../icons/DropdownIcon.js';

package/dist/esm/components/ai-generator/icons/AIIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const AIIcon = ()=>{

package/dist/esm/components/ai-generator/icons/CloseIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const CloseIcon = ()=>{

package/dist/esm/components/ai-generator/icons/DropdownIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const DropdownIcon = ()=>{

package/dist/esm/components/ai-generator/icons/SearchIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const SearchIcon = ()=>{

package/dist/esm/components/ai-generator/icons/ShowMoreIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const ShowMoreIcon = ()=>{

package/dist/esm/components/ai-generator/icons/UpgradeIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const UpgradeIcon = ()=>{

package/dist/esm/components/ai-generator/icons/WarningIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const WarningIcon = ()=>{

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import Spacing from './Spacing.js';
 

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useEffect } from 'react';
 import 'zustand';

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

@@ -1,10 +1,11 @@
+'use client';
 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 '@gem-sdk/adapter-shopify';
 import 'swr';
+import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import 'swr/infinite';
 import 'vanilla-lazyload';

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const getStatusMessage = (status)=>{

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { Transition } from 'react-transition-group';

package/dist/esm/components/toolbar/Tooltip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', width, ...props }) {

package/dist/esm/contexts/AddonContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useMemo, createContext } from 'react';
 import Empty from '../components/Empty.js';

package/dist/esm/contexts/ArticleContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useId, useMemo, useContext, createContext } from 'react';

package/dist/esm/contexts/ArticleListContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/BuilderComponent.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useContext, createContext } from 'react';

package/dist/esm/contexts/BuilderContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext, Suspense, Fragment } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, createContext, Suspense, Fragment } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/CartLineContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useContext, createContext } from 'react';

package/dist/esm/contexts/CollectionContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/ModalContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/PageContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/ProductContext.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useStore, createStore } from 'zustand';
 import { useId, useMemo, useContext, createContext } from 'react';
+import { useStore, createStore } from 'zustand';
 import { flattenConnection } from '../helpers/flatten-connection.js';
 import { checkInStock } from '../helpers/variant.js';
 
@@ -23,6 +24,21 @@ const createProductStoreProvider = (data)=>createStore((set, get)=>({
                     };
                 });
             },
+            setUseProductCompareAtPrice: (value)=>{
+                set({
+                    useProductCompareAtPrice: value
+                });
+            },
+            setShouldRequireUploadMessage: (value)=>{
+                set({
+                    shouldRequireUploadMessage: value
+                });
+            },
+            setRequireUpload: (value)=>{
+                set({
+                    requireUpload: value
+                });
+            },
             addProperty: (data)=>{
                 const properties = get().properties;
                 if (!properties?.some((v)=>v.key === data.key)) {

package/dist/esm/contexts/ProductListContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
 import { useStore, createStore } from 'zustand';

package/dist/esm/contexts/SectionContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useStore, createStore } from 'zustand';
 import { useContext, createContext } from 'react';

package/dist/esm/contexts/ShopContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { SWRConfig } from 'swr';
 import { useStore, createStore } from 'zustand';

package/dist/esm/graphql/fragments/preview-theme-page.generated.js

@@ -0,0 +1,33 @@
+/* eslint-disable */ const PreviewThemePageSelect = `
+    fragment PreviewThemePageSelect on PreviewThemePage {
+  id
+  name
+  handle
+  isMobile
+  sectionPosition
+  pageSections {
+    cid
+    component
+    id
+  }
+  dataSEO {
+    ...DataSEOSelect
+  }
+  themeStyle {
+    id
+    data
+    name
+  }
+  analytic {
+    ...AnalyticSelect
+  }
+  customCode {
+    ...CustomCodeSelect
+  }
+  customFonts {
+    ...CustomFontSelect
+  }
+}
+    `;
+
+export { PreviewThemePageSelect };

package/dist/esm/graphql/fragments/published-theme-page.generated.js

@@ -30,34 +30,11 @@
     id
     value
   }
+  metafields {
+    key
+    value
+  }
 }
     `;
-const PreviewThemePageSelect = `
-  fragment PreviewThemePageSelect on PublishedThemePage {
-    id
-    name
-    handle
-    isMobile
-    sectionPosition
-    pageSections {
-      ...PublishedPageSectionSelect
-    }
-    themePageCustomSections {
-      ...PublishedCustomSectionSelect
-    }
-    themePageDataSEO {
-      ...DataSEOSelect
-    }
-    pageStyle {
-      ...PublishedThemeStyleSelect
-    }
-    themePageAnalytic {
-      ...AnalyticSelect
-    }
-    themePageCustomCode {
-      ...CustomCodeSelect
-    }
-  }
-`;
 
-export { PreviewThemePageSelect, PublishedThemePageSelect };
+export { PublishedThemePageSelect };

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

@@ -25,6 +25,7 @@ const ArticlesDocument = `
         }
         isSample
         platformCreatedAt
+        platformUpdatedAt
         author
         content {
           excerptHtml

package/dist/esm/graphql/queries/preview-page.generated.js

@@ -1,23 +1,19 @@
-import { PreviewThemePageSelect } from '../fragments/published-theme-page.generated.js';
-import { PublishedPageSectionSelect } from '../fragments/published-page-section.generated.js';
-import { PublishedCustomSectionSelect } from '../fragments/published-custom-section.generated.js';
+import { PreviewThemePageSelect } from '../fragments/preview-theme-page.generated.js';
 import { DataSeoSelect } from '../fragments/data-seo.generated.js';
-import { PublishedThemeStyleSelect } from '../fragments/published-theme-style.generated.js';
 import { AnalyticSelect } from '../fragments/analytic.generated.js';
 import { CustomCodeSelect } from '../fragments/custom-code.generated.js';
+import { CustomFontSelect } from '../fragments/custom-font.generated.js';
 
-const PreviewPageDocument = `
-    query previewPage($handleURL: String, $pageType: PublishedThemePageType!) {
-  previewPage(handleURL: $handleURL, pageType: $pageType) {
+const PreviewThemePageDocument = `
+    query PreviewThemePage($pageType: PreviewThemePageType!, $handleURL: String) {
+  previewThemePage(pageType: $pageType, handleURL: $handleURL) {
     ...PreviewThemePageSelect
   }
 }
     ${PreviewThemePageSelect}
-${PublishedPageSectionSelect}
-${PublishedCustomSectionSelect}
 ${DataSeoSelect}
-${PublishedThemeStyleSelect}
 ${AnalyticSelect}
-${CustomCodeSelect}`;
+${CustomCodeSelect}
+${CustomFontSelect}`;
 
-export { PreviewPageDocument };
+export { PreviewThemePageDocument };

package/dist/esm/graphql/queries/shop-shopify.generated.js

@@ -0,0 +1,9 @@
+const ShopShopifyDocument = `
+    query shopShopify {
+  shopShopify {
+    timezone
+  }
+}
+    `;
+
+export { ShopShopifyDocument };

package/dist/esm/helpers/align.js

@@ -13,5 +13,22 @@ const convertTextAlignToJustify = (align)=>{
     });
     return result;
 };
+const getAlignmentClasses = (align)=>{
+    const breakpoints = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    return breakpoints.reduce((classes, bp)=>{
+        const prefix = bp === 'desktop' ? '' : `${bp}:`;
+        const alignment = align?.[bp];
+        if (alignment) {
+            classes[`${prefix}gp-justify-start`] = alignment === 'left';
+            classes[`${prefix}gp-justify-center`] = alignment === 'center';
+            classes[`${prefix}gp-justify-end`] = alignment === 'right';
+        }
+        return classes;
+    }, {});
+};
 
-export { convertTextAlignToJustify };
+export { convertTextAlignToJustify, getAlignmentClasses };

package/dist/esm/helpers/backgroundImage.js

@@ -0,0 +1,179 @@
+import { makeStyleResponsiveState } from './make-style.js';
+
+const getStyleBackgroundImageByDevice = (backgroundImage, options)=>{
+    if (!backgroundImage) {
+        return {};
+    }
+    return {
+        ...!options?.ignoreBackgroundImage ? {
+            ...getStyleBgImageSource(backgroundImage, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
+            ...getStyleBgImagePosition(backgroundImage),
+            ...getStyleBgImageSize(backgroundImage),
+            ...getStyleBgImageRepeat(backgroundImage)
+        } : {},
+        ...!options?.ignoreBgAttachment ? getStyleBgImageAttachment(backgroundImage) : {}
+    };
+};
+const getStyleBgImageSource = (backgroundImage, options)=>{
+    const bgImage = {
+        desktop: {
+            normal: getBgImageSourceByDevice(backgroundImage, 'desktop', 'normal', options),
+            hover: getBgImageSourceByDevice(backgroundImage, 'desktop', 'hover', options)
+        },
+        tablet: {
+            normal: getBgImageSourceByDevice(backgroundImage, 'tablet', 'normal', options),
+            hover: getBgImageSourceByDevice(backgroundImage, 'tablet', 'hover', options)
+        },
+        mobile: {
+            normal: getBgImageSourceByDevice(backgroundImage, 'mobile', 'normal', options),
+            hover: getBgImageSourceByDevice(backgroundImage, 'mobile', 'hover', options)
+        }
+    };
+    return makeStyleResponsiveState('bgi', bgImage);
+};
+const getBgImageSourceByDevice = (backgroundImage, device, state, options)=>{
+    const stateValue = backgroundImage?.[device]?.[state];
+    if (!stateValue?.image?.src) return;
+    const backupFileKey = stateValue.image.backupFileKey;
+    const storage = stateValue.image.storage;
+    let imageByDevice = stateValue.image.src;
+    let newBackupFilekey = backupFileKey;
+    const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
+    /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
+    if (backupFileKey && shopifyHandleName && shopifyHandleName !== backupFileKey) {
+        newBackupFilekey = shopifyHandleName;
+    }
+    if (storage === 'FILE_CONTENT') {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
+        }
+    }
+    if (storage === 'THEME' || !storage) {
+        if (options?.liquid && newBackupFilekey) {
+            imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
+        }
+    }
+    return imageByDevice ? `url(${imageByDevice})` : 'none';
+};
+const getStyleBgImagePosition = (backgroundImage)=>{
+    const bgPosition = {
+        desktop: {
+            normal: getBgImagePositionByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImagePositionByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImagePositionByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImagePositionByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImagePositionByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImagePositionByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bgp', bgPosition);
+};
+const getBgImagePositionByDevice = (backgroundImage, device, state)=>{
+    const position = backgroundImage?.[device]?.[state]?.position;
+    return position && `${position.x}% ${position.y}%`;
+};
+const getStyleBgImageSize = (backgroundImage)=>{
+    const bgSize = {
+        desktop: {
+            normal: getBgImageSizeByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImageSizeByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImageSizeByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImageSizeByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImageSizeByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImageSizeByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bgs', bgSize);
+};
+const getBgImageSizeByDevice = (backgroundImage, device, state)=>{
+    return backgroundImage?.[device]?.[state]?.size;
+};
+const getStyleBgImageRepeat = (backgroundImage)=>{
+    const bgRepeat = {
+        desktop: {
+            normal: getBgImageRepeatByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImageRepeatByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImageRepeatByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImageRepeatByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImageRepeatByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImageRepeatByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bgr', bgRepeat);
+};
+const getBgImageRepeatByDevice = (backgroundImage, device, state)=>{
+    return backgroundImage?.[device]?.[state]?.repeat;
+};
+const getStyleBgImageAttachment = (backgroundImage)=>{
+    const bgAttachment = {
+        desktop: {
+            normal: getBgImageAttachmentByDevice(backgroundImage, 'desktop', 'normal'),
+            hover: getBgImageAttachmentByDevice(backgroundImage, 'desktop', 'hover')
+        },
+        tablet: {
+            normal: getBgImageAttachmentByDevice(backgroundImage, 'tablet', 'normal'),
+            hover: getBgImageAttachmentByDevice(backgroundImage, 'tablet', 'hover')
+        },
+        mobile: {
+            normal: getBgImageAttachmentByDevice(backgroundImage, 'mobile', 'normal'),
+            hover: getBgImageAttachmentByDevice(backgroundImage, 'mobile', 'hover')
+        }
+    };
+    return makeStyleResponsiveState('bga', bgAttachment);
+};
+const getBgImageAttachmentByDevice = (backgroundImage, device, state)=>{
+    return backgroundImage?.[device]?.[state]?.attachment;
+};
+const composeBackgroundImageCss = (config, options = {})=>{
+    if (!config) return undefined;
+    const { device = 'desktop', state = 'normal', useLiquid = false } = options;
+    const styles = [];
+    const bgConfig = config?.[device]?.[state];
+    if (!bgConfig) return '';
+    // Handle background image source
+    if (bgConfig.image?.src) {
+        let imageUrl = bgConfig.image.src;
+        // Handle Shopify liquid transformations if needed
+        if (useLiquid && bgConfig.image.backupFileKey) {
+            if (bgConfig.image.storage === 'FILE_CONTENT') {
+                imageUrl = `{{ "${bgConfig.image.backupFileKey.replace('.jpeg', '.jpg')}" | file_url }}`;
+            } else if (bgConfig.image.storage === 'THEME' || !bgConfig.image.storage) {
+                imageUrl = `{{ "${bgConfig.image.backupFileKey}" | asset_url }}`;
+            }
+        }
+        styles.push(`background-image: url(${imageUrl});`);
+    }
+    // Handle position
+    if (bgConfig.position) {
+        styles.push(`background-position: ${bgConfig.position.x}% ${bgConfig.position.y}%;`);
+    }
+    // Handle size
+    if (bgConfig.size) {
+        styles.push(`background-size: ${bgConfig.size};`);
+    }
+    // Handle repeat
+    if (bgConfig.repeat) {
+        styles.push(`background-repeat: ${bgConfig.repeat};`);
+    }
+    // Handle attachment
+    if (bgConfig.attachment) {
+        styles.push(`background-attachment: ${bgConfig.attachment};`);
+    }
+    return styles.join('\n  ');
+};
+
+export { composeBackgroundImageCss, getBgImageSourceByDevice, getStyleBackgroundImageByDevice, getStyleBgImageSource };

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

@@ -110,12 +110,66 @@ function composeAdvanceStyle(data, tag, pageType) {
                             Object.assign(styles, composeRadius(value));
                         }
                         if (attr === 'boxShadow') {
-                            const listElementShadowV2 = [
-                                'Row',
+                            const baseElements = [
                                 'Section',
+                                'Row',
                                 'Text',
                                 'Heading',
-                                'Image'
+                                'Image',
+                                'Button',
+                                'HeroBanner',
+                                'ImageComparison',
+                                'Countdown',
+                                'Video'
+                            ];
+                            const productElements = [
+                                'ProductTitle',
+                                'ProductDescription',
+                                'ProductPrice',
+                                'ProductVendor',
+                                'Product',
+                                'ProductSku',
+                                'StockCounter',
+                                'Sticky',
+                                'ProductBadge',
+                                'ProductViewMore',
+                                'ProductButton',
+                                'DynamicCheckout'
+                            ];
+                            const boostElements = [
+                                'Icon',
+                                'IconListHoz',
+                                'Line',
+                                'IconList',
+                                'IconListV2',
+                                'Tabs',
+                                'Accordion',
+                                'Marquee',
+                                'Breadcrumb'
+                            ];
+                            const formElements = [
+                                'Newsletter',
+                                'ContactForm',
+                                'TextField',
+                                'FormTextarea',
+                                'FormEmail',
+                                'FormDropdown',
+                                'FormCheckbox',
+                                'SubmitButton'
+                            ];
+                            const collectionElements = [
+                                'CollectionTitle',
+                                'CollectionDescription',
+                                'CollectionBanner',
+                                'CollectionToolbar',
+                                'CollectionPaginator'
+                            ];
+                            const listElementShadowV2 = [
+                                ...baseElements,
+                                ...productElements,
+                                ...boostElements,
+                                ...formElements,
+                                ...collectionElements
                             ];
                             let hasBoxShadowV2 = hasBoxShadow;
                             if (listElementShadowV2.includes(tag || '')) {

package/dist/esm/helpers/filter-toolbar-preview.js

@@ -1,3 +1,4 @@
+'use client';
 import { Children } from 'react';
 import ComponentToolbarPreview from '../components/ComponentToolbarPreview.js';
 

package/dist/esm/helpers/interaction/index.js

@@ -1,8 +1,9 @@
+'use client';
 import { useRef, useMemo, useCallback } from 'react';
 import 'react/jsx-runtime';
 import 'zustand';
-import 'swr';
 import { usePageStore } from '../../contexts/PageContext.js';
+import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import 'swr/infinite';

package/dist/esm/helpers/is-empty-children.js

@@ -1,3 +1,4 @@
+'use client';
 import { Children } from 'react';
 import ComponentToolbarPreview from '../components/ComponentToolbarPreview.js';
 

package/dist/esm/helpers/layout.js

@@ -50,5 +50,21 @@ const convertOldLayout = (layout)=>{
         }
     };
 };
+const getLayoutClasses = (layout)=>{
+    const breakpoints = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    return breakpoints.reduce((classes, bp)=>{
+        const prefix = bp === 'desktop' ? '' : `${bp}:`;
+        const layoutValue = layout?.[bp];
+        if (layoutValue) {
+            classes[`${prefix}gp-flex-col`] = layoutValue === 'vertical';
+            classes[`${prefix}gp-flex-row`] = layoutValue === 'horizontal';
+        }
+        return classes;
+    }, {});
+};
 
-export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle };
+export { composeGridLayout, convertOldLayout, getLayoutClasses, gridToArrayRegex, optionLayoutStyle };