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

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

@@ -87,21 +87,21 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
     <template #title>Link</template>
     <template #content>
       <!-- Hyperlink ability / start -->
-      <div v-if="getHyperlinkAbility === false" class="rounded-md bg-red-50 p-2">
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
-            <span class="myMediumIcon material-symbols-outlined"> warning </span>
+      <div v-if="getHyperlinkAbility === false" class="pbx-rounded-md pbx-bg-red-50 pbx-p-2">
+        <div class="pbx-flex pbx-items-center">
+          <div class="pbx-flex-shrink-0">
+            <span class="pbx-myMediumIcon material-symbols-outlined"> warning </span>
           </div>
-          <div class="ml-2">
-            <p class="text-sm font-medium text-green-800">
+          <div class="pbx-ml-2">
+            <p class="pbx-text-sm pbx-font-medium pbx-text-green-800">
               Not able to add hyperlink on this element
             </p>
           </div>
-          <div class="ml-auto pl-3">
-            <div class="-mx-1.5 -my-1.5">
+          <div class="pbx-ml-auto pbx-pl-3">
+            <div class="pbx-mx-1.5 pbx-my-1.5">
               <button
                 type="button"
-                class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                class="pbx-inline-flex pbx-rounded-md pbx-bg-green-50 pbx-p-1.5 pbx-text-green-500 hover:pbx-bg-green-100 focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-green-600 focus:pbx-ring-offset-2 focus:pbx-ring-offset-green-50"
               ></button>
             </div>
           </div>
@@ -109,35 +109,35 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
       </div>
       <!-- Hyperlink ability / end -->
       <div v-if="getHyperlinkAbility === true">
-        <div class="my-2 py-2">
-          <div class="flex items-center justify-between gap-2 w-full">
-            <p class="myPrimaryParagraph">Enable hyperlink</p>
+        <div class="pbx-my-2 pbx-py-2">
+          <div class="pbx-flex pbx-items-center pbx-justify-between pbx-gap-2 pbx-w-full">
+            <p class="pbx-myPrimaryParagraph">Enable hyperlink</p>
             <!-- Toggle start -->
             <Switch
               v-model="hyperlinkEnable"
               @click="handleToggleHyperlinkEnable('removeHyperlink')"
               :class="[
-                hyperlinkEnable ? 'bg-myPrimaryLinkColor' : 'bg-gray-200',
-                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-myPrimaryLinkColor focus:ring-offset-2',
+                hyperlinkEnable ? 'pbx-bg-myPrimaryLinkColor' : 'pbx-bg-gray-200',
+                'pbx-relative pbx-inline-flex pbx-h-6 pbx-w-11 pbx-flex-shrink-0 pbx-cursor-pointer pbx-rounded-full pbx-border-2 pbx-border-transparent pbx-transition-colors pbx-duration-200 pbx-ease-in-out focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2',
               ]"
             >
-              <span class="sr-only">Use setting</span>
+              <span class="pbx-sr-only">Use setting</span>
               <span
                 :class="[
-                  hyperlinkEnable ? 'translate-x-5' : 'translate-x-0',
-                  'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                  hyperlinkEnable ? 'pbx-translate-x-5' : 'pbx-translate-x-0',
+                  'pbx-pointer-events-none pbx-relative pbx-inline-block pbx-h-5 pbx-w-5 pbx-transform pbx-rounded-full pbx-bg-white pbx-shadow pbx-ring-0 pbx-transition pbx-duration-200 pbx-ease-in-out',
                 ]"
               >
                 <span
                   :class="[
                     hyperlinkEnable
-                      ? 'opacity-0 ease-out duration-100'
-                      : 'opacity-100 ease-in duration-200',
-                    'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                      ? 'pbx-opacity-0 pbx-ease-out pbx-duration-100'
+                      : 'pbx-opacity-100 pbx-ease-in pbx-duration-200',
+                    'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
                   ]"
                   aria-hidden="true"
                 >
-                  <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                  <svg class="pbx-h-3 pbx-w-3 pbx-text-gray-400" fill="none" viewBox="0 0 12 12">
                     <path
                       d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
                       stroke="currentColor"
