@designcrowd/library.brand-page 5.17.28-ast-padding → 5.17.28-ast-padding-2

package/lib/src/{CreatedOnBrandCrowd-de-de-BKiqBMgr.js → CreatedOnBrandCrowd-de-de-B8LzXe5g.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BE9ztLEZ.js → CreatedOnBrandCrowd-en-us-Bma0CjMV.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-isBp-_KV.js → CreatedOnBrandCrowd-es-es-DpzZiHuW.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BHkyP1Ym.js → CreatedOnBrandCrowd-fr-ca-DZasmAHP.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BHkyP1Ym.js → CreatedOnBrandCrowd-fr-fr-DZasmAHP.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-D4EXIp5p.js → CreatedOnBrandCrowd-pt-br-CjqDeNHj.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-D4EXIp5p.js → CreatedOnBrandCrowd-pt-pt-CjqDeNHj.js}

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

package/lib/src/{CreatedOnDcom-de-de-DCyTITAn.js → CreatedOnDcom-de-de-BAoLQEiG.js}

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

package/lib/src/{CreatedOnDcom-en-us-Bwr-eCqH.js → CreatedOnDcom-en-us-DqmMg8Di.js}

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

package/lib/src/{CreatedOnDcom-es-es-DBMJ7xE-.js → CreatedOnDcom-es-es-DQRnkU0R.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-itsxeehe.js → CreatedOnDcom-fr-ca-Bl1ZQD9t.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-B8CIK3Dc.js → CreatedOnDcom-fr-fr-uOM-pJRl.js}

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

package/lib/src/{CreatedOnDcom-pt-br-mV_AMZNj.js → CreatedOnDcom-pt-br-CKVlVEWf.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-mwvCkhOd.js → CreatedOnDcom-pt-pt-CSmMPFAJ.js}

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

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

@@ -45,6 +45,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     submitButtonStyle(): BrandPageCssStyle;
     submitButtonTextStyle(): BrandPageCssStyle;
+    contentPaddingStyle(): {
+        paddingTop: string;
+        paddingBottom: string;
+    };
     hasCard(): boolean;
     hasBgImage(): boolean;
     hasBgColor(): boolean;

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/constants/misc.constants.d.ts

@@ -23,6 +23,17 @@ 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: their
+ * padding sits on the section root and reveals the background colour around
+ * the image block (same as the banner), while the spacing inside/over the
+ * image stays fixed — existing pages rendered the image flush to the section
+ * edges.
+ */
+export declare const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number>;
 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

@@ -24,6 +24,25 @@ 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: their
+ * padding sits on the section root and reveals the background colour around
+ * the image block (same as the banner), while the spacing inside/over the
+ * image stays fixed — existing pages rendered the image flush to the section
+ * edges.
+ */
+export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING = {
+    '': 0, // collapsible (default on Brand Page / Brand Contact)
+    [ALIGN_CENTERED]: 24,
+    [ALIGN_CARD_CENTER]: 32,
+    [ALIGN_CARD_CENTER_IMAGE]: 0,
+    [TEXT_ONLY]: 32,
+    [ALIGN_LEFT_FULL_IMAGE]: 0,
+    [ALIGN_RIGHT_FULL_IMAGE]: 0,
+};
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

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

