@myissue/vue-website-page-builder 3.4.11 → 3.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.11",
+  "version": "3.4.13",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/App.vue

@@ -22,8 +22,7 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Navbar></Navbar>
-    <PageBuilderTest></PageBuilderTest>
     <Footer></Footer>
+    <PageBuilderTest></PageBuilderTest>
   </div>
 </template>

package/src/Components/Homepage/Footer.vue

@@ -4,30 +4,29 @@ const version = __APP_VERSION__
 
 <template>
   <div
-    class="pbx-flex pbx-justify-between pbx-gap-2 pbx-bg-red-100 pbx-py-10 lg:pbx-px-12 pbx-px-4"
+    class="pbx-flex pbx-justify-between pbx-gap-2 lg:pbx-px-12 pbx-mx-2 pbx-py-3 pbx-border-t pbx-border-t-gray-900"
   >
-    <div>
-      <p class="pbx-myPrimaryParagraph">
-        <a
-          href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
-          target="_blank"
-          class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
-        >
-          Install via npm
-        </a>
-      </p>
-      <p class="pbx-myPrimaryParagraph pbx-mt-3">
-        <a
-          href="https://github.com/myissue-org/vue-website-page-builder"
-          target="_blank"
-          class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
-        >
-          View on GitHub
-        </a>
-      </p>
-    </div>
-    <p class="pbx-myPrimaryParagraph pbx-mt-3">
-      <span class="pbx-text-myPrimaryDarkGrayColor pbx-text-sm">{{ version }}</span>
+    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
+      <a
+        href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
+        target="_blank"
+        class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
+      >
+        Install via npm
+      </a>
+    </p>
+
+    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
+      <a
+        href="https://github.com/myissue-org/vue-website-page-builder"
+        target="_blank"
+        class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
+      >
+        View on GitHub
+      </a>
+    </p>
+    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
+      <span class="pbx-text-myPrimaryDarkGrayColor">{{ version }}</span>
     </p>
   </div>
 </template>

package/src/Components/PageBuilder/EditorMenu/Editables/HTMLEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import ModalBuilder from '../../../../Components/Modals/ModalBuilder.vue'
 import EditorAccordion from '../EditorAccordion.vue'
@@ -18,7 +18,6 @@ const props = defineProps({
 })
 
 const getElement = computed(() => pageBuilderStateStore.getElement)
