@designcrowd/library.brand-page 6.0.19-ast-btns-2 → 6.0.19-ast-btns-4

package/lib/src/{CreatedOnBrandCrowd-de-de-BI4rJV_V.js → CreatedOnBrandCrowd-de-de-sjNsYRcW.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Crf-sBeO.js → CreatedOnBrandCrowd-en-us-AzNub21R.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DE_kK1yb.js → CreatedOnBrandCrowd-es-es-5JGE8i4f.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BXhEu1vY.js → CreatedOnBrandCrowd-fr-ca-D_s0VxsF.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BXhEu1vY.js → CreatedOnBrandCrowd-fr-fr-D_s0VxsF.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DG1azcKI.js → CreatedOnBrandCrowd-pt-br-DNzVKTkD.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DG1azcKI.js → CreatedOnBrandCrowd-pt-pt-DNzVKTkD.js}

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

package/lib/src/{CreatedOnDcom-de-de-BFL99-ya.js → CreatedOnDcom-de-de-m9T1oefT.js}

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

package/lib/src/{CreatedOnDcom-en-us-DqWMpFgs.js → CreatedOnDcom-en-us-DyN0S9k3.js}

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

package/lib/src/{CreatedOnDcom-es-es-Ds0zIzXx.js → CreatedOnDcom-es-es-BvR812ln.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-X-GSmpwv.js → CreatedOnDcom-fr-ca-BcmRHpDd.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-Cm1eyNiD.js → CreatedOnDcom-fr-fr-BY7TQCJy.js}

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

package/lib/src/{CreatedOnDcom-pt-br-BUOePaaJ.js → CreatedOnDcom-pt-br-B_bocMtD.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CJSZsybQ.js → CreatedOnDcom-pt-pt-Fg8JoWmO.js}

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

package/lib/src/brand-page/components/collapsible/Collapsible.mixin.js

