@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -4,7 +4,7 @@ import { getEmailValidationError, getMessageValidationError, getNameValidationEr
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
-import { getRenderText } from '@brand-page/utils';
+import { getRenderText, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
@@ -64,6 +64,9 @@ export default defineComponent({
             };
             return buttonTextStyle;
         },
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         hasCard() {
             return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
                 this.viewModel.layoutStyle === ALIGN_CARD_CENTER_IMAGE);
@@ -72,9 +75,10 @@ export default defineComponent({
             return this.viewModel.layoutStyle === ALIGN_CARD_CENTER_IMAGE;
         },
         hasBgColor() {
-            return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
-                this.viewModel.layoutStyle === TEXT_ONLY ||
-                this.viewModel.layoutStyle === ALIGN_CENTERED);
+            // Every brandSite layout applies the background colour on the section
+            // root (banner-style) so the padding control reveals it; for the image
+            // layouts it only shows in the padding bands around the image block.
+            return Boolean(this.viewModel.layoutStyle);
         },
         isCenteredLayout() {
             return (this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||

package/lib/src/brand-page/components/image-gallery/ImageGallery.mixin.d.ts

@@ -23,6 +23,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {
     imageModalSelectedImageIndex: number | undefined;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     getContainerStyle(): BrandPageCssStyle;
     images(): any[] | undefined;
     galleryType(): GalleryType;

package/lib/src/brand-page/components/image-gallery/ImageGallery.mixin.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import { GALLERY_TYPES } from '@brand-page/models';
@@ -29,6 +30,9 @@ export default defineComponent({
         };
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         getContainerStyle() {
             if (this.galleryType === 'carousel') {
                 const maxWidth = this.containerClientWidth

package/lib/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
 import type { ImageGalleryViewModel } from '../../../view-models';
 import type { DebounceHandle } from 'lodash.debounce';

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.d.ts

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isSubmitting: boolean;
     show: boolean;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     hasNameError(): boolean;
     hasEmailError(): boolean;
     hasFormError(): boolean;

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError } from '@brand-page/utils';
+import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, } from '@brand-page/utils';
 import { contentSettingsTr, mailingListTr, } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
@@ -51,6 +51,9 @@ export default defineComponent({
         }
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         hasNameError() {
             return !!this.nameError;
         },

package/lib/src/brand-page/components/navigation/hamburger/HamburgerNavigation.mixin.d.ts

@@ -12,10 +12,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isHamburgerRounded(): boolean;
 }, {
     openSideMenu(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "open-side-menu"[], "open-side-menu", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     navigation: {
         type: PropType<NavigationDesktop | NavigationMobile>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    "onOpen-side-menu"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/navigation/hamburger/HamburgerNavigation.mixin.js

@@ -7,6 +7,7 @@ export default defineComponent({
             required: true,
         },
     },
+    emits: ['open-side-menu'],
     computed: {
         iconStyle() {
             // rounded

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     toggleExpanded(pageId: string): void;
     isExpanded(pageId: string): boolean;
     expandSubPageIfCurrentPage(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close-side-menu"[], "close-side-menu", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     context: {
         type: PropType<BrandPageContext>;
         required: true;
@@ -53,5 +53,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<NavigationDesktop | NavigationMobile>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    "onClose-side-menu"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -18,6 +18,7 @@ export default defineComponent({
             required: true,
         },
     },
+    emits: ['close-side-menu'],
     data() {
         return {
             expandedItems: {}, // Keep track of which navs are expanded
@@ -41,15 +42,15 @@ export default defineComponent({
         },
         // Prevents us from doubling down on em sizing of font
         defaultWrapperStyle() {
-            const { fontSize, lineHeight, letterSpacing, ...rest } = this.defaultButtonStyle;
+            const { fontSize: _fontSize, lineHeight: _lineHeight, letterSpacing: _letterSpacing, ...rest } = this.defaultButtonStyle;
             return rest;
         },
         selectedWrapperStyle() {
-            const { fontSize, lineHeight, letterSpacing, ...rest } = this.selectedButtonStyle;
+            const { fontSize: _fontSize, lineHeight: _lineHeight, letterSpacing: _letterSpacing, ...rest } = this.selectedButtonStyle;
             return rest;
         },
         routes() {
-            return this.visibleNavItems.map((navItem, i) => {
+            return this.visibleNavItems.map((navItem, _i) => {
                 return {
                     routeName: navItem.routeName,
                     routeParams: navItem.routeParams,
@@ -79,7 +80,7 @@ export default defineComponent({
                 paddingLeft: '32px',
                 backgroundColor: isActive
                     ? baseStyle.backgroundColor
-                    : this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff',
+                    : (this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff'),
             };
         },
         closeSideMenu() {

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -145,8 +145,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     viewport: ViewportsType;
     isMobileDevice: boolean;
-    containerClientHeight: number | undefined;
     containerClientWidth: number | undefined;
+    containerClientHeight: number | undefined;
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;

package/lib/src/brand-page/components/page/PageComponent.mixin.d.ts

@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     brandPageToken: string;
     isMobileDevice: boolean;
-    containerClientHeight: number;
     containerClientWidth: number;
+    containerClientHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/payment/Payment.mixin.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     viewModel: {
-        type: PropType<SupportMeViewModel | RequestPaymentViewModel>;
+        type: PropType<RequestPaymentViewModel | SupportMeViewModel>;
         required: true;
     };
     paymentConfig: {
@@ -42,7 +42,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly CheckoutStripe: "checkout-stripe";
         readonly Success: "success";
     };
-    cart: CreateCartResult<unknown> | null | undefined;
+    cart: CreateCartResult<unknown> | undefined | null;
     isCollapsed: boolean;
     isPaymentConfigActive: boolean;
     state: State;
@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     viewModel: {
-        type: PropType<SupportMeViewModel | RequestPaymentViewModel>;
+        type: PropType<RequestPaymentViewModel | SupportMeViewModel>;
         required: true;
     };
     paymentConfig: {

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -3,33 +3,33 @@ export declare const context: {
     stripePublishableKey: string;
     isTemplate: boolean;
     isPreview: boolean;
-    isMobile?: boolean | undefined;
+    isMobile?: boolean;
     isDesignCom: boolean;
     isProduction: boolean;
     isServerRender: boolean;
     brandPageSlug: string;
-    brandPageToken?: string | undefined;
-    pages?: import("../../../view-models").PageViewModel[] | undefined;
+    brandPageToken?: string;
+    pages?: import("../../../view-models").PageViewModel[];
     nav: import("../../../view-models").NavViewModel;
-    currentPageRelativePath?: string | undefined;
+    currentPageRelativePath?: string;
     runtimeEnvironment: string;
     recaptchaSiteKey: string | undefined;
     pageTitle: string;
     customDomain: string | undefined;
-    brandPageType: "default" | "brandSite" | "brandContact";
+    brandPageType: import("../../../models").BrandPageType;
     isBrandPage: boolean;
     isBrandPageOrIsBrandContact: boolean;
     isBrandSite: boolean;
     isBrandContact: boolean;
     options?: {
-        disableNavigationSideMenu?: boolean | undefined;
-        mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
-        renderVideoAsImage?: boolean | undefined;
-        shouldPlayVideos?: boolean | undefined;
-        enableSaveContact?: boolean | undefined;
-    } | undefined;
-    abTests?: import("../../../models").AbTest | undefined;
+        disableNavigationSideMenu?: boolean;
+        mediaSizes?: import("../../../models").MediaSizes;
+        renderVideoAsImage?: boolean;
+        shouldPlayVideos?: boolean;
+        enableSaveContact?: boolean;
+    };
+    abTests?: import("../../../models").AbTest;
     isCapturingPreview: boolean;
-    disableLogoRenderOnServerside?: boolean | undefined;
+    disableLogoRenderOnServerside?: boolean;
 };
 export declare const viewModel: RequestPaymentViewModel;

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -3,33 +3,33 @@ export declare const context: {
     stripePublishableKey: string;
     isTemplate: boolean;
     isPreview: boolean;
-    isMobile?: boolean | undefined;
+    isMobile?: boolean;
     isDesignCom: boolean;
     isProduction: boolean;
     isServerRender: boolean;
     brandPageSlug: string;
-    brandPageToken?: string | undefined;
-    pages?: import("../../../view-models").PageViewModel[] | undefined;
+    brandPageToken?: string;
+    pages?: import("../../../view-models").PageViewModel[];
     nav: import("../../../view-models").NavViewModel;
-    currentPageRelativePath?: string | undefined;
+    currentPageRelativePath?: string;
     runtimeEnvironment: string;
     recaptchaSiteKey: string | undefined;
     pageTitle: string;
     customDomain: string | undefined;
-    brandPageType: "default" | "brandSite" | "brandContact";
+    brandPageType: import("../../../models").BrandPageType;
     isBrandPage: boolean;
     isBrandPageOrIsBrandContact: boolean;
     isBrandSite: boolean;
     isBrandContact: boolean;
     options?: {
-        disableNavigationSideMenu?: boolean | undefined;
-        mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
-        renderVideoAsImage?: boolean | undefined;
-        shouldPlayVideos?: boolean | undefined;
-        enableSaveContact?: boolean | undefined;
-    } | undefined;
-    abTests?: import("../../../models").AbTest | undefined;
+        disableNavigationSideMenu?: boolean;
+        mediaSizes?: import("../../../models").MediaSizes;
+        renderVideoAsImage?: boolean;
+        shouldPlayVideos?: boolean;
+        enableSaveContact?: boolean;
+    };
+    abTests?: import("../../../models").AbTest;
     isCapturingPreview: boolean;
-    disableLogoRenderOnServerside?: boolean | undefined;
+    disableLogoRenderOnServerside?: boolean;
 };
 export declare const viewModel: SupportMeViewModel;

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.d.ts

@@ -21,6 +21,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedPaymentOptionIds: string[];
     imageType: string;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     isCustomerRequestDetailsValid(): boolean;
     paymentRequestDetails(): PaymentRequestDetails;
     paymentOptions(): PaymentOption[];

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import { PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../../models';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
+import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 const MAX_CUSTOM_REQUEST_CHARS = 500;
 export default defineComponent({
@@ -28,6 +29,9 @@ export default defineComponent({
         };
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         isCustomerRequestDetailsValid() {
             return (!this.viewModel.requestPaymentConfig.isCustomerRequestDetailsEnabled ||
                 this.customerRequestDetails === undefined ||

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.d.ts

@@ -17,6 +17,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     prevCustomAmount: string;
     customAmount: string;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     isCustomAmountFieldVisible(): boolean;
     isCustomerMessageFieldVisible(): boolean;
     isCustomerMessageValid(): boolean;

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
-import { isPaymentAmountValid } from '../../../utils';
+import { isPaymentAmountValid, contentPaddingStyle as toContentPaddingStyle, } from '../../../utils';
 import { DEFAULT_CURRENCY_SYMBOL, DEFAULT_CURRENCY_CODE, } from '../../../constants';
 import { paymentTr } from '@src/composables/useTranslate';
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
@@ -24,6 +24,9 @@ export default defineComponent({
         };
     },
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         isCustomAmountFieldVisible() {
             return this.viewModel.supportMeConfig.paymentOptions.some((o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME);
         },

package/lib/src/brand-page/components/video/Video.mixin.d.ts

@@ -11,6 +11,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isCollapsed: boolean;
     title: string;
 }, {
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     arrowStyle(): BrandPageCssStyle;
     containerStyle(): BrandPageCssStyle;
     videoUrl(): string;

package/lib/src/brand-page/components/video/Video.mixin.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import { DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED, } from '../../constants';
 export default defineComponent({
@@ -16,6 +17,9 @@ export default defineComponent({
         title: 'Video',
     }),
     computed: {
+        contentPaddingStyle() {
+            return toContentPaddingStyle(this.viewModel);
+        },
         arrowStyle() {
             return {
                 color: this.viewModel.buttonStyles.style?.color,

package/lib/src/brand-page/constants/font.constants.d.ts

@@ -4,10 +4,10 @@ export declare const DISPLAY_TEXT_BODY = "Paragraphs";
 export declare const DISPlAY_TEXT_BUTTONS = "Button Texts";
 export declare const DEFAULT_TEXT_DECORATION: undefined;
 export declare const DEFAULT_FONT_STYLE: undefined;
-export declare const FONT_SIZE_TITLE = "2.25rem";
-export declare const FONT_SIZE_HEADINGS = "1.5rem";
-export declare const FONT_SIZE_BODY = "1rem";
-export declare const FONT_SIZE_PROFILE_NAME = "1.5rem";
+export declare const FONT_SIZE_TITLE = "2.25em";
+export declare const FONT_SIZE_HEADINGS = "1.5em";
+export declare const FONT_SIZE_BODY = "1em";
+export declare const FONT_SIZE_PROFILE_NAME = "1.5em";
 export declare const FONT_WEIGHT_PROFILE_NAME = "800";
 export declare const FONT_WEIGHT_NORMAL = "normal";
 export declare const LINE_HEIGHT_TITLE = "1.3";

package/lib/src/brand-page/constants/font.constants.js

@@ -5,10 +5,10 @@ export const DISPLAY_TEXT_BODY = 'Paragraphs';
 export const DISPlAY_TEXT_BUTTONS = 'Button Texts';
 export const DEFAULT_TEXT_DECORATION = undefined;
 export const DEFAULT_FONT_STYLE = undefined;
-export const FONT_SIZE_TITLE = '2.25rem';
-export const FONT_SIZE_HEADINGS = '1.5rem';
-export const FONT_SIZE_BODY = '1rem';
-export const FONT_SIZE_PROFILE_NAME = '1.5rem';
+export const FONT_SIZE_TITLE = '2.25em';
+export const FONT_SIZE_HEADINGS = '1.5em';
+export const FONT_SIZE_BODY = '1em';
+export const FONT_SIZE_PROFILE_NAME = '1.5em';
 export const FONT_WEIGHT_PROFILE_NAME = '800';
 export const FONT_WEIGHT_NORMAL = 'normal';
 export const LINE_HEIGHT_TITLE = '1.3';

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -29,6 +29,41 @@ export declare const TEXT_ONLY = "text-only";
 export declare const ALIGN_LEFT_FULL_IMAGE = "left-aligned-full-image";
 export declare const ALIGN_RIGHT_FULL_IMAGE = "right-aligned-full-image";
 export declare const ALTERNATE_IMAGE = "alternate-image";
+/**
+ * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
+ * had hard-coded before the sliders existed. Single source for new-block
+ * defaults (content-settings) and the migration backfill for existing pages.
+ * The image layouts (full-image divided and card-over-image) are 0: the bg
+ * image expands with the section padding (banner-style), so the default starts
+ * flush at the edges; the spacing inside/over the image stays fixed.
+ */
+export declare const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number>;
+/**
+ * Banner: full-bleed display styles (divided + full-width stacked) render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0 to
+ * match prod — the standard 32 would push the image off the edges. Every other
+ * banner style keeps 32. Used by the banner display-style convertor and the
+ * migration backfill, mirroring contact-form's per-layout map above.
+ */
+export declare const BANNER_DEFAULT_PADDING = 32;
+export declare const BANNER_FULL_BLEED_DISPLAY_STYLES: string[];
+export declare const bannerDisplayStyleDefaultPadding: (displayStyle?: string) => number;
+/**
+ * About: a flat 32 for every display style, including the two full-image styles.
+ * The full-image About renders the image inside the padded container, so the
+ * standard 32 band is the intended look. Used by the About display-style
+ * convertor and the migration backfill.
+ */
+export declare const ABOUT_DEFAULT_PADDING = 32;
+/**
+ * Testimonials: a single top/bottom value across both breakpoints, replacing the
+ * old 32px mobile / 80px desktop split. The same value applies to every display
+ * style (centered / big-image / columns) — they share one root, so padding does
+ * not vary by style. Used by the new-block default and the migration backfill.
+ * Default (BP-5703): 48px — the single value chosen for both breakpoints (replaces
+ * the old 32px mobile / 80px desktop split).
+ */
+export declare const TESTIMONIAL_DEFAULT_PADDING = 48;
 export declare const BIG_IMAGE = "big-image";
 export declare const MEDIA_ONLY = "media-only";
 export declare const COLUMNS = "columns";

package/lib/src/brand-page/constants/misc.constants.js

@@ -30,6 +30,57 @@ export const TEXT_ONLY = 'text-only';
 export const ALIGN_LEFT_FULL_IMAGE = 'left-aligned-full-image';
 export const ALIGN_RIGHT_FULL_IMAGE = 'right-aligned-full-image';
 export const ALTERNATE_IMAGE = 'alternate-image';
+/**
+ * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
+ * had hard-coded before the sliders existed. Single source for new-block
+ * defaults (content-settings) and the migration backfill for existing pages.
+ * The image layouts (full-image divided and card-over-image) are 0: the bg
+ * image expands with the section padding (banner-style), so the default starts
+ * flush at the edges; the spacing inside/over the image stays fixed.
+ */
+export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING = {
+    '': 0, // collapsible (default on Brand Page / Brand Contact)
+    [ALIGN_CENTERED]: 32,
+    [ALIGN_CARD_CENTER]: 32,
+    [ALIGN_CARD_CENTER_IMAGE]: 0,
+    [TEXT_ONLY]: 32,
+    [ALIGN_LEFT_FULL_IMAGE]: 0,
+    [ALIGN_RIGHT_FULL_IMAGE]: 0,
+};
+/**
+ * Banner: full-bleed display styles (divided + full-width stacked) render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0 to
+ * match prod — the standard 32 would push the image off the edges. Every other
+ * banner style keeps 32. Used by the banner display-style convertor and the
+ * migration backfill, mirroring contact-form's per-layout map above.
+ */
+export const BANNER_DEFAULT_PADDING = 32;
+export const BANNER_FULL_BLEED_DISPLAY_STYLES = [
+    ALIGN_LEFT_FULL_IMAGE,
+    ALIGN_RIGHT_FULL_IMAGE,
+    ALIGN_TOP_FULL_IMAGE,
+    ALIGN_BOTTOM_FULL_IMAGE,
+    ALIGN_MIDDLE_FULL_IMAGE,
+];
+export const bannerDisplayStyleDefaultPadding = (displayStyle) => displayStyle && BANNER_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
+    ? 0
+    : BANNER_DEFAULT_PADDING;
+/**
+ * About: a flat 32 for every display style, including the two full-image styles.
+ * The full-image About renders the image inside the padded container, so the
+ * standard 32 band is the intended look. Used by the About display-style
+ * convertor and the migration backfill.
+ */
+export const ABOUT_DEFAULT_PADDING = 32;
+/**
+ * Testimonials: a single top/bottom value across both breakpoints, replacing the
+ * old 32px mobile / 80px desktop split. The same value applies to every display
+ * style (centered / big-image / columns) — they share one root, so padding does
+ * not vary by style. Used by the new-block default and the migration backfill.
+ * Default (BP-5703): 48px — the single value chosen for both breakpoints (replaces
+ * the old 32px mobile / 80px desktop split).
+ */
+export const TESTIMONIAL_DEFAULT_PADDING = 48;
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

package/lib/src/brand-page/constants/sections/footer-display.constants.js

@@ -1,5 +1,5 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 export const FOOTER_DISPLAY = {
     /** @deprecated */
     ALIGN_CENTERED, // mapped to CENTERED

package/lib/src/brand-page/models/content.model.d.ts

@@ -47,6 +47,8 @@ export interface Content {
     id: string;
     type: ContentType;
     personalisationRole?: PersonalisationRole;
+    topPadding?: number;
+    bottomPadding?: number;
     imageUrlOverride?: string;
     imageUrlsOverride?: string;
     avatarImageUrlOverride?: string;

package/lib/src/brand-page/models/index.d.ts

@@ -42,7 +42,7 @@ export declare const GALLERY_TYPES: {
     readonly masonry: "masonry";
 };
 export type GalleryType = keyof typeof GALLERY_TYPES;
-export declare const availableGalleryTypes: ("grid" | "carousel" | "masonry")[];
+export declare const availableGalleryTypes: GalleryType[];
 export declare class GalleryStyles {
     galleryType: GalleryType;
     constructor(option?: Partial<GalleryStyles>);
@@ -547,6 +547,7 @@ export interface SaveContactOptions {
 }
 export declare class BrandPageModel {
     v: number;
+    userPromptContentKey?: string;
     styles: PageStyles;
     /** @deprecated */
     headerStyles?: AbstractPageHeaderStyles;

package/lib/src/brand-page/models/index.js

@@ -400,6 +400,9 @@ export class PageFooterMobile extends AbstractPageFooterStyles {
 export class BrandPageModel {
     // Model version
     v;
+    // AI personalisation key persisted with the draft so previews survive login/checkout-back/
+    // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
+    userPromptContentKey;
     styles;
     /** @deprecated */
     headerStyles;

package/lib/src/brand-page/models/payment.model.d.ts

@@ -50,7 +50,7 @@ export interface StripePaymentIntent {
     currency: string;
 }
 export declare const isStripePaymentIntent: (value: any) => value is StripePaymentIntent;
-export interface CreateCartResult<T> {
+export interface CreateCartResult<T = unknown> {
     cartId: string;
     paymentProviderName: string;
     paymentProviderExternalId: string;

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

@@ -0,0 +1,13 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export declare const contentPaddingStyle: (content: {
+    topPadding?: number;
+    bottomPadding?: number;
+}) => {
+    paddingTop: string;
+    paddingBottom: string;
+};

package/lib/src/brand-page/utils/content-padding.util.js

@@ -0,0 +1,10 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export const contentPaddingStyle = (content) => ({
+    paddingTop: `${content.topPadding ?? 0}px`,
+    paddingBottom: `${content.bottomPadding ?? 0}px`,
+});

package/lib/src/brand-page/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';