@gem-sdk/components 2.1.13-staging.1 → 2.1.13-staging.11

package/dist/cjs/third-party/setting/TrustedsiteTrustBadges.js

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TrustedsiteTrustBadges = require('../configs/TrustedsiteTrustBadges.js');
+
+const config = {
+    tag: TrustedsiteTrustBadges.default.tag,
+    label: TrustedsiteTrustBadges.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/38fdc008d044b95511d73b59ae0cc83f/icon/CIX8yLf0lu8CEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: TrustedsiteTrustBadges.default.id,
+            name: {
+                en: TrustedsiteTrustBadges.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/38fdc008d044b95511d73b59ae0cc83f/icon/CIX8yLf0lu8CEAE=.png">
+        <span class="preset-item-title">TrustedSite ‑ Trust Badges</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: TrustedsiteTrustBadges.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Engagement',
+                            value: 'engagement'
+                        }
+                    ],
+                    default: 'engagement'
+                },
+                {
+                    id: 'trustId',
+                    label: 'Trustmark Type',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Certified Secure',
+                            value: '202'
+                        },
+                        {
+                            label: 'Secure Form',
+                            value: '211'
+                        },
+                        {
+                            label: 'Secure Checkout',
+                            value: '212'
+                        },
+                        {
+                            label: 'Secure Login',
+                            value: '213'
+                        },
+                        {
+                            label: 'Issue-Free Orders',
+                            value: '214'
+                        },
+                        {
+                            label: 'Spam-Free',
+                            value: '216'
+                        },
+                        {
+                            label: 'Banner',
+                            value: '1001'
+                        },
+                        {
+                            label: 'Testimonial',
+                            value: '1002'
+                        }
+                    ],
+                    default: '202'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/mcafee-secure?utm_source=gempages',
+                    appName: TrustedsiteTrustBadges.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://www.trustedsite.com/',
+                    appName: TrustedsiteTrustBadges.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'trustId'
+            },
+            label: {
+                en: 'Trustmark Type'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

package/dist/cjs/third-party/setting/index.js

@@ -103,11 +103,26 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
 var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
 var HulkProductOptions = require('./HulkProductOptions.js');
 var TrustshopProductReviews = require('./TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
+    EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
+    OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
+    EssentialAnnouncementBar: EssentialAnnouncementBar.default,
+    EssentialCountdownTimerBar: EssentialCountdownTimerBar.default,
+    StellarDeliveryDatePickup: StellarDeliveryDatePickup.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -209,7 +224,12 @@ var index = {
     RequestQuoteHidePrice: RequestQuoteHidePrice.default,
     BirdChime: BirdChime.default,
     FordeerProductLabels: FordeerProductLabels.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    TrustBadgesBear: TrustBadgesBear.default,
+    TrustedsiteTrustBadges: TrustedsiteTrustBadges.default,
+    GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
+    BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
+    AlsoBoughtCbb: AlsoBoughtCbb.default,
+    HextomFreeShippingBar: HextomFreeShippingBar.default
 };
 
 exports.default = index;

package/dist/cjs/video/components/HTML5Embed.js

@@ -51,14 +51,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -7,6 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const HTML5Embed = (props)=>{
+    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -23,7 +24,9 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            enableLazyLoadImage,
+            pageContext
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -72,14 +75,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
+           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-cover"
+            class="gp-w-full gp-h-full gp-object-contain"
             alt="Video Thumbnail"
           ></img>
           <button

package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js

@@ -7,7 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload } = props;
+    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -52,7 +52,9 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        enableLazyLoadImage,
+        pageContext
     })}
         <button
           type="button"

package/dist/esm/article/components/ArticleList.liquid.js