@@ -45,7 +45,9 @@ export default defineComponent({
             if (borderRadius === '9999px') {
                 containerStyle.borderRadius = '26px';
             }
-            if (this.cardStyle) {
+            // Guarded on backgroundColor so an empty {} never blanks the container
+            // (BP/BC contact-form card colour defaults to the button fill).
+            if (this.cardStyle?.backgroundColor) {
                 containerStyle.backgroundColor = this.cardStyle.backgroundColor;
             }
             // Own background colour decouples the container from the button fill (BP-5800).

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

@@ -158,8 +158,8 @@ export default defineComponent({
             // differs by website type:
             // - brandSite: the card style (card + divided layouts) or the section
             //   background (other layouts).
-            // - brand.page / brand.contact: there's no section background, so the
-            //   coloured surface is the global button fill.
+            // - brand.page / brand.contact: the container is the collapsible, whose
+            //   colour is the card colour (defaulting to the global button fill).
             // Falls back to the title colour when there's no solid colour to anchor to.
             const style = this.context.isBrandSite
                 ? this.hasCard || this.isDividedContent
@@ -167,7 +167,9 @@ export default defineComponent({
                     : this.hasBgColor
                         ? this.viewModel.backgroundStyle
                         : undefined
-                : this.viewModel.buttonStyles?.style;
+                : this.viewModel.cardStyle?.backgroundColor
+                    ? this.viewModel.cardStyle
+                    : this.viewModel.buttonStyles?.style;
             return (mutedTextForBackground(backgroundColorFromStyle(style)) ??
                 this.viewModel.titleStyle?.color);
         },

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

@@ -1,4 +1,3 @@
-import { BRAND_PAGE_TYPES } from '../../models';
 /**
  * BP-5800 — decouple the section container background from the global button fill.
  *
@@ -8,10 +7,10 @@ import { BRAND_PAGE_TYPES } from '../../models';
  * existing sites render identically while the colour becomes independently editable.
  *
  * runAlways + idempotent: only seeds when the colour is unset, so it never overrides
- * a colour the user has set.
+ * a colour the user has set. (contact-form is handled by migration-20 — its BP/BC
+ * container colour moved to `cardStyle`.)
  */
 const CONTAINER_BACKGROUND_TYPES = new Set([
-    'contact-form',
     'mailing-list',
     'request-payment',
     'support-me',
@@ -22,18 +21,11 @@ export const migration19 = async (migrationResult) => {
     if (buttonFill === undefined) {
         return migrationResult;
     }
-    const isBrandSite = brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite;
     brandPageModel.pages.forEach((page) => {
         page.contents.forEach((content) => {
             if (!CONTAINER_BACKGROUND_TYPES.has(content.type)) {
                 return;
             }
-            // contact-form already paints its own backgroundStyle on brand-site (default
-            // transparent); only its BP/BC container takes the button fill. mailing-list /
-            // payment use the button-fill container on every type, so they always seed.
-            if (content.type === 'contact-form' && isBrandSite) {
-                return;
-            }
             const block = content;
             if (block.backgroundStyle?.backgroundColor !== undefined) {
                 return;

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

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration20: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,24 @@
+import { BRAND_PAGE_TYPES } from '../../models';
+export const migration20 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    if (brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+        return migrationResult;
+    }
+    const buttonFill = brandPageModel.styles?.buttonStyles?.style?.backgroundColor;
+    if (buttonFill === undefined) {
+        return migrationResult;
+    }
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            if (content.type !== 'contact-form') {
+                return;
+            }
+            const block = content;
+            block.cardStyle = {
+                ...block.cardStyle,
+                backgroundColor: buttonFill,
+            };
+        });
+    });
+    return migrationResult;
+};

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

@@ -22,6 +22,7 @@ import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
 import { migration19 } from './migration/migration-19';
+import { migration20 } from './migration/migration-20';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -145,7 +146,12 @@ const MIGRATION_TABLE = [
         // runAlways: re-apply on every load so already-published sites pick up the seed
         // without a version bump. Idempotent — only seeds backgroundColor when unset.
         runAlways: true,
-        description: 'BP-5800: seed own container backgroundStyle from the button fill colour for contact-form, mailing-list, request-payment and support-me so the container background is independent of the site button (existing sites render unchanged)',
+        description: 'BP-5800: seed own container backgroundStyle from the button fill colour for mailing-list, request-payment and support-me so the container background is independent of the site button (existing sites render unchanged)',
+    },
+    {
+        version: 20,
+        migrateFn: migration20,
+        description: 'BP-5800: contact-form BP/BC container colour moves to cardStyle — seed cardStyle from the button fill (its long-standing rendered colour) so existing sites render unchanged',
     },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));

package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.d.ts

@@ -1,6 +1,7 @@
 import { type ContactFormContent } from '@brand-page';
 import type { VisibilityAssessor } from '../models';
 export declare const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
+export declare const contactCardColorVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
 export declare const displayTypeVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
 export declare const imageUrlVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;
 export declare const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<ContactFormContent | undefined>;

package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.js

@@ -9,6 +9,12 @@ export const contactCardDisplayTypeVisibilityAssessor = (content, context) => {
             ALIGN_RIGHT_FULL_IMAGE,
         ].includes(content?.layoutStyle)) && context.isBrandSite);
 };
+// Card colour picker: on brand-page/brand-contact it's the collapsible container
+// colour (shown for every layout); on brand-site it's the card in card layouts.
+export const contactCardColorVisibilityAssessor = (content, context) => {
+    return (!context.isBrandSite ||
+        contactCardDisplayTypeVisibilityAssessor(content, context));
+};
 export const displayTypeVisibilityAssessor = (content, context) => {
     return Boolean(content?.layoutStyle === '' || context.isBrandPage);
 };

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

@@ -3,8 +3,8 @@ import { createInitialButtonContent, createInitialImageContent, createInitialPro
 import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
-import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
-import { contactFormBackgroundColorDefaultGetter, logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
+import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardColorVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
+import { contactFormCardColorDefaultGetter, logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
 import { testimonialDisplayStyleConvertor } from '../convertors/testimonial-display-style-convertor';
@@ -455,9 +455,6 @@ const testimonialReplaceImageSettings = () => ({
     desiredWidth: undefined,
     mediaType: MEDIA_TYPES.image,
 });
-// Transparent bg is disallowed on the single-page side (brand-page /
-// brand-contact) so the added background colour stays a solid backdrop for the
-// decorative button styles (BP-5800); brand-site sections keep transparent.
 const disableTransparentOffBrandSite = (brandPageType) => brandPageType !== BRAND_PAGE_TYPES.brandSite;
 export const LOGO_SETTINGS_CONFIG = () => ({
     createInitialContent: createInitialLogoContent,
@@ -1474,7 +1471,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
-            disableTransparent: disableTransparentOffBrandSite,
+            disableTransparent: true,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: paymentFillColorFieldDefaultGetter,
         },
@@ -1656,7 +1653,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
-            disableTransparent: disableTransparentOffBrandSite,
+            disableTransparent: true,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: paymentFillColorFieldDefaultGetter,
         },
@@ -1732,7 +1729,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
-            disableTransparent: disableTransparentOffBrandSite,
+            disableTransparent: true,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: paymentFillColorFieldDefaultGetter,
         },
@@ -1874,7 +1871,8 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             disableTransparent: true,
             title: contentSettingsTr(`cardColorTitle`),
             valueConvertor: backgroundColorConvertor,
-            visibilityAssessor: contactCardDisplayTypeVisibilityAssessor,
+            visibilityAssessor: contactCardColorVisibilityAssessor,
+            defaultGetter: contactFormCardColorDefaultGetter,
         },
         backgroundStyle: {
             type: 'color',
@@ -1885,7 +1883,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             title: contentSettingsTr(`backgroundColorTitle`),
             disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
-            defaultGetter: contactFormBackgroundColorDefaultGetter,
+            visibilityAssessor: brandSiteTypeVisibilityAssessor,
         },
     },
     isEnabled: true,
@@ -2702,7 +2700,6 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
-            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
         },
     },

package/lib/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.d.ts

@@ -0,0 +1,8 @@
+import type { DefaultGetter } from '../models';
+/**
+ * Contact-form "Card color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the Card color picker to
+ * it. On brand-site the Card color applies to the card in card layouts and keeps its
+ * own seeded default — so no default here.
+ */
+export declare const contactFormCardColorDefaultGetter: DefaultGetter<BrandPageCssStyle>;

package/lib/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.js

@@ -0,0 +1,16 @@
+import { RGBAtoHex } from '@utils/helpers';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+/**
+ * Contact-form "Card color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the Card color picker to
+ * it. On brand-site the Card color applies to the card in card layouts and keeps its
+ * own seeded default — so no default here.
+ */
+export const contactFormCardColorDefaultGetter = (brandPage) => {
+    if (brandPage.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+        return {};
+    }
+    return {
+        backgroundColor: RGBAtoHex(brandPage.styles.buttonStyles.style.backgroundColor),
+    };
+};

package/lib/src/brand-page-maker/default-getters/index.d.ts

@@ -2,4 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
-export * from './contact-form-background-color.default-getter';
+export * from './contact-form-card-color.default-getter';

package/lib/src/brand-page-maker/default-getters/index.js

@@ -2,4 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
-export * from './contact-form-background-color.default-getter';
+export * from './contact-form-card-color.default-getter';

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

@@ -450,9 +450,12 @@ export const createInitialContactFormContent = (options) => {
         successMessage: contentSettingsTr(`formSuccessMessage`),
         responseEmail: options?.userState.emailAddress || '',
         type: 'contact-form',
-        cardStyle: {
-            backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
-        },
+        // brand-site: card layouts default to the logo bg. brand-page/brand-contact:
+        // leave empty so the collapsible container keeps the button-fill default (the
+        // Card colour picker still surfaces button-fill via its defaultGetter).
+        cardStyle: options?.brandPageType === BRAND_PAGE_TYPES.brandSite
+            ? { backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB }
+            : {},
         backgroundStyle: {},
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,

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

@@ -6188,59 +6188,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-04e03cb2] {
+.form-error[data-v-c29688a8] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-04e03cb2] {
+.contact-container[data-v-c29688a8] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-04e03cb2] {
+.c-text-padding[data-v-c29688a8] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-04e03cb2] {
+.device-wrapper--mobile .c-divided-container[data-v-c29688a8] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-04e03cb2] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-c29688a8] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full[data-v-04e03cb2] {
+.c-button-full[data-v-c29688a8] {
     width: 100%;
 }
   /* Match the button's full-width on published mobile. The maker uses the
      isMobileDevice prop for this; the renderer has no such state, so the
      decorative-button wrapper is widened here via the real viewport instead. */
-[data-v-04e03cb2] .bp-style-wrapper {
+[data-v-c29688a8] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-04e03cb2] {
+.c-col-span-2[data-v-c29688a8] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-04e03cb2] {
+.c-mobile-padding[data-v-c29688a8] {
     padding: 1rem;
 }
-.c-text-padding[data-v-04e03cb2] {
+.c-text-padding[data-v-c29688a8] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-04e03cb2] {
+.c-divided-container[data-v-c29688a8] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-04e03cb2] {
+.c-divided-container-reverse[data-v-c29688a8] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6248,16 +6248,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-04e03cb2] {
+.c-aspect-square[data-v-c29688a8] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-04e03cb2] {
+.c-divided-container[data-v-c29688a8] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-04e03cb2] {
+.c-divided-container-reverse[data-v-c29688a8] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;

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

@@ -6799,59 +6799,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-04e03cb2] {
+.form-error[data-v-c29688a8] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-04e03cb2] {
+.contact-container[data-v-c29688a8] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-04e03cb2] {
+.c-text-padding[data-v-c29688a8] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-04e03cb2] {
+.device-wrapper--mobile .c-divided-container[data-v-c29688a8] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-04e03cb2] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-c29688a8] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full[data-v-04e03cb2] {
+.c-button-full[data-v-c29688a8] {
     width: 100%;
 }
   /* Match the button's full-width on published mobile. The maker uses the
      isMobileDevice prop for this; the renderer has no such state, so the
      decorative-button wrapper is widened here via the real viewport instead. */
-[data-v-04e03cb2] .bp-style-wrapper {
+[data-v-c29688a8] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-04e03cb2] {
+.c-col-span-2[data-v-c29688a8] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-04e03cb2] {
+.c-mobile-padding[data-v-c29688a8] {
     padding: 1rem;
 }
-.c-text-padding[data-v-04e03cb2] {
+.c-text-padding[data-v-c29688a8] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-04e03cb2] {
+.c-divided-container[data-v-c29688a8] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-04e03cb2] {
+.c-divided-container-reverse[data-v-c29688a8] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6859,16 +6859,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-04e03cb2] {
+.c-aspect-square[data-v-c29688a8] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-04e03cb2] {
+.c-divided-container[data-v-c29688a8] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-04e03cb2] {
+.c-divided-container-reverse[data-v-c29688a8] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;