@designcrowd/library.brand-page 6.1.6-use-isadminmaker-1 → 6.1.6-use-isadminmaker-2

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -185,14 +185,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         },
         async recalculateLogoSizes(forceRecalculate = false) {
             const brandPageContainerStore = useBrandPageContainerStore();
-            const userStore = useBrandPageMakerUserStore();
             const pageSettingsStore = useUiPageSettingsStore();
             const logoSettingsStore = useUiLogoSettingsStore();
             const editableLogoStore = useUiEditableLogoStore();
-            if (!userStore.isAdminMaker && this.isBrandSite) {
+            if (!brandPageContainerStore.isAdminMaker && this.isBrandSite) {
                 await recalculateHeaderLogoSizes(pageSettingsStore, logoSettingsStore, editableLogoStore.editableLogoVariations, this.brandPageType, brandPageContainerStore.isPrePurchase, forceRecalculate);
             }
-            else if (!userStore.isAdminMaker && this.isBrandPageOrIsBrandContact) {
+            else if (!brandPageContainerStore.isAdminMaker &&
+                this.isBrandPageOrIsBrandContact) {
                 await recalculateLogoContentDimensions(pageSettingsStore, editableLogoStore.editableLogoVariations, logoSettingsStore.selectedLogoImage, brandPageContainerStore.isPrePurchase);
             }
         },
@@ -203,7 +203,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const templateSettingsStore = useUiTemplateSettingsStore();
             const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
             const backgroundSettingsStore = useUiBackgroundSettingsStore();
-            const userStore = useBrandPageMakerUserStore();
             const containerStore = useBrandPageContainerStore();
             const uiContentSettings = useUiContentSettingsStore();
             const editableLogoStore = useUiEditableLogoStore();
@@ -230,7 +229,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             let brandPageModel = cloneDeep(template.brandPageModel);
             // Apply selected logo image to logo contents
             const { logoImageUrl, logoImageBase64Url } = logoSettingsStore.selectedLogoImageUrl;
-            if (userStore.isAdminMaker) {
+            if (containerStore.isAdminMaker) {
                 const logoTemplateImage = logoUtil.safeGetLogoTemplateImageFromLogoTemplateImageUrl(logoImageUrl);
                 if (logoTemplateImage) {
                     brandPageModel = applyLogoTemplateImageToBrandPageTemplateModel(brandPageModel, logoTemplateImage);
@@ -334,7 +333,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 },
             });
             pageNavigationStore.setCurrentActivePage({});
-            if (userStore.isAdminMaker) {
+            if (containerStore.isAdminMaker) {
                 styleSettingsStore.setAdminStyleOptionDefaultValues();
                 backgroundSettingsStore.setAdminBackgroundOptionDefaultValues();
             }
@@ -342,7 +341,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             styleSettingsStore.setButtonStyles(brandPageModel.styles.buttonStyles);
             styleSettingsStore.setTextStyles(brandPageModel.styles.textStyles);
             styleSettingsStore.setGalleryStyles(brandPageModel.styles.galleryStyles);
-            if (!userStore.isAdminMaker) {
+            if (!containerStore.isAdminMaker) {
                 containerStore.setDesignTemplateToken({
                     designTemplateToken: this.selectedTemplateId,
                 });
@@ -903,7 +902,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     brandPageModel.styles = model.styles;
                     brandPageModel.pages = model.pages;
                 }
-                if (!userStore.isAdminMaker) {
+                if (!brandPageContainerStore.isAdminMaker) {
                     const { model } = applyLogoThemeToBrandPageModel(logoTheme, new BrandPageModel(brandPageModel));
                     brandPageModel.styles = model.styles;
                     brandPageModel.pageHeaderMobile = model.pageHeaderMobile;
@@ -1133,10 +1132,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             });
         },
         initialiseAdminMaker(payload) {
-            const userStore = useBrandPageMakerUserStore();
             const adminLogoSettingsStore = useAdminLogoSettingsStore();
             const uiContentSettings = useUiContentSettingsStore();
-            if (!userStore.isAdminMaker) {
+            if (!useBrandPageContainerStore().isAdminMaker) {
                 return;
             }
             adminLogoSettingsStore.setPreviewLogoTemplateModels({
@@ -1381,7 +1379,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const uiStore = useUiStore();
             const videoStore = useVideoStore();
             const brandPageContainerStore = useBrandPageContainerStore();
-            if (userStore.isAdminMaker && uiStore.logoTheme) {
+            if (brandPageContainerStore.isAdminMaker && uiStore.logoTheme) {
                 const themedBrandPage = applyLogoThemeToBrandPageModel(uiStore.logoTheme, this.brandPageData).model;
                 return getBrandPageViewModelFromBrandPageModel(themedBrandPage, this.brandPageToken, undefined, {
                     useOldLogoRenderSize: false,
@@ -1431,9 +1429,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             return !this.isSaving;
         },
         isPublished() {
-            const userStore = useBrandPageMakerUserStore();
             const brandPageContainerStore = useBrandPageContainerStore();
-            return !userStore.isAdminMaker && brandPageContainerStore.isPublished;
+            return (!brandPageContainerStore.isAdminMaker &&
+                brandPageContainerStore.isPublished);
         },
         isPublishing() {
             const brandPageContainerStore = useBrandPageContainerStore();
@@ -1453,7 +1451,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         },
         showBrandCrowdLogo() {
             const userStore = useBrandPageMakerUserStore();
-            return !userStore.isAdminMaker && userStore.features.showBrandCrowdLogo;
+            return (!useBrandPageContainerStore().isAdminMaker &&
+                userStore.features.showBrandCrowdLogo);
         },
     },
 });

package/lib/src/brand-page-maker/stores/ui/ui-store.js

@@ -2,7 +2,6 @@ import { defineStore } from 'pinia';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '@shared/models';
 import { DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, } from '@brand-page/constants';
 import { useBrandPageMakerStore, } from '../brandpage-maker';
-import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore, } from '../brandpage-container';
 import { DEFAULT_ADMIN_ENDPOINTS, DEFAULT_USER_ENDPOINTS, } from '@brand-page-maker/constants';
 import { getColorShades } from '@brand-page/utils';
@@ -79,9 +78,8 @@ export const useUiStore = defineStore('ui', {
             this.logoDraftToken = payload.logoDraftToken;
         },
         async triggerLockedContentClickedEvent(payload) {
-            const userStore = useBrandPageMakerUserStore();
             const brandPageContainerStore = useBrandPageContainerStore();
-            if (userStore.isAdminMaker) {
+            if (brandPageContainerStore.isAdminMaker) {
                 return;
             }
             await brandPageContainerStore.triggerLockedContentClickedEvent(payload.type);
@@ -103,8 +101,8 @@ export const useUiStore = defineStore('ui', {
     },
     getters: {
         endpoints: () => {
-            const userStore = useBrandPageMakerUserStore();
-            if (userStore.isAdminMaker) {
+            const brandPageContainerStore = useBrandPageContainerStore();
+            if (brandPageContainerStore.isAdminMaker) {
                 return DEFAULT_ADMIN_ENDPOINTS;
             }
             else {

package/lib/src/brand-page-maker/stores/user/user-store.d.ts

@@ -19,5 +19,4 @@ export declare const useBrandPageMakerUserStore: import("pinia").StoreDefinition
         brandPageCommissionPercentage?: number;
         features?: Partial<UserFeatures>;
     }): void;
-    setIsAdminMaker(isAdminMaker: boolean): void;
 }>;

package/lib/src/brand-page-maker/stores/user/user-store.js

@@ -24,12 +24,10 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
         emailAddress: '',
         hasPremiumSubscription: false,
         brandPageCommissionPercentage: undefined,
-        // Retained for backward-compat, superseded by `isAdminMaker`. Still populated by
-        // `setUserState`, but no longer read by library code — use `isAdminMaker` instead.
+        // Retained for backward-compat, superseded by the container store's `isAdminMaker`.
+        // Still populated by `setUserState`, but no longer read by library code — admin maker
+        // mode is a property of the editing container, not user identity.
         isAdmin: false,
-        // Identifies admin maker mode. Populated via the container store's `initialise`
-        // (see `setIsAdminMaker`), which is what library code now branches on.
-        isAdminMaker: false,
         userToken: undefined,
     }),
     actions: {
@@ -42,8 +40,5 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
             this.isAdmin = payload.isAdmin || false;
             this.features = Object.assign({}, this.features, payload.features);
         },
-        setIsAdminMaker(isAdminMaker) {
-            this.isAdminMaker = isAdminMaker;
-        },
     },
 });

package/lib/src/brand-page-maker/stores/video/video-store.js

@@ -53,7 +53,9 @@ export const useVideoStore = defineStore('video', {
             const isPrePurchase = brandPageContainerStore.isPrePurchase;
             const hasPremiumSubscription = userStore.hasPremiumSubscription;
             return (canUseGettyVideos &&
-                (userStore.isAdminMaker || isPrePurchase || hasPremiumSubscription));
+                (brandPageContainerStore.isAdminMaker ||
+                    isPrePurchase ||
+                    hasPremiumSubscription));
         },
     },
 });

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

@@ -8195,7 +8195,7 @@ body {
   background: #e3e3e3;
 }
 
-.card[data-v-c1dc7857] {
+.card[data-v-746ed367] {
   height: 9rem;
   width: 100%;
   cursor: pointer;
@@ -8204,7 +8204,7 @@ body {
   -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1)
 }
-.card-wrapper[data-v-c1dc7857] {
+.card-wrapper[data-v-746ed367] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8216,7 +8216,7 @@ body {
           justify-content: center;
   padding: 1.5rem
 }
-.card-wrapper img[data-v-c1dc7857] {
+.card-wrapper img[data-v-746ed367] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8931,11 +8931,11 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-984eb9e1]:focus-within {
+.rich-text-editor[data-v-d9421f5b]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-984eb9e1] {
+.style-editor[data-v-d9421f5b] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8946,7 +8946,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-984eb9e1] button:not(.c-button-style) {
+.style-editor[data-v-d9421f5b] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8956,16 +8956,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-984eb9e1] {
+.style-editor-button[data-v-d9421f5b] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-984eb9e1] {
+.toolbar-editor-button.active[data-v-d9421f5b] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-984eb9e1] {
+.toolbar-editor-button[data-v-d9421f5b] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -8983,7 +8983,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-984eb9e1] .ProseMirror {
+[data-v-d9421f5b] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -8996,13 +8996,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-984eb9e1] .ProseMirror {
+.editor-compact[data-v-d9421f5b] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-984eb9e1] .ProseMirror:focus {
+[data-v-d9421f5b] .ProseMirror:focus {
   outline: none;
 }
-[data-v-984eb9e1] .ProseMirror * {
+[data-v-d9421f5b] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9011,28 +9011,28 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-984eb9e1] .ProseMirror a s,[data-v-984eb9e1] .ProseMirror a strike,[data-v-984eb9e1] .ProseMirror a [data-strike] {
+[data-v-d9421f5b] .ProseMirror a s,[data-v-d9421f5b] .ProseMirror a strike,[data-v-d9421f5b] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-984eb9e1] .ProseMirror a,[data-v-984eb9e1] .ProseMirror a * {
+[data-v-d9421f5b] .ProseMirror a,[data-v-d9421f5b] .ProseMirror a * {
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-984eb9e1] {
+.error-message[data-v-d9421f5b] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-984eb9e1] {
+.popup-container[data-v-d9421f5b] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-984eb9e1] {
+.hyperlink-preview[data-v-d9421f5b] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-984eb9e1] {
+.popup-panel[data-v-d9421f5b] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9040,17 +9040,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-984eb9e1] input {
+.popup-panel[data-v-d9421f5b] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-984eb9e1] {
+.border[data-v-d9421f5b] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-984eb9e1] .text-dropdown-title {
+[data-v-d9421f5b] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9059,7 +9059,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-984eb9e1] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-d9421f5b] .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);
@@ -9068,56 +9068,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-984eb9e1],
-  .style-editor-button-textstyle[data-v-984eb9e1] {
+.style-editor-button-font[data-v-d9421f5b],
+  .style-editor-button-textstyle[data-v-d9421f5b] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-984eb9e1] {
+.style-editor-button.stepper[data-v-d9421f5b] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-984eb9e1] {
+.style-editor-button-stepper[data-v-d9421f5b] {
     max-width: 100%;
 }
-.border.desktop[data-v-984eb9e1] {
+.border.desktop[data-v-d9421f5b] {
     display: none;
 }
-.border.mobile[data-v-984eb9e1] {
+.border.mobile[data-v-d9421f5b] {
     display: block;
 }
-[data-v-984eb9e1] .left-align {
+[data-v-d9421f5b] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.hyperlink-popup[data-v-984eb9e1] {
+.hyperlink-popup[data-v-d9421f5b] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-984eb9e1] {
+.style-editor-button.stepper[data-v-d9421f5b] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-984eb9e1] {
+.style-editor-button-font[data-v-d9421f5b] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-984eb9e1] {
+.style-editor-button-stepper[data-v-d9421f5b] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-984eb9e1] {
+.style-editor-button-textstyle[data-v-d9421f5b] {
     max-width: 25%;
 }
-.border.desktop[data-v-984eb9e1] {
+.border.desktop[data-v-d9421f5b] {
     display: block;
 }
-.border.mobile[data-v-984eb9e1] {
+.border.mobile[data-v-d9421f5b] {
     display: none;
 }
-[data-v-984eb9e1] .left-align {
+[data-v-d9421f5b] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-984eb9e1]:hover {
+.drop-down-item[data-v-d9421f5b]:hover {
   background-color: #eee;
 }
 
@@ -9461,7 +9461,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   position: absolute
 }
 
-.section[data-v-49539528] {
+.section[data-v-1694af94] {
     margin-bottom: 1.5rem
 }
 

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

@@ -8810,7 +8810,7 @@ body {
   background: #e3e3e3;
 }
 
-.card[data-v-c1dc7857] {
+.card[data-v-746ed367] {
   height: 9rem;
   width: 100%;
   cursor: pointer;
@@ -8819,7 +8819,7 @@ body {
   -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1)
 }
-.card-wrapper[data-v-c1dc7857] {
+.card-wrapper[data-v-746ed367] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8831,7 +8831,7 @@ body {
           justify-content: center;
   padding: 1.5rem
 }
-.card-wrapper img[data-v-c1dc7857] {
+.card-wrapper img[data-v-746ed367] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9546,11 +9546,11 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-984eb9e1]:focus-within {
+.rich-text-editor[data-v-d9421f5b]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-984eb9e1] {
+.style-editor[data-v-d9421f5b] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9561,7 +9561,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-984eb9e1] button:not(.c-button-style) {
+.style-editor[data-v-d9421f5b] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9571,16 +9571,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-984eb9e1] {
+.style-editor-button[data-v-d9421f5b] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-984eb9e1] {
+.toolbar-editor-button.active[data-v-d9421f5b] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-984eb9e1] {
+.toolbar-editor-button[data-v-d9421f5b] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -9598,7 +9598,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-984eb9e1] .ProseMirror {
+[data-v-d9421f5b] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -9611,13 +9611,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-984eb9e1] .ProseMirror {
+.editor-compact[data-v-d9421f5b] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-984eb9e1] .ProseMirror:focus {
+[data-v-d9421f5b] .ProseMirror:focus {
   outline: none;
 }
-[data-v-984eb9e1] .ProseMirror * {
+[data-v-d9421f5b] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9626,28 +9626,28 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-984eb9e1] .ProseMirror a s,[data-v-984eb9e1] .ProseMirror a strike,[data-v-984eb9e1] .ProseMirror a [data-strike] {
+[data-v-d9421f5b] .ProseMirror a s,[data-v-d9421f5b] .ProseMirror a strike,[data-v-d9421f5b] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-984eb9e1] .ProseMirror a,[data-v-984eb9e1] .ProseMirror a * {
+[data-v-d9421f5b] .ProseMirror a,[data-v-d9421f5b] .ProseMirror a * {
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-984eb9e1] {
+.error-message[data-v-d9421f5b] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-984eb9e1] {
+.popup-container[data-v-d9421f5b] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-984eb9e1] {
+.hyperlink-preview[data-v-d9421f5b] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-984eb9e1] {
+.popup-panel[data-v-d9421f5b] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9655,17 +9655,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-984eb9e1] input {
+.popup-panel[data-v-d9421f5b] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-984eb9e1] {
+.border[data-v-d9421f5b] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-984eb9e1] .text-dropdown-title {
+[data-v-d9421f5b] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9674,7 +9674,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-984eb9e1] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-d9421f5b] .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);
@@ -9683,56 +9683,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-984eb9e1],
-  .style-editor-button-textstyle[data-v-984eb9e1] {
+.style-editor-button-font[data-v-d9421f5b],
+  .style-editor-button-textstyle[data-v-d9421f5b] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-984eb9e1] {
+.style-editor-button.stepper[data-v-d9421f5b] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-984eb9e1] {
+.style-editor-button-stepper[data-v-d9421f5b] {
     max-width: 100%;
 }
-.border.desktop[data-v-984eb9e1] {
+.border.desktop[data-v-d9421f5b] {
     display: none;
 }
-.border.mobile[data-v-984eb9e1] {
+.border.mobile[data-v-d9421f5b] {
     display: block;
 }
-[data-v-984eb9e1] .left-align {
+[data-v-d9421f5b] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.hyperlink-popup[data-v-984eb9e1] {
+.hyperlink-popup[data-v-d9421f5b] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-984eb9e1] {
+.style-editor-button.stepper[data-v-d9421f5b] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-984eb9e1] {
+.style-editor-button-font[data-v-d9421f5b] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-984eb9e1] {
+.style-editor-button-stepper[data-v-d9421f5b] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-984eb9e1] {
+.style-editor-button-textstyle[data-v-d9421f5b] {
     max-width: 25%;
 }
-.border.desktop[data-v-984eb9e1] {
+.border.desktop[data-v-d9421f5b] {
     display: block;
 }
-.border.mobile[data-v-984eb9e1] {
+.border.mobile[data-v-d9421f5b] {
     display: none;
 }
-[data-v-984eb9e1] .left-align {
+[data-v-d9421f5b] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-984eb9e1]:hover {
+.drop-down-item[data-v-d9421f5b]:hover {
   background-color: #eee;
 }
 
@@ -10076,7 +10076,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   position: absolute
 }
 
-.section[data-v-49539528] {
+.section[data-v-1694af94] {
     margin-bottom: 1.5rem
 }