@myissue/vue-website-page-builder 3.2.86 → 3.2.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.86",
+  "version": "v3.2.90",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -98,7 +98,7 @@
     "npm-run-all2": "^7.0.2",
     "postcss": "^8.4.39",
     "prettier": "3.5.3",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.8.0",
     "vite": "^6.2.4",
     "vite-plugin-vue-devtools": "^7.7.2",

package/src/Components/Homepage/Footer.vue

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

package/src/Components/Homepage/Navbar.vue

@@ -9,13 +9,15 @@ const handleButton = function () {
 
 <template>
   <nav
-    class="px-6 py-6 mx-auto flex items-center justify-between bg-gray-50 lg:h-[10vh] h-[10vh]"
+    class="pbx-px-6 pbx-py-6 pbx-mx-auto pbx-flex pbx-items-center pbx-justify-between pbx-bg-gray-50 lg:pbx-h-[10vh] pbx-h-[10vh]"
     aria-label="Global"
   >
-    <img class="h-6" src="/logo/logo.svg" alt="Logo" />
+    <img class="pbx-h-6" src="/logo/logo.svg" alt="Logo" />
 
-    <div class="flex lg:gap-x-12 myPrimaryGap">
-      <div class="text-lg font-medium text-myPrimaryDarkGrayColor flex gap-2 items-center">
+    <div class="pbx-flex lg:pbx-gap-x-12 pbx-myPrimaryGap">
+      <div
+        class="pbx-text-lg pbx-font-medium pbx-text-myPrimaryDarkGrayColor pbx-flex pbx-gap-2 pbx-items-center"
+      >
         Page Builder
       </div>
     </div>

package/src/Components/Layouts/FullWidthElement.vue

@@ -9,25 +9,25 @@ defineProps({
     Type: Boolean,
     default: true,
   },
-});
+})
 </script>
 
 <template>
   <!-- chimp start -->
-  <div class="myPrimaryWidthScreenModule">
+  <div class="pbx-myPrimaryWidthScreenModule">
     <template v-if="headerArea">
-      <div class="myPrimaryContentSection">
-        <h2 class="mySecondaryHeader">
+      <div class="pbx-myPrimaryContentSection">
+        <h2 class="pbx-mySecondaryHeader">
           <slot name="title" />
         </h2>
         <template v-if="descriptionArea === true">
-          <p class="myPrimaryParagraph font-normal">
+          <p class="pbx-myPrimaryParagraph pbx-font-normal">
             <slot name="description" />
           </p>
         </template>
       </div>
     </template>
-    <div class="myPrimaryContentSection">
+    <div class="pbx-myPrimaryContentSection">
       <slot name="content" />
     </div>
   </div>

package/src/Components/Modals/BuilderComponents.vue

@@ -1,6 +1,8 @@
 <script setup>
 import ModalBuilder from '../Modals/ModalBuilder.vue'
 import DefaultBuilderComponents from '../PageBuilder/DefaultComponents/DefaultBuilderComponents.vue'
