@designcrowd/library.brand-page 5.16.48 → 5.16.50

package/lib/src/shared/style-settings/store/style-settings-store.js

@@ -1,15 +1,15 @@
 import { defineStore } from 'pinia';
-import { getColorFromCSSShadow, hexToRGBA, isColorLinearGradient, isHexColor, linearGradientToArray, arrayToLinearGradient, RGBAtoHex, CssShadowRE, } from '../../../utils/helpers';
-import { ButtonStyles, GalleryStyles, LogoStyles, PageStyles, TextStyles, ButtonBoxShadowSize, FONT_FAMILY_CONFIGS, CONTENT_TYPES, ButtonSoftBoxShadowSize, BoxShadowSpread, availableGalleryTypes, } from '../../../brand-page';
+import { getColorFromCSSShadow, hexToRGBA, isColorLinearGradient, isHexColor, linearGradientToArray, arrayToLinearGradient, RGBAtoHex, CssShadowRE, } from '@utils/helpers';
+import { ButtonStyles, GalleryStyles, LogoStyles, PageStyles, TextStyles, ButtonBoxShadowSize, FONT_FAMILY_CONFIGS, CONTENT_TYPES, ButtonSoftBoxShadowSize, BoxShadowSpread, availableGalleryTypes, } from '@brand-page';
 import { assertUnreachable } from '../../../helpers/ts.helper';
-import { isHexTransparent, removeAlphaFromHex, addTransparentAlphaChannelToHex, } from '../../../brand-page/utils/color.util';
+import { isHexTransparent, removeAlphaFromHex, addTransparentAlphaChannelToHex, } from '@brand-page/utils/color.util';
 import { DEFAULT_BUTTON_SHADOW_COLOR } from '../../../constants/ui';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '../../../brand-page-maker/stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '@brand-page-maker/stores';
 import { useUiContentSettingsStore } from '../../content-settings/store';
 import { useUiPageSettingsStore } from '../../page-settings/store';
 import { PAGE_SECTIONS } from '../../page-settings/models';
-import { availableButtonStyleConfigs } from '../../../brand-page-maker/models';
-import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../../brand-page-maker/composables/useEventTracker';
+import { availableButtonStyleConfigs } from '@brand-page-maker/models';
+import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '@brand-page-maker/composables/useEventTracker';
 const onStyleChanged = () => {
     const uiStore = useUiStore();
     return uiStore.onStyleChanged();

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -554,7 +554,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         triggerLockedContentClickedEvent(payload: {
             type: string;
         }): Promise<void>;
-        onTemplateSelected(payload: import("../../../brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
@@ -566,11 +566,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendGettyVideoReplaceEvent: () => void;
         sendGettyVideoRemoveEvent: () => void;
         sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
-        setGlobalEventProps: (props: Omit<import("../../../brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
-        setUpsellBridgeState: (props: import("../../../brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
-        setDomainUpsellBridgeState: (props: import("../../../brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
-        subscribe: (callbackFn: (event: import("../../../brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
-        sendWebsiteEvent: (event: import("../../../brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void;
+        setGlobalEventProps: (props: Omit<import("@brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
+        setUpsellBridgeState: (props: import("@brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
+        setDomainUpsellBridgeState: (props: import("@brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
+        subscribe: (callbackFn: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
+        sendWebsiteEvent: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void;
         sendWebsiteMakerOpenEvent: (location: string) => void;
         sendUpsellOpenEvent: (cta_location?: string | undefined) => void;
         sendDomainUpsellOpenEvent: () => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.js

@@ -3,12 +3,12 @@ import { useUiTemplateSettingsStore } from '../store';
 import { TEMPLATE_FIRST_PAGE_NO } from '../../../constants/ui';
 import { TEMPLATE_TABS, TEMPLATE_TAB_DISPLAY_NAMES, } from '../models';
 import { debounce } from '../../functions';
-import { useBrandPageContainerStore, useBrandPageMakerStore, useUiStore, } from '../../../brand-page-maker/stores';
-import { templateSettingsTr } from '../../../composables/useTranslate';
-import { useEventTracker } from '../../../brand-page-maker/composables/useEventTracker';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useUiStore, } from '@brand-page-maker/stores';
+import { templateSettingsTr } from '@src/composables/useTranslate';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
-import { useLogoStore } from '../../../brand-page-maker/stores/logo-store';
-import raygunUtil from '../../../brand-page/utils/raygun.util';
+import { useLogoStore } from '@brand-page-maker/stores/logo-store';
+import raygunUtil from '@brand-page/utils/raygun.util';
 export default defineComponent({
     props: {
         numColumns: {

package/lib/src/shared/template-settings/components/TemplatesSettings.stories.js

@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue';
 import TemplatesSettings from './TemplatesSettings.vue';
-import TemplatePreview from '../../../brand-page-maker/components/template-preview/TemplatePreview.vue';
+import TemplatePreview from '@brand-page-maker/components/template-preview/TemplatePreview.vue';
 import { logoWithGradientTheme } from '../../../__fixtures__';
 import { mockDesignTemplateTypeApi } from './TemplatesSettings.test-helper';
 import { useUiTemplateSettingsStore } from '../store';
-import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiStore } from '@brand-page-maker/stores';
 export default {
     title: 'Components/BrandPageMaker/TemplatesSettings',
     component: TemplatesSettings,

package/lib/src/shared/template-settings/components/TemplatesSettings.test-helper.d.ts

@@ -1,5 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
-import { type BrandPageData, type BrandPageType } from '../../../brand-page';
+import { type BrandPageData, type BrandPageType } from '@brand-page';
 export declare const mockDesignTemplateTypeApi: (options?: {
     mockAxios?: MockAdapter;
     delayInMs?: number;

package/lib/src/shared/template-settings/components/TemplatesSettings.test-helper.js

@@ -5,10 +5,10 @@ import * as uuid from 'uuid';
 import { getTemplateEndpoint, getTemplatesEndpoint, } from '../../../clients/design-template-client';
 import { DEFAULT_PAGE_SIZE } from '../store';
 import { sleep } from '../../../helpers/ts.helper';
-import { DISPLAY_TEXT_BODY, DISPlAY_TEXT_BUTTONS, DISPLAY_TEXT_HEADINGS, DISPLAY_TEXT_TITLE, FONT_FAMILY_KEYS, } from '../../../brand-page/constants';
-import { BRAND_PAGE_TYPES, emptyGlobalTextStyleDeclaration, TEXT_STYLE_TYPES, TextStyleOption, } from '../../../brand-page';
-import { BP_BRAND_SITE_TEMPLATE_TYPE_NAME, BP_DEFAULT_TEMPLATE_TYPE_NAME, } from '../../../brand-page-maker/constants';
-import { BRAND_PAGE_PERSONALISED } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__';
+import { DISPLAY_TEXT_BODY, DISPlAY_TEXT_BUTTONS, DISPLAY_TEXT_HEADINGS, DISPLAY_TEXT_TITLE, FONT_FAMILY_KEYS, } from '@brand-page/constants';
+import { BRAND_PAGE_TYPES, emptyGlobalTextStyleDeclaration, TEXT_STYLE_TYPES, TextStyleOption, } from '@brand-page';
+import { BP_BRAND_SITE_TEMPLATE_TYPE_NAME, BP_DEFAULT_TEMPLATE_TYPE_NAME, } from '@brand-page-maker/constants';
+import { BRAND_PAGE_PERSONALISED } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 export const mockDesignTemplateTypeApi = (options = {}) => {
     const brandPageType = options.brandPageType || BRAND_PAGE_TYPES.default;
     const templateType = brandPageType !== BRAND_PAGE_TYPES.brandSite

package/lib/src/shared/template-settings/models.d.ts

@@ -1,4 +1,4 @@
-import type { BrandPageModel } from '../../brand-page';
+import type { BrandPageModel } from '@brand-page';
 export interface TemplateSettingsTemplate {
     id: string;
     isPersonalisable?: boolean;

package/lib/src/shared/template-settings/models.js

@@ -1,4 +1,4 @@
-import { templateSettingsTr } from '../../composables/useTranslate';
+import { templateSettingsTr } from '@src/composables/useTranslate';
 export const TEMPLATE_TABS = {
     all: 'all',
     categories: 'categories',

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -1,15 +1,15 @@
 import { TEMPLATE_TABS } from '../models';
 import * as DesignTemplateClient from '../../../clients/design-template-client';
 import {} from '../../../clients/models';
-import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '../../../brand-page-maker/constants';
+import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
 import { defineStore, storeToRefs } from 'pinia';
-import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '../../../brand-page-maker/stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '@brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
-import { BrandPageModel } from '../../../brand-page/models';
-import { migrateBrandPageModel } from '../../../brand-page/utils';
-import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../../brand-page-maker/utils/ai-content-selection.util';
+import { BrandPageModel } from '@brand-page/models';
+import { migrateBrandPageModel } from '@brand-page/utils';
+import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '@brand-page-maker/utils/ai-content-selection.util';
 import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
-import { templateSettingsTr, getCurrentLocale, } from '../../../composables/useTranslate';
+import { templateSettingsTr, getCurrentLocale, } from '@src/composables/useTranslate';
 import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
 const LOAD_PAGE_RETRY_DELAY = 250;

package/lib/src/shared/unsplash-library/UnsplashLibrary.mixin.d.ts

@@ -49,7 +49,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         triggerLockedContentClickedEvent(payload: {
             type: string;
         }): Promise<void>;
-        onTemplateSelected(payload: import("../../brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;

package/lib/src/shared/unsplash-library/UnsplashLibrary.mixin.js

@@ -1,8 +1,8 @@
 import { defineComponent, computed } from 'vue';
 import UnsplashClient from '../../clients/unsplash-client';
 import debounce, {} from 'lodash.debounce';
-import { preloadImage } from '../../brand-page/utils';
-import { useUiStore } from '../../brand-page-maker/stores';
+import { preloadImage } from '@brand-page/utils';
+import { useUiStore } from '@brand-page-maker/stores';
 export default defineComponent({
     emits: ['on-select-image'],
     setup() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.48",
+  "version": "5.16.50",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/about-section/AboutSection.mixin.ts

@@ -1,9 +1,9 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { AboutSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import { getRenderText } from '../../utils';
+import type { AboutSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { getRenderText } from '@brand-page/utils';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin],

package/src/brand-page/components/about-section/AboutSection.vue.test.ts

@@ -7,8 +7,8 @@ import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
   type BrandPageContext,
-} from '../../models';
-import type { AboutSectionViewModel } from '../../view-models';
+} from '@brand-page/models';
+import type { AboutSectionViewModel } from '@brand-page/view-models';
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),

package/src/brand-page/components/background-shape/BackgroundShape.mixin.ts

@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { BackgroundShape } from '../../models';
+import type { BackgroundShape } from '@brand-page/models';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
-import { applyColorToSvgString } from '../../utils/svg-color.util';
+import { applyColorToSvgString } from '@brand-page/utils/svg-color.util';
 import { isURL } from '../../../utils/validator.util';
-import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
-import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
+import { PROXY_SHAPE_URL_REGEX } from '@brand-page/constants';
+import { getRegexToMatchAttributeInSvgTag } from '@brand-page/utils/svg.util';
 
 const SUPPORTED_SHAPE_HOSTS = [
   'https://bc-user-uploads.brandcrowd.com/public',

package/src/brand-page/components/banner-section/BannerSection.mixin.ts

@@ -4,12 +4,12 @@ import ComponentCommonMixin from '../mixins/component-common.mixin';
 import type {
   BannerSectionViewModel,
   ButtonViewModel,
-} from '../../view-models';
+} from '@brand-page/view-models';
 import {
   isURL,
   hasValidButton as shouldShowButtonUtil,
 } from '../../../utils/validator.util';
-import type { BrandPageContext } from '../../models';
+import type { BrandPageContext } from '@brand-page/models';
 import {
   ALIGN_CENTERED,
   ALIGN_LEFT_ALIGNED,
@@ -21,8 +21,8 @@ import {
   ALIGN_CARD_CENTER_IMAGE,
   ALIGN_CARD_LEFT_IMAGE,
 } from '../../constants';
-import { getRenderText, escapeContentText } from '../../utils';
-import { hasRTEContent } from '../../../brand-page-maker/utils';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin],

package/src/brand-page/components/booking-section/BookingSection.vue

@@ -43,10 +43,10 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type {
   BookingSectionViewModel,
   ButtonViewModel,
-} from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import { getRenderText, escapeContentText } from '../../utils';
-import { hasRTEContent } from '../../../brand-page-maker/utils';
+} from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
 import Button from '../button/Button.vue';
 

package/src/brand-page/components/brand-page-footer/BrandPageFooter.vue

@@ -32,7 +32,7 @@
 </template>
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch, shallowRef } from 'vue';
-import { BRAND_PAGE_TYPES, type BrandPageContext } from '../../models';
+import { BRAND_PAGE_TYPES, type BrandPageContext } from '@brand-page/models';
 import {
   Icon,
   WEBSITE_UPGRADE_CONTEXT_TYPES,
@@ -41,16 +41,16 @@ import { useConsent } from '../../composables/consent.composable';
 import {
   useBrandPageContainerStore,
   useLocalisedRouteStore,
-} from '../../../brand-page-maker/stores';
+} from '@brand-page-maker/stores';
 import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
-} from '../../../brand-page-maker/composables/useEventTracker';
+} from '@brand-page-maker/composables/useEventTracker';
 import {
   brandPageFooterTr,
   getCurrentLocale,
-} from '../../../composables/useTranslate';
+} from '@src/composables/useTranslate';
 
 interface Props {
   context: BrandPageContext;

package/src/brand-page/components/button/Button.mixin.ts

@@ -2,8 +2,8 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { isEmail, isTel, isURL } from '../../../utils/validator.util';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { BrandPageContext } from '../../models';
-import type { ButtonViewModel } from '../../view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import type { ButtonViewModel } from '@brand-page/view-models';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin],

package/src/brand-page/components/button/Button.stories.ts

@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue';
 import * as uuid from 'uuid';
 import Button from './Button.vue';
-import type { ButtonViewModel } from '../../view-models';
-import { BUTTON_LINK_TYPE, ButtonStyles } from '../../models';
+import type { ButtonViewModel } from '@brand-page/view-models';
+import { BUTTON_LINK_TYPE, ButtonStyles } from '@brand-page/models';
 import { DEFAULT_TEXT_ALIGN } from '../../constants';
 
 export default {

package/src/brand-page/components/collapsible/Collapsible.mixin.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import type { BrandPageContext } from '../../models';
+import type { BrandPageContext } from '@brand-page/models';
 import type { PropType } from 'vue';
 
 export default defineComponent({

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

@@ -1,14 +1,18 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { ContactFormViewModel } from '../../view-models';
-import type { BrandPageContext, FormField, FormFieldType } from '../../models';
-import { FORM_FIELD_TYPES } from '../../models';
+import type { ContactFormViewModel } from '@brand-page/view-models';
+import type {
+  BrandPageContext,
+  FormField,
+  FormFieldType,
+} from '@brand-page/models';
+import { FORM_FIELD_TYPES } from '@brand-page/models';
 import {
   getEmailValidationError,
   getMessageValidationError,
   getNameValidationError,
   getPhoneValidationError,
-} from '../../utils';
+} from '@brand-page/utils';
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import {
@@ -21,7 +25,7 @@ import {
   RECAPTCHA_ACTION_CONTACT_FORM,
   TEXT_ONLY,
 } from '../../constants';
-import { getRenderText } from '../../utils';
+import { getRenderText } from '@brand-page/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
 export interface FieldValue {

package/src/brand-page/components/contact-form/ContactForm.stories.ts

@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue';
 import { faker } from '@faker-js/faker';
-import { mockApiCalls } from '../../../brand-page-maker/components/brand-page-maker/mock-api-calls';
-import { BRAND_PAGE } from '../../../brand-page-maker/components/brand-page-maker/__fixtures__';
-import { FORM_FIELD_IDS, PageStyles } from '../../models';
-import { applyLogoThemeToBrandPageStyles } from '../../utils';
-import { type ContactFormViewModel } from '../../view-models';
+import { mockApiCalls } from '@brand-page-maker/components/brand-page-maker/mock-api-calls';
+import { BRAND_PAGE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
+import { FORM_FIELD_IDS, PageStyles } from '@brand-page/models';
+import { applyLogoThemeToBrandPageStyles } from '@brand-page/utils';
+import { type ContactFormViewModel } from '@brand-page/view-models';
 import ContactForm from './ContactForm.vue';
 import { ALIGN_CARD_CENTER, DISPLAY_STYLE_PREVIEW } from '../../constants';
 import { BScontext, context, logoTheme } from '../../__fixtures__/brand-page-sample-data';

package/src/brand-page/components/cookie-consent/CookieConsent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { watch } from 'vue';
-import { cookieTr } from '../../../composables/useTranslate';
+import { cookieTr } from '@src/composables/useTranslate';
 
 const props = defineProps<{
   isEnabled: boolean;

package/src/brand-page/components/divider-section/DividerSection.mixin.ts

@@ -1,9 +1,9 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { DividerSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import { DIVIDER_STYLES } from '../../models';
+import type { DividerSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { DIVIDER_STYLES } from '@brand-page/models';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin],

package/src/brand-page/components/fallback-image/FallbackImage.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { MEDIA_SIZES, type BrandPageContext } from '../../models';
+import { MEDIA_SIZES, type BrandPageContext } from '@brand-page/models';
 import { ref, defineProps, onMounted, computed, watch } from 'vue';
 const emit = defineEmits([
   'image-loaded',

package/src/brand-page/components/image/Image.mixin.ts

@@ -1,11 +1,14 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { ImageViewModel } from '../../view-models';
+import type { ImageViewModel } from '@brand-page/view-models';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
-import type { BrandPageContext } from '../../models';
-import { ASPECT_RATIOS } from '../../models';
-import { getImageAltText, aspectRatioToPaddingPercentage } from '../../utils';
+import type { BrandPageContext } from '@brand-page/models';
+import { ASPECT_RATIOS } from '@brand-page/models';
+import {
+  getImageAltText,
+  aspectRatioToPaddingPercentage,
+} from '@brand-page/utils';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin, ImageModalMixin],

package/src/brand-page/components/image/Image.test.ts

@@ -1,10 +1,13 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import { faker } from '@faker-js/faker';
 import Image from './Image.vue';
-import { DefaultImageAltValue, PageTitleImageAltSuffix } from '../../utils';
-import type { ImageViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import { BRAND_PAGE_TYPES, MEDIA_SIZES } from '../../models';
+import {
+  DefaultImageAltValue,
+  PageTitleImageAltSuffix,
+} from '@brand-page/utils';
+import type { ImageViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { BRAND_PAGE_TYPES, MEDIA_SIZES } from '@brand-page/models';
 import { createPinia, setActivePinia } from 'pinia';
 
 const createTestBrandPageContext = (): BrandPageContext => ({

package/src/brand-page/components/image/Image.vue

@@ -73,7 +73,7 @@ import FallbackImage from '../fallback-image/FallbackImage.vue';
 import ImageModal from '../image-modal/ImageModal.vue';
 import Placeholder from '../placeholder/Placeholder.vue';
 import ImageMixin from './Image.mixin.ts';
-import { imageTr } from '../../../composables/useTranslate';
+import { imageTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page/components/image-gallery/ImageGallery.mixin.ts

@@ -1,11 +1,11 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { ImageGalleryViewModel } from '../../view-models';
+import type { ImageGalleryViewModel } from '@brand-page/view-models';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import type { ImageGalleryImageClickPayload } from './models';
-import type { BrandPageContext, GalleryType } from '../../models';
-import { GALLERY_TYPES } from '../../models';
+import type { BrandPageContext, GalleryType } from '@brand-page/models';
+import { GALLERY_TYPES } from '@brand-page/models';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin, ImageModalMixin],

package/src/brand-page/components/image-gallery/ImageGallery.stories.ts

@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue';
 import ImageGallery from './ImageGallery.vue';
-import { createInitialImageGalleryContent } from '../../../brand-page-maker/models';
-import { mapToImageGalleryViewModel } from '../../utils';
+import { createInitialImageGalleryContent } from '@brand-page-maker/models';
+import { mapToImageGalleryViewModel } from '@brand-page/utils';
 import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
   type BrandPageContext,
-} from '../../models';
+} from '@brand-page/models';
 import { createPinia } from 'pinia';
 
 export default {

package/src/brand-page/components/image-gallery/ImageGallery.test.ts

@@ -1,12 +1,16 @@
 import { mount } from '@vue/test-utils';
 import { faker } from '@faker-js/faker';
-import type { BrandPageContext, GalleryType } from '../../models';
-import { BRAND_PAGE_TYPES, GALLERY_TYPES, MEDIA_SIZES } from '../../models';
-import type { ImageGalleryViewModel } from '../../view-models';
+import type { BrandPageContext, GalleryType } from '@brand-page/models';
+import {
+  BRAND_PAGE_TYPES,
+  GALLERY_TYPES,
+  MEDIA_SIZES,
+} from '@brand-page/models';
+import type { ImageGalleryViewModel } from '@brand-page/view-models';
 import CarouselGallery from './carousel/CarouselGallery.vue';
 import GridImageGallery from './grid/GridImageGallery.vue';
 import MasonryGallery from './masonry/MasonryGallery.vue';
-import { PageTitleImageAltSuffix } from '../../utils';
+import { PageTitleImageAltSuffix } from '@brand-page/utils';
 
 const createTestBrandPageContext = (): BrandPageContext => ({
   isTemplate: false,

package/src/brand-page/components/image-gallery/ImageGallery.vue

@@ -43,7 +43,7 @@ import GridGallery from './grid/GridImageGallery.vue';
 import CarouselGallery from './carousel/CarouselGallery.vue';
 import MasonryGallery from './masonry/MasonryGallery.vue';
 import ImageGalleryModal from './ImageGalleryModal.vue';
-import { imageGalleryTr } from '../../../composables/useTranslate';
+import { imageGalleryTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.ts

@@ -3,7 +3,7 @@ import type { PropType } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import cloneDeep from 'lodash.clonedeep';
-import type { BrandPageContext, ImageItem } from '../../models';
+import type { BrandPageContext, ImageItem } from '@brand-page/models';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin, ImageModalMixin],

package/src/brand-page/components/image-gallery/carousel/CarouselGallery.vue

@@ -35,7 +35,7 @@ import { Carousel } from '@designcrowd/fe-shared-lib';
 import CarouselGalleryMixin from './CarouselGallery.mixin.ts';
 import Placeholder from '../../placeholder/Placeholder.vue';
 import FallbackImage from '../../fallback-image/FallbackImage.vue';
-import { imageGalleryTr } from '../../../../composables/useTranslate';
+import { imageGalleryTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page/components/image-gallery/grid/GridImageGallery.vue

@@ -30,7 +30,7 @@
 import ImageMixin from './GridImageGallery.mixin.ts';
 import Placeholder from '../../placeholder/Placeholder.vue';
 import FallbackImage from '../../fallback-image/FallbackImage.vue';
-import { imageGalleryTr } from '../../../../composables/useTranslate';
+import { imageGalleryTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.vue

@@ -34,7 +34,7 @@ import { Masonry } from '@designcrowd/fe-shared-lib';
 import MasonryGalleryMixin from './MasonryGallery.mixin.ts';
 import Placeholder from '../../placeholder/Placeholder.vue';
 import FallbackImage from '../../fallback-image/FallbackImage.vue';
-import { imageGalleryTr } from '../../../../composables/useTranslate';
+import { imageGalleryTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page/components/images-section/ImagesSection.stories.ts

@@ -1,13 +1,13 @@
 import { defineComponent } from 'vue';
 import ImagesSection from './ImagesSection.vue';
-import { createInitialImagesSectionContent } from '../../../brand-page-maker/models';
-import { mapToImagesSectionViewModel } from '../../utils';
+import { createInitialImagesSectionContent } from '@brand-page-maker/models';
+import { mapToImagesSectionViewModel } from '@brand-page/utils';
 import {
   BRAND_PAGE_TYPES,
   type BrandPageContext,
   MEDIA_SIZES,
   PageStyles,
-} from '../../models';
+} from '@brand-page/models';
 import { createPinia } from 'pinia';
 
 export default {

package/src/brand-page/components/images-section/ImagesSection.test.ts

@@ -1,4 +1,4 @@
-import type { TextImageSectionViewModel } from '../../view-models';
+import type { TextImageSectionViewModel } from '@brand-page/view-models';
 import { type ImagesSectionContentDisplayStyle } from '../../constants';
 import { shallowMount } from '@vue/test-utils';
 import { vi } from 'vitest';