@designcrowd/library.brand-page 5.16.46 → 5.16.47-alias-1

package/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.vue

@@ -219,10 +219,10 @@
 </template>
 <script>
 import { Toggle, Icon } from '@designcrowd/fe-shared-lib';
-import BackgroundSettings from '../../../shared/background-settings/components/BackgroundSettings.vue';
-import StyleSettingsSection from '../../../shared/style-settings/components/StyleSettingsSection.vue';
+import BackgroundSettings from '@shared/background-settings/components/BackgroundSettings.vue';
+import StyleSettingsSection from '@shared/style-settings/components/StyleSettingsSection.vue';
 import AdminBackgroundSettingsMixin from './AdminBackgroundSettings.mixin.ts';
-import ShapeLibrary from '../../../shared/shape-library/ShapeLibrary.vue';
+import ShapeLibrary from '@shared/shape-library/ShapeLibrary.vue';
 import ShapePositionSlider from './ShapePositionSlider.vue';
 import { Slider } from '@designcrowd/fe-shared-lib';
 

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

@@ -1,13 +1,13 @@
 import { defineComponent, computed } from 'vue';
-import { useAdminLogoSettingsStore } from '../../stores/admin-logo-settings';
-import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
-import { useBrandPageMakerStore } from '../../stores/brandpage-maker';
+import { useAdminLogoSettingsStore } from '@brand-page-maker/stores/admin-logo-settings';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker';
 import {
   DESKTOP_HEIGHT,
   DESKTOP_WIDTH,
   MOBILE_HEIGHT,
   MOBILE_WIDTH,
-} from '../../constants';
+} from '@brand-page-maker/constants';
 
 export default defineComponent({
   setup() {

package/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.vue

@@ -38,9 +38,9 @@
 <script>
 import { Button } from '@designcrowd/fe-shared-lib';
 import AdminLogoSettingsMixin from './AdminLogoSettings.mixin.ts';
-import SideBarSettingsHeader from '../../../shared/common/SideBarSettingsHeader.vue';
+import SideBarSettingsHeader from '@shared/common/SideBarSettingsHeader.vue';
 import TemplatePreview from '../template-preview/TemplatePreview.vue';
-import LogoStyleSettingsWithState from '../../../shared/logo-settings/components/LogoStyleSettingsWithState.vue';
+import LogoStyleSettingsWithState from '@shared/logo-settings/components/LogoStyleSettingsWithState.vue';
 
 export default {
   components: {

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

@@ -2,31 +2,31 @@ import type { PropType } from 'vue';
 import { defineComponent, computed } from 'vue';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
-import * as fontLoaderUtil from '../../../brand-page/utils/font-loader.util';
+import * as fontLoaderUtil from '@brand-page/utils/font-loader.util';
 import { EVENTS } from '../../../constants/brand-page-maker';
-import { MAKER_MOBILE_BREAKPOINT } from '../../constants';
-import { useUiSideBarStore } from '../../../shared/side-bar/store';
+import { MAKER_MOBILE_BREAKPOINT } from '@brand-page-maker/constants';
+import { useUiSideBarStore } from '@shared/side-bar/store';
 import {
   VIEWPORTS,
   type BrandPageData,
   type BrandPageType,
   type ViewportsType,
   type UserPersonalisationContent,
-} from '../../../brand-page';
+} from '@brand-page';
 import { TEMPLATE_FIRST_PAGE_NO } from '../../../constants/ui';
-import { createInitialBrandPage } from '../../models';
+import { createInitialBrandPage } from '@brand-page-maker/models';
 import type {
   InitialCategories,
   TemplateCategory,
-} from '../../../shared/template-settings/models';
+} from '@shared/template-settings/models';
 import { navigateToPageBySlug } from '../../routing';
-import type { UserFeatures } from '../../stores';
-import { useBrandPageContainerStore } from '../../stores';
+import type { UserFeatures } from '@brand-page-maker/stores';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
 import {
   type LogoDesignAttributesModel,
   UI_DEVICE_MODES,
   UI_SCREENSIZE_MODES,
-} from '../../../shared/models';
+} from '@shared/models';
 import {
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
@@ -34,20 +34,20 @@ import {
   useUiStore,
   useSnapshotStore,
   useVideoStore,
-} from '../../stores';
-import type { AdminPreviewLogoTemplateModel } from '../../stores/admin-logo-settings';
-import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
-import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
-import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
+} from '@brand-page-maker/stores';
+import type { AdminPreviewLogoTemplateModel } from '@brand-page-maker/stores/admin-logo-settings';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import { useRouter } from 'vue-router';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import AssetLibraryClient from '../../../clients/asset-library-clients';
-import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
-import type { ShopConfigData } from '../../../brand-page/models/shop.model';
-import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
-import type { UpdateItemValuePayload } from '../../../shared/content-settings/models';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import type { ShopConfigData } from '@brand-page/models/shop.model';
+import { useProductConfigStore } from '@brand-page-maker/stores/product-config/product-config-store';
+import type { UpdateItemValuePayload } from '@shared/content-settings/models';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
-import { commonTr } from '../../../composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 import { useSnapshot } from '../../../composables/useSnapshot';
 
 export interface BrandPageMakerViewModel {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -63,9 +63,9 @@ import {
   GalleryStyles,
   GALLERY_TYPES,
   SENSITIVE_CONTENT_TYPES,
-} from '../../../brand-page';
+} from '@brand-page';
 import { type BrandPageMakerViewModel } from './BrandPageMaker.mixin';
-import { applyLogoThemeToBrandPageStyles } from '../../../brand-page/utils';
+import { applyLogoThemeToBrandPageStyles } from '@brand-page/utils';
 import { storyEmailAddress } from './__fixtures__';
 import {
   availableButtonStyleConfigs,
@@ -77,9 +77,9 @@ import {
   createInitialSocialLinksContent,
   createInitialSupportMeContent,
   createInitialTextContent,
-} from '../../models';
+} from '@brand-page-maker/models';
 import { TEMPLATE_CATEGORIES } from '../../../__fixtures__';
-import { useBrandPageMakerStore } from '../../stores';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 import {
   generalLink,
   profileContent,
@@ -88,7 +88,7 @@ import {
 import {
   CONTENT_SETTINGS_MODES,
   useUiContentSettingsStore,
-} from '../../../shared/content-settings/store';
+} from '@shared/content-settings/store';
 import { createPinia } from 'pinia';
 import {
   useUiStore,
@@ -96,16 +96,16 @@ import {
   UNLIMITED_MAX_NUM_OF_PAGES,
   useBrandPageMakerUserStore,
   useLogoStore,
-} from '../../stores';
+} from '@brand-page-maker/stores';
 import { brandPageContentsSampleData } from './__fixtures__/page-content-items';
 import { setupStoryPinia } from './__fixtures__/store-fixture';
 import {
   CONTENT_SETTINGS_CONFIGS,
   DNS_CONFIGURATION_STATUSES,
   SIDE_BAR_TAB_NAMES,
-} from '../../constants';
+} from '@brand-page-maker/constants';
 import { BRAND_SITE_TEMPLATE_SAMPLE } from './__fixtures__/brand-site-template.examples';
-import { setLocaleAsync } from '../../../composables/useTranslate';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 
 const InitialiseMakerStores = (options: {
   prepurchase?: {};

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -122,28 +122,28 @@ import { computed } from 'vue';
 import { HelloBar, Loader } from '@designcrowd/fe-shared-lib';
 import ActionBar from '../action-bar/ActionBar.vue';
 import BrandPageBackgroundSettings from '../brandpage-background-settings/BrandPageBackgroundSettings.vue';
-import ContentSettings from '../../../shared/content-settings/components/content-settings/ContentSettings.vue';
+import ContentSettings from '@shared/content-settings/components/content-settings/ContentSettings.vue';
 import Device from '../device/Device.vue';
 import LayoutSwitcher from '../layout-switcher/LayoutSwitcher.vue';
-import LogoSettings from '../../../shared/logo-settings/components/LogoSettings.vue';
+import LogoSettings from '@shared/logo-settings/components/LogoSettings.vue';
 import MakerNavigation from '../navigation/Navigation.vue';
 import PreviewWithState from '../preview-with-state/PreviewWithState.vue';
 import QuickLinkBar from '../quick-link-bar/QuickLinkBar.vue';
-import SideBar from '../../../shared/side-bar/components/SideBar.vue';
-import StyleSettings from '../../../shared/style-settings/components/StyleSettings.vue';
+import SideBar from '@shared/side-bar/components/SideBar.vue';
+import StyleSettings from '@shared/style-settings/components/StyleSettings.vue';
 import BrandPageMakerMixin from './BrandPageMaker.mixin.ts';
 import BrandPageMakerTemplateSettings from './BrandPageMakerTemplateSettings.vue';
 import BrandPageSettings from '../brandpage-settings/BrandPageSettings.vue';
 import AdminLogoSettings from '../admin-logo-settings/AdminLogoSettings.vue';
 import AdminBackgroundSettings from '../admin-background-settings/AdminBackgroundSettings.vue';
-import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal.vue';
-import ProductConfigModal from '../../../brand-page-maker/components/shop/ProductConfigModal.vue';
+import ConfirmModal from '@shared/confirm-modal/ConfirmModal.vue';
+import ProductConfigModal from '@brand-page-maker/components/shop/ProductConfigModal.vue';
 import VideoPlayButton from '../video-play/VideoPlayButton.vue';
 
-import { SIDE_BAR_TAB_NAMES } from '../../constants';
-import { VIEWPORTS, BRAND_PAGE_TYPES } from '../../../brand-page';
-import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '../../../shared/models';
-import { useLocalisedRouteStore } from '../../stores/route/localised-route-store';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+import { VIEWPORTS, BRAND_PAGE_TYPES } from '@brand-page';
+import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '@shared/models';
+import { useLocalisedRouteStore } from '@brand-page-maker/stores/route/localised-route-store';
 
 export default {
   components: {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.ts

@@ -4,7 +4,7 @@ import {
   DESKTOP_WIDTH,
   MOBILE_HEIGHT,
   MOBILE_WIDTH,
-} from '../../constants';
+} from '@brand-page-maker/constants';
 import {
   useBrandPageMakerStore,
   useBrandPageContainerStore,

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.stories.ts

@@ -3,19 +3,19 @@ import { faker } from '@faker-js/faker';
 import { mapGetters } from 'pinia';
 import type { Component } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
-import { mockDesignTemplateTypeApi } from '../../../shared/template-settings/components/TemplatesSettings.test-helper';
+import { mockDesignTemplateTypeApi } from '@shared/template-settings/components/TemplatesSettings.test-helper';
 import BrandPageMakerTemplateSettings from './BrandPageMakerTemplateSettings.vue';
 import VueRouter, { createMemoryHistory, createRouter } from 'vue-router';
-import { hexToRGB } from '../../../utils/helpers';
+import { hexToRGB } from '@utils/helpers';
 import {
   BRAND_PAGE_TEMPLATE_BP_909,
   LOGO_IMAGE_URL,
 } from '../../../__fixtures__';
 import { setupStoryPinia } from './__fixtures__/store-fixture';
-import { useUiLogoSettingsStore } from '../../../shared/logo-settings/store';
-import { useUiStore } from '../../stores';
-import { getColorShades } from '../../../brand-page/utils';
-import { EMPTY_LOGO_IMAGE_MODEL } from '../../../brand-page';
+import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
+import { useUiStore } from '@brand-page-maker/stores';
+import { getColorShades } from '@brand-page/utils';
+import { EMPTY_LOGO_IMAGE_MODEL } from '@brand-page';
 
 export default {
   title: 'Components/BrandPageMaker/BrandPageMaker Template Settings',

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.vue

@@ -11,7 +11,7 @@
   </TemplatesSettings>
 </template>
 <script>
-import TemplatesSettings from '../../../shared/template-settings/components/TemplatesSettings.vue';
+import TemplatesSettings from '@shared/template-settings/components/TemplatesSettings.vue';
 import TemplatePreviewWithState from '../template-preview-with-state/TemplatePreviewWithState.vue';
 import BrandPageMakerTemplateSettingsMixin from './BrandPageMakerTemplateSettings.mixin';
 

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -6,7 +6,7 @@ import {
   STYLE_THEME_KEYS,
   SENSITIVE_CONTENT_TYPES,
   MEDIA_TYPES,
-} from '../../../../brand-page';
+} from '@brand-page';
 import type {
   BrandPageData,
   BackgroundShape,
@@ -22,19 +22,19 @@ import type {
   PhoneContent,
   ShapesSectionContent,
   BannerSectionContent,
-} from '../../../../brand-page';
+} from '@brand-page';
 import {
   brandPageContentsSampleData,
   brandPageContentsSampleDataStarterKit,
 } from './page-content-items';
-import type { InitialisePayload } from '../../../stores';
+import type { InitialisePayload } from '@brand-page-maker/stores';
 import {
   DEFAULT_MAX_NUM_OF_PAGES,
   UNLIMITED_MAX_NUM_OF_PAGES,
-} from '../../../stores';
+} from '@brand-page-maker/stores';
 import { simpleLogoDesignAttributes } from '../../../../__fixtures__';
-import type { UserFeatures } from '../../../stores';
-import type { AdminPreviewLogoTemplateModel } from '../../../stores/admin-logo-settings';
+import type { UserFeatures } from '@brand-page-maker/stores';
+import type { AdminPreviewLogoTemplateModel } from '@brand-page-maker/stores/admin-logo-settings';
 import { v4 as uuid } from 'uuid';
 import { CONTENT_SETTINGS_CONFIGS } from '../../../constants';
 import type { UIUserFeatures } from 'src/constants/ui';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-payment.ts

@@ -4,7 +4,7 @@ import type {
   CreateCartResult,
   PaymentOption,
   StripePaymentIntent,
-} from '../../../../brand-page';
+} from '@brand-page';
 
 export const brandPagePaymentConfigBrandPageToken =
   '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-site-template.examples.ts

@@ -1,4 +1,4 @@
-import type { PageModel } from '../../../../brand-page';
+import type { PageModel } from '@brand-page';
 
 export const BRAND_SITE_TEMPLATE_SAMPLE: any[] = [
   {

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

@@ -1,4 +1,4 @@
-import { DEFAULT_TEXT_ALIGN } from '../../../../brand-page';
+import { DEFAULT_TEXT_ALIGN } from '@brand-page';
 import type {
   LogoContent,
   ProfileContent,
@@ -15,7 +15,7 @@ import type {
   TwitchContent,
   TiktokContent,
   TextContent,
-} from '../../../../brand-page';
+} from '@brand-page';
 import { faker } from '@faker-js/faker';
 
 export const logoContent: LogoContent = {

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture.ts

@@ -1,5 +1,5 @@
 import { createPinia, setActivePinia } from 'pinia';
-import type { Endpoints } from '../../../../shared/models';
+import type { Endpoints } from '@shared/models';
 import { mockApiCalls } from '../mock-api-calls';
 import type { CustomDomainModel } from '../../../models';
 

package/src/brand-page-maker/components/brand-page-maker/mock-api-calls/index.ts

@@ -4,14 +4,14 @@ import { brandPageApiClient } from '@designcrowd/fe-shared-lib';
 import { brandCrowdApiClient } from '@designcrowd/fe-shared-lib';
 import { mockPaymentApiCalls } from './mock-payment-api-calls';
 import { mockUserMediaApiCalls } from './mock-user-media-api-calls';
-import { mockDesignTemplateTypeApi } from '../../../../shared/template-settings/components/TemplatesSettings.test-helper';
+import { mockDesignTemplateTypeApi } from '@shared/template-settings/components/TemplatesSettings.test-helper';
 import { mockAdminMediaApiCalls } from './mock-admin-media-api-calls';
 import { mockDesignAssetApiCalls } from './mock-design-asset-api-calls';
 import { mockUnsplashApiCalls } from './mock-unsplash-api-calls';
 import { mockMailingListApiCalls } from './mock-mailing-list-api-calls';
 import { mockContactFormApiCalls } from './mock-contact-form-api-calls';
 import { mockByoApiCalls } from './mock-byo-api-calls';
-import { BRAND_PAGE_TYPES } from '../../../../brand-page';
+import { BRAND_PAGE_TYPES } from '@brand-page';
 import { mockCustomDomainApiCalls } from './mock-custom-domain-api-calls';
 import { mockShapeApiCalls } from './mock-shape-api-calls';
 import { mockUserDomainApiCalls } from './mock-user-domain-api-calls';

package/src/brand-page-maker/components/brand-page-maker/mock-api-calls/mock-fabric-render-client-api-calls.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { LOGO_SVG_DATA } from '../../../../brand-page/__fixtures__/logo-svg.fixture';
+import { LOGO_SVG_DATA } from '@brand-page/__fixtures__/logo-svg.fixture';
 import { type ModifyLogoDataResponse } from '../../../../clients/fabric-render-client';
 
 export const mockFabricRenderApiCalls = async (

package/src/brand-page-maker/components/brand-page-maker/mock-api-calls/mock-user-domain-api-calls.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import type { UserDomainName } from '../../../../brand-page/models/user-domain.model';
+import type { UserDomainName } from '@brand-page/models/user-domain.model';
 
 export const mockUserDomainApiCalls = async (
   options: {

package/src/brand-page-maker/components/brand-page-maker/starter-kits/background-colors.ts

@@ -1,5 +1,5 @@
-import type { BrandPageData } from '../../../../brand-page';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import type { BrandPageData } from '@brand-page';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 import { basePageStyles } from './styles';
 
 /* ========================================================================== */

package/src/brand-page-maker/components/brand-page-maker/starter-kits/background-gradients.ts

@@ -1,5 +1,5 @@
-import type { BrandPageData } from '../../../../brand-page';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import type { BrandPageData } from '@brand-page';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 import { basePageStyles } from './styles';
 
 /* ========================================================================== */

package/src/brand-page-maker/components/brand-page-maker/starter-kits/background-images.ts

@@ -1,6 +1,6 @@
-import type { BrandPageData } from '../../../../brand-page';
+import type { BrandPageData } from '@brand-page';
 import { S3_TEMPLATE_ASSETS_URL } from '../../../../constants/brand-page-maker';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 import { basePageStyles } from './styles';
 
 type ImageSample = BrandPageCssStyle;

package/src/brand-page-maker/components/brand-page-maker/starter-kits/background-shapes.ts

@@ -1,5 +1,5 @@
-import type { BrandPageData } from '../../../../brand-page';
-import { STYLE_THEME_KEYS } from '../../../../brand-page/constants';
+import type { BrandPageData } from '@brand-page';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 import { basePageStyles } from './styles';
 
 /* ========================================================================== */

package/src/brand-page-maker/components/brand-page-maker/starter-kits/helpers.ts

@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue';
 import BrandPageMaker from '../BrandPageMaker.vue';
 
-import type { BrandPageData } from '../../../../brand-page';
-import { BrandPageModel } from '../../../../brand-page';
+import type { BrandPageData } from '@brand-page';
+import { BrandPageModel } from '@brand-page';
 import { brandPageContentsSampleDataStarterKit } from '../__fixtures__/page-content-items';
 import {
   simpleLogoDesignAttributes,

package/src/brand-page-maker/components/brand-page-maker/starter-kits/styles.ts

@@ -1,4 +1,4 @@
-import type { PageStyles } from '../../../../brand-page';
+import type { PageStyles } from '@brand-page';
 
 export const basePageStyles: Partial<PageStyles> = {
   logoStyles: {

package/src/brand-page-maker/components/brandpage-background-settings/BrandPageBackgroundSettings.vue

@@ -19,9 +19,9 @@
   </BackgroundSettings>
 </template>
 <script>
-import BackgroundSettings from '../../../shared/background-settings/components/BackgroundSettings.vue';
+import BackgroundSettings from '@shared/background-settings/components/BackgroundSettings.vue';
 import UpgradeToPremiumButton from '../upgrade-to-premium-button/UpgradeToPremiumButton.vue';
-import { brandpageBackgroundSettingsTr } from '../../../composables/useTranslate';
+import { brandpageBackgroundSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: { UpgradeToPremiumButton, BackgroundSettings },

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -1,41 +1,41 @@
 import { defineComponent, computed } from 'vue';
-import PageMixin from '../../../brand-page/components/page/Page.mixin';
-import type { Content, ContentViewModel } from '../../../brand-page';
-import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../shared/models';
-import type { ContentItem } from '../../../shared/content-settings/models';
+import PageMixin from '@brand-page/components/page/Page.mixin';
+import type { Content, ContentViewModel } from '@brand-page';
+import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '@shared/models';
+import type { ContentItem } from '@shared/content-settings/models';
 import {
   CONTENT_SETTINGS_MODES,
   useUiContentSettingsStore,
-} from '../../../shared/content-settings/store';
+} from '@shared/content-settings/store';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
   useUiStore,
   useBrandPageMakerUserStore,
-} from '../../stores';
+} from '@brand-page-maker/stores';
 import {
   getContentSettingsFields,
   getContentSettingsTemplate,
-} from '../../../shared/content-settings/utils';
-import { useUiNavigationStyleSettingsStore } from '../../../shared/navigation-style-settings/store';
-import { useUiSideBarStore } from '../../../shared/side-bar/store';
-import { SIDE_BAR_TAB_NAMES } from '../../constants';
-import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
-import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
+} from '@shared/content-settings/utils';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
+import { useUiSideBarStore } from '@shared/side-bar/store';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import {
   EVENTS,
   SELECT_LOCATIONS,
   useEventTracker,
-} from '../../../brand-page-maker/composables/useEventTracker';
+} from '@brand-page-maker/composables/useEventTracker';
 import debounce from 'lodash.debounce';
 import type { DebounceHandle } from 'lodash.debounce';
 import {
   transformToRTE,
   RTE_ALLOWED_SECTION_TYPES,
-} from '../../../brand-page-maker/utils';
-import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
-import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
+} from '@brand-page-maker/utils';
+import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import { STYLE_THEME_KEYS } from '@brand-page/constants';
 
 export default defineComponent({
   mixins: [PageMixin],

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue

@@ -133,13 +133,13 @@
 </template>
 <script>
 import BrandPageMakerPageMixin from './BrandPageMakerPage.mixin';
-import Page from '../../../brand-page/components/page/Page.vue';
-import PageComponent from '../../../brand-page/components/page/PageComponent.vue';
+import Page from '@brand-page/components/page/Page.vue';
+import PageComponent from '@brand-page/components/page/PageComponent.vue';
 import Draggable from 'vuedraggable';
-import Navigation from '../../../brand-page/components/navigation/Navigation.vue';
-import MediaQuery from '../../../brand-page/components/media-query';
-import BrandSiteNavigationLayout from '../../../brand-page/components/page/BrandSiteNavigationLayout.vue';
-import CookieConsent from '../../../brand-page/components/cookie-consent/CookieConsent.vue';
+import Navigation from '@brand-page/components/navigation/Navigation.vue';
+import MediaQuery from '@brand-page/components/media-query';
+import BrandSiteNavigationLayout from '@brand-page/components/page/BrandSiteNavigationLayout.vue';
+import CookieConsent from '@brand-page/components/cookie-consent/CookieConsent.vue';
 
 export default {
   components: {

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.vue

@@ -134,31 +134,31 @@
 <script setup lang="ts">
 import { Button, CollapsiblePanel } from '@designcrowd/fe-shared-lib';
 import { PaymentConfigList } from '@designcrowd/fe-shared-lib';
-import SideBarSectionTitle from '../../../shared/common/SideBarSectionTitle.vue';
-import SideBarSettingsHeader from '../../../shared/common/SideBarSettingsHeader.vue';
-import { MEDIA_TYPES } from '../../../brand-page/models/brand-page-context.model';
+import SideBarSectionTitle from '@shared/common/SideBarSectionTitle.vue';
+import SideBarSettingsHeader from '@shared/common/SideBarSettingsHeader.vue';
+import { MEDIA_TYPES } from '@brand-page/models/brand-page-context.model';
 import PageSettings from '../seo-settings/SeoPageSettings.vue';
 import UrlSettings from '../seo-settings/UrlSettings.vue';
 import GoogleAnalytics from '../google-analytics/GoogleAnalytics.vue';
 import SocialShare from '../social-share/SocialShare.vue';
 import SensitiveContent from '../sensitive-content/SensitiveContent.vue';
 import CookieSettings from '../cookie-collection/CookieSettings.vue';
-import ImageField from '../../../shared/content-settings/components/image-field/ImageField.vue';
+import ImageField from '@shared/content-settings/components/image-field/ImageField.vue';
 import ReplaceImageSettingsForBrandPageSettings from './ReplaceImageSettingsForBrandPageSettings.vue';
 import {
   BRANDPAGE_SETTINGS_MODES,
   useBrandPageContainerStore,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
-} from '../../stores';
+} from '@brand-page-maker/stores';
 import { computed, reactive, watch, nextTick, ref, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useUiSideBarStore } from '../../../shared/side-bar/store';
+import { useUiSideBarStore } from '@shared/side-bar/store';
 import {
   brandPageSettingsTr,
   commonTr,
   saveContactSettingsTr,
-} from '../../../composables/useTranslate';
+} from '@src/composables/useTranslate';
 import SaveContact from '../save-contact/SaveContact.vue';
 
 const brandPageMakerStore = useBrandPageMakerStore();

package/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.ts

@@ -3,14 +3,14 @@ import {
   useBrandPageMakerStore,
   BRANDPAGE_SETTINGS_MODES,
   useBrandPageMakerUserStore,
-} from '../../stores';
+} from '@brand-page-maker/stores';
 import type {
   ReplaceImageSettingsBase,
   ReplaceImageSettingsTabId,
-} from '../../../shared/content-settings/models';
-import type { UserMediaItemWithDimensions } from '../../../shared/my-uploads/models';
-import type { MediaType } from '../../../brand-page/models/brand-page-context.model';
-import { MEDIA_TYPES } from '../../../brand-page/models/brand-page-context.model';
+} from '@shared/content-settings/models';
+import type { UserMediaItemWithDimensions } from '@shared/my-uploads/models';
+import type { MediaType } from '@brand-page/models/brand-page-context.model';
+import { MEDIA_TYPES } from '@brand-page/models/brand-page-context.model';
 
 const imageExtension = ['.png', '.ico'];
 

package/src/brand-page-maker/components/color-palette/BpColorPalette.vue

@@ -73,7 +73,7 @@ import ClickOutside from 'click-outside-vue3';
 import ColorPicker from './BpColorPicker.vue';
 import IconTextColor from '../rich-text-editor/IconTextColor.vue';
 import IconTextBackgroundColor from '../rich-text-editor/IconTextBackgroundColor.vue';
-import { commonTr } from '../../../composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
 interface Props {
   title?: string;

package/src/brand-page-maker/components/color-palette/BpColorPicker.vue

@@ -65,9 +65,9 @@
   </div>
 </template>
 <script>
-import ColorPickerMixin from '../../../shared/color-picker/components/ColorPicker.mixin.ts';
+import ColorPickerMixin from '@shared/color-picker/components/ColorPicker.mixin.ts';
 import ColorPickerV2 from '../color-picker/BpColorPickerV2.vue';
-import { colorPaletteTr } from '../../../composables/useTranslate';
+import { colorPaletteTr } from '@src/composables/useTranslate';
 
 export default {
   components: {