@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/lib/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.d.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import type { StyleTextFontFamilyOption } from '../../../style-settings/models';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
-import type { LogoTheme, TextStyleDeclaration, TextStyleType } from '@brand-page';
+import type { CanonicalTextStyleType, LogoTheme, TextStyleDeclaration, TextStyleType } from '@brand-page';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -73,22 +73,489 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: boolean;
     };
+    showTypographyPreview: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showColor: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
     containerDefaultColor: {
         type: StringConstructor;
         required: false;
         default: undefined;
     };
 }>, {
-    [x: string]: string | import("pinia").Store<"uiStyleSettings", import("../../../style-settings/store").StyleSettingsState, {
+    [x: string]: string | import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
+        contentErrorCount(): number;
+        getContent(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("@brand-page").Content | undefined;
+        getFieldSettings(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("../../models").ContentItemFieldSettings | undefined;
+        getItem(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("../../models").ContentItem<any> | undefined;
+        getValue(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("@brand-page").Content | string | undefined;
+        getItemState(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("../../models").ContentSettingsItemState;
+        getItemGroupState(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, groupId: string) => import("../../models").ContentSettingsItemGroupState;
+        mode(): import("../../store").ContentSettingsMode;
+        selectedItem(): import("../../models").ContentItem<any> | undefined;
+        selectedItemTemplate(): import("../../../../brand-page-maker/models").ContentSettingsConfig<any> | undefined;
+    }, {
+        onContentChanged(): void;
+        _addItem({ item, index, }: {
+            item: import("../../models").ContentItem<any>;
+            index?: number;
+        }): void;
+        setState(payload: {
+            newState: Partial<import("../../store").ContentSettingsState>;
+        }): Promise<void>;
+        _deleteItem({ id: id }: {
+            id: string;
+        }): void;
+        _deleteItemState({ id: id }: {
+            id: string;
+        }): void;
+        _setAddContentOptions({ addContentOptions, }: {
+            addContentOptions: import("../../models").AddContentOption<any>[];
+        }): void;
+        _setItemSettingsFieldErrorState(payload: import("../../models").SetItemSettingsFieldErrorMessagePayload): void;
+        _setSelectedItemId({ id, eventSource, }: {
+            id: string | null;
+            eventSource: import("../../../models").UIEventSource | null;
+        }): void;
+        _setSelectedItemFieldName({ name: name }: {
+            name: string | null;
+        }): void;
+        _setSelectedItemIndex({ index: index }: {
+            index: number | null;
+        }): void;
+        _setSelectedItemValue({ value: value }: {
+            value: string | null;
+        }): void;
+        _setSelectedItemImage({ selectedItemId, imageUrl, width, height, colorReplacements, aspectRatio, }: {
+            selectedItemId: string | null;
+            imageUrl: string;
+            width?: number;
+            height?: number;
+            colorReplacements?: import("@brand-page").ColorReplacement[];
+            aspectRatio?: number | null;
+        }): void;
+        _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        _setItems({ items }: {
+            items: import("../../models").ContentItem<any>[];
+        }): void;
+        updateContent<T extends import("@brand-page").Content>({ id, content, }: {
+            id: string;
+            content: T;
+        }): void;
+        popMode(): void;
+        pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
+        resetMode(): void;
+        updateItemValue(payload: import("../../models").UpdateItemValuePayload<unknown>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        getTextStyles({ id, name }: {
+            id: string;
+            name: string;
+        }): unknown;
+        renormalizeTextStylesForRole(type: string, previousRole?: Record<string, unknown>, active?: {
+            id: string;
+            name: string;
+            index?: number;
+            doc: unknown;
+        }): void;
+        applyCardContrastToItem({ id }: {
+            id: string;
+        }): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        _setActiveCategoryTab({ activeCategoryTab, }: {
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        }): void;
+        setItemState({ id, itemState, }: {
+            id: string;
+            itemState: import("../../models").ContentSettingsItemState;
+        }): void;
+        setItemGroupState({ id, groupId, groupState, }: {
+            id: string;
+            groupId: string;
+            groupState: import("../../models").ContentSettingsItemGroupState;
+        }): void;
+        collapseAllItems(): void;
+        setItemIsCollapsed({ id, isCollapsed, }: {
+            id: string;
+            isCollapsed: boolean;
+        }): void;
+        setItemGroupIsCollapsed({ id, groupId, isCollapsed, }: {
+            id: string;
+            groupId: string;
+            isCollapsed: boolean;
+        }): void;
+        addItemByType({ type, index, }: {
+            type: string;
+            index?: number;
+        }): import("../../models").ContentItem<import("@brand-page").Content> | undefined;
+        deleteItem(payload: {
+            id: string;
+        }): void;
+        getContentCategory(type: string): any;
+        setAddContentOptions(payload: {
+            addContentOptions: import("../../models").AddContentOption<any>[];
+        }): void;
+        setSelectedItemId(payload: {
+            id: string | null;
+            eventSource: import("../../../models").UIEventSource;
+        }): void;
+        setSelectedItemAndFieldName(payload: {
+            id: string | null;
+            name: string | null;
+            index: number | null;
+            eventSource: import("../../../models").UIEventSource | null;
+        }): void;
+        setSelectedItemValue(payload: {
+            value: string | null;
+        }): void;
+        setSelectedItemImage(payload: {
+            selectedItemId: string | null;
+            imageUrl: string;
+            width?: number;
+            height?: number;
+            colorReplacements?: import("@brand-page").ColorReplacement[];
+            aspectRatio?: number | null;
+        }): void;
+        setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        setItems(payload: {
+            items: import("../../models").ContentItem<import("@brand-page").Content>[];
+        }): void;
+        validateItem(payload: import("../../models").ValidateItemPayload): void;
+        validateItems(): Promise<void>;
+        triggerLockedContentClickedEvent(payload: {
+            type: string;
+        }): Promise<void>;
+        setActiveCategoryTab(payload: {
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        }): void;
+        selectInitialContentCategory(payload: {
+            selectedCategory: string;
+        }): void;
+        initialiseItemState({ item, itemState, }: {
+            item: import("../../models").ContentItem<import("@brand-page").Content>;
+            itemState?: Partial<import("../../store").ContentSettingsState>;
+        }): void;
+        initialiseItemGroupState({ id, groupId, groupState, }: {
+            id: string;
+            groupId: string;
+            groupState?: import("../../models").ContentSettingsItemGroupState;
+        }): void;
+    }> | import("pinia").Store<"uiStyleSettings", import("../../../style-settings/store").StyleSettingsState, {
         availableTextFontFamilyOptions(): StyleTextFontFamilyOption[];
         buttonBorderColor(): string | undefined;
         buttonFillColor(): string | undefined;
         buttonIconColor(): string | undefined;
         buttonShadowColor(): string;
         buttonSoftShadowColor(): string;
-        defaultTextColor(): string | undefined;
         selectedButtonStyleConfig(): import("../../../../brand-page-maker/models").ButtonStyleConfig | undefined;
-        selectedTextFontFamily(): import("@brand-page").FontFamilyKey;
     }, {
         initialise(options: {
             reset: boolean;
@@ -108,9 +575,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        _setTextFontFamily(payload: {
-            fontFamily: import("@brand-page").FontFamilyKey;
-        }): void;
         _setTextStyles(payload: Partial<import("@brand-page").TextStyles>): void;
         setAdminStyleOptionDefaultValues(): void;
         setTextStyleOption(payload: {
@@ -134,15 +598,161 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        setTextFontFamily(payload: {
-            fontFamily: import("@brand-page").FontFamilyKey;
-        }): Promise<void>;
     }> | import("vue").Ref<null, null> | import("vue").ComputedRef<StyleTextFontFamilyOption[]> | import("vue").ComputedRef<{
         buttons: {
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        button: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading1: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading2: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading3: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading4: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading5: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading6: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        paragraph1: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        paragraph2: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        paragraph3: {
+            type: TextStyleType;
+            title: string;
+            style: {
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -158,7 +768,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -174,7 +783,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -190,7 +798,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -209,7 +816,156 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        button: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading1: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading2: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading3: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading4: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading5: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        heading6: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        paragraph1: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        paragraph2: {
+            type: TextStyleType;
+            title: string;
+            style: {
+                fontFamily: string | undefined;
+                fontSize: string | undefined;
+                fontStyle: string | undefined;
+                fontWeight: string | undefined;
+                letterSpacing: string | undefined;
+                lineHeight: string | undefined;
+                textDecoration: string | undefined;
+                textStyleType: TextStyleType | undefined;
+            };
+            isModified: boolean;
+        };
+        paragraph3: {
+            type: TextStyleType;
+            title: string;
+            style: {
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -225,7 +981,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -241,7 +996,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -257,7 +1011,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: TextStyleType;
             title: string;
             style: {
-                color: string | undefined;
                 fontFamily: string | undefined;
                 fontSize: string | undefined;
                 fontStyle: string | undefined;
@@ -277,9 +1030,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         buttonIconColor(): string | undefined;
         buttonShadowColor(): string;
         buttonSoftShadowColor(): string;
-        defaultTextColor(): string | undefined;
         selectedButtonStyleConfig(): import("../../../../brand-page-maker/models").ButtonStyleConfig | undefined;
-        selectedTextFontFamily(): import("@brand-page").FontFamilyKey;
     }, {
         initialise(options: {
             reset: boolean;
@@ -299,9 +1050,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        _setTextFontFamily(payload: {
-            fontFamily: import("@brand-page").FontFamilyKey;
-        }): void;
         _setTextStyles(payload: Partial<import("@brand-page").TextStyles>): void;
         setAdminStyleOptionDefaultValues(): void;
         setTextStyleOption(payload: {
@@ -325,13 +1073,471 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        setTextFontFamily(payload: {
-            fontFamily: import("@brand-page").FontFamilyKey;
+    }>;
+    contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
+        contentErrorCount(): number;
+        getContent(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("@brand-page").Content | undefined;
+        getFieldSettings(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("../../models").ContentItemFieldSettings | undefined;
+        getItem(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("../../models").ContentItem<any> | undefined;
+        getValue(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("@brand-page").Content | string | undefined;
+        getItemState(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("../../models").ContentSettingsItemState;
+        getItemGroupState(state: {
+            addContentOptions: {
+                type: import("@brand-page").ContentType;
+                category: string;
+                createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
+                displayName: string;
+                iconName: string;
+                isEnabled: boolean;
+                isLocked: boolean;
+                displayMode?: import("../../../../brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+            }[];
+            items: {
+                id: string;
+                type: import("@brand-page").ContentType;
+                settings: {
+                    content: {
+                        id: string;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
+                    };
+                    fields: Record<string, import("../../models").ContentItemFieldSettings>;
+                };
+            }[];
+            itemStates: Record<string, import("../../models").ContentSettingsItemState>;
+            modeStack: {
+                mode: import("../../store").ContentSettingsMode;
+                selectedItemId?: string | undefined;
+                selectedItemFieldName?: string | undefined;
+                selectedItemIndex?: number | undefined;
+            }[];
+            selectedItemId: string | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemFieldName: string | null;
+            selectedItemValue: string | null;
+            selectedItemIndex: number | null;
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, groupId: string) => import("../../models").ContentSettingsItemGroupState;
+        mode(): import("../../store").ContentSettingsMode;
+        selectedItem(): import("../../models").ContentItem<any> | undefined;
+        selectedItemTemplate(): import("../../../../brand-page-maker/models").ContentSettingsConfig<any> | undefined;
+    }, {
+        onContentChanged(): void;
+        _addItem({ item, index, }: {
+            item: import("../../models").ContentItem<any>;
+            index?: number;
+        }): void;
+        setState(payload: {
+            newState: Partial<import("../../store").ContentSettingsState>;
         }): Promise<void>;
+        _deleteItem({ id: id }: {
+            id: string;
+        }): void;
+        _deleteItemState({ id: id }: {
+            id: string;
+        }): void;
+        _setAddContentOptions({ addContentOptions, }: {
+            addContentOptions: import("../../models").AddContentOption<any>[];
+        }): void;
+        _setItemSettingsFieldErrorState(payload: import("../../models").SetItemSettingsFieldErrorMessagePayload): void;
+        _setSelectedItemId({ id, eventSource, }: {
+            id: string | null;
+            eventSource: import("../../../models").UIEventSource | null;
+        }): void;
+        _setSelectedItemFieldName({ name: name }: {
+            name: string | null;
+        }): void;
+        _setSelectedItemIndex({ index: index }: {
+            index: number | null;
+        }): void;
+        _setSelectedItemValue({ value: value }: {
+            value: string | null;
+        }): void;
+        _setSelectedItemImage({ selectedItemId, imageUrl, width, height, colorReplacements, aspectRatio, }: {
+            selectedItemId: string | null;
+            imageUrl: string;
+            width?: number;
+            height?: number;
+            colorReplacements?: import("@brand-page").ColorReplacement[];
+            aspectRatio?: number | null;
+        }): void;
+        _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        _setItems({ items }: {
+            items: import("../../models").ContentItem<any>[];
+        }): void;
+        updateContent<T extends import("@brand-page").Content>({ id, content, }: {
+            id: string;
+            content: T;
+        }): void;
+        popMode(): void;
+        pushMode(item: import("../../store").ContentSettingsModeStackItem): void;
+        resetMode(): void;
+        updateItemValue(payload: import("../../models").UpdateItemValuePayload<unknown>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyleType({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextStyles({ id, name, value, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        getTextStyles({ id, name }: {
+            id: string;
+            name: string;
+        }): unknown;
+        renormalizeTextStylesForRole(type: string, previousRole?: Record<string, unknown>, active?: {
+            id: string;
+            name: string;
+            index?: number;
+            doc: unknown;
+        }): void;
+        applyCardContrastToItem({ id }: {
+            id: string;
+        }): void;
+        updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
+        _setActiveCategoryTab({ activeCategoryTab, }: {
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        }): void;
+        setItemState({ id, itemState, }: {
+            id: string;
+            itemState: import("../../models").ContentSettingsItemState;
+        }): void;
+        setItemGroupState({ id, groupId, groupState, }: {
+            id: string;
+            groupId: string;
+            groupState: import("../../models").ContentSettingsItemGroupState;
+        }): void;
+        collapseAllItems(): void;
+        setItemIsCollapsed({ id, isCollapsed, }: {
+            id: string;
+            isCollapsed: boolean;
+        }): void;
+        setItemGroupIsCollapsed({ id, groupId, isCollapsed, }: {
+            id: string;
+            groupId: string;
+            isCollapsed: boolean;
+        }): void;
+        addItemByType({ type, index, }: {
+            type: string;
+            index?: number;
+        }): import("../../models").ContentItem<import("@brand-page").Content> | undefined;
+        deleteItem(payload: {
+            id: string;
+        }): void;
+        getContentCategory(type: string): any;
+        setAddContentOptions(payload: {
+            addContentOptions: import("../../models").AddContentOption<any>[];
+        }): void;
+        setSelectedItemId(payload: {
+            id: string | null;
+            eventSource: import("../../../models").UIEventSource;
+        }): void;
+        setSelectedItemAndFieldName(payload: {
+            id: string | null;
+            name: string | null;
+            index: number | null;
+            eventSource: import("../../../models").UIEventSource | null;
+        }): void;
+        setSelectedItemValue(payload: {
+            value: string | null;
+        }): void;
+        setSelectedItemImage(payload: {
+            selectedItemId: string | null;
+            imageUrl: string;
+            width?: number;
+            height?: number;
+            colorReplacements?: import("@brand-page").ColorReplacement[];
+            aspectRatio?: number | null;
+        }): void;
+        setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        setItems(payload: {
+            items: import("../../models").ContentItem<import("@brand-page").Content>[];
+        }): void;
+        validateItem(payload: import("../../models").ValidateItemPayload): void;
+        validateItems(): Promise<void>;
+        triggerLockedContentClickedEvent(payload: {
+            type: string;
+        }): Promise<void>;
+        setActiveCategoryTab(payload: {
+            activeCategoryTab: import("../../../../brand-page-maker/models").ItemCategory;
+        }): void;
+        selectInitialContentCategory(payload: {
+            selectedCategory: string;
+        }): void;
+        initialiseItemState({ item, itemState, }: {
+            item: import("../../models").ContentItem<import("@brand-page").Content>;
+            itemState?: Partial<import("../../store").ContentSettingsState>;
+        }): void;
+        initialiseItemGroupState({ id, groupId, groupState, }: {
+            id: string;
+            groupId: string;
+            groupState?: import("../../models").ContentSettingsItemGroupState;
+        }): void;
     }>;
     textStyleTypeDropdownRef: string;
 }, {
     isCollapsed: boolean;
+    isStyleModifiedPopupOpen: boolean;
     MIN_TEXT_SIZE_PX: number;
     MAX_TEXT_SIZE_PX: number;
     MIN_LETTER_SPACING_PERCENT: number;
@@ -371,10 +1577,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         get(): string;
         set(val: string): void;
     };
-    textStyleTypeDropdownTitle(): any;
+    selectedRoleLabel(): string;
+    selectedRoleType(): CanonicalTextStyleType | undefined;
+    hasTypographyOverride(): boolean;
+    textStylePreviewStyle(): Record<string, string>;
+    textStylePreviewSubtitle(): string;
 }, {
     emitChange(style: BrandPageCssStyle, textStyleType?: TextStyleType): void;
     toggleCollapsed(): void;
+    overrideBaseStyle(): TextStyleDeclaration;
     onSelectFont(font: StyleTextFontFamilyOption): void;
     onSelectTextCSSStyle(e: any): void;
     onSelectTextStyleType(e: ButtonGroupOption): void;
@@ -384,6 +1595,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onTextSizeChange(textSize: string): void;
     onLetterSpacingChange(spacing: string): void;
     onLineHeightChange(lineHeight: string): void;
+    resetToGlobal(): void;
+    saveToGlobal(): void;
+    toggleStyleModifiedPopup(): void;
+    onClickOutsideStyleModified(event: Event): void;
+    onApplyStyleToRole(): void;
+    onResetStyleToRole(): void;
     generateFontFamilySelectorKey(): string;
     syncTextStyleTypeSelection(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -457,6 +1674,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: boolean;
     };
+    showTypographyPreview: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    showColor: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
     containerDefaultColor: {
         type: StringConstructor;
         required: false;
@@ -476,5 +1703,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     whiteBackground: boolean;
     showTextStyleTypeOptions: boolean;
     isTextContent: boolean;
+    showTypographyPreview: boolean;
+    showColor: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;