@designcrowd/library.brand-page 5.18.3-ast-subnav-5 → 5.18.3-button-fix-1

package/lib/src/{CreatedOnBrandCrowd-de-de-DlYq1LAT.js → CreatedOnBrandCrowd-de-de-DQLtpdLe.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BssRIQqn.js → CreatedOnBrandCrowd-en-us-CvEhlADd.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BGF9pptH.js → CreatedOnBrandCrowd-es-es-pYQeTTC0.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Caupqu2Z.js → CreatedOnBrandCrowd-fr-ca-CcE-iCEq.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Caupqu2Z.js → CreatedOnBrandCrowd-fr-fr-CcE-iCEq.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-s9q4uJ4u.js → CreatedOnBrandCrowd-pt-br-OyhWWWyO.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-s9q4uJ4u.js → CreatedOnBrandCrowd-pt-pt-OyhWWWyO.js}

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

package/lib/src/{CreatedOnDcom-de-de-UnYnZbA7.js → CreatedOnDcom-de-de-DH98FFLS.js}

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

package/lib/src/{CreatedOnDcom-en-us-rDv6H12L.js → CreatedOnDcom-en-us-DK67NN1r.js}

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

package/lib/src/{CreatedOnDcom-es-es-DKPLaT6o.js → CreatedOnDcom-es-es-9-QU4BU6.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DAv34bG7.js → CreatedOnDcom-fr-ca-U9J9H9VB.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DsOHnS8q.js → CreatedOnDcom-fr-fr-DqdzB1DJ.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DpjDBCLj.js → CreatedOnDcom-pt-br-c4UiWtkB.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-rFG0unf1.js → CreatedOnDcom-pt-pt-Do2qJsYp.js}

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

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

@@ -8,13 +8,6 @@ export declare class NavigationMenuStyles {
     subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
-export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
-/**
- * The hamburger sub nav background colour is auto color-matched only when the
- * user has not deliberately set it - i.e. it has no value or is transparent.
- * Any explicit colour (a hex) or an already color-matched key is preserved.
- */
-export declare const isUnsetOrTransparentColor: (color: string | undefined | null) => boolean;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };

package/lib/src/brand-page/models/navigation-styles.model.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -15,29 +15,6 @@ export class NavigationMenuStyles {
             options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
-export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
-    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
-        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
-        return STYLE_THEME_KEYS.LogoBackgroundColor;
-    }
-    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
-        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
-        return STYLE_THEME_KEYS.LogoTextColor;
-    }
-    return undefined;
-};
-/**
- * The hamburger sub nav background colour is auto color-matched only when the
- * user has not deliberately set it - i.e. it has no value or is transparent.
- * Any explicit colour (a hex) or an already color-matched key is preserved.
- */
-export const isUnsetOrTransparentColor = (color) => {
-    if (color == null) {
-        return true;
-    }
-    const normalised = color.trim().toLowerCase();
-    return normalised === '' || normalised === 'transparent';
-};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
@@ -102,7 +79,7 @@ class NavigationStyles {
                 color: theme?.secondaryColor,
                 backgroundColor: theme?.primaryColor,
             },
-            // No sub nav default: a hex here defeats migration-16's colour match.
+            subNavBackgroundColor: theme?.secondaryColor,
         });
     }
 }

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

@@ -18,7 +18,6 @@ import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
-import { migration16 } from './migration/migration-16';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -116,12 +115,6 @@ const MIGRATION_TABLE = [
         migrateFn: migration15,
         description: 'Adding default mediaOverlayStyle to background styles',
     },
-    {
-        version: 16,
-        migrateFn: migration16,
-        runAlways: true,
-        description: 'Default sub nav background color to color match on for TAB_2 and hamburger navs depending on font color only on first load flow',
-    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -18,7 +18,7 @@ import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { setContentSettingsAddContentOptions } from './brandpage-maker-store-utils';
 import { useAdminLogoSettingsStore } from '../admin-logo-settings';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, transformToRTE, } from '@brand-page-maker/utils';
+import { isColorMatched, mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, transformToRTE, } from '@brand-page-maker/utils';
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '@shared/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
@@ -684,6 +684,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                         },
                     },
                 });
+                if (userStore.isAdmin && !this.isUserDraft) {
+                    for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
+                        const hamburger = navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][viewport].hamburgerMenuStyle;
+                        if (isColorMatched(hamburger.subNavBackgroundColor)) {
+                            hamburger.subNavBackgroundColor = undefined;
+                        }
+                    }
+                }
                 uiStore.setThirdPartySettings({
                     thirdPartySettings: {
                         unsplashApplicationName,

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

@@ -5703,7 +5703,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   content: '\00A0';
 }
 
-.c-button[data-v-1cc1be4f] {
+.c-button[data-v-dff82fb8] {
   --icon-h: 1.5rem;
   --icon-m-r: 2rem;
   --icon-m-icon: 0.5rem;
@@ -5714,61 +5714,70 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-align: center;
   text-decoration: none;
 }
-.bp-button[data-v-1cc1be4f] .c-button__icon-img img {
+
+/* Shape-library icons (vector, nested in .c-shape, no class on the img):
+   render at the default icon size, centered in normal flow like the SVG icons. */
+.bp-button[data-v-dff82fb8] .c-button__icon-img img {
   max-width: none;
   -o-object-fit: cover;
      object-fit: cover;
+  width: var(--icon-w);
+  height: var(--icon-h);
+}
+
+/* Raster image thumbnails (FallbackImage renders <img class="c-image">):
+   render larger/prominent and centered over the icon slot. */
+.bp-button[data-v-dff82fb8] .c-button__icon-img img.c-image {
   --icon-img-size: 2.3rem;
-  --icon-img-offset-x: calc((var(--button-p-x) - var(--button-p-y)) * 2);
   position: absolute;
   top: calc(var(--icon-img-size) / -2 + var(--icon-h) / 2);
-  left: calc(var(--icon-img-size) / -2 + var(--icon-img-offset-x));
+  left: calc(var(--icon-img-size) / -2 + var(--icon-w) / 2);
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }
-.c-button--disabled[data-v-1cc1be4f] {
+.c-button--disabled[data-v-dff82fb8] {
   pointer-events: none;
 }
-.c-button[data-v-1cc1be4f]:hover .c-button__label p {
+.c-button[data-v-dff82fb8]:hover .c-button__label p {
   text-decoration: underline;
 }
-.c-button__icon[data-v-1cc1be4f] {
+.c-button__icon[data-v-dff82fb8] {
   margin-right: var(--icon-m-r);
 }
-.bp-button[data-v-1cc1be4f] .c-button__icon-img {
+.bp-button[data-v-dff82fb8] .c-button__icon-img {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.c-button__label[data-v-1cc1be4f] {
+.c-button__label[data-v-dff82fb8] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.c-button__label--offset-sm[data-v-1cc1be4f] {
+.c-button__label--offset-sm[data-v-dff82fb8] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__label--offset-md[data-v-1cc1be4f] {
+.c-button__label--offset-md[data-v-dff82fb8] {
   -webkit-transform: translateX(-1.75rem);
           transform: translateX(-1.75rem);
 }
-.c-button__label--offset-lg[data-v-1cc1be4f] {
+.c-button__label--offset-lg[data-v-dff82fb8] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__no-icon[data-v-1cc1be4f] {
+.c-button__no-icon[data-v-dff82fb8] {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.device-wrapper--mobile .c-button__icon[data-v-1cc1be4f] {
+.device-wrapper--mobile .c-button__icon[data-v-dff82fb8] {
   margin: 0;
   margin-right: var(--icon-m-r);
 }
 @media (min-width: 767px) {
-.c-button__icon[data-v-1cc1be4f] {
+.c-button__icon[data-v-dff82fb8] {
     margin: 0 var(--icon-m-icon);
 }
 }
@@ -6148,57 +6157,57 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-b05afa44] {
+.form-error[data-v-e408a650] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-b05afa44] {
+.contact-container[data-v-e408a650] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-b05afa44] {
+.c-text-padding[data-v-e408a650] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-b05afa44] {
+.device-wrapper--mobile .c-divided-container[data-v-e408a650] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-b05afa44] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-e408a650] {
   -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-b05afa44] {
+.c-button-full[data-v-e408a650] {
     width: 100%;
 }
-.c-col-span-2[data-v-b05afa44] {
+.c-col-span-2[data-v-e408a650] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-b05afa44] {
+.c-mobile-padding[data-v-e408a650] {
     padding: 1rem;
 }
-.c-text-padding[data-v-b05afa44] {
+.c-text-padding[data-v-e408a650] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-py-6[data-v-b05afa44] {
+.c-py-6[data-v-e408a650] {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
 }
-.c-divided-container[data-v-b05afa44] {
+.c-divided-container[data-v-e408a650] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-b05afa44] {
+.c-divided-container-reverse[data-v-e408a650] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6206,16 +6215,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-b05afa44] {
+.c-aspect-square[data-v-e408a650] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-b05afa44] {
+.c-divided-container[data-v-e408a650] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-b05afa44] {
+.c-divided-container-reverse[data-v-e408a650] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -7391,7 +7400,7 @@ select[data-v-14e7c7c7] {
 }
 }
 
-.c-overlay[data-v-a8c3857a] {
+.c-overlay[data-v-2bbe6b3e] {
   position: fixed;
   inset: 0px;
   z-index: 40;
@@ -7409,23 +7418,22 @@ select[data-v-14e7c7c7] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-overlay--open[data-v-a8c3857a] {
+.c-overlay--open[data-v-2bbe6b3e] {
   opacity: 0.7;
 }
-.c-overlay--closed[data-v-a8c3857a] {
+.c-overlay--closed[data-v-2bbe6b3e] {
   pointer-events: none;
   display: none;
   opacity: 0;
 }
-.c-sidebar[data-v-a8c3857a] {
-  /* No hardcoded background: the panel background comes from the hamburger
-     defaultButtonStyle (bound via :style), so a transparent/unset default bg
-     renders transparent instead of being forced white  */
+.c-sidebar[data-v-2bbe6b3e] {
   position: fixed;
   inset: 0px;
   z-index: 50;
   height: 100%;
   width: 20rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -7437,26 +7445,26 @@ select[data-v-14e7c7c7] {
   max-width: 66%;
 }
 @media (min-width: 768px) {
-.device--mobile .c-sidebar[data-v-a8c3857a] {
+.device--mobile .c-sidebar[data-v-2bbe6b3e] {
     width: 66.666667%;
 }
 }
-.c-sidebar--closed[data-v-a8c3857a] {
+.c-sidebar--closed[data-v-2bbe6b3e] {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
   visibility: hidden;
 }
-.c-sidebar--open[data-v-a8c3857a] {
+.c-sidebar--open[data-v-2bbe6b3e] {
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
 }
-.c-chevron-transform[data-v-a8c3857a] {
+.c-chevron-transform[data-v-2bbe6b3e] {
   -webkit-transition: -webkit-transform 0.3s ease;
   transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
   transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 }
-.c-chevron-expanded[data-v-a8c3857a] {
+.c-chevron-expanded[data-v-2bbe6b3e] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
@@ -8036,25 +8044,27 @@ body {
           transform: scale(1.025);
 }
 
-.c-color[data-v-9af09d53] {
+.c-color[data-v-4dd5f95d] {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
-.c-color[data-v-9af09d53]:hover {
+.c-color[data-v-4dd5f95d]:hover {
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.025);
           transform: scale(1.025);
 }
-.c-transparent[data-v-9af09d53] {
-  background: linear-gradient(
-    135deg,
-    transparent calc(50% - 1.5px),
-    red 50%,
-    transparent calc(50% + 1.5px)
-  );
+.c-color[data-v-4dd5f95d] {
+  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+.c-color[data-v-4dd5f95d]:hover {
+  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
+  -webkit-transform: scale(1.025);
+          transform: scale(1.025);
 }
-.maker-color-palette__popup[data-v-9af09d53] {
+.maker-color-palette__popup[data-v-4dd5f95d] {
   position: absolute;
   padding: 0.625rem;
   background: white;
@@ -8068,13 +8078,13 @@ body {
   height: fit-content;
   max-width: 100%;
 }
-.maker-color-palette__widget-body[data-v-9af09d53] {
+.maker-color-palette__widget-body[data-v-4dd5f95d] {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.625rem;
 }
-.picker-button[data-v-9af09d53] {
+.picker-button[data-v-4dd5f95d] {
   width: 100%;
   border: 1px solid #878787;
   text-transform: uppercase;
@@ -8083,14 +8093,14 @@ body {
   cursor: pointer;
 }
 @media print, screen and (min-width: 40em) {
-.maker-color-palette__popup[data-v-9af09d53] {
+.maker-color-palette__popup[data-v-4dd5f95d] {
     bottom: initial;
     height: auto;
     top: 1.25rem;
     width: calc(100% - 36px);
 }
 }
-.maker-text-color__icon[data-v-9af09d53] {
+.maker-text-color__icon[data-v-4dd5f95d] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8104,7 +8114,7 @@ body {
   height: 32px;
   margin-top: 15px;
 }
-.maker-text-color__icon .active[data-v-9af09d53] {
+.maker-text-color__icon .active[data-v-4dd5f95d] {
   font-weight: bold;
   background: #e3e3e3;
 }