@@ -1,3 +1,4 @@
+import { CONTACT_FORM_LAYOUT_DEFAULT_PADDING } from '../../constants';
 /**
  * Tier 2 Padding Control (BP-5699): blocks that already had hard-coded
  * top/bottom spacing. Backfill that spacing as the block's explicit
@@ -16,7 +17,11 @@ export const migration16 = async (migrationResult) => {
     const { brandPageModel } = migrationResult;
     brandPageModel.pages.forEach((page) => {
         page.contents.forEach((content) => {
-            const value = TIER2_DEFAULT_PADDING[content.type];
+            // Contact Form's previous hard-coded spacing varies by layout, so it's
+            // keyed by layoutStyle rather than a single per-type value.
+            const value = content.type === 'contact-form'
+                ? CONTACT_FORM_LAYOUT_DEFAULT_PADDING[content.layoutStyle ?? '']
+                : TIER2_DEFAULT_PADDING[content.type];
             if (value === undefined) {
                 return;
             }

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

@@ -119,7 +119,7 @@ const MIGRATION_TABLE = [
     {
         version: 16,
         migrateFn: migration16,
-        description: 'Tier 2 Padding Control (BP-5699): backfill existing top/bottom spacing as explicit padding for text (12px) and images, social links, shapes and booking (32px)',
+        description: 'Tier 2 Padding Control (BP-5699): backfill existing top/bottom spacing as explicit padding for text (12px), images, social links, shapes and booking (32px), and contact form (per layout)',
     },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1843,6 +1843,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             title: contentSettingsTr(`backgroundColorTitle`),
             valueConvertor: backgroundColorConvertor,
         },
+        ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddContactFormContents,

package/lib/src/brand-page-maker/convertors/contact-layout-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, TEXT_ONLY, ALIGN_CARD_CENTER, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, TEXT_ONLY, ALIGN_CARD_CENTER, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, } from '@brand-page/constants';
 export const contactLayoutStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -64,8 +64,13 @@ export const contactLayoutStyleConvertor = {
             selectedOption?.value === ALIGN_RIGHT_FULL_IMAGE) {
             textAlign = 'left';
         }
+        // Switching layout adopts that layout's canonical look — same as the
+        // textAlign resets below — including its default block padding.
+        const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[selectedOption?.value ?? ''] ?? 0;
         return {
             layoutStyle: selectedOption?.value,
+            topPadding: padding,
+            bottomPadding: padding,
             titleStyle: {
                 textAlign,
             },

package/lib/src/brand-page-maker/models/content-settings.js

@@ -1,4 +1,4 @@
-import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, } from '@brand-page';
+import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades } from '@brand-page/utils';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -368,13 +368,19 @@ export const createInitialContactFormContent = (options) => {
         typeof options?.userState.emailAddress === 'undefined') {
         console.error('userState.emailAddress should not be undefined');
     }
+    // New blocks inherit the padding their initial layout previously had
+    // hard-coded — same source as the migration backfill for existing pages.
+    const layoutStyle = options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '';
+    const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
     return {
         id: uuid.v4(),
         title: contentSettingsTr(`contactUsTitle`),
         description: '',
         buttonText: contentSettingsTr(`sendPlaceholder`),
         displayStyle: DISPLAY_STYLE_PREVIEW,
-        layoutStyle: options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
+        layoutStyle,
+        topPadding: padding,
+        bottomPadding: padding,
         imageUrl: '',
         fields: [
             {

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

@@ -6105,61 +6105,57 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-e7de4db0] {
+.form-error[data-v-d18b0e34] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-e7de4db0] {
+.contact-container[data-v-d18b0e34] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-e7de4db0] {
+.c-text-padding[data-v-d18b0e34] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-e7de4db0] {
+.device-wrapper--mobile .c-divided-container[data-v-d18b0e34] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-e7de4db0] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-d18b0e34] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full-width[data-v-e7de4db0] {
+.c-button-full-width[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
     width: 100%;
 }
-.c-button-full[data-v-e7de4db0] {
+.c-button-full[data-v-d18b0e34] {
     width: 100%;
 }
-.c-col-span-2[data-v-e7de4db0] {
+.c-col-span-2[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-e7de4db0] {
+.c-mobile-padding[data-v-d18b0e34] {
     padding: 1rem;
 }
-.c-text-padding[data-v-e7de4db0] {
+.c-text-padding[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-py-6[data-v-e7de4db0] {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-}
-.c-divided-container[data-v-e7de4db0] {
+.c-divided-container[data-v-d18b0e34] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-e7de4db0] {
+.c-divided-container-reverse[data-v-d18b0e34] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6167,16 +6163,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-e7de4db0] {
+.c-aspect-square[data-v-d18b0e34] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-e7de4db0] {
+.c-divided-container[data-v-d18b0e34] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-e7de4db0] {
+.c-divided-container-reverse[data-v-d18b0e34] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;

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

@@ -6423,61 +6423,57 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-e7de4db0] {
+.form-error[data-v-d18b0e34] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-e7de4db0] {
+.contact-container[data-v-d18b0e34] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-e7de4db0] {
+.c-text-padding[data-v-d18b0e34] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-e7de4db0] {
+.device-wrapper--mobile .c-divided-container[data-v-d18b0e34] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-e7de4db0] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-d18b0e34] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full-width[data-v-e7de4db0] {
+.c-button-full-width[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
     width: 100%;
 }
-.c-button-full[data-v-e7de4db0] {
+.c-button-full[data-v-d18b0e34] {
     width: 100%;
 }
-.c-col-span-2[data-v-e7de4db0] {
+.c-col-span-2[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-e7de4db0] {
+.c-mobile-padding[data-v-d18b0e34] {
     padding: 1rem;
 }
-.c-text-padding[data-v-e7de4db0] {
+.c-text-padding[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-py-6[data-v-e7de4db0] {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-}
-.c-divided-container[data-v-e7de4db0] {
+.c-divided-container[data-v-d18b0e34] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-e7de4db0] {
+.c-divided-container-reverse[data-v-d18b0e34] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6485,16 +6481,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-e7de4db0] {
+.c-aspect-square[data-v-d18b0e34] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-e7de4db0] {
+.c-divided-container[data-v-d18b0e34] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-e7de4db0] {
+.c-divided-container-reverse[data-v-d18b0e34] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;

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

@@ -6135,61 +6135,57 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-e7de4db0] {
+.form-error[data-v-d18b0e34] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-e7de4db0] {
+.contact-container[data-v-d18b0e34] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-e7de4db0] {
+.c-text-padding[data-v-d18b0e34] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-e7de4db0] {
+.device-wrapper--mobile .c-divided-container[data-v-d18b0e34] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-e7de4db0] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-d18b0e34] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full-width[data-v-e7de4db0] {
+.c-button-full-width[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
     width: 100%;
 }
-.c-button-full[data-v-e7de4db0] {
+.c-button-full[data-v-d18b0e34] {
     width: 100%;
 }
-.c-col-span-2[data-v-e7de4db0] {
+.c-col-span-2[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-e7de4db0] {
+.c-mobile-padding[data-v-d18b0e34] {
     padding: 1rem;
 }
-.c-text-padding[data-v-e7de4db0] {
+.c-text-padding[data-v-d18b0e34] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-py-6[data-v-e7de4db0] {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-}
-.c-divided-container[data-v-e7de4db0] {
+.c-divided-container[data-v-d18b0e34] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-e7de4db0] {
+.c-divided-container-reverse[data-v-d18b0e34] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6197,16 +6193,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-e7de4db0] {
+.c-aspect-square[data-v-d18b0e34] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-e7de4db0] {
+.c-divided-container[data-v-d18b0e34] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-e7de4db0] {
+.c-divided-container-reverse[data-v-d18b0e34] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;