@gem-sdk/components 2.1.16 → 2.1.17

package/dist/esm/collection/components/CollectionDescription.js

@@ -1,15 +1,109 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCollection } from '@gem-sdk/core';
-import Text from '../../text/components/Text.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCurrentDevice, useCollection, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
+import { useState, useRef, useEffect } from 'react';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, builderProps })=>{
+    const [open, setOpen] = useState(false);
+    const [isShowViewMore, allowShowViewMore] = useState(false);
+    const ref = useRef(null);
+    const currentDevice = useCurrentDevice();
     const collection = useCollection();
-    return /*#__PURE__*/ jsx(Text, {
-        styles: setting,
-        setting: {
-            text: collection?.descriptionHtml ?? 'Collection description',
-            excludeFlex: true
+    const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
+    const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    useEffect(()=>{
+        const dom = ref.current;
+        setOpen(false);
+        if (dom && hasLineClamp && collection?.description) {
+            const value = lineClamp;
+            setTimeout(()=>{
+                const scrollHeight = dom?.scrollHeight ?? 0;
+                const clientHeight = dom?.clientHeight ?? 0;
+                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
+                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
+                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                if (value && conditionCheckLine) {
+                    allowShowViewMore(()=>true);
+                } else {
+                    allowShowViewMore(()=>false);
+                }
+            }, 100);
         }
+    }, [
+        hasLineClamp,
+        lineClamp,
+        collection?.description
+    ]);
+    const css = `
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
+    display: inline !important;
+  }
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
+    content: "\\A";
+    white-space: pre;
+  }
+  .gp-p-description-text > table {
+    box-shadow: none;
+  }
+`;
+    const hasDescription = collection?.description && collection.description?.trim() != '';
+    return /*#__PURE__*/ jsxs("div", {
+        "data-id": builderProps?.uid,
+        children: [
+            !isSafari() && /*#__PURE__*/ jsx("style", {
+                children: css
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                "data-gp-text": true,
+                className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                style: {
+                    ...getStyleShadow({
+                        styleAppliedFor: 'text-shadow'
+                    }),
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...hasLineClamp && !open ? makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle
+                },
+                dangerouslySetInnerHTML: {
+                    __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
+                }
+            }),
+            hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
+                className: cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
+                style: {
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle,
+                    ...getGlobalColorStyle(setting?.showMoreColor)
+                },
+                onClick: ()=>setOpen((prev)=>!prev),
+                children: [
+                    !open ? setting?.viewMoreText : setting?.viewLessText,
+                    setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {
+                        className: "gp-ml-1 gp-inline-block",
+                        height: "1em",
+                        width: "1em",
+                        viewBox: "0 0 22 12",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: !open ? /*#__PURE__*/ jsx("path", {
+                            d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
+                            fill: "currentColor"
+                        }) : /*#__PURE__*/ jsx("path", {
+                            d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
+                            fill: "currentColor"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
 

package/dist/esm/collection/components/CollectionDescription.liquid.js

@@ -1,16 +1,109 @@
-import { template } from '@gem-sdk/core';
-import Text from '../../text/components/Text.liquid.js';
+import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
+import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const defaultStyle = {
+        ...getStyleShadow({
+            styleAppliedFor: 'text-shadow'
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...getGlobalColorStyle(setting?.color),
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...appendTypoStyle
+    };
+    const collapseStyle = {
+        ...defaultStyle,
+        ...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
+    };
+    const getDisplayCollapse = ()=>{
+        return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
+    };
+    const moreIcon = `<svg
+          class="gp-ml-1 gp-inline-block"
+          style="display: inline-block; margin-left: 1px;"
+          height="1em"
+          width="1em"
+          viewBox="0 0 22 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+              d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
+              fill="currentColor"
+          />
+        </svg>`;
+    const viewMoreTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
+    const viewLessTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
     return template`
-    ${Text({
-        styles: setting,
+  <gp-collection-description  data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
         setting: {
-            ...setting,
-            text: '{{ collection.description }}',
-            excludeFlex: true
-        }
-    })}
+            lineClamp: setting?.lineClamp,
+            hasLineClamp: setting?.hasLineClamp,
+            viewMoreText: viewMoreTextTranslate,
+            viewLessText: viewLessTextTranslate,
+            enableViewMoreIcon: setting?.enableViewMoreIcon
+        },
+        defaultStyle,
+        collapseStyle
+    }).replaceAll("'", '&#039;')}'
+    view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
+    view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
+  >
+    <div></div>
+    <div
+     data-gp-text
+      class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
+      data-gp-text
+      style="${collapseStyle}"
+    >
+    {{collection.description}}
+    </div>
+        {% if collection.description != blank -%}
+      <button
+        type="button"
+        class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
+        style="${{
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...appendTypoStyle,
+        ...getGlobalColorStyle(setting?.showMoreColor),
+        ...getDisplayCollapse(),
+        position: 'absolute',
+        visibility: 'hidden'
+    }}"
+    >
+      ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
+      ${setting?.enableViewMoreIcon ? moreIcon : ''}
+      </button>
+    {%- endif -%}
+    {% style %}
+      .p-description-wrapper.gp-p-description-text * {
+        color: inherit
+      }
+    {% endstyle %}
+  </gp-collection-description>
+  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 

package/dist/esm/collection/setting/CollectionDescription.js

@@ -35,6 +35,59 @@ const config = {
                         }
                     ]
                 },
+                {
+                    id: 'hasLineClamp',
+                    label: 'Enable View More',
+                    type: 'toggle',
+                    devices: {
+                        desktop: {
+                            default: true
+                        }
+                    }
+                },
+                {
+                    id: 'lineClamp',
+                    label: 'Maximum Row(s) To Show',
+                    type: 'input:number',
+                    min: 1,
+                    hide: true,
+                    devices: {
+                        desktop: {
+                            default: 12
+                        }
+                    }
+                },
+                {
+                    id: 'viewMoreText',
+                    label: 'View More Text',
+                    type: 'input',
+                    default: 'Show more',
+                    hide: true
+                },
+                {
+                    id: 'showMoreColor',
+                    type: 'colorpicker',
+                    default: 'text-1'
+                },
+                {
+                    id: 'viewLessText',
+                    label: 'View Less Text',
+                    type: 'input',
+                    default: 'Show less',
+                    hide: true
+                },
+                {
+                    id: 'enableViewMoreIcon',
+                    label: 'Enable Icon',
+                    type: 'toggle',
+                    default: true,
+                    hide: true
+                },
+                {
+                    id: 'translate',
+                    type: 'input',
+                    default: 'viewLessText,viewMoreText'
+                },
                 {
                     id: 'textAlign',
                     label: 'Align',
@@ -70,11 +123,86 @@ const config = {
                             default: 'center'
                         }
                     }
+                },
+                {
+                    id: 'color',
+                    type: 'colorpicker',
+                    default: 'text-1'
                 }
             ]
         }
     ],
     ui: [
+        {
+            type: 'group',
+            label: {
+                en: ''
+            },
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more'
+                    },
+                    options: {
+                        label: 'large'
+                    },
+                    setting: {
+                        id: 'hasLineClamp'
+                    }
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Text color'
+                    },
+                    setting: {
+                        id: 'showMoreColor'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Max lines'
+                    },
+                    setting: {
+                        id: 'lineClamp'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more label'
+                    },
+                    setting: {
+                        id: 'viewMoreText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show less label'
+                    },
+                    setting: {
+                        id: 'viewLessText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Icon'
+                    },
+                    setting: {
+                        id: 'enableViewMoreIcon'
+                    },
+                    condition: 'hasLineClamp == true'
+                }
+            ]
+        },
         {
             label: {
                 en: 'Text'

package/dist/esm/index.js

@@ -205,6 +205,18 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.js';
 export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.js';
+export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.js';
+export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.js';
 export { default as thirdPartyInstantSetting } from './third-party-instant/setting/index.js';
 export { default as InstantJudgemeReviews } from './third-party-instant/components/InstantJudgemeReviews.js';
 export { default as InstantLooxReviews } from './third-party-instant/components/InstantLooxReviews.js';

package/dist/esm/index.liquid.js

@@ -160,6 +160,18 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.liquid.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.liquid.js';
 export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.liquid.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.liquid.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.liquid.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.liquid.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.liquid.js';
+export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.liquid.js';
+export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.liquid.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.liquid.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.liquid.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.liquid.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.liquid.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.liquid.js';
 export { default as ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
 export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';
 export { default as Sticky } from './sticky/components/Sticky.liquid.js';

package/dist/esm/third-party/components/AlsoBoughtCbb.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/AlsoBoughtCbb.js';
+
+const AlsoBoughtCbbContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Also Bought • CBB',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AlsoBoughtCbb = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(AlsoBoughtCbbContent, {})
+    });
+};
+
+export { AlsoBoughtCbb as default };

package/dist/esm/third-party/components/AlsoBoughtCbb.liquid.js

@@ -0,0 +1,17 @@
+import { template, makeStyleResponsive } from '@gem-sdk/core';
+
+const AlsoBoughtCbb = ({ setting, advanced })=>{
+    const { align } = setting ?? {};
+    return template`
+    <div
+      class="${advanced?.cssClass}"
+      style="${{
+        ...makeStyleResponsive('ta', align)
+    }}"
+    >
+      <div class="gp-integration-also-bought__position" />
+    </div>
+  `;
+};
+
+export { AlsoBoughtCbb as default };

package/dist/esm/third-party/components/BfSizeChartSizeGuide.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/BfSizeChartSizeGuide.js';
+
+const BfSizeChartSizeGuideContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'BF Size Chart & Size Guide',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const BfSizeChartSizeGuide = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(BfSizeChartSizeGuideContent, {})
+    });
+};
+
+export { BfSizeChartSizeGuide as default };

package/dist/esm/third-party/components/BfSizeChartSizeGuide.liquid.js

@@ -0,0 +1,8 @@
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
+
+const BfSizeChartSizeGuide = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
+};
+
+export { BfSizeChartSizeGuide as default };

package/dist/esm/third-party/components/EssentialAnnouncementBar.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/EssentialAnnouncementBar.js';
+
+const EssentialAnnouncementBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Essential Announcement Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialAnnouncementBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EssentialAnnouncementBarContent, {})
+    });
+};
+
+export { EssentialAnnouncementBar as default };

package/dist/esm/third-party/components/EssentialAnnouncementBar.liquid.js

@@ -0,0 +1,8 @@
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
+
+const EssentialAnnouncementBar = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block `);
+};
+
+export { EssentialAnnouncementBar as default };

package/dist/esm/third-party/components/EssentialCountdownTimerBar.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/EssentialCountdownTimerBar.js';
+
+const EssentialCountdownTimerBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Essential Countdown Timer Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialCountdownTimerBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EssentialCountdownTimerBarContent, {})
+    });
+};
+
+export { EssentialCountdownTimerBar as default };

package/dist/esm/third-party/components/EssentialCountdownTimerBar.liquid.js

@@ -0,0 +1,8 @@
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
+
+const EssentialCountdownTimerBar = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block `);
+};
+
+export { EssentialCountdownTimerBar as default };

package/dist/esm/third-party/components/EstimatedDeliveryDatePlus.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/EstimatedDeliveryDatePlus.js';
+
+const EstimatedDeliveryDatePlusContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Estimated Delivery Date ‑ Plus',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EstimatedDeliveryDatePlus = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EstimatedDeliveryDatePlusContent, {})
+    });
+};
+
+export { EstimatedDeliveryDatePlus as default };

package/dist/esm/third-party/components/EstimatedDeliveryDatePlus.liquid.js

@@ -0,0 +1,8 @@
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
+
+const EstimatedDeliveryDatePlus = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+};
+
+export { EstimatedDeliveryDatePlus as default };

package/dist/esm/third-party/components/GloColorSwatchvariantImage.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/GloColorSwatchvariantImage.js';
+
+const GloColorSwatchvariantImageContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'GLO Color Swatch,Variant Image',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const GloColorSwatchvariantImage = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(GloColorSwatchvariantImageContent, {})
+    });
+};
+
+export { GloColorSwatchvariantImage as default };