-const getComponents = computed(() => pageBuilderStateStore.getComponents)
 
 const elementHTML = computed(() => {
   if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
@@ -32,26 +31,15 @@ const showModalHTMLEditor = ref(false)
 const editableHtml = ref('')
 const editableComponents = ref('')
 
-const handleShowHTMLEditor = () => {
+const handleShowHTMLEditor = async () => {
   showModalHTMLEditor.value = true
 
   if (!props.globalPage) {
     editableHtml.value = elementHTML.value
+    return
   }
 
-  if (props.globalPage) {
-    const compsHTMLString =
-      Array.isArray(getComponents.value) &&
-      getComponents.value
-        .map((comp) => {
-          return comp.html_code
-            .replace(/data-componentid="[^"]*"/g, '') // remove data-componentid
-            .replace(/\s{2,}/g, ' ') // optional: clean up excess spaces
-        })
-        .join('\n')
-
-    editableComponents.value = compsHTMLString
-  }
+  editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
 }
 
 const handleCloseHTMLEditor = () => {

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -82,11 +82,12 @@ const openMainSettings = function () {
 const showHTMLSettings = ref(false)
 
 // handle slideover window
-const handleHTMLSettings = function () {
+const closeHTMLSettings = function () {
   showHTMLSettings.value = false
 }
 
-const openHTMLSettings = function () {
+const openHTMLSettings = async function () {
+  await pageBuilderService.generateHtmlFromComponents()
   showHTMLSettings.value = true
 }
 </script>
@@ -219,7 +220,7 @@ const openHTMLSettings = function () {
       maxWidth="5xl"
       :showModalBuilder="showHTMLSettings"
       :title="translate('Selected HTML')"
-      @closeMainModalBuilder="handleHTMLSettings"
+      @closeMainModalBuilder="closeHTMLSettings"
       minHeight=""
       maxHeight=""
     >

package/src/services/PageBuilderService.ts

@@ -1599,6 +1599,29 @@ export class PageBuilderService {
             }
           }
         }
+      } else if (parentSection) {
+        // If the section is not empty, update its HTML content in the store
+        const componentId = parentSection.getAttribute('data-componentid')
+        if (componentId) {
+          const components = this.pageBuilderStateStore.getComponents
+          if (components) {
+            const componentIndex = components.findIndex(
+              (c: ComponentObject) => c.id === componentId,
+            )
+            if (componentIndex !== -1) {
+              const updatedComponent = {
+                ...components[componentIndex],
+                html_code: parentSection.outerHTML,
+              }
+              const newComponents = [
+                ...components.slice(0, componentIndex),
+                updatedComponent,
+                ...components.slice(componentIndex + 1),
+              ]
+              this.pageBuilderStateStore.setComponents(newComponents)
+            }
+          }
+        }
       }
     }
 
@@ -1888,7 +1911,7 @@ export class PageBuilderService {
    * Syncs the current DOM state of components to the in-memory store.
    * @private
    */
-  private syncDomToStoreOnly() {
+  public syncDomToStoreOnly() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1906,6 +1929,30 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setComponents(componentsToSave)
   }
 
+  public async generateHtmlFromComponents(): Promise<string> {
+    this.syncDomToStoreOnly()
+    await nextTick()
+
+    const components = this.pageBuilderStateStore.getComponents
+
+    if (!Array.isArray(components)) {
+      return ''
+    }
+
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.addListenersToEditableElements()
+
+    return components
+      .map((comp) => {
+        return comp.html_code
+          .replace(/data-componentid="[^"]*"/g, '') // remove data-componentid
+          .replace(/\s{2,}/g, ' ') // optional: clean up excess spaces
+      })
+      .join('\n')
+  }
+
   /**
    * Saves the current DOM state of components to local storage.
    * @private
@@ -2166,6 +2213,15 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setIsRestoring(false)
   }
 
+  public async returnLatestComponents() {
+    this.syncDomToStoreOnly()
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.addListenersToEditableElements()
+
+    return this.pageBuilderStateStore.getComponents
+  }
   /**
    * Gets the local storage key for the current resource.
    * @returns {string | null} The local storage key.
@@ -2445,14 +2501,11 @@ export class PageBuilderService {
   }
 
   public async addTheme(components: string): Promise<void> {
-    try {
-      if (components) {
-        await this.mountComponentsToDOM(components)
-      }
-      await this.handleAutoSave()
-    } catch (error) {
-      console.error('Error adding component:', error)
+    if (components) {
+      this.validateMountingHTML(components)
+      await this.mountComponentsToDOM(components)
     }
+    await this.handleAutoSave()
   }
 
   /**

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -168,12 +168,12 @@ const convertToComponentObject = function (comp: any): ComponentObject {
           </div>
 
           <div
-            class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
+            class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4 pbx-min-h-[96rem]"
           >
             <div
               v-for="theme in filteredThemes"
               :key="theme.title"
-              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-max-h-96"
               @click="handleDropTheme(theme.html_code)"
             >
               <div
@@ -209,7 +209,7 @@ const convertToComponentObject = function (comp: any): ComponentObject {
             <div
               v-for="helper in componentHelpers"
               :key="helper.title"
-              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-max-h-96 pbx-p-4"
               @click="handleDropComponent(helper)"
             >
               <div
@@ -247,12 +247,12 @@ const convertToComponentObject = function (comp: any): ComponentObject {
             </button>
           </div>
           <div
-            class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
+            class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4 pbx-min-h-[96rem]"
           >
             <div
               v-for="comp in filteredComponents"
               :key="comp.title"
-              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-max-h-96"
               @click="handleDropComponent(convertToComponentObject(comp))"
             >
               <div

package/src/tests/PageBuilderTest.vue

@@ -69,75 +69,14 @@ watch(currentTranslations, async () => {
 </script>
 
 <template>
-  <div>
-    <div class="pbx-myPrimaryWidthScreenModule pbx-bg-red-50 lg:pbx-block">
-      <div class="pbx-myPrimaryContentSection">
-        <h2 class="pbx-mySecondaryHeader">
-          {{
-            translate(
-              'Bring your vision to life and create impressive pages using a click & drop Page Builder',
-            )
-          }}
-        </h2>
-        <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          {{
-            translate(
-              'The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.',
-            )
-          }}
-          <br />
-        </p>
-        <div class="pbx-mt-4">
-          <p class="pbx-myPrimaryParagraph pbx-font-normal">
-            {{
-              translate(
-                'Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via',
-              )
-            }}
-            <br />
-            <strong> npm:</strong>
-            <a
-              class="pbx-text-myPrimaryLinkColor"
-              href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
-              target="_blank"
-            >
-              @myissue/vue-website-page-builder
-            </a>
-          </p>
-        </div>
-      </div>
-      <div class="lg:pbx-m-2 pbx-m-1">
-        <!--   :CustomBuilderComponents="DemoBuilderComponentsTest" -->
-        <PageBuilder
-          :CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"
-          :showPublishButton="true"
-          @handlePublishPageBuilder="publishPageBuilder"
-        ></PageBuilder>
-      </div>
+  <div class="pbx-bg-white">
+    <div class="lg:pbx-p-2">
+      <!--   :CustomBuilderComponents="DemoBuilderComponentsTest" -->
+      <PageBuilder
+        :CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"
+        :showPublishButton="true"
+        @handlePublishPageBuilder="publishPageBuilder"
+      ></PageBuilder>
     </div>
-
-    <FullWidthElement :descriptionArea="true" class="pbx-bg-gray-50">
-      <template #title>
-        {{ translate('Everything you need. Break free from design limitations') }}
-      </template>
-      <template #description>
-        <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          {{
-            translate(
-              'A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.',
-            )
-          }}
-        </p>
-      </template>
-      <template #content>
-        <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          {{
-            translate(
-              "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.",
-            )
-          }}
-        </p>
-      </template>
-    </FullWidthElement>
   </div>
 </template>

package/src/utils/html-elements/component.ts

@@ -349,10 +349,86 @@ const component: Components[] = [
                       </svg>
                     `,
         },
+        {
+          title: 'Stats Split with image',
+          html_code: `<section> <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div> <div class=""> <p class="pbx-font-semibold">Our track record</p> </div> <div class="pbx-font-medium pbx-text-2xl lg:pbx-text-4xl"><p>Trusted by thousands of creators worldwide</p></div> <div><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p></div> <div class="pbx-mt-16 pbx-grid pbx-max-w-xl pbx-grid-cols-1 pbx-gap-8 sm:pbx-mt-20 sm:pbx-grid-cols-2 xl:pbx-mt-16"> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div><p>Creators on the platform</p></div> <div class="pbx-font-medium pbx-text-lg lg:pbx-text-2xl"><p>8,000+</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Flat platform fee</p> </div> <div class="pbx-font-medium pbx-text-lg lg:pbx-text-2xl"><p>3%</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Uptime guarantee</p> </div> <div class="pbx-text-lg lg:pbx-text-2xl pbx-font-medium"><p>99.9%</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Paid out to creators</p> </div> <div class="pbx-text-lg lg:pbx-text-2xl pbx-font-medium"><p>$70M</p></div> </div> </div> </div></div> </div></div> </section>`,
+          category: 'Marketing',
+          cover_image: `
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="103.953 200.017 225.995 103.408" width="225.995px" height="103.408px">
+                        <rect class="bg" x="103.953" width="103.408" height="103.408" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <polygon class="fg" points="119.698 267.14 145.377 236.302 171.076 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <polygon class="fg" points="165.937 267.14 178.786 251.721 191.636 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <circle class="fg" cx="178.786" cy="240.579" r="4.277" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <rect class="bg" x="226.54" y="207.688" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="223.011" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="230.62"/>
+                        <rect class="bg" x="226.54" y="238.291" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="215.499" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                      </svg>
+                    `,
+        },
+        {
+          title: 'Stats Stepped',
+          html_code: `<section><div class="pbx-relative pbx-py-4 pbx-bg-slate-200"><div class="pbx-mx-auto pbx-max-w-7xl pbx-px-6 lg:pbx-px-8 pbx-pt-12"> <div class="pbx-mx-auto pbx-max-w-2xl lg:pbx-mx-0"><div class="pbx-text-2xl lg:pbx-text-4xl pbx-font-medium"><h2>We approach work as a place to make the world better</h2></div><div><p>Diam nunc lacus lacus aliquam turpis enim. Eget hac velit est euismod lacus. Est non placerat nam arcu. Cras purus nibh cursus sit eu in id. Integer vel nibh.</p></div> </div> <div class="pbx-mx-auto pbx-mt-16 pbx-flex pbx-max-w-2xl pbx-flex-col pbx-gap-8 lg:pbx-mx-0 lg:pbx-mt-20 lg:pbx-max-w-none lg:pbx-flex-row lg:pbx-items-end pbx-pb-20"> <div class="pbx-flex pbx-flex-col-reverse pbx-justify-between pbx-gap-x-16 pbx-gap-y-8 pbx-rounded-2xl pbx-bg-gray-50 pbx-p-8 sm:pbx-w-3/4 sm:pbx-max-w-md sm:pbx-flex-row-reverse sm:pbx-items-end lg:pbx-w-72 lg:pbx-max-w-none lg:pbx-flex-none lg:pbx-flex-col lg:pbx-items-start"><div class="pbx-text-lg lg:pbx-text-2xl"><p>250k</p></div><div><p>Users on the platform</p><p>Vel labore deleniti veniam consequuntur sunt nobis.</p></div> </div> <div class="pbx-flex pbx-flex-col-reverse pbx-justify-between pbx-gap-x-16 pbx-gap-y-8 pbx-rounded-2xl pbx-bg-gray-900 pbx-p-8 sm:pbx-flex-row-reverse sm:pbx-items-end lg:pbx-w-full lg:pbx-max-w-sm lg:pbx-flex-auto lg:pbx-flex-col lg:pbx-items-start lg:pbx-gap-y-44"><div class="pbx-text-white pbx-text-lg lg:pbx-text-2xl"><p>$8.9 billion</p></div><div class="sm:pbx-w-80 sm:pbx-shrink lg:pbx-w-auto lg:pbx-flex-none pbx-text-white"><p>We’re that our customers have made over $8 billion in total revenue.</p><p>Eu duis porta aliquam ornare. Elementum eget magna egestas.</p></div> </div> <div class="pbx-flex pbx-flex-col-reverse pbx-justify-between pbx-gap-x-16 pbx-gap-y-8 pbx-rounded-2xl pbx-bg-indigo-600 pbx-p-8 sm:pbx-w-11/12 sm:pbx-max-w-xl sm:pbx-flex-row-reverse sm:pbx-items-end lg:pbx-w-full lg:pbx-max-w-none lg:pbx-flex-auto lg:pbx-flex-col lg:pbx-items-start lg:pbx-gap-y-28"><div class="pbx-text-white pbx-text-lg lg:pbx-text-2xl"><p>401k</p></div><div class="sm:pbx-w-80 sm:pbx-shrink lg:pbx-w-auto lg:pbx-flex-none pbx-text-white"><p>Transactions this year</p><p>Eu duis porta aliquam ornare. Elementum eget magna egestas. Eu duis porta aliquam ornare.</p></div> </div> </div> </div></div></section>`,
+          category: 'Marketing',
+          cover_image: `
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="103.953 200.017 225.995 103.408" width="225.995px" height="103.408px">
+                        <rect class="bg" x="103.953" width="103.408" height="103.408" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <polygon class="fg" points="119.698 267.14 145.377 236.302 171.076 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <polygon class="fg" points="165.937 267.14 178.786 251.721 191.636 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <circle class="fg" cx="178.786" cy="240.579" r="4.277" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <rect class="bg" x="226.54" y="207.688" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="223.011" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="230.62"/>
+                        <rect class="bg" x="226.54" y="238.291" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="215.499" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                      </svg>
+                    `,
+        },
+        {
+          title: 'Stats With two column',
+          html_code: `<section><div class="pbx-relative pbx-py-4 pbx-bg-gray-900"><div class="pbx-py-24 sm:pbx-py-32"> <div class="pbx-mx-auto pbx-max-w-7xl pbx-px-6 lg:pbx-px-8"> <div class="pbx-mx-auto pbx-max-w-2xl lg:pbx-mx-0 lg:pbx-max-w-none"> <div class="pbx-text-base/7 pbx-font-semibold pbx-text-indigo-400"> <p>Deploy faster</p> </div> <div class="pbx-mt-2 pbx-text-pretty pbx-font-semibold pbx-tracking-tight pbx-text-white pbx-text-2xl lg:pbx-text-4xl pbx-font-medium"><h1>A better workflow</h1></div> <div class="pbx-mt-10 pbx-grid pbx-max-w-xl pbx-grid-cols-1 pbx-gap-8 pbx-text-base/7 pbx-text-gray-300 lg:pbx-max-w-none lg:pbx-grid-cols-2"> <div> <div><p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id.</p></div> <div class="pbx-mt-8"><p>Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas.</p></div> </div> <div> <div><p>Erat pellentesque dictumst ligula porttitor risus eget et eget. Ultricies tellus felis id dignissim eget. Est augue maecenas risus nulla ultrices congue nunc tortor. Enim et nesciunt doloremque nesciunt voluptate.</p></div> <div class="pbx-mt-8"><p>Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas. Iaculis convallis ac tempor et ut. Ac lorem vel integer orci.</p></div> </div> </div> <div class="pbx-mt-16 pbx-grid pbx-grid-cols-1 pbx-gap-x-8 pbx-gap-y-12 sm:pbx-mt-20 sm:pbx-grid-cols-2 sm:pbx-gap-y-16 lg:pbx-mt-28 lg:pbx-grid-cols-4"> <div class="pbx-flex pbx-flex-col-reverse pbx-gap-y-3 pbx-border-l pbx-border-white/20 pbx-pl-6"> <div class="pbx-text-base/7 pbx-text-white"><p>Founded</p></div> <div class="pbx-text-3xl pbx-font-semibold pbx-tracking-tight pbx-text-white"><p>2021</p></div> </div> <div class="pbx-flex pbx-flex-col-reverse pbx-gap-y-3 pbx-border-l pbx-border-white/20 pbx-pl-6"> <div class="pbx-text-base/7 pbx-text-white"><p>Employees</p></div> <div class="pbx-text-3xl pbx-font-semibold pbx-tracking-tight pbx-text-white"><p>37</p></div> </div> <div class="pbx-flex pbx-flex-col-reverse pbx-gap-y-3 pbx-border-l pbx-border-white/20 pbx-pl-6"> <div class="pbx-text-base/7 pbx-text-white"> <p>Countries</p> </div> <div class="pbx-text-3xl pbx-font-semibold pbx-tracking-tight pbx-text-white"><p>12</p></div> </div> <div class="pbx-flex pbx-flex-col-reverse pbx-gap-y-3 pbx-border-l pbx-border-white/20 pbx-pl-6"> <div class="pbx-text-base/7 pbx-text-white"> <p>Raised</p> </div> <div class="pbx-text-3xl pbx-font-semibold pbx-tracking-tight pbx-text-white"><p>$25M</p></div> </div> </div> </div> </div> </div></div></section>`,
+          category: 'Marketing',
+          cover_image: `
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="103.953 200.017 225.995 103.408" width="225.995px" height="103.408px">
+                        <rect class="bg" x="103.953" width="103.408" height="103.408" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <polygon class="fg" points="119.698 267.14 145.377 236.302 171.076 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <polygon class="fg" points="165.937 267.14 178.786 251.721 191.636 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <circle class="fg" cx="178.786" cy="240.579" r="4.277" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <rect class="bg" x="226.54" y="207.688" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="223.011" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="230.62"/>
+                        <rect class="bg" x="226.54" y="238.291" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="215.499" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                      </svg>
+                    `,
+        },
+        {
+          title: 'Timeline Simple',
+          html_code: `<section><div class="pbx-bg-white pbx-py-24 sm:pbx-py-32"> <div class="pbx-mx-auto pbx-max-w-7xl pbx-px-6 lg:pbx-px-8"> <div class="pbx-mx-auto pbx-grid pbx-max-w-2xl pbx-grid-cols-1 pbx-gap-8 pbx-overflow-hidden lg:pbx-mx-0 lg:pbx-max-w-none lg:pbx-grid-cols-4"> <div> <div class="pbx-flex pbx-items-center pbx-text-sm/6 pbx-font-semibold pbx-text-indigo-600"> <div class="pbx-text-black"><p>Aug 2021</p></div>  </div> <div class="pbx-mt-6 pbx-text-lg/8 pbx-font-semibold pbx-tracking-tight pbx-text-black"><p>Founded company</p></div> <div class="pbx-mt-1 pbx-text-base/7 pbx-text-black"><p>Nihil aut nam. Dignissimos a pariatur et quos omnis. Aspernatur asperiores et dolorem dolorem optio voluptate repudiandae.</p></div> </div> <div> <div class="pbx-flex pbx-items-center pbx-text-sm/6 pbx-font-semibold pbx-text-indigo-600"> <div class="pbx-text-black"><p>Dec 2021</p></div>  </div> <div class="pbx-mt-6 pbx-text-lg/8 pbx-font-semibold pbx-tracking-tight pbx-text-black"><p>Secured $65m in funding</p></div> <div class="pbx-mt-1 pbx-text-base/7 pbx-text-black"> <p>Provident quia ut esse. Vero vel eos repudiandae aspernatur. Cumque minima impedit sapiente a architecto nihil.</p> </div> </div> <div> <div class="pbx-flex pbx-items-center pbx-text-sm/6 pbx-font-semibold pbx-text-indigo-600"> <div class="pbx-text-black"><p>Feb 2022</p></div>  </div> <div class="pbx-mt-6 pbx-text-lg/8 pbx-font-semibold pbx-tracking-tight pbx-text-black"><p>Released beta</p></div> <div class="pbx-mt-1 pbx-text-base/7 pbx-text-black"> <p>Sunt perspiciatis incidunt. Non necessitatibus aliquid. Consequatur ut officiis earum eum quia facilis. Hic deleniti dolorem quia et.</p> </div> </div> <div> <div class="pbx-flex pbx-items-center pbx-text-sm/6 pbx-font-semibold pbx-text-indigo-600"> <div class="pbx-text-black"><p>Dec 2022</p></div>  </div> <div class="pbx-mt-6 pbx-text-lg/8 pbx-font-semibold pbx-tracking-tight pbx-text-black"> <p>Global launch of product</p> </div> <div class="pbx-mt-1 pbx-text-base/7 pbx-text-black"><p>Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id architecto voluptatem hic aut pariatur velit.</p></div> </div> </div> </div> </div></section>`,
+          category: 'Marketing',
+          cover_image: `
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="103.953 200.017 225.995 103.408" width="225.995px" height="103.408px">
+                        <rect class="bg" x="103.953" width="103.408" height="103.408" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <polygon class="fg" points="119.698 267.14 145.377 236.302 171.076 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <polygon class="fg" points="165.937 267.14 178.786 251.721 191.636 267.14" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <circle class="fg" cx="178.786" cy="240.579" r="4.277" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="200.017"/>
+                        <rect class="bg" x="226.54" y="207.688" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="223.011" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;" y="230.62"/>
+                        <rect class="bg" x="226.54" y="238.291" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                        <rect class="bg" x="226.54" y="215.499" width="103.408" height="5.619" style="fill: rgb(56, 65, 82); stroke-width: 1;"/>
+                      </svg>
+                    `,
+        },
         {
           title: 'Show Single Product',
-          html_code: `<section data-component-title="Three Square Images With Text" > <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div> </section>`,
-          category: 'Product',
+          html_code: `<section> <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div> </section>`,
+          category: 'Products',
           cover_image: `
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="122.319 300.3 122.364 160.763" width="122.364px" height="160.763px">
                       <rect class="bg" width="122.364" height="122.364" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="122.319" y="300.3"/>

package/src/utils/html-elements/themes.ts

@@ -42,7 +42,7 @@ const component: Themes[] = [
           html_code: `<div id="pagebuilder" class=" style=""><section data-component-title="Header H2"><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-font-medium pbx-text-3xl lg:pbx-text-6xl"><h2>Inceptos himenaeos</h2></div></div></div></section> <section data-component-title="Text"> <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra.<br><br>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Header H3" class=""><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Fringilla lacus nec metus</h3></div></div></div></section> <section data-component-title="Text" class=""> <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra.</p><ul><li><p><strong>Blorf nizgat quarnip veloop</strong></p></li><li><p><strong>Dramble froop with lartic spindles</strong></p></li><li><p><strong>Quibber on flemt zarglo dynamics</strong></p></li><li><p><strong>Slooped jarnix under flibble zones</strong></p></li><li><p><strong>Plonk-ready trizzit with garm logic</strong></p><p><br></p></li></ul><p>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section> <section data-component-title="Header H3" class=""><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Conubia nostra inceptos</h3></div></div></div></section> <section data-component-title="Text"> <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. <br><br>Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. <br><br>Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p></div> </div> </div> </section></div>`,
           category: 'Article',
           cover_image: `
-                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" id="article">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                         <path fill="#4e4e50" d="M32 4H0V0h32v4zM20 12H0V8h20v4zM32 24H0v-4h32v4zM24 32H0v-4h24v4zM32 30a2.001 2.001 0 0 1-4.004 0A2.001 2.001 0 0 1 32 30z"/>
                       </svg>
 					`,
@@ -67,6 +67,16 @@ const component: Themes[] = [
                       </svg>
 					`,
         },
+        {
+          title: 'Stats Simple',
+          html_code: `<section data-component-title="Header H2" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-font-medium pbx-text-3xl lg:pbx-text-6xl"><h2>Eaque, iste dolor cupiditate blanditiis ratione</h2></div></div></div></section> <section data-component-title="Stats Split with image" > <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square "src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div> <div class=""> <p class="pbx-font-semibold">Our track record</p> </div> <div class="pbx-font-medium pbx-text-2xl lg:pbx-text-4xl"><p>Trusted by thousands of creators worldwide</p></div> <div><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p></div> <div class="pbx-mt-16 pbx-grid pbx-max-w-xl pbx-grid-cols-1 pbx-gap-8 sm:pbx-mt-20 sm:pbx-grid-cols-2 xl:pbx-mt-16"> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div><p>Creators on the platform</p></div> <div class="pbx-font-medium pbx-text-lg lg:pbx-text-2xl"><p>8,000+</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Flat platform fee</p> </div> <div class="pbx-font-medium pbx-text-lg lg:pbx-text-2xl"><p>3%</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Uptime guarantee</p> </div> <div class="pbx-text-lg lg:pbx-text-2xl pbx-font-medium"><p>99.9%</p></div> </div> <div class="pbx-flex pbx-flex-col pbx-gap-y-3 pbx-border-l pbx-border-gray-900/10 pbx-pl-6"> <div> <p class="pbx-text-sm/6 pbx-text-gray-600">Paid out to creators</p> </div> <div class="pbx-text-lg lg:pbx-text-2xl pbx-font-medium"><p>$70M</p></div> </div> </div> </div></div> </div></div> </section> <section data-component-title="Header H3" ><div class="pbx-relative pbx-py-4"><div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"><div class="pbx-break-words pbx-text-1xl lg:pbx-text-3xl pbx-font-medium"><h3>Layouts and visual.</h3></div></div></div></section> <section data-component-title="Text" > <div class="pbx-relative pbx-py-4"> <div class="pbx-mx-auto pbx-max-w-7xl lg:pbx-px-4 pbx-px-2"> <div><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Cadipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p></div> </div> </div> </section> <section data-component-title="Four Square Images With Text" > <div class="md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2"><div class="pbx-mx-auto pbx-max-w-7xl"><div class="pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-4"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"><div class="pbx-break-words pbx-py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div> </section>`,
+          category: 'Marketing',
+          cover_image: `
+                      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                        <path fill="#4e4e50" d="M32 4H0V0h32v4zM20 12H0V8h20v4zM32 24H0v-4h32v4zM24 32H0v-4h24v4zM32 30a2.001 2.001 0 0 1-4.004 0A2.001 2.001 0 0 1 32 30z"/>
+                      </svg>
+					`,
+        },
       ],
     },
   },