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

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

@@ -100,11 +100,11 @@ const openHTMLSettings = function () {
 <template>
   <div>
     <div
-      class="flex gap-2 items-center myPrimaryParagraph font-medium text-xs py-1 px-2 rounded-full lg:border lg:border-gray-200 lg:shadow-sm lg:mr-10"
+      class="pbx-flex pbx-gap-2 pbx-items-center pbx-myPrimaryParagraph pbx-font-medium pbx-text-xs pbx-py-1 pbx-px-2 pbx-rounded-full lg:pbx-border lg:pbx-border-gray-200 lg:pbx-shadow-sm lg:pbx-mr-10"
     >
       <!-- User No image Start-->
       <div
-        class="flex items-center myPrimaryTag py-0"
+        class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-py-0"
         v-if="
           getConfigPageBuilder &&
           getConfigPageBuilder.userForPageBuilder &&
@@ -115,14 +115,14 @@ const openHTMLSettings = function () {
         "
       >
         <div
-          class="text-white rounded-full bg-myPrimaryBrandColor flex justify-center items-center text-xs h-8 min-h-8 max-h-8 w-8 min-w-8 max-w-8 font-normal"
+          class="pbx-text-white pbx-rounded-full pbx-bg-myPrimaryBrandColor pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-font-normal"
         >
           {{
             typeof getConfigPageBuilder.userForPageBuilder.name === 'string' &&
             getConfigPageBuilder.userForPageBuilder.name[0]
           }}
         </div>
-        <div class="hidden text-xs h-8 lg:flex items-center font-normal">
+        <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
           {{ getConfigPageBuilder.userForPageBuilder.name }}
         </div>
       </div>
@@ -131,7 +131,7 @@ const openHTMLSettings = function () {
 
       <!-- User With image Start-->
       <div
-        class="flex items-center lg:myPrimaryTag py-0 gap-4 w-max"
+        class="pbx-flex pbx-items-center lg:pbx-myPrimaryTag pbx-py-0 pbx-gap-4 pbx-w-max"
         v-if="
           getConfigPageBuilder &&
           getConfigPageBuilder.userForPageBuilder &&
@@ -142,15 +142,15 @@ const openHTMLSettings = function () {
         "
       >
         <div
-          class="text-white flex-shrink-0 h-8 w-8 rounded-full flex justify-center items-center text-xs rounded-l-full"
+          class="pbx-text-white pbx-flex-shrink-0 pbx-h-8 pbx-w-8 pbx-rounded-full pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-rounded-l-full"
         >
           <img
             alt="avatar"
             :src="`${getConfigPageBuilder.userForPageBuilder.image}`"
-            class="block inset-0 object-top h-8 min-h-8 max-h-8 w-8 min-w-8 max-w-8 object-cover rounded-full"
+            class="pbx-block pbx-inset-0 pbx-object-top pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-object-cover pbx-rounded-full"
           />
         </div>
-        <div class="hidden text-xs h-8 lg:flex items-center font-normal">
+        <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
           {{ getConfigPageBuilder.userForPageBuilder.name }}
         </div>
       </div>
@@ -159,15 +159,15 @@ const openHTMLSettings = function () {
 
       <div>
         <!-- Component Start -->
-        <div class="relative group">
+        <div class="pbx-relative pbx-group">
           <button
             type="button"
-            class="cursor-pointer lg:flex myPrimaryTag font-normal w-max text-xs"
+            class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-text-xs"
           >
             <span> Options </span>
           </button>
           <div
-            class="absolute left-0 -ml-16 -mt-2 flex flex-col gap-3 shadow-lg bg-white w-max border border-gray-100 rounded-2xl transition-all duration-200 ease-out pt-4 pr-4 pb-4 pl-2 z-30 opacity-0 pointer-events-none -translate-y-2 group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0"
+            class="pbx-absolute pbx-left-0 -pbx-ml-16 -pbx-mt-2 pbx-flex pbx-flex-col pbx-gap-3 pbx-shadow-lg pbx-bg-white pbx-w-max pbx-border pbx-border-gray-100 pbx-rounded-2xl pbx-transition-all pbx-duration-200 pbx-ease-out pbx-pt-4 pbx-pr-4 pbx-pb-4 pbx-pl-2 pbx-z-30 pbx-opacity-0 pbx-pointer-events-none pbx-translate-y-2 group-hover:pbx-opacity-100 group-hover:pbx-pointer-events-auto group-hover:pbx-translate-y-0"
           >
             <!-- Main Settings Start -->
             <button
@@ -177,7 +177,7 @@ const openHTMLSettings = function () {
                   openMainSettings()
                 }
               "
-              class="cursor-pointer lg:flex myPrimaryTag font-normal w-max border-none m-0"
+              class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0"
               type="button"
             >
               Config Overview
@@ -187,7 +187,7 @@ const openHTMLSettings = function () {
             <!-- HTML Settings Start -->
             <button
               @click="openHTMLSettings"
-              class="cursor-pointer lg:flex myPrimaryTag font-normal w-max border-none m-0"
+              class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0"
               type="button"
             >
               HTML Overview
@@ -202,7 +202,7 @@ const openHTMLSettings = function () {
                   deleteAllComponents()
                 }
               "
-              class="cursor-pointer lg:flex myPrimaryTag font-normal w-max border-none m-0 bg-myPrimaryErrorColor text-white"
+              class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0 pbx-bg-myPrimaryErrorColor pbx-text-white"
               type="button"
             >
               Delete Layout

package/src/Components/TipTap/TipTap.vue

@@ -10,14 +10,14 @@ const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 <template>
   <div>
-    <div class="blockease-linear duration-200 block ease-linear">
+    <div class="pbx-blockease-linear pbx-duration-200 pbx-block pbx-ease-linear">
       <template v-if="pageBuilderClass.isSelectedElementValidText()">
-        <div class="flex items-center justify-center mb-6">
-          <div class="px-2 flex items-center justify-start gap-2 w-max">
+        <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mb-6">
+          <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
             <button
               @click="pageBuilderClass.toggleTipTapModal(true)"
               type="button"
-              class="myPrimaryTag"
+              class="pbx-myPrimaryTag"
             >
               <span class="material-symbols-outlined"> edit </span>
               <span>Edit text and links</span>

package/src/Components/TipTap/TipTapInput.vue

@@ -195,11 +195,19 @@ onMounted(() => {
     >
       <header></header>
       <main>
-        <div class="myInputGroup">
-          <label class="myPrimaryInputLabel" for="roles"><span>Enter URL</span></label
-          ><input v-model="urlEnteret" class="myPrimaryInput mt-1" type="url" placeholder="url" />
-          <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">
+          <label class="pbx-myPrimaryInputLabel" for="roles"><span>Enter URL</span></label
+          ><input
+            v-model="urlEnteret"
+            class="pbx-myPrimaryInput pbx-mt-1"
+            type="url"
+            placeholder="url"
+          />
+          <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>
@@ -207,21 +215,21 @@ onMounted(() => {
       </main>
     </DynamicModalBuilder>
 
-    <div class="blockease-linear duration-200 block ease-linear">
+    <div class="pbx-blockease-linear pbx-duration-200 pbx-block pbx-ease-linear">
       <div v-if="pageBuilderClass.isSelectedElementValidText() && editor">
-        <div class="relative rounded-lg">
+        <div class="pbx-relative pbx-rounded-lg">
           <div
-            class="flex justify-between myPrimaryGap items-center py-4 px-4 overflow-x-auto border-b border-gray-200"
+            class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-py-4 pbx-px-4 pbx-overflow-x-auto pbx-border-b pbx-border-gray-200"
           >
             <div>
               <div>
                 <div
-                  class="px-2 flex items-center justify-start gap-2 w-max p-1 rounded-full border border-gray-200 shadow-sm"
+                  class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max pbx-p-1 pbx-rounded-full pbx-border pbx-border-gray-200 pbx-shadow-sm"
                 >
                   <button
                     @click="pageBuilderClass.toggleTipTapModal(false)"
                     type="button"
-                    class="myPrimaryTag"
+                    class="pbx-myPrimaryTag"
                   >
                     <span class="material-symbols-outlined"> Save </span>
                     <span>Save</span>
@@ -229,53 +237,51 @@ onMounted(() => {
                 </div>
               </div>
             </div>
-            <div class="flex items-center p-1 rounded-full border border-gray-200 shadow-sm">
-              <div class="px-2 flex items-center justify-start gap-2 w-max">
+            <div
+              class="pbx-flex pbx-items-center pbx-p-1 pbx-rounded-full pbx-border pbx-border-gray-200 pbx-shadow-sm"
+            >
+              <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
                 <button
                   @click="editor.chain().focus().setHardBreak().run()"
                   type="button"
-                  class="myPrimaryTag"
+                  class="pbx-myPrimaryTag"
                 >
                   <span class="material-symbols-outlined"> keyboard_return </span>
                   <span>Line break</span>
                 </button>
               </div>
 
-              <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="editor.chain().focus().toggleBold().run()"
                   type="button"
-                  class="myPrimaryTag"
-                  :class="{
-                    'bg-myPrimaryLinkColor text-white': editor.isActive('bold'),
-                  }"
+                  class="pbx-myPrimaryTag"
+                  :class="{ 'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('bold') }"
                 >
                   <span class="material-symbols-outlined"> format_bold </span>
                   <span>Bold</span>
                 </button>
               </div>
 
-              <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="handleURL"
                   type="button"
-                  class="myPrimaryTag"
-                  :class="{
-                    'bg-myPrimaryLinkColor text-white': editor.isActive('link'),
-                  }"
+                  class="pbx-myPrimaryTag"
+                  :class="{ 'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('link') }"
                 >
                   <span class="material-symbols-outlined"> link </span>
                   <span>Link</span>
                 </button>
               </div>
 
-              <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="editor.chain().focus().toggleHeading({ level: 2 }).run()"
                   type="button"
-                  class="myPrimaryTag"
+                  class="pbx-myPrimaryTag"
                   :class="{
-                    'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
+                    'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('heading', {
                       level: 2,
                     }),
                   }"
@@ -285,13 +291,13 @@ onMounted(() => {
                 </button>
               </div>
 
-              <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="editor.chain().focus().toggleHeading({ level: 3 }).run()"
                   type="button"
-                  class="myPrimaryTag"
+                  class="pbx-myPrimaryTag"
                   :class="{
-                    'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
+                    'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('heading', {
                       level: 3,
                     }),
                   }"
@@ -301,13 +307,13 @@ onMounted(() => {
                 </button>
               </div>
 
-              <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="editor.chain().focus().toggleBulletList().run()"
                   type="button"
-                  class="myPrimaryTag"
+                  class="pbx-myPrimaryTag"
                   :class="{
-                    'bg-myPrimaryLinkColor text-white': editor.isActive('bulletList'),
+                    'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('bulletList'),
                   }"
                 >
                   <span class="material-symbols-outlined"> list </span>
@@ -320,7 +326,7 @@ onMounted(() => {
           <editor-content
             id="page-builder-editor"
             :editor="editor"
-            class="p-2 prounded-lg lg:min-h-[20rem] lg:max-h-[30rem] md:min-h-[20rem] md:max-h-[20rem] min-h-[20rem] max-h-[20rem] overflow-y-auto"
+            class="pbx-p-2 pbx-prounded-lg lg:pbx-min-h-[20rem] lg:pbx-max-h-[30rem] md:pbx-min-h-[20rem] md:pbx-max-h-[20rem] pbx-min-h-[20rem] pbx-max-h-[20rem] pbx-overflow-y-auto"
           />
         </div>
       </div>

package/src/DemoComponents/DemoBuilderComponents.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <p class="myPrimaryParagraph">Demo builder components here</p>
+    <p class="pbx-myPrimaryParagraph">Demo builder components here</p>
   </div>
 </template>

package/src/DemoComponents/DemoUnsplash.vue

@@ -42,7 +42,7 @@ const fetchUnsplash = async function () {
 
   try {
     const response = await fetch(
-      `https://api.unsplash.com/search/photos?page=${getCurrentPageNumber.value}&per_page=24&query=${getSearchTerm.value || 'magazine'}${orientationParam}`,
+      `https://api.unsplash.com/search/photos?page=${getCurrentPageNumber.value}&per_page=24&query=${getSearchTerm.value || 'kinfolk'}${orientationParam}`,
       {
         headers: {
           'Accept-Version': 'v1',
@@ -112,7 +112,7 @@ const applySelectedImage = async function (imageURL) {
 
 // on mounted
 onMounted(async () => {
-  getSearchTerm.value = localStorage.getItem('unsplash-query') || 'Magazine'
+  getSearchTerm.value = localStorage.getItem('unsplash-query') || 'kinfolk'
   getCurrentPageNumber.value = Number(localStorage.getItem('unsplash-page')) || 1
 
   await fetchUnsplash()
@@ -132,20 +132,22 @@ onMounted(async () => {
       >
         <label
           for="default-search"
-          class="mb-2 text-sm font-normal text-gray-900 sr-only dark:text-gray-300"
+          class="pbx-mb-2 pbx-text-sm pbx-font-normal pbx-text-gray-900 pbx-sr-only dark:pbx-text-gray-300"
           >Search</label
         >
 
-        <div class="mysearchBarWithOptions">
-          <div class="relative w-full">
-            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <div class="pbx-mysearchBarWithOptions">
+          <div class="pbx-relative pbx-w-full">
+            <div
+              class="pbx-flex pbx-absolute pbx-inset-y-0 pbx-left-0 pbx-items-center pbx-pl-3 pbx-pointer-events-none"
+            >
               <span class="material-symbols-outlined"> search </span>
             </div>
             <input
               type="search"
               id="search_query"
               v-model="getSearchTerm"
-              class="myPrimarySearchInput"
+              class="pbx-myPrimarySearchInput"
               autocomplete="off"
               placeholder="Search..."
             />
@@ -159,24 +161,24 @@ onMounted(async () => {
               }
             "
             type="submit"
-            class="myPrimaryTag break-keep mr-4"
+            class="pbx-myPrimaryTag pbx-break-keep pbx-mr-4"
           >
             Search
           </button>
         </div>
       </form>
-      <div class="mt-2">
+      <div class="pbx-mt-2">
         <div
           v-if="getUnsplashImages && getUnsplashImages.results"
-          class="flex lg:justify-between justify-end items-center gap-2 py-2 px-2 mb-1 rounded-full border border-gray-200 shadow-sm"
+          class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border pbx-border-gray-200 pbx-shadow-sm"
         >
-          <div class="lg:flex hidden justify-left items-center gap-2">
+          <div class="lg:pbx-flex pbx-hidden pbx-justify-left pbx-items-center pbx-gap-2">
             <button
               @click="searchByOrientation('landscape')"
               type="button"
-              class="myPrimaryTag"
+              class="pbx-myPrimaryTag"
               :class="{
-                'bg-myPrimaryBrandColor text-white': getOrientationValue === 'landscape',
+                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'landscape',
                 '': getOrientationValue !== 'landscape',
               }"
             >
@@ -185,9 +187,9 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('portrait')"
               type="button"
-              class="myPrimaryTag"
+              class="pbx-myPrimaryTag"
               :class="{
-                'bg-myPrimaryBrandColor text-white': getOrientationValue === 'portrait',
+                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'portrait',
                 '': getOrientationValue !== 'portrait',
               }"
             >
@@ -196,9 +198,9 @@ onMounted(async () => {
             <button
               @click="searchByOrientation('squarish')"
               type="button"
-              class="myPrimaryTag"
+              class="pbx-myPrimaryTag"
               :class="{
-                'bg-myPrimaryBrandColor text-white': getOrientationValue === 'squarish',
+                'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'squarish',
                 '': getOrientationValue !== 'squarish',
               }"
             >
@@ -212,21 +214,28 @@ onMounted(async () => {
               viewBox="0 0 24 24"
               stroke-width="2"
               stroke="currentColor"
-              class="w-4 h-4 cursor-pointer"
+              class="pbx-w-4 pbx-h-4 pbx-cursor-pointer"
             >
               <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </div>
 
-          <nav class="flex items-center gap-2 justify-start" aria-label="Pagination">
-            <p class="myPrimaryParagraph text-xs italic">
+          <nav
+            class="pbx-flex pbx-items-center pbx-gap-2 pbx-justify-start"
+            aria-label="Pagination"
+          >
+            <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
               Total pages {{ getUnsplashImages.total_pages }}
             </p>
-            <p class="myPrimaryParagraph text-xs italic">Images {{ getUnsplashImages.total }}</p>
-            <div class="flex flex-1 justify-between sm:justify-end items-center gap-2">
+            <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic">
+              Images {{ getUnsplashImages.total }}
+            </p>
+            <div
+              class="pbx-flex pbx-flex-1 pbx-justify-between sm:pbx-justify-end pbx-items-center pbx-gap-2"
+            >
               <span
                 v-if="Number(getCurrentPageNumber) !== 1"
-                class="myPrimaryParagraph text-xs italic pr-2 pl-1 cursor-pointer underline"
+                class="pbx-myPrimaryParagraph pbx-text-xs pbx-italic pbx-pr-2 pbx-pl-1 pbx-cursor-pointer pbx-underline"
                 @click="nextPage(Number((getCurrentPageNumber = 1)))"
               >
                 First page
@@ -235,7 +244,7 @@ onMounted(async () => {
             <button
               v-if="Number(getCurrentPageNumber) > 1"
               :disabled="Number(getCurrentPageNumber) < 1"
-              class="myPrimaryTag"
+              class="pbx-myPrimaryTag"
               @click="previousPage(Number(getCurrentPageNumber--))"
             >
               {{
@@ -243,14 +252,14 @@ onMounted(async () => {
               }}
             </button>
 
-            <span class="myPrimaryTag py-2.5 px-4">
+            <span class="pbx-myPrimaryTag py-2.5 pbx-px-4">
               {{ Number(getCurrentPageNumber) }}
             </span>
             <button
               :disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
-              class="myPrimaryTag"
+              class="pbx-myPrimaryTag"
               :class="{
-                'opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
+                'pbx-opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
               }"
               @click="nextPage(Number(getCurrentPageNumber++))"
             >
@@ -261,15 +270,15 @@ onMounted(async () => {
           </nav>
         </div>
 
-        <div class="min-h-[33rem] max-h-[33rem] flex gap-6">
-          <div class="w-9/12 pr-1 rounded-lg overflow-y-auto">
+        <div class="pbx-min-h-[33rem] pbx-max-h-[33rem] pbx-flex pbx-gap-6">
+          <div class="pbx-w-9/12 pbx-pr-1 pbx-rounded-lg pbx-overflow-y-auto">
             <div v-if="getIsLoading">
-              <div class="flex items-center justify-center mt-4">
+              <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
                 <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>
@@ -278,20 +287,20 @@ onMounted(async () => {
             <div v-if="getUnsplashImages && getUnsplashImages.results">
               <div
                 v-if="!getIsLoading"
-                class="grid md:grid-cols-4 sm:grid-cols-4 grid-cols-2 gap-2"
+                class="pbx-grid md:pbx-grid-cols-4 sm:pbx-grid-cols-4 pbx-grid-cols-2 pbx-gap-2"
               >
                 <div
                   v-for="image in getUnsplashImages.results"
                   :key="image.id"
                   @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
-                  class="border border-gray-200 my-2 px-2 p-2 cursor-pointer"
+                  class="pbx-border pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
                 >
                   <img
                     :alt="image.user.name"
-                    class="group block w-full overflow-hidden cursor-pointer"
+                    class="pbx-group pbx-block pbx-w-full pbx-overflow-hidden pbx-cursor-pointer"
                     :src="image.urls.thumb"
                   />
-                  <p class="myPrimaryParagraph text-xs font-normal mt-2">
+                  <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-mt-2">
                     By: {{ image.user.name }}
                   </p>
                 </div>
@@ -305,25 +314,29 @@ onMounted(async () => {
                 getUnsplashImages.results.length < 1
               "
             >
-              <p class="myPrimaryParagraph py-4 px-4">
+              <p class="pbx-myPrimaryParagraph pbx-py-4 pbx-px-4">
                 <span v-if="getCurrentPageNumber === 1">
                   We did not find any images. Make a new search.
                 </span>
-                <span v-if="getCurrentPageNumber > 1" @click="nextPage(1)" class="myPrimaryLink">
+                <span
+                  v-if="getCurrentPageNumber > 1"
+                  @click="nextPage(1)"
+                  class="pbx-myPrimaryLink"
+                >
                   No results on current page. Navigate to First Page.
                 </span>
               </p>
             </div>
           </div>
           <!-- Sidebar # start -->
-          <aside class="w-3/12 overflow-y-auto">
+          <aside class="pbx-w-3/12 pbx-overflow-y-auto">
             <template v-if="getIsLoadingImage">
-              <div class="flex items-center justify-center mt-4">
+              <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
                 <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>
@@ -331,21 +344,29 @@ onMounted(async () => {
             </template>
             <template v-if="getCurrentImage && !getIsLoadingImage">
               <img
-                class="mx-auto block w-full object-cover object-center cursor-pointer"
+                class="pbx-mx-auto pbx-block pbx-w-full pbx-object-cover pbx-object-center pbx-cursor-pointer"
                 :src="`${getCurrentImage}`"
                 alt="file"
               />
-              <div class="md:px-3 px-2">
+              <div class="md:pbx-px-3 pbx-px-2">
                 <div>
-                  <p class="myPrimaryParagraph font-normal text-gray-900 pt-4">Information</p>
-                  <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
-                    <div class="py-3 flex justify-between text-sm font-normal items-center">
-                      <dt class="text-gray-500">From:</dt>
-                      <dd class="text-gray-900">Unsplash</dd>
+                  <p class="pbx-myPrimaryParagraph pbx-font-normal pbx-text-gray-900 pbx-pt-4">
+                    Information
+                  </p>
+                  <dl
+                    class="pbx-mt-2 pbx-border-t pbx-border-b pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
+                  >
+                    <div
+                      class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
+                    >
+                      <dt class="pbx-text-gray-500">From:</dt>
+                      <dd class="pbx-text-gray-900">Unsplash</dd>
                     </div>
-                    <div class="py-3 flex justify-between text-sm font-normal items-center">
-                      <dt class="text-gray-500">By:</dt>
-                      <dd class="text-gray-900">{{ getCurrentUser }}</dd>
+                    <div
+                      class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
+                    >
+                      <dt class="pbx-text-gray-500">By:</dt>
+                      <dd class="pbx-text-gray-900">{{ getCurrentUser }}</dd>
                     </div>
                   </dl>
                 </div>
@@ -356,7 +377,9 @@ onMounted(async () => {
         <!-- Sidebar # end -->
 
         <!-- Actions footer # start -->
-        <div class="px-4 py-3 flex gap-2 border-t border-gray-200 mt-4 justify-end">
+        <div
+          class="pbx-px-4 pbx-py-3 pbx-flex pbx-gap-2 pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-justify-end"
+        >
           <button
             @click="
               () => {
@@ -364,7 +387,7 @@ onMounted(async () => {
                 localStorage.setItem('unsplash-page', getCurrentPageNumber)
               }
             "
-            class="mySecondaryButton"
+            class="pbx-mySecondaryButton"
             type="button"
           >
             Close
@@ -372,7 +395,7 @@ onMounted(async () => {
           <button
             v-if="getCurrentImage && typeof getCurrentImage === 'string'"
             @click="applySelectedImage(getCurrentImage)"
-            class="myPrimaryButton"
+            class="pbx-myPrimaryButton"
             type="button"
           >
             Select image
@@ -382,7 +405,7 @@ onMounted(async () => {
       </div>
     </div>
     <div>
-      <button class="sr-only">Focusable fallback</button>
+      <button class="pbx-sr-only">Focusable fallback</button>
     </div>
   </div>
 </template>