@@ -150,14 +150,14 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
                 <span
                   :class="[
                     hyperlinkEnable
-                      ? 'opacity-100 ease-in duration-200'
-                      : 'opacity-0 ease-out duration-100',
-                    'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                      ? 'pbx-opacity-100 pbx-ease-in pbx-duration-200'
+                      : 'pbx-opacity-0 pbx-ease-out pbx-duration-100',
+                    'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
                   ]"
                   aria-hidden="true"
                 >
                   <svg
-                    class="h-3 w-3 text-myPrimaryLinkColor"
+                    class="pbx-h-3 pbx-w-3 pbx-text-myPrimaryLinkColor"
                     fill="currentColor"
                     viewBox="0 0 12 12"
                   >
@@ -172,19 +172,22 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
           </div>
         </div>
         <!-- attached url - start -->
-        <div v-if="getElementContainsHyperlink === true" class="rounded-md bg-green-50 p-2">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <span class="myMediumIcon material-symbols-outlined"> check </span>
+        <div
+          v-if="getElementContainsHyperlink === true"
+          class="pbx-rounded-md pbx-bg-green-50 pbx-p-2"
+        >
+          <div class="pbx-flex pbx-items-center">
+            <div class="pbx-flex-shrink-0">
+              <span class="pbx-myMediumIcon material-symbols-outlined"> check </span>
             </div>
-            <div class="ml-2">
-              <p class="text-sm font-medium text-green-800">Hyperlink added</p>
+            <div class="pbx-ml-2">
+              <p class="pbx-text-sm pbx-font-medium pbx-text-green-800">Hyperlink added</p>
             </div>
-            <div class="ml-auto pl-3">
-              <div class="-mx-1.5 -my-1.5">
+            <div class="pbx-ml-auto pbx-pl-3">
+              <div class="pbx-mx-1.5 pbx-my-1.5">
                 <button
                   type="button"
-                  class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                  class="pbx-inline-flex pbx-rounded-md pbx-bg-green-50 pbx-p-1.5 pbx-text-green-500 hover:pbx-bg-green-100 focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-green-600 focus:pbx-ring-offset-2 focus:pbx-ring-offset-green-50"
                 ></button>
               </div>
             </div>
@@ -192,81 +195,86 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
         </div>
         <!-- attached url - end -->
         <!-- no attached url - start -->
-        <div v-if="getElementContainsHyperlink === false" class="rounded-md bg-red-50 p-2">
-          <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <span class="myMediumIcon material-symbols-outlined"> warning </span>
+        <div
+          v-if="getElementContainsHyperlink === false"
+          class="pbx-rounded-md pbx-bg-red-50 pbx-p-2"
+        >
+          <div class="pbx-flex pbx-items-center">
+            <div class="pbx-flex-shrink-0">
+              <span class="pbx-myMediumIcon material-symbols-outlined"> warning </span>
             </div>
-            <div class="ml-2">
-              <p class="text-sm font-medium text-green-800">No hyperlink added</p>
+            <div class="pbx-ml-2">
+              <p class="pbx-text-sm pbx-font-medium pbx-text-green-800">No hyperlink added</p>
             </div>
-            <div class="ml-auto pl-3">
-              <div class="-mx-1.5 -my-1.5">
+            <div class="pbx-ml-auto pbx-pl-3">
+              <div class="pbx-mx-1.5 pbx-my-1.5">
                 <button
                   type="button"
-                  class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                  class="pbx-inline-flex pbx-rounded-md pbx-bg-green-50 pbx-p-1.5 pbx-text-green-500 hover:pbx-bg-green-100 focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-green-600 focus:pbx-ring-offset-2 focus:pbx-ring-offset-green-50"
                 ></button>
               </div>
             </div>
           </div>
         </div>
         <!-- no attached url - end -->
