@designcrowd/library.brand-page 5.12.14 → 5.12.15

package/lib/src/{CreatedOnBrandCrowd-de-de-CLvcrjGD.js → CreatedOnBrandCrowd-de-de-CZd7RKCS.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-IAccZs5I.js → CreatedOnBrandCrowd-en-us-DgUw_Gmk.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DiT9Jb5Q.js → CreatedOnBrandCrowd-es-es-qmEj0qtS.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C-ZE-8xH.js → CreatedOnBrandCrowd-fr-fr-WSAFNEbH.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BmzMx788.js → CreatedOnBrandCrowd-pt-pt-QQsa4zfN.js}

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

package/lib/src/{CreatedOnDcom-de-de-CknEXPtF.js → CreatedOnDcom-de-de-Dgmk8ib6.js}

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

package/lib/src/{CreatedOnDcom-en-us-CNuaCmwO.js → CreatedOnDcom-en-us-u6DK8Fzd.js}

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

package/lib/src/{CreatedOnDcom-es-es-xQmDcCxZ.js → CreatedOnDcom-es-es-CyOJpVzh.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-Ig9ufuyT.js → CreatedOnDcom-fr-fr-CWzC5FlL.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BcpCcEx4.js → CreatedOnDcom-pt-pt-DVigHaTn.js}

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

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

@@ -113,7 +113,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     IconTikTok: import("vue").DefineComponent<{}, {}, any>;
     IconTumblr: import("vue").DefineComponent<{}, {}, any>;
     IconTwitch: import("vue").DefineComponent<{}, {}, any>;
-    IconTwitter: import("vue").DefineComponent<{}, {}, any>;
+    IconX: import("vue").DefineComponent<{}, {}, any>;
     IconUser: import("vue").DefineComponent<{}, {}, any>;
     IconUtensils: import("vue").DefineComponent<{}, {}, any>;
     IconVideo: import("vue").DefineComponent<{}, {}, any>;

package/lib/src/brand-page/components/icon/Icon.mixin.js

@@ -62,7 +62,7 @@ import IconThumbsUp from './icons/ThumbsUp.vue';
 import IconTikTok from './icons/TikTok.vue';
 import IconTumblr from './icons/Tumblr.vue';
 import IconTwitch from './icons/Twitch.vue';
-import IconTwitter from './icons/Twitter.vue';
+import IconX from './icons/X.vue';
 import IconUser from './icons/User.vue';
 import IconUtensils from './icons/Utensils.vue';
 import IconVideo from './icons/Video.vue';
@@ -128,7 +128,7 @@ export default defineComponent({
         IconTikTok,
         IconTumblr,
         IconTwitch,
-        IconTwitter,
+        IconX,
         IconUser,
         IconUtensils,
         IconVideo,

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

@@ -9,7 +9,7 @@ export declare const CONTENT_TYPES: {
     readonly phone: "phone";
     readonly text: "text";
     readonly facebook: "facebook";
-    readonly twitter: "twitter";
+    readonly x: "x";
     readonly instagram: "instagram";
     readonly youtube: "youtube";
     readonly linkedin: "linkedin";

package/lib/src/brand-page/models/content.model.js

@@ -9,7 +9,7 @@ export const CONTENT_TYPES = {
     phone: 'phone',
     text: 'text',
     facebook: 'facebook',
-    twitter: 'twitter',
+    x: 'x',
     instagram: 'instagram',
     youtube: 'youtube',
     linkedin: 'linkedin',

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

@@ -79,7 +79,7 @@ export type WebsiteContent = ButtonContent;
 export type EmailContent = ButtonContent;
 export type PhoneContent = ButtonContent;
 export type FacebookContent = ButtonContent;
-export type TwitterContent = ButtonContent;
+export type XContent = ButtonContent;
 export type InstagramContent = ButtonContent;
 export type YoutubeContent = ButtonContent;
 export type LinkedInContent = ButtonContent;
@@ -287,12 +287,11 @@ export interface TextMediaItem extends ImageItem {
 }
 export interface TextShapeItem extends TextMediaItem {
     colorReplacements: ColorReplacement[];
-    mediaType: 'shape';
     aspectRatio?: number | null;
 }
 export interface ShapeItem extends ImageItem {
     colorReplacements: ColorReplacement[];
-    mediaType: 'shape';
+    mediaType: MediaType;
     title?: string;
     paragraph?: string;
     titleOverride?: string;
@@ -322,24 +321,19 @@ export interface ShapesSectionContent extends Content, MediaSection {
     size: string;
     cardStyle: BrandPageCssStyle;
 }
-export interface ImagesSectionContent extends Content {
+export interface ImagesSectionContent extends Content, MediaSection {
     type: 'images-section';
-    title: string;
-    displayStyle: ImagesSectionContentDisplayStyle;
     aspectRatio: AspectRatio;
     areImagesFullWidth: boolean;
-    items: TextMediaItem[];
-    backgroundStyle: BrandPageCssStyle;
-    titleStyle: TextStyleDeclaration;
-    headingStyle: TextStyleDeclaration;
-    paragraphStyle: TextStyleDeclaration;
     cardStyle: BrandPageCssStyle;
 }
 export interface MediaSection extends Content {
     title: string;
-    displayStyle: string;
-    items: TextShapeItem[];
+    description: string;
+    displayStyle: ImagesSectionContentDisplayStyle;
+    items: TextShapeItem[] | TextMediaItem[];
     titleStyle: TextStyleDeclaration;
+    descriptionStyle: TextStyleDeclaration;
     headingStyle: TextStyleDeclaration;
     paragraphStyle: TextStyleDeclaration;
     backgroundStyle: BrandPageCssStyle;

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

@@ -338,9 +338,9 @@ export class AbstractPageFooterStyles {
             {
                 width: 0,
                 height: 0,
-                imageUrl: 'twitter',
+                imageUrl: 'x',
                 imageTitle: '',
-                url: 'https://www.twitter.com',
+                url: 'https://www.x.com',
                 mediaType: 'image',
                 imageLink: '',
             },

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

@@ -0,0 +1,7 @@
+import type { ButtonStyles } from '../models';
+/**
+ * Calculates the box shadow value for button styles based on the button style configuration
+ * @param buttonStyles - The button styles configuration
+ * @returns The calculated box shadow CSS value
+ */
+export declare const getBoxShadowValue: (buttonStyles: ButtonStyles) => string;

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

@@ -0,0 +1,29 @@
+import { isHexColor } from '../../utils/helpers';
+import { setRgbAlpha } from './color.util';
+import { ButtonSoftBoxShadowSize, ButtonBoxShadowSize, BoxShadowSpread, } from '../constants';
+/**
+ * Calculates the box shadow value for button styles based on the button style configuration
+ * @param buttonStyles - The button styles configuration
+ * @returns The calculated box shadow CSS value
+ */
+export const getBoxShadowValue = (buttonStyles) => {
+    let boxShadowValue = '';
+    if (buttonStyles.style.boxShadow) {
+        if (isHexColor(buttonStyles.style.boxShadow)) {
+            if (buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_16' ||
+                buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_17' ||
+                buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_18') {
+                const rgba = setRgbAlpha(buttonStyles.style.boxShadow, BoxShadowSpread);
+                boxShadowValue = `${ButtonSoftBoxShadowSize} ${rgba}`;
+            }
+            else {
+                const rgba = setRgbAlpha(buttonStyles.style.boxShadow, BoxShadowSpread);
+                boxShadowValue = `${ButtonBoxShadowSize} ${rgba}`;
+            }
+        }
+        else {
+            boxShadowValue = buttonStyles.style.boxShadow;
+        }
+    }
+    return boxShadowValue;
+};

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

@@ -58,7 +58,7 @@ export const forEachPageCallContentCallback = (page, callbacks) => {
             case 'linkedin':
             case 'tiktok':
             case 'twitch':
-            case 'twitter':
+            case 'x':
             case 'pinterest':
             case 'youtube':
                 callbacks.buttonContentCallback(content);

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

@@ -28,7 +28,7 @@ export const isButtonContent = (content) => {
         content?.type === 'website' ||
         content?.type === 'email' ||
         content?.type === 'phone' ||
-        content?.type === 'twitter' ||
+        content?.type === 'x' ||
         content?.type === 'instagram' ||
         content?.type === 'youtube' ||
         content?.type === 'linkedin' ||

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

@@ -199,7 +199,13 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
     'Color',
     'Replacements',
 ];
-const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section', 'booking-section'];
+const RTE_ALLOWED_SECTION_TYPES = [
+    'text',
+    'banner-section',
+    'booking-section',
+    'images-section',
+    'shapes-section',
+];
 const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 export const applyLogoThemeToContents = (logoTheme, pages) => {
     let isModified = false;

package/lib/src/brand-page/utils/view-model.util.js

@@ -9,6 +9,7 @@ import uniq from 'lodash/uniq';
 import { generateGoogleFontUrl } from './font-loader.util';
 import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
+import { getBoxShadowValue } from './button.util';
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
 const PROFILE_PADDING_TOP = '1rem';
@@ -191,24 +192,7 @@ const isBigImageType = (displayStyle) => {
     return false;
 };
 const mapToButtonViewModel = (content, styles, options) => {
-    let boxShadowValue = '';
-    if (styles.buttonStyles.style.boxShadow) {
-        if (isHexColor(styles.buttonStyles.style.boxShadow)) {
-            if (styles.buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_16' ||
-                styles.buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_17' ||
-                styles.buttonStyles.selectedButtonStyleId === 'BUTTON_STYLE_18') {
-                const rgba = setRgbAlpha(styles.buttonStyles.style.boxShadow, BoxShadowSpread);
-                boxShadowValue = `${ButtonSoftBoxShadowSize} ${rgba}`;
-            }
-            else {
-                const rgba = setRgbAlpha(styles.buttonStyles.style.boxShadow, BoxShadowSpread);
-                boxShadowValue = `${ButtonBoxShadowSize} ${rgba}`;
-            }
-        }
-        else {
-            boxShadowValue = styles.buttonStyles.style.boxShadow;
-        }
-    }
+    const boxShadowValue = getBoxShadowValue(styles.buttonStyles);
     const buttonStyles = {
         iconStyle: styles.buttonStyles.iconStyle,
         style: {
@@ -309,9 +293,13 @@ const mapToMapViewModel = (content) => {
     return { ...content, role: content.type, type: 'map' };
 };
 const mapToMailingListViewModel = (content, styles) => {
+    const boxShadowValue = getBoxShadowValue(styles.buttonStyles);
     const buttonStyles = {
         iconStyle: styles.buttonStyles.iconStyle,
-        style: styles.buttonStyles.style,
+        style: {
+            ...styles.buttonStyles.style,
+            boxShadow: boxShadowValue,
+        },
         selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     };
     const titleStyle = {
@@ -368,11 +356,20 @@ const mapToRequestPaymentViewModel = (content, styles) => {
     }, styles);
 };
 const mapToContactFormViewModel = (content, styles, brandPageType) => {
+    const boxShadowValue = getBoxShadowValue(styles.buttonStyles);
+    const buttonStyles = {
+        iconStyle: styles.buttonStyles.iconStyle,
+        style: {
+            ...styles.buttonStyles.style,
+            boxShadow: boxShadowValue,
+        },
+        selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
+    };
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
         type: 'contact-form',
-        buttonStyles: styles.buttonStyles,
+        buttonStyles: buttonStyles,
         buttonTextStyle: {
             ...content.buttonTextStyle,
         },
@@ -659,7 +656,7 @@ export const mapToViewModel = (styles, brandPageType) => (content) => {
         case 'website':
         case 'phone':
         case 'facebook':
-        case 'twitter':
+        case 'x':
         case 'instagram':
         case 'youtube':
         case 'linkedin':

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.d.ts

@@ -2,11 +2,11 @@ declare const _default: import("vue").DefineComponent<{}, {
     templates: import("vue").ComputedRef<import("../../stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[]>;
     items: import("vue").ComputedRef<{
         id: string;
-        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
         settings: {
             content: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                 imageUrlOverride?: string | undefined;
                 imageUrlsOverride?: string | undefined;

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

@@ -408,7 +408,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         contentErrorCount(): number;
         getContent(state: {
             addContentOptions: {
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -419,11 +419,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
@@ -457,7 +457,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../brand-page").Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -468,11 +468,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
@@ -506,7 +506,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => import("../../../shared/content-settings/models").ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -517,11 +517,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
@@ -555,7 +555,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/content-settings/models").ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -566,11 +566,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
@@ -604,7 +604,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => string | import("../../../brand-page").Content | undefined;
         getItemState(state: {
             addContentOptions: {
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -615,11 +615,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
@@ -653,7 +653,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/content-settings/models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -664,11 +664,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -1142,6 +1142,7 @@ export const BRAND_PAGE_PERSONALISED = {
                 {
                     id: uuid(),
                     title: 'Shapes',
+                    description: '',
                     type: 'shapes-section',
                     displayStyle: 'centered',
                     items: [
@@ -1163,6 +1164,7 @@ export const BRAND_PAGE_PERSONALISED = {
                     cardStyle: {},
                     size: '4rem',
                     titleStyle: {},
+                    descriptionStyle: {},
                     paragraphStyle: {},
                     headingStyle: {},
                     personalisationRole: 'media',

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.d.ts

@@ -1,4 +1,4 @@
-import type { LogoContent, ProfileContent, GeneralLinkContent, WebsiteContent, EmailContent, PhoneContent, FacebookContent, TwitterContent, InstagramContent, YoutubeContent, LinkedInContent, PinterestContent, TwitchContent, TiktokContent, TextContent } from '../../../../brand-page';
+import type { LogoContent, ProfileContent, GeneralLinkContent, WebsiteContent, EmailContent, PhoneContent, FacebookContent, XContent, InstagramContent, YoutubeContent, LinkedInContent, PinterestContent, TwitchContent, TiktokContent, TextContent } from '../../../../brand-page';
 export declare const logoContent: LogoContent;
 export declare const profileContent: ProfileContent;
 export declare const textContent: TextContent;
@@ -7,7 +7,7 @@ export declare const websiteLink: WebsiteContent;
 export declare const emailLink: EmailContent;
 export declare const phoneLink: PhoneContent;
 export declare const facebookLink: FacebookContent;
-export declare const twitterLink: TwitterContent;
+export declare const twitterLink: XContent;
 export declare const instagramLink: InstagramContent;
 export declare const youtubeLink: YoutubeContent;
 export declare const linkedinLink: LinkedInContent;

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.js

@@ -110,10 +110,10 @@ export const facebookLink = {
 };
 export const twitterLink = {
     id: faker.string.uuid(),
-    iconUrl: 'twitter',
-    title: 'Twitter',
-    url: 'https://www.twitter.com',
-    type: 'twitter',
+    iconUrl: 'x',
+    title: 'X',
+    url: 'https://www.x.com',
+    type: 'x',
     colorReplacements: [],
     titleStyle: {
         textAlign: DEFAULT_TEXT_ALIGN,