@designcrowd/library.brand-page 6.1.1-json-prereq-2 → 6.1.1-json-prereq-4

package/lib/src/{CreatedOnBrandCrowd-de-de-r7USgAVD.js → CreatedOnBrandCrowd-de-de-Dk-G3RbI.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-Cl9PeQVq.js → CreatedOnBrandCrowd-en-us-AVAWRjbj.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-JQgWL1oM.js → CreatedOnBrandCrowd-es-es-C5Xq4Jln.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-MyYaZgId.js → CreatedOnBrandCrowd-fr-ca-BQXjmcrr.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-MyYaZgId.js → CreatedOnBrandCrowd-fr-fr-BQXjmcrr.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-D6FStQU6.js → CreatedOnBrandCrowd-pt-br-DRMRc1Zk.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-D6FStQU6.js → CreatedOnBrandCrowd-pt-pt-DRMRc1Zk.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-B_8Foa76.js";
+import { _ as t } from "./lib-uYwxz8qR.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-BL1nZZE6.js → CreatedOnDcom-de-de-Dd9-oQ34.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-B_8Foa76.js";
+import { _ as e } from "./lib-uYwxz8qR.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-C8R2eB3R.js → CreatedOnDcom-en-us-CnDfLzF4.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-B_8Foa76.js";
+import { _ as e } from "./lib-uYwxz8qR.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-Cw34v79P.js → CreatedOnDcom-es-es-bvqvI9gT.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-B_8Foa76.js";
+import { _ as e } from "./lib-uYwxz8qR.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-hQ7zuwhB.js → CreatedOnDcom-fr-ca-BG7UGFe8.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-B_8Foa76.js";
+import { _ as e } from "./lib-uYwxz8qR.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DYO-y4Qs.js → CreatedOnDcom-fr-fr-xdz35O_B.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-B_8Foa76.js";
+import { _ as e } from "./lib-uYwxz8qR.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-D_-6VWMA.js → CreatedOnDcom-pt-br-CLfHnCkk.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-B_8Foa76.js";
+import { _ as M } from "./lib-uYwxz8qR.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-C0bg2qxu.js → CreatedOnDcom-pt-pt-Z7FY0BXt.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-B_8Foa76.js";
+import { _ as M } from "./lib-uYwxz8qR.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/utils/text.util.d.ts

@@ -1,5 +1,17 @@
 export declare const getRenderText: (text: string) => string;
 export declare const escapeContentText: (text: unknown) => string | undefined;
+/**
+ * Character length of RTE content as the *editor* counts it — ProseMirror
+ * `doc.textContent`: text nodes concatenated with NO separator. This is the
+ * metric the MaxLength extension gates on, so length indicators must use it too.
+ *
+ * Do NOT use escapeContentText/jsonDocPlainText for length limiting: those
+ * join text nodes with a space for readable plain-text extraction, so they
+ * over-count by one character per inline mark boundary. Converting a word to a
+ * hyperlink (or bolding it, etc.) splits its text node, making the counter
+ * report length+1 for content the editor considers exactly at the cap (BP-5787).
+ */
+export declare const getContentTextLength: (value: unknown) => number;
 export declare const decodeHtmlEntities: (text: string) => string;
 export declare const unescapeContentText: (text: string) => string;
 export declare const encodeContentText: (text: string | undefined) => string | undefined;

package/lib/src/brand-page/utils/text.util.js

@@ -42,6 +42,38 @@ export const escapeContentText = (text) => {
         .replace(/(<([^>]+)>)/gi, '')
         .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
 };
+/**
+ * Character length of RTE content as the *editor* counts it — ProseMirror
+ * `doc.textContent`: text nodes concatenated with NO separator. This is the
+ * metric the MaxLength extension gates on, so length indicators must use it too.
+ *
+ * Do NOT use escapeContentText/jsonDocPlainText for length limiting: those
+ * join text nodes with a space for readable plain-text extraction, so they
+ * over-count by one character per inline mark boundary. Converting a word to a
+ * hyperlink (or bolding it, etc.) splits its text node, making the counter
+ * report length+1 for content the editor considers exactly at the cap (BP-5787).
+ */
+export const getContentTextLength = (value) => {
+    if (!value) {
+        return 0;
+    }
+    if (isTiptapDoc(value)) {
+        let length = 0;
+        const walk = (node) => {
+            if (typeof node?.text === 'string') {
+                length += node.text.length;
+            }
+            node?.content?.forEach(walk);
+        };
+        walk(value);
+        return length;
+    }
+    if (typeof value !== 'string') {
+        return 0;
+    }
+    // Legacy inline-HTML string: count visible text with tags stripped.
+    return value.replace(/(<([^>]+)>)/gi, '').length;
+};
 export const decodeHtmlEntities = (text) => {
     return text
         .replace(/&lt;/g, '<')

package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts

@@ -28,6 +28,14 @@ export declare const getPlainTextFromRTE: (content: unknown) => string;
  * concatenated visible text. Without this, `doc.length` is `undefined` (silently
  * disabling the check) and `doc.trim()` throws — the class of bug that survived
  * the `RichTextValue` widening because Vue Options-API `this`/item access is `any`.
+ *
+ * The JSON branch concatenates text nodes with NO separator, matching the
+ * editor's own char count (ProseMirror textContent) — the metric the MaxLength
+ * extension gates on. It deliberately does NOT reuse getRteJsonPlainText, whose
+ * space-join + trim (for readable plain-text extraction) over-counts by one per
+ * inline mark boundary — so hyperlinking or formatting a word made the item's
+ * max-length indicator disagree with the gate and fire at content that was
+ * actually under the cap (BP-5787).
  */
 export declare const getRteTextLength: (value: RichTextValue | null | undefined) => number;
 export declare const replaceTextInRTE: (existingHtml: string, newText: string) => string;

package/lib/src/brand-page-maker/utils/rich-text-editor.util.js

@@ -234,11 +234,28 @@ export const getPlainTextFromRTE = (content) => {
  * concatenated visible text. Without this, `doc.length` is `undefined` (silently
  * disabling the check) and `doc.trim()` throws — the class of bug that survived
  * the `RichTextValue` widening because Vue Options-API `this`/item access is `any`.
+ *
+ * The JSON branch concatenates text nodes with NO separator, matching the
+ * editor's own char count (ProseMirror textContent) — the metric the MaxLength
+ * extension gates on. It deliberately does NOT reuse getRteJsonPlainText, whose
+ * space-join + trim (for readable plain-text extraction) over-counts by one per
+ * inline mark boundary — so hyperlinking or formatting a word made the item's
+ * max-length indicator disagree with the gate and fire at content that was
+ * actually under the cap (BP-5787).
  */
 export const getRteTextLength = (value) => {
     if (typeof value === 'string')
         return value.length;
-    return value ? getRteJsonPlainText(value).length : 0;
+    if (!value)
+        return 0;
+    let length = 0;
+    const walk = (node) => {
+        if (typeof node.text === 'string')
+            length += node.text.length;
+        node.content?.forEach(walk);
+    };
+    walk(value);
+    return length;
 };
 export const replaceTextInRTE = (existingHtml, newText) => {
     if (!hasRTEContent(existingHtml)) {

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -1235,6 +1235,9 @@ a.maker-anchor {
 .tw-max-w-\[310px\] {
     max-width: 310px
 }
+.tw-max-w-\[350px\] {
+    max-width: 350px
+}
 .tw-max-w-\[448px\] {
     max-width: 448px
 }
@@ -8899,11 +8902,11 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-32483364]:focus-within {
+.rich-text-editor[data-v-14187e07]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-32483364] {
+.style-editor[data-v-14187e07] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8914,7 +8917,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-32483364] button:not(.c-button-style) {
+.style-editor[data-v-14187e07] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8924,16 +8927,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-32483364] {
+.style-editor-button[data-v-14187e07] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-32483364] {
+.toolbar-editor-button.active[data-v-14187e07] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-32483364] {
+.toolbar-editor-button[data-v-14187e07] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -8951,7 +8954,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-32483364] .ProseMirror {
+[data-v-14187e07] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -8964,13 +8967,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-32483364] .ProseMirror {
+.editor-compact[data-v-14187e07] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-32483364] .ProseMirror:focus {
+[data-v-14187e07] .ProseMirror:focus {
   outline: none;
 }
-[data-v-32483364] .ProseMirror * {
+[data-v-14187e07] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -8979,28 +8982,28 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-32483364] .ProseMirror a s,[data-v-32483364] .ProseMirror a strike,[data-v-32483364] .ProseMirror a [data-strike] {
+[data-v-14187e07] .ProseMirror a s,[data-v-14187e07] .ProseMirror a strike,[data-v-14187e07] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-32483364] .ProseMirror a,[data-v-32483364] .ProseMirror a * {
+[data-v-14187e07] .ProseMirror a,[data-v-14187e07] .ProseMirror a * {
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-32483364] {
+.error-message[data-v-14187e07] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-32483364] {
+.popup-container[data-v-14187e07] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-32483364] {
+.hyperlink-preview[data-v-14187e07] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-32483364] {
+.popup-panel[data-v-14187e07] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9008,17 +9011,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.popup-panel[data-v-32483364] input {
+.popup-panel[data-v-14187e07] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-32483364] {
+.border[data-v-14187e07] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-32483364] .text-dropdown-title {
+[data-v-14187e07] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9027,7 +9030,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-32483364] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-14187e07] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9036,56 +9039,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-32483364],
-  .style-editor-button-textstyle[data-v-32483364] {
+.style-editor-button-font[data-v-14187e07],
+  .style-editor-button-textstyle[data-v-14187e07] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-32483364] {
+.style-editor-button.stepper[data-v-14187e07] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-32483364] {
+.style-editor-button-stepper[data-v-14187e07] {
     max-width: 100%;
 }
-.border.desktop[data-v-32483364] {
+.border.desktop[data-v-14187e07] {
     display: none;
 }
-.border.mobile[data-v-32483364] {
+.border.mobile[data-v-14187e07] {
     display: block;
 }
-[data-v-32483364] .left-align {
+[data-v-14187e07] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.hyperlink-popup[data-v-32483364] {
+.hyperlink-popup[data-v-14187e07] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-32483364] {
+.style-editor-button.stepper[data-v-14187e07] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-32483364] {
+.style-editor-button-font[data-v-14187e07] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-32483364] {
+.style-editor-button-stepper[data-v-14187e07] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-32483364] {
+.style-editor-button-textstyle[data-v-14187e07] {
     max-width: 25%;
 }
-.border.desktop[data-v-32483364] {
+.border.desktop[data-v-14187e07] {
     display: block;
 }
-.border.mobile[data-v-32483364] {
+.border.mobile[data-v-14187e07] {
     display: none;
 }
-[data-v-32483364] .left-align {
+[data-v-14187e07] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-32483364]:hover {
+.drop-down-item[data-v-14187e07]:hover {
   background-color: #eee;
 }
 

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -1656,6 +1656,9 @@ a.maker-anchor {
 .tw-max-w-\[310px\] {
   max-width: 310px;
 }
+.tw-max-w-\[350px\] {
+  max-width: 350px;
+}
 .tw-max-w-\[448px\] {
   max-width: 448px;
 }
@@ -9510,11 +9513,11 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-32483364]:focus-within {
+.rich-text-editor[data-v-14187e07]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-32483364] {
+.style-editor[data-v-14187e07] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9525,7 +9528,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-32483364] button:not(.c-button-style) {
+.style-editor[data-v-14187e07] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9535,16 +9538,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-32483364] {
+.style-editor-button[data-v-14187e07] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-32483364] {
+.toolbar-editor-button.active[data-v-14187e07] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-32483364] {
+.toolbar-editor-button[data-v-14187e07] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -9562,7 +9565,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-32483364] .ProseMirror {
+[data-v-14187e07] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -9575,13 +9578,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-32483364] .ProseMirror {
+.editor-compact[data-v-14187e07] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-32483364] .ProseMirror:focus {
+[data-v-14187e07] .ProseMirror:focus {
   outline: none;
 }
-[data-v-32483364] .ProseMirror * {
+[data-v-14187e07] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9590,28 +9593,28 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-32483364] .ProseMirror a s,[data-v-32483364] .ProseMirror a strike,[data-v-32483364] .ProseMirror a [data-strike] {
+[data-v-14187e07] .ProseMirror a s,[data-v-14187e07] .ProseMirror a strike,[data-v-14187e07] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-32483364] .ProseMirror a,[data-v-32483364] .ProseMirror a * {
+[data-v-14187e07] .ProseMirror a,[data-v-14187e07] .ProseMirror a * {
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-32483364] {
+.error-message[data-v-14187e07] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-32483364] {
+.popup-container[data-v-14187e07] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-32483364] {
+.hyperlink-preview[data-v-14187e07] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-32483364] {
+.popup-panel[data-v-14187e07] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9619,17 +9622,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.popup-panel[data-v-32483364] input {
+.popup-panel[data-v-14187e07] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-32483364] {
+.border[data-v-14187e07] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-32483364] .text-dropdown-title {
+[data-v-14187e07] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9638,7 +9641,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-32483364] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-14187e07] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9647,56 +9650,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-32483364],
-  .style-editor-button-textstyle[data-v-32483364] {
+.style-editor-button-font[data-v-14187e07],
+  .style-editor-button-textstyle[data-v-14187e07] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-32483364] {
+.style-editor-button.stepper[data-v-14187e07] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-32483364] {
+.style-editor-button-stepper[data-v-14187e07] {
     max-width: 100%;
 }
-.border.desktop[data-v-32483364] {
+.border.desktop[data-v-14187e07] {
     display: none;
 }
-.border.mobile[data-v-32483364] {
+.border.mobile[data-v-14187e07] {
     display: block;
 }
-[data-v-32483364] .left-align {
+[data-v-14187e07] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.hyperlink-popup[data-v-32483364] {
+.hyperlink-popup[data-v-14187e07] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-32483364] {
+.style-editor-button.stepper[data-v-14187e07] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-32483364] {
+.style-editor-button-font[data-v-14187e07] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-32483364] {
+.style-editor-button-stepper[data-v-14187e07] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-32483364] {
+.style-editor-button-textstyle[data-v-14187e07] {
     max-width: 25%;
 }
-.border.desktop[data-v-32483364] {
+.border.desktop[data-v-14187e07] {
     display: block;
 }
-.border.mobile[data-v-32483364] {
+.border.mobile[data-v-14187e07] {
     display: none;
 }
-[data-v-32483364] .left-align {
+[data-v-14187e07] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-32483364]:hover {
+.drop-down-item[data-v-14187e07]:hover {
   background-color: #eee;
 }