-        <div v-if="hyperlinkEnable === true" class="my-2 py-2">
-          <div class="relative flex items-center w-full border myPrimaryInput py-0 p-0">
+        <div v-if="hyperlinkEnable === true" class="pbx-my-2 pbx-py-2">
+          <div
+            class="pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border pbx-myPrimaryInput pbx-py-0 pbx-p-0"
+          >
             <input
               v-model="urlInput"
               type="text"
               placeholder="URL.."
               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"
               @keydown.enter.tab.prevent="handleHyperlink()"
             />
             <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>
 
           <p
             v-if="getHyperlinkMessage !== null"
-            class="myPrimaryParagraph text-myPrimarySuccesColor mt-1"
+            class="pbx-myPrimaryParagraph pbx-text-myPrimarySuccesColor pbx-mt-1"
           >
             {{ getHyperlinkMessage }}
           </p>
-          <p v-if="getHyperlinkError !== null" class="myPrimaryParagraphError mt-1">
+          <p v-if="getHyperlinkError !== null" class="pbx-myPrimaryParagraphError pbx-mt-1">
             {{ getHyperlinkError }}
           </p>
 
-          <div class="my-2 py-2">
-            <div class="flex items-center justify-between gap-2 w-full">
-              <p class="myPrimaryParagraph">Open in new tab</p>
+          <div class="pbx-my-2 pbx-py-2">
+            <div class="pbx-flex pbx-items-center pbx-justify-between pbx-gap-2 pbx-w-full">
+              <p class="pbx-myPrimaryParagraph">Open in new tab</p>
               <!-- Toggle start -->
               <Switch
                 v-model="openHyperlinkInNewTab"
                 @click="handleToggleOpenHyperlinkInNewTab"
                 :class="[
-                  openHyperlinkInNewTab ? 'bg-myPrimaryLinkColor' : 'bg-gray-200',
-                  'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-myPrimaryLinkColor focus:ring-offset-2',
+                  openHyperlinkInNewTab ? 'pbx-bg-myPrimaryLinkColor' : 'pbx-bg-gray-200',
+                  'pbx-relative pbx-inline-flex pbx-h-6 pbx-w-11 pbx-flex-shrink-0 pbx-cursor-pointer pbx-rounded-full pbx-border-2 pbx-border-transparent pbx-transition-colors pbx-duration-200 pbx-ease-in-out focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2',
                 ]"
               >
-                <span class="sr-only">Use setting</span>
+                <span class="pbx-sr-only">Use setting</span>
                 <span
                   :class="[
-                    openHyperlinkInNewTab ? 'translate-x-5' : 'translate-x-0',
-                    'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                    openHyperlinkInNewTab ? 'pbx-translate-x-5' : 'pbx-translate-x-0',
+                    'pbx-pointer-events-none pbx-relative pbx-inline-block pbx-h-5 pbx-w-5 pbx-transform pbx-rounded-full pbx-bg-white pbx-shadow pbx-ring-0 pbx-transition pbx-duration-200 pbx-ease-in-out',
                   ]"
                 >
                   <span
                     :class="[
                       openHyperlinkInNewTab
-                        ? 'opacity-0 ease-out duration-100'
-                        : 'opacity-100 ease-in duration-200',
-                      'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                        ? 'pbx-opacity-0 pbx-ease-out pbx-duration-100'
+                        : 'pbx-opacity-100 pbx-ease-in pbx-duration-200',
+                      'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
                     ]"
                     aria-hidden="true"
                   >
-                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                    <svg class="pbx-h-3 pbx-w-3 pbx-text-gray-400" fill="none" viewBox="0 0 12 12">
                       <path
                         d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
                         stroke="currentColor"
@@ -279,14 +287,14 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
                   <span
                     :class="[
                       openHyperlinkInNewTab
-                        ? 'opacity-100 ease-in duration-200'
-                        : 'opacity-0 ease-out duration-100',
-                      'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+                        ? 'pbx-opacity-100 pbx-ease-in pbx-duration-200'
+                        : 'pbx-opacity-0 pbx-ease-out pbx-duration-100',
+                      'pbx-absolute pbx-inset-0 pbx-flex pbx-h-full pbx-w-full pbx-items-center pbx-justify-center pbx-transition-opacity',
                     ]"
                     aria-hidden="true"
                   >
                     <svg
