@innovastudio/contentbuilder 1.4.10 → 1.4.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.10",
+  "version": "1.4.11",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -52384,138 +52384,138 @@ class ButtonEditor {
     /* rounded */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
                 `
     },
     /* colors */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
     },
     /* square */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
                 `
     },
     /* colors */
     {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
                 `
     }, {
       html: `
-                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
     }, {
       text: 'Order Now',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
     }, {
       text: 'Explore',
-      className: 'transition-all inline-block cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
     }, {
       text: 'View Demo',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
     }, {
       text: 'Get Started',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
     }, {
       text: 'Create',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
     }, {
       text: 'Hello!',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
     }, {
       text: 'Build',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
     }, {
       text: 'Contact',
-      className: 'transition-all inline-block border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
     }, {
       text: 'Read More',
-      className: 'transition-all inline-block cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
     }, {
       text: 'Send a Message',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
     }, {
       text: 'Our Works',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
     }, {
       text: 'Read More',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
     }, {
       text: 'Get a Quote',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
     }, {
       text: 'Try Demo',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
     }, {
       text: 'Buy Now',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
     }, {
       text: 'Play',
-      className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
+      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
     }];
     let html = '';
 
@@ -52681,15 +52681,16 @@ class ButtonEditor {
   }
 
   applyDefault(link) {
-    // const dom = this.dom;
-    // dom.addClass(link, 'transition-all');
+    const dom = this.dom; // dom.addClass(link, 'transition-all');
     // if(!dom.hasClass(link,'flex')) dom.addClass(link, 'inline-block');
     // dom.addClass(link, 'cursor-pointer');
     // dom.addClass(link, 'border-solid');
     // dom.addClass(link, 'leading-relaxed');
+
     link.removeAttribute('data-hover-bgcolor');
     link.removeAttribute('data-hover-color');
     link.removeAttribute('data-hover-bordercolor');
+    dom.addClass(link, 'whitespace-nowrap');
   }
 
   cleanupOldClasses(link) {
@@ -57464,6 +57465,22 @@ class RowTool {
                                 <label class="label-row-grayscale label-checkbox" for="chkRowGrayscale"><input id="chkRowGrayscale" class="chk-row-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
                             </div>
 
+                            <div class="div-row-wrapcolumns" style="display:flex;flex-direction:column;padding-bottom:7px">
+                                <div style="padding-top:20px;padding-bottom:3px;">${util.out('Wrap Columns (Breakpoint)')}:</div>
+                                <div style="padding-top:3px;display:flex;align-items: center;">
+                                    <button title="${util.out('Tablet (Landscape)')}" class="input-breakpoint" data-value="md" style="width:40px;height:25px;">
+                                        <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </button>
+                                    <button title="${util.out('Tablet (Portrait)')}" class="input-breakpoint" data-value="sm" style="width:40px;height:25px;">
+                                        <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </button>
+                                    <button title="${util.out('Mobile')}" class="input-breakpoint on" data-value="xs" style="width:40px;height:25px;">
+                                        <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                                    </button>
+
+                                </div>
+                            </div>
+
                             <div class="is-separator"></div>
                          
                             <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
@@ -57496,6 +57513,8 @@ class RowTool {
                                 </button>
                             </div>
 
+                            <label for="chkReverseColumns" style="margin:20px 0 0;display:flex"><input id="chkReverseColumns" type="checkbox"  style="margin:0 7px 0 0"/><span>${util.out('Reverse Columns')}</span></label>
+                            
                         </div>
 
                         <div id="divRowMore" class="is-tab-content" data-group="rowsettings" tabindex="-1">
@@ -57708,9 +57727,75 @@ class RowTool {
 
 
         this.builder.opts.onChange();
+      }); // Breakpoint
+
+      let btns = this.rowSettings.querySelectorAll('.input-breakpoint');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let row = util.rowSelected();
+          if (!row) return;
+          this.builder.uo.saveForUndo();
+          let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          let target = btn.getAttribute('data-value');
+
+          if (target === 'xs') {
+            row.classList.remove('sm-wrap');
+            row.classList.remove('md-wrap');
+          } else if (target === 'sm') {
+            row.classList.remove('md-wrap');
+            row.classList.add('sm-wrap');
+          } else if (target === 'md') {
+            row.classList.remove('smd-wrap');
+            row.classList.add('md-wrap');
+          } //Trigger Change event
+
+
+          this.builder.onChange();
+        });
+      });
+      const chkReverseBoxes = this.rowSettings.querySelector('#chkReverseColumns');
+      chkReverseBoxes.addEventListener('click', () => {
+        let row = util.rowSelected();
+        if (!row) return;
+        this.builder.uo.saveForUndo();
+        let divTarget = this.rowSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('xs-column-reverse');
+          } else {
+            row.classList.remove('xs-column-reverse');
+          }
+        } else if (target === 'sm') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('sm-column-reverse');
+          } else {
+            row.classList.remove('sm-column-reverse');
+          }
+        } else if (target === 'md') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('md-column-reverse');
+          } else {
+            row.classList.remove('md-column-reverse');
+          }
+        } else if (target === '') {
+          if (chkReverseBoxes.checked) {
+            row.classList.add('desktop-column-reverse');
+          } else {
+            row.classList.remove('desktop-column-reverse');
+          }
+        } //Trigger Change event
+
+
+        this.builder.settings.onChange();
       }); // Responsive Visibility
 