@@ -52,8 +52,12 @@ const ArticleList = ({ setting, styles, className, children, advanced, builderPr
                 assign all_articles = all_articles | concat: articleByHandle
               endfor
             else
-              assign all_articles = blogs['${blogHandle}'].articles | limit: limit | sort: "${articleOrderBy.replace('_REVERSE', '').toLowerCase()}" ${articleOrderBy.includes('_REVERSE') ? '| reverse' : ''}
-              assign blogTitle = blogs['${blogHandle}'].title
+              assign current_blog_handle = blogs['${blogHandle}']
+              if gp_enable_custom_dynamic_blog == true
+                assign current_blog_handle = blogs[blog.handle]
+              endif
+              assign all_articles = current_blog_handle.articles | limit: limit | sort: "${articleOrderBy.replace('_REVERSE', '').toLowerCase()}" ${articleOrderBy.includes('_REVERSE') ? '| reverse' : ''}
+              assign blogTitle = current_blog_handle.title
             endif
             
         %} 

package/dist/esm/banner/components/hero-banner/index.liquid.js

@@ -10,7 +10,7 @@ import NextImage from '../../../image/components/NextImage.liquid.js';
 import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
 import { createBlurDataURL } from '../../../image/components/helpers.js';
 
-const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
+const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage = true })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
@@ -130,6 +130,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
+    const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -179,7 +180,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -193,9 +194,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             'clip-path': getClipPath(borderBg?.width, cornerBg)
         }}"
             > 
-            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
+            'gp-transition-transform': hoverEffect,
+            gp_lazybg: enableLazyLoad
         })}"
               style="${{
             ...getStyleBackgroundByDevice(background, {
@@ -204,15 +206,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
             ...makeStyleResponsive('pos', getAttachmentDevice()),
             ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
         }}"
+              ${embed()}
             >
             ${!setting?.preload ? DEVICES.map((device)=>{
             return RenderIf(getEnableBgImageByDevice(device), NextImage({
@@ -220,11 +223,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 alt: `lazy image ${device}`,
                 className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
                 isDisableAspectStyle: true,
-                enableLazyloadImage
+                enableLazyLoadImage
             }));
         }).join('') : ''}
-            </div>  
-            ${embed()} </div>
+            </div></div>
           </div>
           ${RenderIf(overlayEnable, template`<div
               aria-label="Overlay"

package/dist/esm/builder.js

@@ -107,8 +107,18 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
 import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
 import HulkProductOptions from './third-party/components/HulkProductOptions.js';
 import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
+import StellarDeliveryDatePickup from './third-party/components/StellarDeliveryDatePickup.js';
+import EssentialCountdownTimerBar from './third-party/components/EssentialCountdownTimerBar.js';
+import EssentialAnnouncementBar from './third-party/components/EssentialAnnouncementBar.js';
+import OkendoReviewsLoyalty from './third-party/components/OkendoReviewsLoyalty.js';
+import EstimatedDeliveryDatePlus from './third-party/components/EstimatedDeliveryDatePlus.js';
 import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
 import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
+import TrustedsiteTrustBadges from './third-party/components/TrustedsiteTrustBadges.js';
+import GloColorSwatchvariantImage from './third-party/components/GloColorSwatchvariantImage.js';
+import BfSizeChartSizeGuide from './third-party/components/BfSizeChartSizeGuide.js';
+import AlsoBoughtCbb from './third-party/components/AlsoBoughtCbb.js';
+import HextomFreeShippingBar from './third-party/components/HextomFreeShippingBar.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -243,6 +253,11 @@ import PostPurchaseCountdownTimer from './post-purchase/countdown-timer/componen
 import Text$1 from './post-purchase/text/Text.js';
 
 var builder = {
+    EstimatedDeliveryDatePlus,
+    OkendoReviewsLoyalty,
+    EssentialAnnouncementBar,
+    EssentialCountdownTimerBar,
+    StellarDeliveryDatePickup,
     TrustshopProductReviews,
     HulkProductOptions,
     TrustreviewsProductReviews,
@@ -479,7 +494,12 @@ var builder = {
     MarqueeItem,
     ProductBadge,
     HextomCountdownTimerBar,
-    TrustBadgesBear
+    TrustBadgesBear,
+    TrustedsiteTrustBadges,
+    GloColorSwatchvariantImage,
+    BfSizeChartSizeGuide,
+    AlsoBoughtCbb,
+    HextomFreeShippingBar
 };
 
 export { builder as default };

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"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };