@designcrowd/library.brand-page 5.15.27-ast-bug → 5.16.0-ast-bug

package/lib/src/{CreatedOnBrandCrowd-de-de-CkGQ4G_0.js → CreatedOnBrandCrowd-de-de-CQaFsHRq.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CI0R4imY.js → CreatedOnBrandCrowd-en-us-BqYPoS2-.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DfVOwAgX.js → CreatedOnBrandCrowd-es-es-BiXPRMaO.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CDzs65j6.js → CreatedOnBrandCrowd-fr-ca-CSSwi6HC.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CDzs65j6.js → CreatedOnBrandCrowd-fr-fr-CSSwi6HC.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DT5-KEqF.js → CreatedOnBrandCrowd-pt-br-fgBCi1Yx.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DT5-KEqF.js → CreatedOnBrandCrowd-pt-pt-fgBCi1Yx.js}

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

package/lib/src/{CreatedOnDcom-de-de-CrXmnwk7.js → CreatedOnDcom-de-de-JvCcqsZ3.js}

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

package/lib/src/{CreatedOnDcom-en-us-BxDKAimo.js → CreatedOnDcom-en-us-BzL4R7K1.js}

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

package/lib/src/{CreatedOnDcom-es-es-BV-bf9GA.js → CreatedOnDcom-es-es-BmxDrOv4.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BM0lK2ZN.js → CreatedOnDcom-fr-ca-CQXQARJP.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DAmKbip-.js → CreatedOnDcom-fr-fr-C_Q5VmJU.js}

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

package/lib/src/{CreatedOnDcom-pt-br-_tHW_OU7.js → CreatedOnDcom-pt-br-B_6hh63J.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CYkWyII5.js → CreatedOnDcom-pt-pt-D4Pyw8eD.js}

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

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

@@ -23,6 +23,7 @@ export declare const context: {
         disableNavigationSideMenu?: boolean | undefined;
         mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
         renderVideoAsImage?: boolean | undefined;
+        shouldPlayVideos?: boolean | undefined;
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;

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

@@ -23,6 +23,7 @@ export declare const context: {
         disableNavigationSideMenu?: boolean | undefined;
         mediaSizes?: "size1x" | "size2x" | "sizeThumb" | undefined;
         renderVideoAsImage?: boolean | undefined;
+        shouldPlayVideos?: boolean | undefined;
     } | undefined;
     abTests?: import("../../../models").AbTest | undefined;
     isCapturingPreview: boolean;

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

@@ -70,6 +70,7 @@ export interface BrandPageContext {
         disableNavigationSideMenu?: boolean;
         mediaSizes?: MediaSizes;
         renderVideoAsImage?: boolean;
+        shouldPlayVideos?: boolean;
     };
     abTests?: AbTest;
     /** Is brand page rendered for preview */

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

@@ -37,6 +37,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     isChangeTemplateConfirmModalVisible: import("vue").ComputedRef<boolean>;
     viewport: import("vue").ComputedRef<ViewportsType>;
+    shouldPlayVideos: import("vue").ComputedRef<boolean>;
+    hasGettyVideos: import("vue").ComputedRef<boolean>;
     deviceMode: import("vue").ComputedRef<"desktop" | "mobile">;
     isMobileDevice: import("vue").ComputedRef<boolean>;
     isMobileScreenSize: import("vue").ComputedRef<boolean>;
@@ -1140,6 +1142,39 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getProductModel(): import("../../../brand-page/models/shop.model").ProductModel;
     }>;
     router: import("vue-router").Router;
+    videoStore: import("pinia").Store<"video", import("../../stores").videoStoreState, {
+        getVideoUrlsForToken: (state: {
+            videoUrls: {
+                [x: string]: import("../../stores").VideoUrlData;
+            };
+            gettyImagesKeyPrefix: string;
+            shouldPlayVideos: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").videoStoreState>) => (token: string) => import("../../stores").VideoUrlData;
+        getPreviewS3VideoUrlsForToken: (state: {
+            videoUrls: {
+                [x: string]: import("../../stores").VideoUrlData;
+            };
+            gettyImagesKeyPrefix: string;
+            shouldPlayVideos: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").videoStoreState>) => (token: string) => {
+            videoUrl: string;
+            previewImageUrl: string;
+        };
+        getOptimisedS3VideoUrlsForToken: (state: {
+            videoUrls: {
+                [x: string]: import("../../stores").VideoUrlData;
+            };
+            gettyImagesKeyPrefix: string;
+            shouldPlayVideos: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").videoStoreState>) => (token: string) => {
+            videoUrl: string;
+            previewImageUrl: string;
+        };
+    }, {
+        setVideoUrlsWithToken(token: string, videoUrl: string, previewImageUrl: string, assetId: string): void;
+        setGettyImageKeyPrefix(prefix: string): void;
+        toggleShouldPlayVideo(): void;
+    }>;
 }, {
     mounted: boolean;
     isBrandPageLoaded: boolean;
@@ -1159,6 +1194,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onBackBrandPage(): void;
     onChangeTemplateConfirmModalCancel(): void;
     onChangeTemplateConfirmModalConfirm(): void;
+    onVideoPlayToggle(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     viewModel: {
         type: PropType<BrandPageMakerViewModel>;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -10,7 +10,7 @@ import { createInitialBrandPage } from '../../models';
 import { navigateToPageBySlug } from '../../routing';
 import { useBrandPageContainerStore } from '../../stores';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '../../../shared/models';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, } from '../../stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useVideoStore, } from '../../stores';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
@@ -42,12 +42,17 @@ export default defineComponent({
         const productSettingStore = useProductConfigStore();
         const router = useRouter();
         const localisedRouteStore = useLocalisedRouteStore();
+        const videoStore = useVideoStore();
         return {
             commonTr,
             currentNotificationMessage: computed(() => brandPageMakerStore.currentNotificationMessage),
             isChangeTemplateConfirmModalVisible: computed(() => brandPageMakerStore.isChangeTemplateConfirmModalVisible),
             // the state of Mobile/Desktop tab
             viewport: computed(() => brandPageMakerStore.viewport),
+            // the play setting for videos in maker
+            shouldPlayVideos: computed(() => videoStore.shouldPlayVideos),
+            hasGettyVideos: computed(() => brandPageMakerStore.gettyVideoIds &&
+                brandPageMakerStore.gettyVideoIds.length > 0),
             // the state of active Preview Device type
             deviceMode: computed(() => uiStore.deviceMode),
             isMobileDevice: computed(() => uiStore.deviceMode === UI_DEVICE_MODES.mobile),
@@ -79,6 +84,7 @@ export default defineComponent({
             shopSettingStore,
             productSettingStore,
             router,
+            videoStore,
         };
     },
     data() {
@@ -271,5 +277,8 @@ export default defineComponent({
         onChangeTemplateConfirmModalConfirm() {
             this.brandPageMakerStore.onChangeTemplateConfirmModalConfirm();
         },
+        onVideoPlayToggle() {
+            this.videoStore.toggleShouldPlayVideo();
+        },
     },
 });

package/lib/src/brand-page-maker/components/device/Device.mixin.d.ts

@@ -16,7 +16,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {
     visible: boolean;
     loadedOnce: boolean;
-}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {
+    toggleShouldPlay(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     isMobileDevice: {
         type: BooleanConstructor;
         required: true;

package/lib/src/brand-page-maker/components/device/Device.mixin.js

@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue';
-import { debounce } from '../../../shared/functions';
 import { DEVICE_CSS_TRANSITION_DELAY } from '../../constants';
 export default defineComponent({
     props: {
@@ -40,4 +39,9 @@ export default defineComponent({
             clearTimeout(t);
         }, 100);
     },
+    methods: {
+        toggleShouldPlay() {
+            this.$emit('toggle-should-play');
+        },
+    },
 });

package/lib/src/brand-page-maker/components/preview/Preview.mixin.d.ts

@@ -31,6 +31,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     isDesignCom: import("vue").ComputedRef<boolean>;
     isInitialising: import("vue").ComputedRef<boolean>;
+    shouldPlayVideos: import("vue").ComputedRef<boolean>;
     viewport: import("../../../brand-page").ViewportsType;
     abTests: Record<string, string>;
 }, {

package/lib/src/brand-page-maker/components/preview/Preview.mixin.js

@@ -2,7 +2,7 @@ import { defineComponent, computed } from 'vue';
 import debounce from 'lodash.debounce';
 import { HelloBar, Loader } from '@designcrowd/fe-shared-lib';
 import { BRAND_PAGE_TYPES, MEDIA_SIZES } from '../../../brand-page';
-import { useBrandPageContainerStore, useBrandPageMakerStore, useRouteStore, } from '../../../brand-page-maker/stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useRouteStore, useVideoStore, } from '../../../brand-page-maker/stores';
 import BrandPageMakerPage from '../brandpage-maker-page/BrandPageMakerPage.vue';
 const RESIZE_DEBOUNCE_WAIT_MS = 250;
 export default defineComponent({
@@ -39,10 +39,12 @@ export default defineComponent({
         const containerStore = useBrandPageContainerStore();
         const routeStore = useRouteStore();
         const brandPageMakerStore = useBrandPageMakerStore();
+        const videoStore = useVideoStore();
         return {
             currentRoute: computed(() => routeStore.currentRoute),
             isDesignCom: computed(() => containerStore.isDesignCom),
             isInitialising: computed(() => brandPageMakerStore.isInitialising),
+            shouldPlayVideos: computed(() => videoStore.shouldPlayVideos),
             viewport: brandPageMakerStore.viewport,
             abTests: containerStore.abTests,
         };
@@ -77,7 +79,8 @@ export default defineComponent({
                 isServerRender: false,
                 options: {
                     mediaSizes: MEDIA_SIZES.size1x,
-                    renderVideoAsImage: true,
+                    renderVideoAsImage: false,
+                    shouldPlayVideos: this.shouldPlayVideos,
                 },
                 stripePublishableKey: undefined,
                 runtimeEnvironment: this.runtimeEnvironment,

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -216,7 +216,7 @@ export default defineComponent({
             model = applyLogoThemeToBrandPageModel(this.logoTheme, model).model;
             this.viewModel = await getBrandPageViewModelFromBrandPageModel(model, undefined, false, {
                 useOldLogoRenderSize: false,
-                getVideoUrls: videoStore.getS3VideoUrlsForToken,
+                getVideoUrls: videoStore.getPreviewS3VideoUrlsForToken,
             });
             if (forceUpdate) {
                 this.$forceUpdate();

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

@@ -891,7 +891,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 return getBrandPageViewModelFromBrandPageModel(themedBrandPage, this.brandPageToken, undefined, {
                     useOldLogoRenderSize: false,
                     getVideoUrls: videoStore.getVideoUrlsForToken,
-                    getS3VideoUrls: videoStore.getS3VideoUrlsForToken,
+                    getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                     setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
                 });
             }
@@ -904,14 +904,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 return getBrandPageViewModelFromBrandPageModel(model, this.brandPageToken, showBrandCrowdLogo, {
                     useOldLogoRenderSize: false,
                     getVideoUrls: videoStore.getVideoUrlsForToken,
-                    getS3VideoUrls: videoStore.getS3VideoUrlsForToken,
+                    getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                     setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
                 });
             }
             return getBrandPageViewModelFromBrandPageModel(this.brandPageData, this.brandPageToken, showBrandCrowdLogo, {
                 useOldLogoRenderSize: false,
                 getVideoUrls: videoStore.getVideoUrlsForToken,
-                getS3VideoUrls: videoStore.getS3VideoUrlsForToken,
+                getS3VideoUrls: videoStore.getOptimisedS3VideoUrlsForToken,
                 setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
             });
         },

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

@@ -7,15 +7,26 @@ type VideoUrls = Record<string, VideoUrlData>;
 export interface videoStoreState {
     videoUrls: VideoUrls;
     gettyImagesKeyPrefix: string;
+    shouldPlayVideos: boolean;
 }
 export declare const useVideoStore: import("pinia").StoreDefinition<"video", videoStoreState, {
     getVideoUrlsForToken: (state: {
         videoUrls: VideoUrls;
         gettyImagesKeyPrefix: string;
+        shouldPlayVideos: boolean;
     } & import("pinia").PiniaCustomStateProperties<videoStoreState>) => (token: string) => VideoUrlData;
-    getS3VideoUrlsForToken: (state: {
+    getPreviewS3VideoUrlsForToken: (state: {
         videoUrls: VideoUrls;
         gettyImagesKeyPrefix: string;
+        shouldPlayVideos: boolean;
+    } & import("pinia").PiniaCustomStateProperties<videoStoreState>) => (token: string) => {
+        videoUrl: string;
+        previewImageUrl: string;
+    };
+    getOptimisedS3VideoUrlsForToken: (state: {
+        videoUrls: VideoUrls;
+        gettyImagesKeyPrefix: string;
+        shouldPlayVideos: boolean;
     } & import("pinia").PiniaCustomStateProperties<videoStoreState>) => (token: string) => {
         videoUrl: string;
         previewImageUrl: string;
@@ -23,5 +34,6 @@ export declare const useVideoStore: import("pinia").StoreDefinition<"video", vid
 }, {
     setVideoUrlsWithToken(token: string, videoUrl: string, previewImageUrl: string, assetId: string): void;
     setGettyImageKeyPrefix(prefix: string): void;
+    toggleShouldPlayVideo(): void;
 }>;
 export {};

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

@@ -4,6 +4,7 @@ export const useVideoStore = defineStore('video', {
     state: () => ({
         videoUrls: {},
         gettyImagesKeyPrefix: '',
+        shouldPlayVideos: true,
     }),
     actions: {
         setVideoUrlsWithToken(token, videoUrl, previewImageUrl, assetId) {
@@ -12,16 +13,25 @@ export const useVideoStore = defineStore('video', {
         setGettyImageKeyPrefix(prefix) {
             this.gettyImagesKeyPrefix = prefix;
         },
+        toggleShouldPlayVideo() {
+            this.shouldPlayVideos = !this.shouldPlayVideos;
+        },
     },
     getters: {
         getVideoUrlsForToken: (state) => (token) => {
             return state.videoUrls[token];
         },
-        getS3VideoUrlsForToken: (state) => (token) => {
+        getPreviewS3VideoUrlsForToken: (state) => (token) => {
             return {
                 videoUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_preview`,
                 previewImageUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_preview_thumb`,
             };
         },
+        getOptimisedS3VideoUrlsForToken: (state) => (token) => {
+            return {
+                videoUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_optimised`,
+                previewImageUrl: `${CDN_GETTY_S3_URL_PREFIX}/public/${state.gettyImagesKeyPrefix}/${token}/${token}_optimised_thumb`,
+            };
+        },
     },
 });

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

@@ -793,6 +793,9 @@ a.maker-anchor {
 .tw-max-h-screen-90 {
     max-height: 90vh
 }
+.tw-min-h-10 {
+    min-height: 2.5rem
+}
 .tw-min-h-14 {
     min-height: 3.5rem
 }
@@ -1015,6 +1018,9 @@ a.maker-anchor {
 .tw-w-svw {
     width: 100svw
 }
+.tw-min-w-10 {
+    min-width: 2.5rem
+}
 .tw-min-w-8 {
     min-width: 2rem
 }
@@ -8653,7 +8659,7 @@ input[type='number'][data-v-28a532b4] {
     margin-bottom: 1.5rem
 }
 
-.c-brand-page-maker[data-v-7ffa5653] {
+.c-brand-page-maker[data-v-b762f3c1] {
   --navigation-height-desktop: 64px;
   --navigation-height-mobile: 96px;
   --maker-height: 100vh;
@@ -8663,10 +8669,10 @@ input[type='number'][data-v-28a532b4] {
   height: calc(var(--maker-height) - var(--mobile-sidebar-bottom-height));
   padding-top: var(--navigation-height-mobile);
 }
-.c-brand-page-maker__inner[data-v-7ffa5653] {
+.c-brand-page-maker__inner[data-v-b762f3c1] {
   height: 100%;
 }
-.c-save-bar[data-v-7ffa5653] {
+.c-save-bar[data-v-b762f3c1] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8688,7 +8694,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-save-bar--visible[data-v-7ffa5653] {
+.c-save-bar--visible[data-v-b762f3c1] {
   visibility: visible !important;
   --tw-translate-y: 0px !important;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -8698,11 +8704,11 @@ input[type='number'][data-v-28a532b4] {
           transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (min-width: 1024px) {
-.c-brand-page-maker[data-v-7ffa5653] {
+.c-brand-page-maker[data-v-b762f3c1] {
     height: calc(var(--maker-height) - var(--navigation-height-desktop));
     padding-top: 0px;
 }
-.c-brand-page-maker__inner[data-v-7ffa5653] {
+.c-brand-page-maker__inner[data-v-b762f3c1] {
     height: 100%;
 }
 }

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

@@ -1215,6 +1215,9 @@ a.maker-anchor {
 .tw-max-h-screen-90 {
   max-height: 90vh;
 }
+.tw-min-h-10 {
+  min-height: 2.5rem;
+}
 .tw-min-h-14 {
   min-height: 3.5rem;
 }
@@ -1437,6 +1440,9 @@ a.maker-anchor {
 .tw-w-svw {
   width: 100svw;
 }
+.tw-min-w-10 {
+  min-width: 2.5rem;
+}
 .tw-min-w-8 {
   min-width: 2rem;
 }
@@ -8981,7 +8987,7 @@ input[type='number'][data-v-28a532b4] {
     margin-bottom: 1.5rem
 }
 
-.c-brand-page-maker[data-v-7ffa5653] {
+.c-brand-page-maker[data-v-b762f3c1] {
   --navigation-height-desktop: 64px;
   --navigation-height-mobile: 96px;
   --maker-height: 100vh;
@@ -8991,10 +8997,10 @@ input[type='number'][data-v-28a532b4] {
   height: calc(var(--maker-height) - var(--mobile-sidebar-bottom-height));
   padding-top: var(--navigation-height-mobile);
 }
-.c-brand-page-maker__inner[data-v-7ffa5653] {
+.c-brand-page-maker__inner[data-v-b762f3c1] {
   height: 100%;
 }
-.c-save-bar[data-v-7ffa5653] {
+.c-save-bar[data-v-b762f3c1] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -9016,7 +9022,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-save-bar--visible[data-v-7ffa5653] {
+.c-save-bar--visible[data-v-b762f3c1] {
   visibility: visible !important;
   --tw-translate-y: 0px !important;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -9026,11 +9032,11 @@ input[type='number'][data-v-28a532b4] {
           transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (min-width: 1024px) {
-.c-brand-page-maker[data-v-7ffa5653] {
+.c-brand-page-maker[data-v-b762f3c1] {
     height: calc(var(--maker-height) - var(--navigation-height-desktop));
     padding-top: 0px;
 }
-.c-brand-page-maker__inner[data-v-7ffa5653] {
+.c-brand-page-maker__inner[data-v-b762f3c1] {
     height: 100%;
 }
 }

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

@@ -811,6 +811,9 @@ a:not(.tw-lowercase) {
 .tw-max-h-screen-90 {
     max-height: 90vh
 }
+.tw-min-h-10 {
+    min-height: 2.5rem
+}
 .tw-min-h-14 {
     min-height: 3.5rem
 }
@@ -1033,6 +1036,9 @@ a:not(.tw-lowercase) {
 .tw-w-svw {
     width: 100svw
 }
+.tw-min-w-10 {
+    min-width: 2.5rem
+}
 .tw-min-w-8 {
     min-width: 2rem
 }
@@ -8671,7 +8677,7 @@ input[type='number'][data-v-28a532b4] {
     margin-bottom: 1.5rem
 }
 
-.c-brand-page-maker[data-v-7ffa5653] {
+.c-brand-page-maker[data-v-b762f3c1] {
   --navigation-height-desktop: 64px;
   --navigation-height-mobile: 96px;
   --maker-height: 100vh;
@@ -8681,10 +8687,10 @@ input[type='number'][data-v-28a532b4] {
   height: calc(var(--maker-height) - var(--mobile-sidebar-bottom-height));
   padding-top: var(--navigation-height-mobile);
 }
-.c-brand-page-maker__inner[data-v-7ffa5653] {
+.c-brand-page-maker__inner[data-v-b762f3c1] {
   height: 100%;
 }
-.c-save-bar[data-v-7ffa5653] {
+.c-save-bar[data-v-b762f3c1] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8706,7 +8712,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-save-bar--visible[data-v-7ffa5653] {
+.c-save-bar--visible[data-v-b762f3c1] {
   visibility: visible !important;
   --tw-translate-y: 0px !important;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -8716,11 +8722,11 @@ input[type='number'][data-v-28a532b4] {
           transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (min-width: 1024px) {
-.c-brand-page-maker[data-v-7ffa5653] {
+.c-brand-page-maker[data-v-b762f3c1] {
     height: calc(var(--maker-height) - var(--navigation-height-desktop));
     padding-top: 0px;
 }
-.c-brand-page-maker__inner[data-v-7ffa5653] {
+.c-brand-page-maker__inner[data-v-b762f3c1] {
     height: 100%;
 }
 }