@designcrowd/library.brand-page 5.12.11 → 5.12.13-flacky-nav-1

package/lib/src/{CreatedOnBrandCrowd-de-de-B1UmWzii.js → CreatedOnBrandCrowd-de-de-DA54pbv_.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BRK1hM-D.js → CreatedOnBrandCrowd-en-us-CSdnyxOV.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CN_2N7lq.js → CreatedOnBrandCrowd-es-es-Q2ScIAvD.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BLLKZAU4.js → CreatedOnBrandCrowd-fr-fr-CCj4mK3I.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Btsu98RA.js → CreatedOnBrandCrowd-pt-pt-l5XmeGN-.js}

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

package/lib/src/{CreatedOnDcom-de-de-t1layjdN.js → CreatedOnDcom-de-de-PY5V1t67.js}

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

package/lib/src/{CreatedOnDcom-en-us-Cgr8OWqD.js → CreatedOnDcom-en-us--9TQ29dQ.js}

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

package/lib/src/{CreatedOnDcom-es-es-BU30p1A3.js → CreatedOnDcom-es-es-DVjOILUS.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-0WKXggE1.js → CreatedOnDcom-fr-fr-BzvmVXJs.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DugorNKz.js → CreatedOnDcom-pt-pt-C69FSzS-.js}

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

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.d.ts

@@ -9,6 +9,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     svgData: string;
     svgDataObjectUrl: string;
     originalSvgData: string;