+import { inject } from 'vue'
+const customMediaComponent = inject('CustomMediaComponent')
 
 defineProps({
   firstButtonText: {
@@ -30,27 +32,31 @@ const firstButtonBuilder = function () {
 <template>
   <ModalBuilder
     :title="title"
-    maxWidth="7xl"
+    maxWidth="6xl"
     :showModalBuilder="show"
     @closeMainModalBuilder="firstButtonBuilder"
     minHeight=""
     maxHeight=""
   >
-    <div class="w-full inset-x-0 bg-white overflow-x-scroll lg:pt-2 pt-2">
+    <div class="pbx-w-full pbx-inset-x-0 pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2">
       <div>
         <!-- Only show custom search component if provided -->
         <div v-if="CustomBuilderComponents">
           <component :is="CustomBuilderComponents" />
         </div>
-        <div class="h-[75vh]" v-else><DefaultBuilderComponents /></div>
+        <div class="pbx-h-[75vh]" v-else>
+          <DefaultBuilderComponents :customMediaComponent="customMediaComponent" />
+        </div>
       </div>
     </div>
-    <div class="py-4 flex sm:justify-end justify-center border-t border-gray-200 mt-4">
-      <div class="sm:w-3/6 w-full px-2 my-2 flex gap-2 justify-end">
+    <div
+      class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-t pbx-border-gray-200 pbx-mt-4"
+    >
+      <div class="sm:pbx-w-3/6 pbx-w-full pbx-px-2 pbx-my-2 pbx-flex pbx-gap-2 pbx-justify-end">
         <button
           v-if="firstButtonText"
           ref="firstButtonRef"
-          class="mySecondaryButton"
+          class="pbx-mySecondaryButton"
           type="button"
           @click="firstButtonBuilder"
         >

package/src/Components/Modals/DynamicModalBuilder.vue

@@ -89,11 +89,11 @@ const thirdButtonBuilder = function () {
     <slot name="content" />
 
     <div
-      class="font-sans w-full relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:align-middle"
+      class="pbx-font-sans pbx-w-full pbx-relative pbx-inline-block pbx-align-bottom pbx-text-left pbx-overflow-hidden pbx-transform pbx-transition-all sm:pbx-align-middle"
     >
-      <div :class="{ 'pr-4 pb-4': simpleModal !== true }">
+      <div :class="{ 'pbx-pr-4 pbx-pb-4': simpleModal !== true }">
         <template v-if="simpleModal !== true">
-          <div v-html="description" class="myPrimaryParagraph mb-6"></div>
+          <div v-html="description" class="pbx-myPrimaryParagraph pbx-mb-6"></div>
         </template>
 
         <slot name="header"></slot>
@@ -103,20 +103,22 @@ const thirdButtonBuilder = function () {
     </div>
 
     <template v-if="simpleModal !== true && !isLoading">
-      <div class="py-4 flex sm:justify-end justify-center border-t border-gray-200 mt-4">
+      <div
+        class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-t pbx-border-gray-200 pbx-mt-4"
+      >
         <slot name="footer" />
         <div
           :class="{
-            'sm:grid-cols-1': gridColumnAmount === 1,
-            'sm:grid-cols-2': gridColumnAmount === 2,
-            'sm:grid-cols-3': gridColumnAmount === 3,
+            'sm:pbx-grid-cols-1': gridColumnAmount === 1,
+            'sm:pbx-grid-cols-2': gridColumnAmount === 2,
+            'sm:pbx-grid-cols-3': gridColumnAmount === 3,
           }"
-          class="sm:items-end sm:justify-end flex sm:flex-row flex-col myPrimaryGap sm:w-5/6 w-full"
+          class="sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full"
         >
           <button
             v-if="firstButtonText"
             ref="firstButtonRef"
-            class="mySecondaryButton"
+            class="pbx-mySecondaryButton"
             type="button"
             @click="firstButtonBuilder"
           >
@@ -126,20 +128,18 @@ const thirdButtonBuilder = function () {
           <div v-if="secondButtonText">
             <div v-if="disabled && disabledWhichButton === 'secondButtonBuilder'">
               <button
-                class="flex items-center gap-2 myPrimaryButton bg-yellow-300 hover:bg-yellow-400 text-myPrimaryDarkGrayColor hover:text-myPrimaryDarkGrayColor focus:ring-yellow-400 w-full"
-                :class="{
-                  'opacity-25 cursor-default': disabled,
-                }"
+                class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-yellow-300 hover:pbx-bg-yellow-400 pbx-text-myPrimaryDarkGrayColor hover:pbx-text-myPrimaryDarkGrayColor focus:pbx-ring-yellow-400 pbx-w-full"
+                :class="{ 'pbx-opacity-25 pbx-cursor-default': disabled }"
                 :disabled="disabled"
                 type="button"
                 @click="secondButtonBuilder"
               >
                 <div>
                   <Transition name="bounce">
-                    <div role="status" class="flex items-center">
+                    <div role="status" class="pbx-flex pbx-items-center">
                       <svg
                         aria-hidden="true"
-                        class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
+                        class="pbx-w-4 pbx-h-4 pbx-animate-spin pbx-text-white-600 pbx-fill-gray-800 pbx-flex pbx-items-center"
                         stroke-width="1.5"
                         viewBox="0 0 100 101"
                         fill="none"
@@ -163,7 +163,7 @@ const thirdButtonBuilder = function () {
 
             <div v-if="!disabled || disabledWhichButton !== 'secondButtonBuilder'">
               <button
-                class="myPrimaryButton bg-yellow-300 hover:bg-yellow-400 text-myPrimaryDarkGrayColor hover:text-myPrimaryDarkGrayColor focus:ring-yellow-400 w-full"
+                class="pbx-myPrimaryButton pbx-bg-yellow-300 hover:pbx-bg-yellow-400 pbx-text-myPrimaryDarkGrayColor hover:pbx-text-myPrimaryDarkGrayColor focus:pbx-ring-yellow-400 pbx-w-full"
                 type="button"
                 @click="secondButtonBuilder"
               >
@@ -176,19 +176,17 @@ const thirdButtonBuilder = function () {
             <div v-if="type === 'default'">
               <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
-                  class="flex items-center gap-2 myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
-                  :class="{
-                    'opacity-25 cursor-default': disabled,
-                  }"
+                  class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full"
+                  :class="{ 'pbx-opacity-25 pbx-cursor-default': disabled }"
                   :disabled="disabled"
                   type="button"
                 >
                   <div>
                     <Transition name="bounce">
-                      <div role="status" class="flex items-center">
+                      <div role="status" class="pbx-flex pbx-items-center">
                         <svg
                           aria-hidden="true"
-                          class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
+                          class="pbx-w-4 pbx-h-4 pbx-animate-spin pbx-text-white-600 pbx-fill-gray-800 pbx-flex pbx-items-center"
                           stroke-width="1.5"
                           viewBox="0 0 100 101"
                           fill="none"
@@ -212,7 +210,7 @@ const thirdButtonBuilder = function () {
 
               <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
-                  class="myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
+                  class="pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full"
                   type="button"
                   @click="thirdButtonBuilder"
                 >
@@ -223,19 +221,17 @@ const thirdButtonBuilder = function () {
             <div v-if="type === 'success'">
               <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
-                  class="flex items-center gap-2 myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
-                  :class="{
-                    'opacity-25 cursor-default': disabled,
-                  }"
+                  class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full"
+                  :class="{ 'pbx-opacity-25 pbx-cursor-default': disabled }"
                   :disabled="disabled"
                   type="button"
                 >
                   <div>
                     <Transition name="bounce">
-                      <div role="status" class="flex items-center">
+                      <div role="status" class="pbx-flex pbx-items-center">
                         <svg
                           aria-hidden="true"
-                          class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
+                          class="pbx-w-4 pbx-h-4 pbx-animate-spin pbx-text-white-600 pbx-fill-gray-800 pbx-flex pbx-items-center"
                           stroke-width="1.5"
                           viewBox="0 0 100 101"
                           fill="none"
@@ -259,7 +255,7 @@ const thirdButtonBuilder = function () {
 
               <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
-                  class="myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
+                  class="pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full"
                   type="button"
                   @click="thirdButtonBuilder"
                 >
@@ -271,19 +267,17 @@ const thirdButtonBuilder = function () {
             <div v-if="type === 'warning'">
               <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
-                  class="flex items-center gap-2 myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
-                  :class="{
-                    'opacity-25 cursor-default': disabled,
-                  }"
+                  class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-myPrimaryLinkColor focus:pbx-ring-myPrimaryLinkColor hover:pbx-bg-myPrimaryLinkColor pbx-w-full"
+                  :class="{ 'pbx-opacity-25 pbx-cursor-default': disabled }"
                   :disabled="disabled"
                   type="button"
                 >
                   <div>
                     <Transition name="bounce">
-                      <div role="status" class="flex items-center">
+                      <div role="status" class="pbx-flex pbx-items-center">
                         <svg
                           aria-hidden="true"
-                          class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
+                          class="pbx-w-4 pbx-h-4 pbx-animate-spin pbx-text-white-600 pbx-fill-gray-800 pbx-flex pbx-items-center"
                           stroke-width="1.5"
                           viewBox="0 0 100 101"
                           fill="none"
@@ -307,7 +301,7 @@ const thirdButtonBuilder = function () {
 
               <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
-                  class="flex items-center gap-2 myPrimaryButton bg-myPrimaryErrorColor hover:bg-red-600 text-white focus:ring-myPrimaryErrorColor w-full"
+                  class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-myPrimaryErrorColor hover:pbx-bg-red-600 pbx-text-white focus:pbx-ring-myPrimaryErrorColor pbx-w-full"
                   type="button"
                   @click="thirdButtonBuilder"
                 >
@@ -319,19 +313,17 @@ const thirdButtonBuilder = function () {
             <div v-if="type === 'danger' || type === 'delete'">
               <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
-                  class="flex items-center gap-2 myPrimaryButton bg-myPrimaryErrorColor hover:bg-red-600 text-white focus:ring-myPrimaryErrorColor w-full"
-                  :class="{
-                    'opacity-25 cursor-default': disabled,
-                  }"
+                  class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-myPrimaryErrorColor hover:pbx-bg-red-600 pbx-text-white focus:pbx-ring-myPrimaryErrorColor pbx-w-full"
+                  :class="{ 'pbx-opacity-25 pbx-cursor-default': disabled }"
                   :disabled="disabled"
                   type="button"
                 >
                   <div>
                     <Transition name="bounce">
-                      <div role="status" class="flex items-center">
+                      <div role="status" class="pbx-flex pbx-items-center">
                         <svg
                           aria-hidden="true"
-                          class="w-4 h-4 animate-spin text-white-600 fill-gray-800 flex items-center"
+                          class="pbx-w-4 pbx-h-4 pbx-animate-spin pbx-text-white-600 pbx-fill-gray-800 pbx-flex pbx-items-center"
                           stroke-width="1.5"
                           viewBox="0 0 100 101"
                           fill="none"
@@ -355,7 +347,7 @@ const thirdButtonBuilder = function () {
 
               <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
-                  class="flex items-center gap-2 myPrimaryButton bg-myPrimaryErrorColor hover:bg-red-600 text-white focus:ring-myPrimaryErrorColor w-full"
+                  class="pbx-flex pbx-items-center pbx-gap-2 pbx-myPrimaryButton pbx-bg-myPrimaryErrorColor hover:pbx-bg-red-600 pbx-text-white focus:pbx-ring-myPrimaryErrorColor pbx-w-full"
                   type="button"
                   @click="thirdButtonBuilder"
                 >
@@ -368,12 +360,12 @@ const thirdButtonBuilder = function () {
       </div>
     </template>
     <template v-if="isLoading">
-      <div class="flex items-center my-2 py-4 px-2 justify-end">
+      <div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-end">
         <div
-          class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
         >
           <span
-            class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+            class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
             >Loading...</span
           >
         </div>

package/src/Components/Modals/MediaLibraryModal.vue

@@ -48,10 +48,10 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
     :title="title"
     :showModalBuilder="open"
     @closeMainModalBuilder="firstButton"
-    maxWidth="7xl"
+    maxWidth="6xl"
   >
     <!-- Show only custom media component if provided -->
-    <div v-if="customMediaComponent" class="w-full">
+    <div v-if="customMediaComponent" class="pbx-w-full">
       <component :is="customMediaComponent" />
     </div>
     <div v-else>

package/src/Components/Modals/ModalBuilder.vue

@@ -30,37 +30,41 @@ const handleClose = () => {
 
 const maxWidthClass = computed(() => {
   return {
-    sm: 'lg:max-w-sm',
-    md: 'lg:max-w-md',
-    lg: 'lg:max-w-lg',
-    xl: 'lg:max-w-xl',
-    '2xl': 'lg:max-w-2xl',
-    '3xl': 'lg:max-w-3xl',
-    '4xl': 'lg:max-w-4xl',
-    '5xl': 'lg:max-w-5xl',
-    '6xl': 'lg:max-w-6xl',
-    '7xl': 'lg:max-w-7xl',
-    full: 'lg:max-w-full', // 100% width
-    screen: 'lg:w-screen sm:max-w-none', // truly full screen
+    sm: 'lg:pbx-max-w-sm',
+    md: 'lg:pbx-max-w-md',
+    lg: 'lg:pbx-max-w-lg',
+    xl: 'lg:pbx-max-w-xl',
+    '2xl': 'lg:pbx-max-w-2xl',
+    '3xl': 'lg:pbx-max-w-3xl',
+    '4xl': 'lg:pbx-max-w-4xl',
+    '5xl': 'lg:pbx-max-w-5xl',
+    '6xl': 'lg:pbx-max-w-6xl',
+    '7xl': 'lg:pbx-max-w-7xl',
+    full: 'lg:pbx-max-w-full', // 100% width
+    screen: 'lg:w-screen sm:pbx-max-w-none', // truly full screen
   }[props.maxWidth]
 })
 </script>
 
 <template>
   <teleport to="body">
-    <div class="font-sans">
+    <div class="pbx-font-sans">
       <!-- Modal -->
       <div
         v-if="showModalBuilder"
-        class="fixed inset-0 z-40 flex items-center justify-center mx-4"
+        class="pbx-fixed pbx-inset-0 pbx-z-40 pbx-flex pbx-items-center pbx-justify-center pbx-mx-4"
         role="dialog"
         aria-modal="true"
         aria-labelledby="dialog-title"
       >
         <!-- Backdrop -->
-        <div class="fixed inset-0 bg-black/50 transition-opacity" @click="handleClose"></div>
         <div
-          class="relative inline-block bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all max-w-[96vh] max-h-[98vh] overflow-y-auto w-full px-4"
+          class="pbx-fixed pbx-inset-0 pbx-bg-black/50 pbx-transition-opacity"
+          @click="handleClose"
+        ></div>
+
+        <div
+          class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-overflow-hidden pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] pbx-max-h-[98vh] pbx-overflow-y-auto pbx-w-full pbx-px-4"
           :class="[
             maxWidthClass ? maxWidthClass : '',
             minHeight ? minHeight : '',
@@ -68,13 +72,13 @@ const maxWidthClass = computed(() => {
           ]"
         >
           <div
-            class="h-16 flex items-center justify-between border-b border-gray-200 bg-white mb-2"
+            class="pbx-h-16 pbx-flex pbx-items-center pbx-justify-between pbx-border-b pbx-border-gray-200 pbx-bg-white pbx-mb-2"
           >
-            <h3 as="h3" class="myQuaternaryHeader my-0 py-0">
+            <h3 as="h3" class="pbx-myQuaternaryHeader pbx-my-0 pbx-py-0">
               {{ title }}
             </h3>
             <div
-              class="h-10 w-10 flex-end cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white hover:fill-white focus-visible:ring-0"
+              class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white hover:pbx-fill-white focus-visible:pbx-ring-0"
               @click="handleClose"
             >
               <span class="material-symbols-outlined"> close </span>

package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue

@@ -7,6 +7,13 @@ import { generateComponentPreview } from '../../../utils/componentPreviews'
 import type { ComponentObject } from '../../../types'
 import { sharedPageBuilderStore } from '../../../stores/shared-store'
 
+defineProps({
+  customMediaComponent: {
+    type: Object,
+    default: null,
+  },
+})
+
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
@@ -42,20 +49,23 @@ const getSvgPreview = (title: string) => {
 <template>
   <div>
     <!-- Helper Components Section -->
-    <div class="mb-8">
-      <h3 class="myQuaternaryHeader mb-4">Helper Components</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+    <div class="pbx-mb-8">
+      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">Helper Components</h3>
+      <div
+        class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
+      >
+        NOW: Did user include custom media component: {{ customMediaComponent ? 'true' : 'false' }}
         <div
           v-for="helper in componentHelpers"
           :key="helper.title"
-          class="border border-gray-200 overflow-hidden hover:border-myPrimaryLinkColor duration-100 cursor-pointer p-4"
+          class="pbx-border pbx-border-gray-200 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
           @click="handleDropComponent(helper)"
         >
-          <div class="max-h-72 cursor-pointer object-contain bg-white mx-auto">
-            <div v-if="false" class="mr-2" v-html="helper.icon"></div>
-            <h4 class="myPrimaryParagraph text-base font-medium">{{ helper.title }}</h4>
+          <div class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto">
+            <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
+            <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">{{ helper.title }}</h4>
           </div>
-          <div class="myPrimaryParagraph text-xs font-normal pt-2">
+          <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
             Click to add {{ helper.title.toLowerCase() }} component
           </div>
         </div>
@@ -63,27 +73,29 @@ const getSvgPreview = (title: string) => {
     </div>
 
     <!-- Regular Components Section -->
-    <div>
-      <h3 class="myQuaternaryHeader mb-4">Layout Components</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+    <div v-if="customMediaComponent">
+      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">Layout Components</h3>
+      <div class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4">
         <div
           v-for="comp in components[0].components.data"
           :key="comp.title"
-          class="border border-gray-200 overflow-hidden hover:border-myPrimaryLinkColor duration-100 cursor-pointer"
+          class="pbx-border pbx-border-gray-200 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
           @click="handleDropComponent(convertToComponentObject(comp))"
         >
           <div
-            class="overflow-hidden whitespace-pre-line flex-1 h-auto border-b border-gray-200 lg:py-10 py-8 px-2"
+            class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
           >
             <!-- Use SVG preview instead of external images -->
             <div
-              class="max-h-72 cursor-pointer bg-white mx-auto flex items-center justify-center"
+              class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
               v-html="getSvgPreview(comp.title)"
             ></div>
           </div>
-          <div class="p-3">
-            <h4 class="myPrimaryParagraph text-sm font-normal">{{ comp.title }}</h4>
-            <div class="myPrimaryParagraph text-xs font-normal pt-2">Click to add component</div>
+          <div class="pbx-p-3">
+            <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">{{ comp.title }}</h4>
+            <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+              Click to add component
+            </div>
           </div>
         </div>
       </div>

package/src/Components/PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="min-h-40">
-    <p class="myPrimaryParagraph">
+  <div class="pbx-min-h-40">
+    <p class="pbx-myPrimaryParagraph">
       Provide your own Media Library Component to integrate a custom media picker into the Page
       Builder.
       <br />