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

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

@@ -25,28 +25,28 @@ watch(
 
 <template>
   <Listbox as="div" v-model="backgroundColor">
-    <div class="relative">
-      <ListboxButton class="w-max flex items-center myPrimaryTag">
-        <div v-if="getBackgroundColor === 'none'" class="flex gap-2 items-center">
+    <div class="pbx-relative">
+      <ListboxButton class="pbx-w-max pbx-flex pbx-items-center pbx-myPrimaryTag">
+        <div v-if="getBackgroundColor === 'none'" class="pbx-flex pbx-gap-2 pbx-items-center">
           <span class="material-symbols-outlined"> colors </span>
-          <span class="block truncate text-[12.5px]">Background color </span>
+          <span class="pbx-block pbx-truncate pbx-text-[12.5px]">Background color </span>
         </div>
-        <div v-if="backgroundColor !== 'none'" class="flex items-center gap-2">
+        <div v-if="backgroundColor !== 'none'" class="pbx-flex pbx-items-center pbx-gap-2">
           <div
-            class="aspect-square w-6 h-6 border border-gray-800 rounded-sm"
-            :class="`bg-${backgroundColor?.replace('bg-', '')}`"
+            class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
+            :class="`pbx-bg-${backgroundColor?.replace('pbx-bg-', '')}`"
           ></div>
-          <span class="block truncate">{{ backgroundColor }}</span>
+          <span class="pbx-block pbx-truncate">{{ backgroundColor }}</span>
         </div>
       </ListboxButton>
 
       <transition
-        leave-active-class="transition ease-in duration-100"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
+        leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
+        leave-from-class="pbx-opacity-100"
+        leave-to-class="pbx-opacity-0"
       >
         <ListboxOptions
-          class="absolute min-w-[12rem] z-40 mt-1 max-h-56 w-full overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          class="pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
         >
           <ListboxOption
             as="template"
@@ -58,20 +58,22 @@ watch(
           >
             <li
               :class="[
-                active ? 'bg-myPrimaryLinkColor text-white' : 'text-myPrimaryDarkGrayColor',
-                'relative cursor-default select-none py-2 pl-3 pr-9',
+                active
+                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white'
+                  : 'pbx-text-myPrimaryDarkGrayColor',
+                'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
               ]"
             >
-              <div v-if="color === 'none'" class="flex items-center">
+              <div v-if="color === 'none'" class="pbx-flex pbx-items-center">
                 <span class="material-symbols-outlined"> ev_shadow </span>
-                <span class="ml-3">Transparent</span>
+                <span class="pbx-ml-3">Transparent</span>
               </div>
-              <div v-if="color !== 'none'" class="flex items-center">
+              <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div
-                  class="aspect-square w-6 h-6 border border-gray-100 rounded-sm"
-                  :class="`bg-${color.replace('bg-', '')}`"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-100 pbx-rounded-sm"
+                  :class="`pbx-bg-${color.replace('pbx-bg-', '')}`"
                 ></div>
-                <span class="ml-3">{{ color }}</span>
+                <span class="pbx-ml-3">{{ color }}</span>
               </div>
             </li>
           </ListboxOption>

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

@@ -76,12 +76,12 @@ watch(
   <EditorAccordion>
     <template #title>Border Radius</template>
     <template #content>
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Global</p>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Radius </label>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Global</p>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Radius </label>
         <select
           v-model="borderRadiusGlobal"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderRadiusGlobal(borderRadiusGlobal)"
         >
           <option disabled value="">Select</option>
@@ -93,12 +93,12 @@ watch(
           </option>
         </select>
       </div>
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Specific</p>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Radius top left </label>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Specific</p>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Radius top left </label>
         <select
           v-model="borderRadiusTopLeft"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderRadiusTopLeft(borderRadiusTopLeft)"
         >
           <option disabled value="">Select</option>
@@ -110,11 +110,11 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Radius top right </label>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Radius top right </label>
         <select
           v-model="borderRadiusTopRight"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderRadiusTopRight(borderRadiusTopRight)"
         >
           <option disabled value="">Select</option>
@@ -126,11 +126,11 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Radius bottom left </label>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Radius bottom left </label>
         <select
           v-model="borderRadiusBottomleft"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderRadiusBottomleft(borderRadiusBottomleft)"
         >
           <option disabled value="">Select</option>
@@ -142,11 +142,11 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Radius bottom right </label>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Radius bottom right </label>
         <select
           v-model="borderRadiusBottomRight"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderRadiusBottomRight(borderRadiusBottomRight)"
         >
           <option disabled value="">Select</option>

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

@@ -54,13 +54,13 @@ watch(
   <EditorAccordion>
     <template #title>Border Style, Width & Color</template>
     <template #content>
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Border</p>
+      <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-my-4">Border</p>
 
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Style </label>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Style </label>
         <select
           v-model="borderStyle"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderStyle(borderStyle)"
         >
           <option disabled value="">Select</option>
@@ -72,11 +72,11 @@ watch(
           </option>
         </select>
       </div>
-      <div class="my-2 py-2">
-        <label class="myPrimaryInputLabel"> Border Width </label>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Border Width </label>
         <select
           v-model="borderWidth"
-          class="myPrimarySelect"
+          class="pbx-myPrimarySelect"
           @change="pageBuilderClass.handleBorderWidth(borderWidth)"
         >
           <option disabled value="">Select</option>
@@ -89,37 +89,37 @@ watch(
         </select>
       </div>
 
-      <label class="myPrimaryInputLabel"> Border Color </label>
+      <label class="pbx-myPrimaryInputLabel"> Border Color </label>
       <Listbox as="div" v-model="borderColor">
-        <div class="relative mt-2">
-          <ListboxButton class="myPrimarySelect">
-            <span class="flex items-center gap-2">
+        <div class="pbx-relative pbx-mt-2">
+          <ListboxButton class="pbx-myPrimarySelect">
+            <span class="pbx-flex pbx-items-center pbx-gap-2">
               <div v-if="getBorderColor === 'none'">
-                <div class="myPrimaryColorPreview border-none">
+                <div class="pbx-myPrimaryColorPreview pbx-border-none">
                   <span class="material-symbols-outlined"> ev_shadow </span>
                 </div>
               </div>
               <div
                 v-if="borderColor !== 'none'"
-                class="aspect-square w-6 h-6 border border-gray-100 rounded-sm"
+                class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-100 pbx-rounded-sm"
                 :class="`bg-${borderColor?.replace('border-', '')}`"
               ></div>
-              <span class="block truncate">{{ borderColor }}</span>
+              <span class="pbx-block pbx-truncate">{{ borderColor }}</span>
             </span>
             <span
-              class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
+              class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
             >
               <span class="material-symbols-outlined"> keyboard_arrow_down </span>
             </span>
           </ListboxButton>
 
           <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
+            leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
+            leave-from-class="pbx-opacity-100"
+            leave-to-class="pbx-opacity-0"
           >
             <ListboxOptions
-              class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+              class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
             >
               <ListboxOption
                 as="template"
@@ -131,24 +131,26 @@ watch(
               >
                 <li
                   :class="[
-                    active ? 'bg-myPrimaryLinkColor text-white' : 'text-myPrimaryDarkGrayColor',
-                    'relative cursor-default select-none py-2 pl-3 pr-9',
+                    active
+                      ? 'pbx-bg-myPrimaryLinkColor pbx-text-white'
+                      : 'pbx-text-myPrimaryDarkGrayColor',
+                    'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
                   ]"
                 >
-                  <div class="flex items-center">
+                  <div class="pbx-flex pbx-items-center">
                     <div v-if="color === 'none'">
-                      <div class="myPrimaryColorPreview border-none">
+                      <div class="pbx-myPrimaryColorPreview pbx-border-none">
                         <span class="material-symbols-outlined"> ev_shadow </span>
                       </div>
                     </div>
 
                     <div
                       v-if="color !== 'none'"
-                      class="aspect-square w-6 h-6 bg-gray-950"
+                      class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
                       :class="`bg-${color.replace('border-', '')}`"
                     ></div>
-                    <span v-if="color === 'none'" class="ml-3">Transparent</span>
-                    <span v-if="color !== 'none'" class="ml-3">{{ color }}</span>
+                    <span v-if="color === 'none'" class="pbx-ml-3">Transparent</span>
+                    <span v-if="color !== 'none'" class="pbx-ml-3">{{ color }}</span>
                   </div>
                 </li>
               </ListboxOption>

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

@@ -35,11 +35,11 @@ const handleAddClasses = async function () {
   <EditorAccordion>
     <template #title>Generated CSS</template>
     <template #content>
-      <div class="flex flex-row flex-wrap gap-2 mt-2 mb-4">
+      <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2 pbx-mb-4">
         <div
           v-for="className in currentClasses"
           :key="className"
-          class="myPrimaryTag cursor-pointer hover:bg-myPrimaryErrorColor hover:text-white text-xs py-2 font-medium"
+          class="pbx-myPrimaryTag pbx-cursor-pointer hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-xs pbx-py-2 pbx-font-medium"
           @click="
             async () => {
               pageBuilderClass.handleRemoveClasses(className)
@@ -47,33 +47,35 @@ const handleAddClasses = async function () {
             }
           "
         >
-          <div class="flex items-center gap-1">
-            <span class="mr-1">
+          <div class="pbx-flex pbx-items-center pbx-gap-1">
+            <span class="pbx-mr-1">
               {{ className }}
             </span>
           </div>
         </div>
       </div>
 
-      <div class="flex gap-2 item-center flex-col">
-        <div class="flex gap-2 item-center">
-          <div class="mt-1 relative flex items-center w-full border myPrimaryInput py-0 p-0">
+      <div class="pbx-flex pbx-gap-2 pbx-item-center pbx-flex-col">
+        <div class="pbx-flex pbx-gap-2 pbx-item-center">
+          <div
+            class="pbx-mt-1 pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border pbx-myPrimaryInput pbx-py-0 pbx-p-0"
+          >
             <input
               v-model="inputClass"
               type="text"
               placeholder="Type class"
               @keydown.enter="handleAddClasses()"
               autocomplete="off"
-              class="myPrimaryInput border-none rounded-r-none ml-0 w-full"
+              class="pbx-myPrimaryInput pbx-border-none pbx-rounded-r-none pbx-ml-0 pbx-w-full"
             />
             <div
-              class="border border-gray-200 border-none rounded flex items-center justify-center h-full w-8"
+              class="pbx-border pbx-border-gray-200 pbx-border-none pbx-rounded pbx-flex pbx-items-center pbx-justify-center pbx-h-full pbx-w-8"
             >
-              <kbd class="myPrimaryParagraph text-gray-400 border-none"> ⏎ </kbd>
+              <kbd class="pbx-myPrimaryParagraph pbx-text-gray-400 pbx-border-none"> ⏎ </kbd>
             </div>
           </div>
         </div>
-        <p class="myPrimaryInputError"></p>
+        <p class="pbx-myPrimaryInputError"></p>
       </div>
     </template>
   </EditorAccordion>

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

@@ -65,11 +65,11 @@ const deleteSelectedComponent = function (e) {
     <header></header>
     <main></main>
   </DynamicModalBuilder>
-  <div class="flex flex-col items-center justify-center myPrimaryGap">
-    <div class="flex gap-2 items-center justify-center">
+  <div class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-myPrimaryGap">
+    <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
       <div
         @click="deleteSelectedComponent()"
-        class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white text-myPrimaryErrorColor"
+        class="pbx-h-10 pbx-w-10 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-myPrimaryErrorColor hover:pbx-text-white pbx-text-myPrimaryErrorColor"
       >
         <span class="material-symbols-outlined"> delete_forever </span>
       </div>
@@ -78,14 +78,14 @@ const deleteSelectedComponent = function (e) {
     <button
       type="button"
       @click="pageBuilderClass.reorderComponent(-1)"
-      class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+      class="pbx-h-10 pbx-w-10 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 focus-visible:pbx-ring-0"
     >
       <span class="material-symbols-outlined"> move_up </span>
     </button>
     <button
       type="button"
       @click="pageBuilderClass.reorderComponent(1)"
-      class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+      class="pbx-h-10 pbx-w-10 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 focus-visible:pbx-ring-0"
     >
       <span class="material-symbols-outlined"> move_down </span>
     </button>

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

@@ -17,12 +17,12 @@ const getRestoredElement = computed(() => {
   <EditorAccordion>
     <template #title>Delete or restore</template>
     <template #content>
-      <div class="my-2">
+      <div class="pbx-my-2">
         <button
           v-if="getRestoredElement !== null"
           @click="pageBuilderClass.handleRestoreElement"
           type="button"
-          class="myPrimaryButton gap-2 items-center w-full"
+          class="pbx-myPrimaryButton pbx-gap-2 pbx-items-center pbx-w-full"
         >
           <span class="material-symbols-outlined"> refresh </span>
           Restore Element
@@ -31,9 +31,9 @@ const getRestoredElement = computed(() => {
           v-if="getRestoredElement === null"
           @click="pageBuilderClass.handleDeleteElement"
           type="button"
-          class="myPrimaryDeleteButton gap-2 items-center w-full"
+          class="pbx-myPrimaryDeleteButton pbx-gap-2 pbx-items-center pbx-w-full"
         >
-          <span class="myMediumIcon material-symbols-outlined"> delete </span>
+          <span class="pbx-myMediumIcon material-symbols-outlined"> delete </span>
           Delete Element
         </button>
       </div>

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

@@ -210,13 +210,16 @@ const handleModalIframeSrc = function () {
     >
       <header></header>
       <main>
-        <div class="myInputGroup">
-          <div class="myPrimaryFormOrganizationHeaderDescriptionSection">
-            <div class="myPrimaryFormOrganizationHeader">
-              <label for="video" class="myPrimaryInputLabel">Video url:</label>
-              <input v-model="iframeSrc" type="text" class="myPrimaryInput" name="video" />
-              <div v-if="urlError" class="min-h-[2.5rem] flex items-center justify-start">
-                <p class="myPrimaryInputError mt-2 mb-0 py-0 self-start">
+        <div class="pbx-myInputGroup">
+          <div class="pbx-myPrimaryFormOrganizationHeaderDescriptionSection">
+            <div class="pbx-myPrimaryFormOrganizationHeader">
+              <label for="video" class="pbx-myPrimaryInputLabel">Video url:</label>
+              <input v-model="iframeSrc" type="text" class="pbx-myPrimaryInput" name="video" />
+              <div
+                v-if="urlError"
+                class="pbx-min-h-[2.5rem] pbx-flex pbx-items-center pbx-justify-start"
+              >
+                <p class="pbx-myPrimaryInputError pbx-mt-2 pbx-mb-0 pbx-py-0 pbx-self-start">
                   {{ urlError }}
                 </p>
               </div>
@@ -241,7 +244,7 @@ const handleModalIframeSrc = function () {
       @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonFunctionDynamicModalBuilder"
     >
       <header></header>
-      <main class="overflow-y-auto">
+      <main class="pbx-overflow-y-auto">
         <TipTapInput></TipTapInput>
       </main>
     </DynamicModalBuilder>
@@ -259,15 +262,15 @@ const handleModalIframeSrc = function () {
     </MediaLibraryModal>
 
     <div
-      class="z-20 px-2 py-1 h-24 flex items-center justify-center mt-2 mx-2 border-b border-myPrimaryLightGrayColor"
+      class="pbx-z-20 pbx-px-2 pbx-py-1 pbx-h-24 pbx-flex pbx-items-center pbx-justify-center pbx-mt-2 pbx-mx-2 pbx-border-b pbx-border-myPrimaryLightGrayColor"
     >
       <div
-        class="flex items-center justify-center"
-        :class="{ 'rounded-full border border-gray-200 shadow-sm': getElement }"
+        class="pbx-flex pbx-items-center pbx-justify-center"
+        :class="{ 'pbx-rounded-full pbx-border pbx-border-gray-200 pbx-shadow-sm': getElement }"
       >
         <template v-if="pageBuilderClass.ElOrFirstChildIsIframe()">
-          <div class="px-2 flex items-center justify-start gap-2 w-max">
-            <button @click="handleModalIframeSrc" type="button" class="myPrimaryTag">
+          <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button @click="handleModalIframeSrc" type="button" class="pbx-myPrimaryTag">
               <span class="material-symbols-outlined"> play_circle </span>
               <span>Add YouTube</span>
             </button>
@@ -280,13 +283,13 @@ const handleModalIframeSrc = function () {
             !pageBuilderClass.ElOrFirstChildIsIframe()
           "
         >
-          <div class="px-2 flex items-center justify-start gap-2 w-max">
-            <button @click="handleModalPreviewTiptap" type="button" class="myPrimaryTag">
+          <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button @click="handleModalPreviewTiptap" type="button" class="pbx-myPrimaryTag">
               <span class="material-symbols-outlined"> edit </span>
               <span>Edit text and links</span>
             </button>
           </div>
-          <div class="px-2">
+          <div class="pbx-px-2">
             <TextColorEditor></TextColorEditor>
           </div>
         </template>
@@ -299,8 +302,8 @@ const handleModalIframeSrc = function () {
             !pageBuilderClass.ElOrFirstChildIsIframe()
           "
         >
-          <div class="px-2 flex items-center justify-start gap-2 w-max">
-            <button @click="handleAddImage" type="button" class="myPrimaryTag">
+          <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
+            <button @click="handleAddImage" type="button" class="pbx-myPrimaryTag">
               <span class="material-symbols-outlined"> add_photo_alternate </span>
               <span>Update image</span>
             </button>
@@ -315,7 +318,7 @@ const handleModalIframeSrc = function () {
             !pageBuilderClass.ElOrFirstChildIsIframe()
           "
         >
-          <div class="px-2">
+          <div class="pbx-px-2">
             <BackgroundColorEditor></BackgroundColorEditor>
           </div>
         </template>

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

@@ -22,17 +22,17 @@ const getRestoredElement = computed(() => {
   <EditorAccordion v-if="getElement || getRestoredElement">
     <template #title>Selected HTML Element</template>
     <template #content>
-      <div class="flex flex-row flex-wrap gap-2 mt-2"></div>
+      <div class="pbx-flex pbx-flex-row pbx-flex-wrap pbx-gap-2 pbx-mt-2"></div>
       <!-- delete & restore element # start -->
       <template v-if="getRestoredElement">
-        <div class="border-b border-gray-200 mb-4 pb-8 pt-4">
-          <p class="myPrimaryParagraph font-medium py-0">Restore</p>
-          <label class="myPrimaryInputLabel"> Restore the last deleted HTML element.</label>
-          <div class="px-2 flex items-center justify-start gap-2 w-max">
+        <div class="pbx-border-b pbx-border-gray-200 pbx-mb-4 pbx-pb-8 pbx-pt-4">
+          <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0">Restore</p>
+          <label class="pbx-myPrimaryInputLabel"> Restore the last deleted HTML element.</label>
+          <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
             <button
               @click="pageBuilderClass.handleRestoreElement"
               type="button"
-              class="myPrimaryButton w-full mt-4"
+              class="pbx-myPrimaryButton pbx-w-full pbx-mt-4"
             >
               <span class="material-symbols-outlined"> undo </span>
               <span>Restore</span>
@@ -42,18 +42,18 @@ const getRestoredElement = computed(() => {
       </template>
 
       <template v-if="getElement">
-        <p class="myPrimaryParagraph font-medium py-0 mb-4 pt-4">Delete</p>
-        <label class="myPrimaryInputLabel">
+        <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-py-0 pbx-mb-4 pbx-pt-4">Delete</p>
+        <label class="pbx-myPrimaryInputLabel">
           Delete the currently selected HTML element from the page.</label
         >
 
-        <div class="px-2 flex items-center justify-start gap-2 w-max">
+        <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
           <button
             @click="pageBuilderClass.handleDeleteElement"
             type="button"
-            class="myPrimaryDeleteButton w-full mt-4"
+            class="pbx-myPrimaryDeleteButton pbx-w-full pbx-mt-4"
           >
-            <span class="hover:text-white">Delete element</span>
+            <span class="hover:pbx-text-white">Delete element</span>
           </button>
         </div>
       </template>

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

@@ -71,12 +71,12 @@ const loadingImage = async function (imageURL) {
 <template>
   <div>
     <div v-show="getIsLoadingImage">
-      <div class="flex items-center justify-center mt-4 min-h-80">
+      <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4 pbx-min-h-80">
         <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>
@@ -84,7 +84,7 @@ const loadingImage = async function (imageURL) {
     </div>
     <div v-show="getBasePrimaryImage && !getIsLoadingImage">
       <img
-        class="object-cover object-center w-full cursor-pointer"
+        class="pbx-object-cover pbx-object-center pbx-w-full pbx-cursor-pointer"
         :src="getBasePrimaryImage"
         @click="handleAddImage"
         alt="image"