+    svgWidth: number;
+    svgHeight: number;
 }, {
     useObjectElement(): boolean;
     backgroundShapesStyle(): BrandPageCssStyle;
@@ -17,6 +19,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     isValidSvgUrl(url: string): boolean;
     applySvgAttributes(svgData: string): string;
+    setInternalSvgWidthAndHeight(svgData: string): void;
     render(): Promise<void>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.js

@@ -18,14 +18,25 @@ export default defineComponent({
         },
     },
     data() {
-        return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+        return {
+            svgData: '',
+            svgDataObjectUrl: '',
+            originalSvgData: '',
+            svgWidth: 0,
+            svgHeight: 0,
+        };
     },
     computed: {
         useObjectElement() {
             return !!this.viewModel?.name.match(PROXY_SHAPE_URL_REGEX);
         },
         backgroundShapesStyle() {
-            return this.viewModel?.style || {};
+            const style = this.viewModel?.style || {};
+            if (!style.width && !style.height && this.svgWidth && this.svgHeight) {
+                style.width = this.svgWidth;
+                style.height = this.svgHeight;
+            }
+            return style;
         },
         isFullBackground() {
             return (this.viewModel.style.width === '100%' &&
@@ -91,6 +102,31 @@ export default defineComponent({
             }
             return svgData;
         },
+        setInternalSvgWidthAndHeight(svgData) {
+            const svgTagMatch = svgData.match(/<svg\b[^>]*>/i);
+            if (svgTagMatch) {
+                const svgTagSection = svgTagMatch[0];
+                const widthHeightMatches = svgTagSection.match(/\b(width|height)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi);
+                if (widthHeightMatches) {
+                    const widthMatch = widthHeightMatches.find((match) => match.startsWith('width='));
+                    const widthValue = widthMatch?.match(/([^"]*)/g)?.[2];
+                    const heightMatch = widthHeightMatches.find((match) => match.startsWith('height='));
+                    const heightValue = heightMatch?.match(/([^"]*)/g)?.[2];
+                    if (widthValue && !widthValue.endsWith('%')) {
+                        const lastChar = widthValue.slice(-1);
+                        this.svgWidth = lastChar.match(/\d/)
+                            ? `${widthValue}px`
+                            : `${widthValue}`;
+                    }
+                    if (heightValue && !heightValue.endsWith('%')) {
+                        const lastChar = heightValue.slice(-1);
+                        this.svgHeight = lastChar.match(/\d/)
+                            ? `${heightValue}px`
+                            : `${heightValue}`;
+                    }
+                }
+            }
+        },
         async render() {
             if (this.useObjectElement) {
                 return;
@@ -111,6 +147,7 @@ export default defineComponent({
                 this.svgData = this.originalSvgData;
             }
             this.svgData = this.applySvgAttributes(this.svgData);
+            this.setInternalSvgWidthAndHeight(this.svgData);
             const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
             const oldSvgDataObjectUrl = this.svgDataObjectUrl;
             // Create an Object URL

package/lib/src/brand-page/utils/migration/migration-01.d.ts

@@ -20,4 +20,4 @@ export declare const migrateConvertLineHeightOnFooterStyles: (brandPageModel: Br
 export declare const migration01: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

package/lib/src/brand-page/utils/migration/migration-01.js

@@ -857,7 +857,7 @@ export const migrateConvertLineHeightOnFooterStyles = (brandPageModel) => {
         };
     }
 };
-export const migration01 = (brandPageModel, options) => {
+export const migration01 = async (brandPageModel, options) => {
     if (!brandPageModel.brandPageType) {
         brandPageModel.brandPageType = BRAND_PAGE_TYPES.default;
     }

package/lib/src/brand-page/utils/migration/migration-02.d.ts

@@ -3,4 +3,4 @@ export declare const convertLetterSpacingRemToEm: (fontSizeInEmOrRem: string | u
 export declare const migration02: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

package/lib/src/brand-page/utils/migration/migration-02.js

@@ -31,7 +31,7 @@ const handleConversion = (style) => {
     }
     style.letterSpacing = convertLetterSpacingRemToEm(style.fontSize, style.letterSpacing);
 };
-export const migration02 = (brandPageModel, options) => {
+export const migration02 = async (brandPageModel, options) => {
     handleConversion(brandPageModel.pageHeaderDesktop?.navigation?.defaultButtonStyle);
     handleConversion(brandPageModel.pageHeaderMobile?.navigation?.defaultButtonStyle);
     handleConversion(brandPageModel.pageFooterDesktop?.copyrightStyle);

package/lib/src/brand-page/utils/migration/migration-03.d.ts

@@ -2,4 +2,4 @@ import { type BrandPageModel, type LogoImageModel } from '../..';
 export declare const migration03: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

package/lib/src/brand-page/utils/migration/migration-03.js

@@ -28,7 +28,7 @@ const migrateApplyAutoScaleProperty = (brandPageType, textStyle) => {
     textStyle.applyAutoScale =
         brandPageType && brandPageType === BRAND_PAGE_TYPES.brandSite;
 };
-export const migration03 = (brandPageModel, options) => {
+export const migration03 = async (brandPageModel, options) => {
     handleRecursiveFontSizeMigration(brandPageModel.pageHeaderDesktop);
     handleRecursiveFontSizeMigration(brandPageModel.pageHeaderMobile);
     handleRecursiveFontSizeMigration(brandPageModel.pageFooterDesktop);

package/lib/src/brand-page/utils/migration/migration-04.d.ts

@@ -2,4 +2,4 @@ import { type BrandPageModel, type LogoImageModel } from '../..';
 export declare const migration04: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

package/lib/src/brand-page/utils/migration/migration-04.js

@@ -86,7 +86,7 @@ const updateUserUploadedImageUrls = (content) => {
         });
     }
 };
-export const migration04 = (brandPageModel, options) => {
+export const migration04 = async (brandPageModel, options) => {
     if (brandPageModel.faviconUrl &&
         isUserUploadedImage(brandPageModel.faviconUrl)) {
         brandPageModel.faviconUrl = removeUserImageExtension(brandPageModel.faviconUrl);

package/lib/src/brand-page/utils/migration/migration-05.d.ts

@@ -1,2 +1,5 @@
-import { type BrandPageModel } from '../..';
-export declare const migration05: (brandPageModel: BrandPageModel) => BrandPageModel;
+import { type BrandPageModel, type LogoImageModel } from '../..';
+export declare const migration05: (brandPageModel: BrandPageModel, options: {
+    logoImage?: LogoImageModel;
+    isUserDraft: boolean;
+}) => Promise<BrandPageModel>;

package/lib/src/brand-page/utils/migration/migration-05.js

@@ -1,6 +1,6 @@
 import {} from '../..';
 import { isTextContent } from '../model.util';
-export const migration05 = (brandPageModel) => {
+export const migration05 = async (brandPageModel, options) => {
     brandPageModel.pages.forEach((page) => {
         page.contents.forEach((content) => {
             if (isTextContent(content)) {

package/lib/src/brand-page/utils/migration/migration-06.d.ts

@@ -0,0 +1,4 @@
+import { type BrandPageModel } from '../..';
+export declare const migration06: (brandPageModel: BrandPageModel, options: {
+    skipMigration06?: boolean;
+}) => Promise<BrandPageModel>;

package/lib/src/brand-page/utils/migration/migration-06.js

@@ -0,0 +1,96 @@
+import { DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, } from '../..';
+import { FabricRenderClient } from '../../../clients/fabric-render-client';
+export const migration06 = async (brandPageModel, options) => {
+    console.log('Running migration 06', options.skipMigration06);
+    if (options.skipMigration06 !== undefined && options.skipMigration06) {
+        return brandPageModel;
+    }
+    const header = brandPageModel.pageHeaderDesktop;
+    try {
+        console.log('Migration 06: Attempting to fetch logo dimensions from FabricRenderClient', header);
+        const headerLogo = brandPageModel.pageHeaderDesktop;
+        const fabricClient = FabricRenderClient.getInstance();
+        const logoData = headerLogo?.logoTemplateImage?.logoTemplateToken
+            ? await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(headerLogo.logoTemplateImage)
+            : await fabricClient.getLogoSvgUrlByLogoImageAsync(headerLogo.logoImage);
+        console.log('Migration 06: Fetched logo SVG URL', logoData);
+        // Try to fetch the logo image dimensions from the server
+        if (logoData && logoData.width && logoData.height) {
+            // Convert rem to pixels (assuming 1rem = 16px)
+            const remToPixels = (remValue) => {
+                const numericValue = parseFloat(remValue.replace('rem', ''));
+                return numericValue * 16;
+            };
+            // Helper function to calculate constrained dimensions for a specific section
+            const calculateConstrainedDimensions = (maxWidth, maxHeight) => {
+                const maxWidthPx = remToPixels(maxWidth);
+                const maxHeightPx = remToPixels(maxHeight);
+                // Calculate the actual displayed dimensions considering max-width and max-height constraints
+                const logoAspectRatio = logoData.width / logoData.height;
+                const maxAspectRatio = maxWidthPx / maxHeightPx;
+                let actualWidth;
+                let actualHeight;
+                if (logoAspectRatio > maxAspectRatio) {
+                    // Logo is wider relative to max dimensions, constrain by width
+                    actualWidth = Math.min(logoData.width, maxWidthPx);
+                    actualHeight = actualWidth / logoAspectRatio;
+                }
+                else {
+                    // Logo is taller relative to max dimensions, constrain by height
+                    actualHeight = Math.min(logoData.height, maxHeightPx);
+                    actualWidth = actualHeight * logoAspectRatio;
+                }
+                // Convert back to rem for consistency
+                const actualWidthRem = `${Math.round(actualWidth / 16)}rem`;
+                const actualHeightRem = `${Math.ceil(actualHeight / 16)}rem`;
+                return { width: actualWidthRem, height: actualHeightRem };
+            };
+            // Calculate dimensions for each section individually based on their own max constraints
+            // Header Desktop
+            if (brandPageModel.pageHeaderDesktop) {
+                const currentMaxWidth = brandPageModel.pageHeaderDesktop.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageHeaderDesktop.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                console.log('##############################################################################', 'Migration 06: Calculated dimensions for header desktop', currentMaxHeight, currentMaxWidth, dimensions);
+                brandPageModel.pageHeaderDesktop.logoImageHeight = dimensions.height;
+                // brandPageModel.pageHeaderDesktop.logoImageWidth = dimensions.width;
+            }
+            // Header Mobile
+            if (brandPageModel.pageHeaderMobile) {
+                const currentMaxWidth = brandPageModel.pageHeaderMobile.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageHeaderMobile.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageHeaderMobile.logoImageHeight = dimensions.height;
+                // brandPageModel.pageHeaderMobile.logoImageWidth = dimensions.width;
+            }
+            // Footer Desktop
+            if (brandPageModel.pageFooterDesktop) {
+                const currentMaxWidth = brandPageModel.pageFooterDesktop.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageFooterDesktop.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageFooterDesktop.logoImageHeight = dimensions.height;
+                // brandPageModel.pageFooterDesktop.logoImageWidth = dimensions.width;
+            }
+            // Footer Mobile
+            if (brandPageModel.pageFooterMobile) {
+                const currentMaxWidth = brandPageModel.pageFooterMobile.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageFooterMobile.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageFooterMobile.logoImageHeight = dimensions.height;
+                // brandPageModel.pageFooterMobile.logoImageWidth = dimensions.width;
+            }
+            console.log('Migration 06: Logo dimensions updated successfully');
+            console.log(`Original logo: ${logoData.width}x${logoData.height}px`);
+            console.log('Dimensions calculated for each section based on their individual constraints');
+        }
+    }
+    catch (error) {
+        // If fetching fails, silently continue without updating dimensions
+        console.warn('Migration 06: Failed to fetch logo dimensions:', error);
+    }
+    return brandPageModel;
+};

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

@@ -3,4 +3,5 @@ export declare const GetLatestModelVersion: () => number;
 export declare const migrateBrandPageModel: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+    skipMigration06?: boolean;
+}) => Promise<BrandPageModel>;

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

@@ -4,6 +4,7 @@ import { migration02 } from './migration/migration-02';
 import { migration03 } from './migration/migration-03';
 import { migration04 } from './migration/migration-04';
 import { migration05 } from './migration/migration-05';
+import { migration06 } from './migration/migration-06';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -25,18 +26,22 @@ const MIGRATION_TABLE = [
         version: 5,
         migrateFn: migration05,
     },
+    {
+        version: 6,
+        migrateFn: migration06,
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
-export const migrateBrandPageModel = (brandPageModel, options) => {
+export const migrateBrandPageModel = async (brandPageModel, options) => {
     let modelVersion = brandPageModel.v;
     if (!modelVersion) {
         modelVersion = 0;
     }
-    MIGRATION_TABLE.forEach((x) => {
+    for (const x of MIGRATION_TABLE) {
         if (modelVersion < x.version) {
-            brandPageModel = x.migrateFn(brandPageModel, options);
+            brandPageModel = await x.migrateFn(brandPageModel, options);
         }
-    });
+    }
     // Set the model to latest version
     brandPageModel.v = GetLatestModelVersion();
     return brandPageModel;

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

@@ -415,7 +415,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 if (!logoImage?.logoDraftToken) {
                     logoImage = logoUtil.safeGetLogoImageFromLogoImageUrl(logoVariationImageUrls[0]);
                 }
-                migrateBrandPageModel(brandPageModel, {
+                await migrateBrandPageModel(brandPageModel, {
                     logoImage,
                     isUserDraft: this.isUserDraft,
                 });

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

@@ -5329,25 +5329,20 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.logo__container[data-v-d24cdbe3] {
+.logo__container[data-v-c1563ab1] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
-}
-.logo__image[data-v-d24cdbe3] {
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  height: 6rem;
-}
-.brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.logo[data-v-0de93a73] {
+.logo[data-v-c1c57ff8] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;
 }
+.logo_wrapper[data-v-c1c57ff8] {
+  margin-top: var(--logo-spacing);
+  margin-bottom: var(--logo-spacing);
+}
 
 .form-error[data-v-806e6999] {
   font-size: 0.875rem;

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

@@ -5657,25 +5657,20 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.logo__container[data-v-d24cdbe3] {
+.logo__container[data-v-c1563ab1] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
-}
-.logo__image[data-v-d24cdbe3] {
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  height: 6rem;
-}
-.brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.logo[data-v-0de93a73] {
+.logo[data-v-c1c57ff8] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;
 }
+.logo_wrapper[data-v-c1c57ff8] {
+  margin-top: var(--logo-spacing);
+  margin-bottom: var(--logo-spacing);
+}
 
 .form-error[data-v-806e6999] {
   font-size: 0.875rem;

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

@@ -5347,25 +5347,20 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.logo__container[data-v-d24cdbe3] {
+.logo__container[data-v-c1563ab1] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
-}
-.logo__image[data-v-d24cdbe3] {
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  height: 6rem;
-}
-.brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.logo[data-v-0de93a73] {
+.logo[data-v-c1c57ff8] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;
 }
+.logo_wrapper[data-v-c1c57ff8] {
+  margin-top: var(--logo-spacing);
+  margin-bottom: var(--logo-spacing);
+}
 
 .form-error[data-v-806e6999] {
   font-size: 0.875rem;

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

@@ -5089,25 +5089,20 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.bp .logo__container[data-v-d24cdbe3] {
+.bp .logo__container[data-v-c1563ab1] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
-}
-.bp .logo__image[data-v-d24cdbe3] {
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  height: 6rem;
-}
-.bp .brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.bp .logo[data-v-0de93a73] {
+.bp .logo[data-v-c1c57ff8] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;
 }
+.bp .logo_wrapper[data-v-c1c57ff8] {
+  margin-top: var(--logo-spacing);
+  margin-bottom: var(--logo-spacing);
+}
 
 .bp .form-error[data-v-806e6999] {
   font-size: 0.875rem;

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { bw as E, an as T, aP as I, a3 as N, ag as S, ad as s, bo as A, c3 as e, c2 as O, c1 as G, bX as C, aZ as D, aY as P, bH as R, bI as t, bP as L, bE as M, bG as o, bF as b, bJ as r, bK as F, bW as n, bU as B, am as g, bV as l, a6 as i, aU as Y, aW as U, aV as d, e as c, f as H, B as u, Y as y, d as p, Z as K, j as k, aj as V, X, bn as m, bD as v, at as h, aR as W, aN as x, bS as f, bR as Z, C as w, b0 as z, D as Q, b as j, a as q, bN as J, a$ as $, aS as aa, aO as _a, b$ as Ea, c0 as Ta, bQ as Ia, bA as Na, ab as Sa, bT as sa, bY as Aa, b5 as ea, aF as Oa, bb as Ga, F as Ca, a5 as Da, a4 as Pa, h as Ra, $ as ta, b2 as La, aQ as Ma, aM as oa, a1 as ba, G as ra, I as Fa, H as na, a7 as Ba, bx as ga, b6 as la, b7 as ia, bv as Ya, bd as Ua, bf as da, b1 as ca, L as Ha, aE as ua, bk as ya, aK as pa, bj as Ka, ao as ka, a9 as Va, bO as Xa, bZ as ma, b_ as va, aT as ha, N as Wa, aw as xa, av as fa, ax as Za, ar as wa, as as za, au as Qa, b9 as ja, bg as qa, b3 as Ja, n as $a, ah as a_, ai as __, ae as E_, af as T_, ac as I_, a2 as N_, l as S_, bl as s_, al as A_, bB as e_, bC as O_, bM as G_, aa as C_, bz as D_, bm as P_, m as R_, S as t_, P as L_, aD as M_, by as o_, ba as b_, br as r_, bp as F_, bt as n_, bu as B_, bq as g_, bs as l_, ay as i_, az as Y_, bi as U_, bh as d_, bc as c_, aB as H_, aC as u_, aH as y_, aX as p_, aG as K_, aI as k_, U as V_, a8 as X_, aL as m_, k as v_, b8 as h_, ak as W_, b4 as x_, be as f_, a_ as Z_, M as w_, a0 as z_, g as Q_, bL as j_, q as q_, J as J_, W as $_, aA as aE, aJ as _E, ap as EE, o as TE, T as IE, r as NE, u as SE, i as sE, aq as AE, c as eE, p as OE, t as GE, R as CE, K as DE, s as PE, V as RE, y as tE, v as LE, w as ME, Q as oE, z as bE, O as rE, A as FE, E as nE, x as BE } from "./lib-CjyTfIxl.js";
+import { bw as E, an as T, aP as I, a3 as N, ag as S, ad as s, bo as A, c3 as e, c2 as O, c1 as G, bX as C, aZ as D, aY as P, bH as R, bI as t, bP as L, bE as M, bG as o, bF as b, bJ as r, bK as F, bW as n, bU as B, am as g, bV as l, a6 as i, aU as Y, aW as U, aV as d, e as c, f as H, B as u, Y as y, d as p, Z as K, j as k, aj as V, X, bn as m, bD as v, at as h, aR as W, aN as x, bS as f, bR as Z, C as w, b0 as z, D as Q, b as j, a as q, bN as J, a$ as $, aS as aa, aO as _a, b$ as Ea, c0 as Ta, bQ as Ia, bA as Na, ab as Sa, bT as sa, bY as Aa, b5 as ea, aF as Oa, bb as Ga, F as Ca, a5 as Da, a4 as Pa, h as Ra, $ as ta, b2 as La, aQ as Ma, aM as oa, a1 as ba, G as ra, I as Fa, H as na, a7 as Ba, bx as ga, b6 as la, b7 as ia, bv as Ya, bd as Ua, bf as da, b1 as ca, L as Ha, aE as ua, bk as ya, aK as pa, bj as Ka, ao as ka, a9 as Va, bO as Xa, bZ as ma, b_ as va, aT as ha, N as Wa, aw as xa, av as fa, ax as Za, ar as wa, as as za, au as Qa, b9 as ja, bg as qa, b3 as Ja, n as $a, ah as a_, ai as __, ae as E_, af as T_, ac as I_, a2 as N_, l as S_, bl as s_, al as A_, bB as e_, bC as O_, bM as G_, aa as C_, bz as D_, bm as P_, m as R_, S as t_, P as L_, aD as M_, by as o_, ba as b_, br as r_, bp as F_, bt as n_, bu as B_, bq as g_, bs as l_, ay as i_, az as Y_, bi as U_, bh as d_, bc as c_, aB as H_, aC as u_, aH as y_, aX as p_, aG as K_, aI as k_, U as V_, a8 as X_, aL as m_, k as v_, b8 as h_, ak as W_, b4 as x_, be as f_, a_ as Z_, M as w_, a0 as z_, g as Q_, bL as j_, q as q_, J as J_, W as $_, aA as aE, aJ as _E, ap as EE, o as TE, T as IE, r as NE, u as SE, i as sE, aq as AE, c as eE, p as OE, t as GE, R as CE, K as DE, s as PE, V as RE, y as tE, v as LE, w as ME, Q as oE, z as bE, O as rE, A as FE, E as nE, x as BE } from "./lib-BGkUIe2G.js";
 import { createPinia as lE, setActivePinia as iE } from "pinia";
 export {
   E as ABOUT_SECTION_SETTINGS_CONFIG,