-      let btns = this.rowSettings.querySelectorAll('.input-device');
+      btns = this.rowSettings.querySelectorAll('.input-device');
       btns.forEach(btn => {
         btn.addEventListener('click', () => {
           let row = util.rowSelected();
@@ -57915,7 +58000,22 @@ class RowTool {
     let divVisibility = this.rowSettings.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
     let valVisibility = this.builder.responsive.getVisibility(row, target);
-    this.builder.responsive.showVisibility(divVisibility, valVisibility);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility); // Column reverse 
+
+    let valReverse = false;
+
+    if (target === 'xs') {
+      valReverse = row.classList.contains('xs-column-reverse');
+    } else if (target === 'sm') {
+      valReverse = row.classList.contains('sm-column-reverse');
+    } else if (target === 'md') {
+      valReverse = row.classList.contains('md-column-reverse');
+    } else {
+      valReverse = row.classList.contains('desktop-column-reverse');
+    }
+
+    const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
+    chkReverseColumns.checked = valReverse;
   }
 
   render(row) {
@@ -74714,7 +74814,8 @@ class Resizeable {
       minWidth: 50,
       minHeight: 50,
       adj: 4,
-      onResize: function () {}
+      onResize: function () {},
+      resizeHeight: false
     };
     this.opts = Object.assign(this, defaults, opts);
     const pane = this.pane;
@@ -74831,8 +74932,7 @@ class Resizeable {
       if (clicked && clicked.isResizing) {
         let newWidth;
         let newWHeight;
-
-        if (clicked.onBottomEdge) {
+        if (this.resizeHeight) if (clicked.onBottomEdge) {
           newWHeight = Math.max(y / scale, minHeight) + adj;
           pane.style.height = newWHeight + 'px';
         }
@@ -74861,13 +74961,13 @@ class Resizeable {
 
 
       if (onRightEdge && onBottomEdge) {
-        pane.style.cursor = 'nwse-resize';
+        if (this.resizeHeight) pane.style.cursor = 'nwse-resize';
       } else if (onBottomEdge && onLeftEdge) {
-        pane.style.cursor = 'nesw-resize';
+        if (this.resizeHeight) pane.style.cursor = 'nesw-resize';
       } else if (onRightEdge || onLeftEdge) {
         pane.style.cursor = 'ew-resize';
       } else if (onBottomEdge) {
-        pane.style.cursor = 'ns-resize';
+        if (this.resizeHeight) pane.style.cursor = 'ns-resize';
       } else {
         pane.style.cursor = '';
       }
@@ -74916,6 +75016,7 @@ class Resize {
     const row = col.parentNode;
     this.resize = new Resizeable({
       pane: col,
+      resizeHeight: this.builder.resizeHeight,
       onResize: (width, height) => {
         this.builder.util.hideControls();
         let numOfCols = 1;
@@ -76905,6 +77006,7 @@ class ContentBuilder {
       toolbar: 'top',
       toolbarDisplay: 'auto',
       shortenHTML: true,
+      resizeHeight: false,
       snippetsSidebarDisplay: 'auto',
       // snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
       // onImageSelectClick: function () { },