-                      class="h-3 w-3 text-myPrimaryLinkColor"
+                      class="pbx-h-3 pbx-w-3 pbx-text-myPrimaryLinkColor"
                       fill="currentColor"
                       viewBox="0 0 12 12"
                     >

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

@@ -31,41 +31,43 @@ watch(
 </script>
 
 <template>
-  <div class="my-2 py-2">
-    <label class="myPrimaryInputLabel"> Background opacity</label>
+  <div class="pbx-my-2 pbx-py-2">
+    <label class="pbx-myPrimaryInputLabel"> Background opacity</label>
 
     <Listbox as="div" v-model="opacityVueModel">
-      <div class="relative">
-        <ListboxButton class="myPrimarySelect">
-          <span class="flex items-center gap-2">
+      <div class="pbx-relative">
+        <ListboxButton class="pbx-myPrimarySelect">
+          <span class="pbx-flex pbx-items-center pbx-gap-2">
             <div v-if="opacityVueModel === '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="opacityVueModel !== '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="`${opacityVueModel}`"
             ></div>
 
-            <span class="block truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
+            <span class="pbx-block pbx-truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
               opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
             }}</span>
           </span>
-          <span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+          <span
+            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"
@@ -77,26 +79,29 @@ watch(
             >
               <li
                 :class="[
-                  active ? 'bg-myPrimaryLinkColor text-white' : 'text-myPrimaryDarkGrayColor',
-                  'relative cursor-default select-none py-2 pl-3 pr-9',
+                  active ? 'bg-myPrimaryLinkColor 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 v-if="backgroundOpacity === 'none'" class="aspect-square w-6 h-6">
-                    <div class="myPrimaryColorPreview border-none">
+                <div class="pbx-flex pbx-items-center">
+                  <div
+                    v-if="backgroundOpacity === 'none'"
+                    class="pbx-aspect-square pbx-w-6 pbx-h-6"
+                  >
+                    <div class="pbx-myPrimaryColorPreview pbx-border-none">
                       <span class="material-symbols-outlined"> ev_shadow </span>
                     </div>
                   </div>
 
                   <div
                     v-if="backgroundOpacity !== '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="`${backgroundOpacity}`"
                   ></div>
-                  <span v-if="backgroundOpacity !== 'none'" class="ml-3">{{
+                  <span v-if="backgroundOpacity !== 'none'" class="pbx-ml-3">{{
                     backgroundOpacity
                   }}</span>
-                  <span v-if="backgroundOpacity === 'none'" class="ml-3">Transparent</span>
+                  <span v-if="backgroundOpacity === 'none'" class="pbx-ml-3">Transparent</span>
                 </div>
               </li>
             </ListboxOption>

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

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
-import EditorAccordion from '../EditorAccordion.vue'
 import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
 import tailwindOpacities from '../../../../utils/builder/tailwind-opacities'
 import {
@@ -31,41 +30,43 @@ watch(
 </script>
 
 <template>
-  <div class="my-2 py-2">
-    <label class="myPrimaryInputLabel"> Opacity</label>
+  <div class="pbx-my-2 pbx-py-2">
+    <label class="pbx-myPrimaryInputLabel"> Opacity</label>
 
     <Listbox as="div" v-model="opacityVueModel">
-      <div class="relative">
-        <ListboxButton class="myPrimarySelect">
-          <span class="flex items-center gap-2">
+      <div class="pbx-relative">
+        <ListboxButton class="pbx-myPrimarySelect">
+          <span class="pbx-flex pbx-items-center pbx-gap-2">
             <div v-if="opacityVueModel === '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="opacityVueModel !== '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="`${opacityVueModel}`"
             ></div>
 
-            <span class="block truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
+            <span class="pbx-block pbx-truncate" :class="[opacityVueModel !== 'none' ? '' : '']">{{
               opacityVueModel === 'none' ? 'Transparent' : opacityVueModel
             }}</span>
           </span>
-          <span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+          <span
+            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"
@@ -77,24 +78,28 @@ 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 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="elementOpacity === '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="elementOpacity !== '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="`${elementOpacity}`"
                   ></div>
-                  <span v-if="elementOpacity === 'none'" class="ml-3">Transparent</span>
-                  <span v-if="elementOpacity !== 'none'" class="ml-3">{{ elementOpacity }}</span>
+                  <span v-if="elementOpacity === 'none'" class="pbx-ml-3">Transparent</span>
+                  <span v-if="elementOpacity !== 'none'" class="pbx-ml-3">{{
+                    elementOpacity
+                  }}</span>
                 </div>
               </li>
             </ListboxOption>

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

@@ -0,0 +1,101 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { sharedPageBuilderStore } from '../../../../stores/shared-store'
+import EditorAccordion from '../EditorAccordion.vue'
+import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
+import tailwindPaddingPlusMargin from '../../../../utils/builder/tailwind-padding-margin'
+
+// Use shared store instance
+const pageBuilderStateStore = sharedPageBuilderStore
+
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+const fontVerticalPadding = ref(null)
+const fontHorizontalPadding = ref(null)
+const fontVerticalMargin = ref(null)
+const fontHorizontalMargin = ref(null)
+const getFontVerticalPadding = computed(() => {
+  return pageBuilderStateStore.getFontVerticalPadding
+})
+const getFontHorizontalPadding = computed(() => {
+  return pageBuilderStateStore.getFontHorizontalPadding
+})
+const getFontVerticalMargin = computed(() => {
+  return pageBuilderStateStore.getFontVerticalMargin
+})
+const getFontHorizontalMargin = computed(() => {
+  return pageBuilderStateStore.getFontHorizontalMargin
+})
+
+watch(
+  getFontVerticalPadding,
+  async (newValue) => {
+    fontVerticalPadding.value = newValue
+    await pageBuilderClass.initializeElementStyles()
+  },
+  { immediate: true },
+)
+watch(
+  getFontHorizontalPadding,
+  async (newValue) => {
+    fontHorizontalPadding.value = newValue
+    await pageBuilderClass.initializeElementStyles()
+  },
+  { immediate: true },
+)
+watch(
+  getFontVerticalMargin,
+  async (newValue) => {
+    fontVerticalMargin.value = newValue
+    await pageBuilderClass.initializeElementStyles()
+  },
+  { immediate: true },
+)
+watch(
+  getFontHorizontalMargin,
+  async (newValue) => {
+    fontHorizontalMargin.value = newValue
+    await pageBuilderClass.initializeElementStyles()
+  },
+  { immediate: true },
+)
+</script>
+<template>
+  <EditorAccordion>
+    <template #title>Margin</template>
+    <template #content>
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Vertical Margin </label>
+        <select
+          v-model="fontVerticalMargin"
+          class="pbx-myPrimarySelect"
+          @change="pageBuilderClass.handleVerticalMargin(fontVerticalMargin)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="verticalMargin in tailwindPaddingPlusMargin.verticalMargin"
+            :key="verticalMargin"
+          >
+            {{ verticalMargin }}
+          </option>
+        </select>
+      </div>
+      <hr />
+      <div class="pbx-my-2 pbx-py-2">
+        <label class="pbx-myPrimaryInputLabel"> Horizontal Margin </label>
+        <select
+          v-model="fontHorizontalMargin"
+          class="pbx-myPrimarySelect"
+          @change="pageBuilderClass.handleHorizontalMargin(fontHorizontalMargin)"
+        >
+          <option disabled value="">Select</option>
+          <option
+            v-for="horizontalMargin in tailwindPaddingPlusMargin.horizontalMargin"
+            :key="horizontalMargin"
+          >
+            {{ horizontalMargin }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </EditorAccordion>
+</template>

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

@@ -6,11 +6,10 @@ import ManageOpacity from './ManageOpacity.vue'
 
 <template>
   <EditorAccordion>
-    <template #title>Opacity settings</template>
+    <template #title>Opacity & Transparency </template>
     <template #content>
-      <p class="myPrimaryParagraph font-medium py-0 my-4">Opacity</p>
-      <!-- Text color - end -->
       <ManageOpacity></ManageOpacity>
+      <hr />
       <ManageBackgroundOpacity></ManageBackgroundOpacity>
     </template>
   </EditorAccordion>