pds-dev-kit-web-test 2.7.121 → 2.7.122

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js

@@ -20,10 +20,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var CustomSectionBackgroundMedia_1 = require("@sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
+var createCompositions_1 = require("@sub/DynamicLayout/CompositionRenderer/createCompositions");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var isNullOrUndefined_1 = __importDefault(require("@sub/DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+require("@sub/DynamicLayout/types");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
@@ -51,7 +54,7 @@ var createComponent = function (type, getDesignType, getLocation) {
 function ContentsCarousel(props) {
     var _a;
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
-    var compositions = props.compositions, index = props.index, _c = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
+    var compositions = props.compositions, index = props.index, _c = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
     var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
     var _e = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
@@ -117,6 +120,10 @@ function ContentsCarousel(props) {
         : (_a = CB_STYLE_PROP_CONTENTSCAROUSEL['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_CONTENTSCAROUSEL.CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING;
     var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 24 : 36;
     var pointerEventsObj = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    var backgroundRef = (0, react_1.useRef)(null);
+    var isMobile = device === 'MOBILE';
+    var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
+    var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements", ref: function (el) {
@@ -127,19 +134,39 @@ function ContentsCarousel(props) {
                             delete positionRefs.current[position];
                         }
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { pointerEvents: 'none', zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
-            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
-                                ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
-                                : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD'
-                                    ? 'cards'
-                                    : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'FADEOUTANDIN'
-                                        ? 'fade'
-                                        : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
-                                    valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
-                                    queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
-                                    limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
-                                    queryData: queryData,
-                                    compositions: compositions
-                                }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE) })) })) })) }))] }));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-number-of-items": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
+                                    ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
+                                    : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD'
+                                        ? 'cards'
+                                        : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'FADEOUTANDIN'
+                                            ? 'fade'
+                                            : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
+                                        valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
+                                        queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
+                                        limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
+                                        queryData: queryData,
+                                        compositions: compositions
+                                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE) }))] })) })) }))] }));
+}
+function getIsBgMedia(isMobile, specs) {
+    if (!specs) {
+        return false;
+    }
+    if (isMobile) {
+        return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
+}
+function getMediaType(isMobile, specs) {
+    if (!specs) {
+        return 'NONE';
+    }
+    if (isMobile) {
+        return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
+            ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
+            : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
 }
 var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
 var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
@@ -158,5 +185,6 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templ
     var customStyle = _a.customStyle;
     return customStyle;
 });
+var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])));
 exports.default = ContentsCarousel;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationNextBtn.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomNavigationNextBtn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var IconButton_1 = require("@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton");
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationNextBtn = function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationPrevBtn.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomNavigationPrevBtn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var IconButton_1 = require("@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton");
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationPrevBtn = function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/navigationConfigs.d.ts

@@ -1,4 +1,4 @@
 import type { CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE, CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE } from '../types';
-import type { IconButtonProps } from '../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton';
+import type { IconButtonProps } from '@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton';
 export declare const prevButtonMappedIcons: Record<CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE, IconButtonProps>;
 export declare const nextButtonMappedIcons: Record<CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE, IconButtonProps>;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/contentsCarouselUtils.d.ts

@@ -1,6 +1,6 @@
 import type { CB_CONTENT_PROP_CONTENTSCAROUSEL } from '../types';
 import type { CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS, ContentsCarouselPropsKeys, CustomNavigationProps, CustomProgressbarProps, CoreCarouselProps } from './types';
-import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { Device } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 import type { css } from 'styled-components';
 type ParseCarouselStyleToCarouselCoreProps = {
     props: CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/types.d.ts

@@ -1,4 +1,4 @@
-import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 import type { SwiperProps } from 'swiper/react';
 export type ContentsCarouselPropsKeys = keyof CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS;
 export type OUTSET_POSTIION = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12';

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { OUTSET_POSTIION, INSET_POSTIION } from './types';
-import type { CB_LIST } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
-import type { CB_LIST_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_LIST } from '@sub/DynamicLayout/sections/CustomSection/types';
+import type { CB_LIST_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_LIST_PROPERTIES_TYPE & IndexForIntersection & {
     compositions: CB_LIST['compositions'];
 };

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js

@@ -21,12 +21,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = require("react");
-var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
-var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
-var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+var CustomSectionBackgroundMedia_1 = require("@sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
+var createCompositions_1 = require("@sub/DynamicLayout/CompositionRenderer/createCompositions");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var isNullOrUndefined_1 = __importDefault(require("@sub/DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/components/paginationConfigs.js

@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Design13 = exports.Design12 = exports.Design11 = exports.Design10 = exports.Design9 = exports.Design8 = exports.Design7 = exports.Design6 = exports.Design5 = exports.Design4 = exports.Design3 = exports.Design2 = exports.Design1 = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../../../../../DynamicLayout/components");
+var components_1 = require("@sub/DynamicLayout/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Design1(_a) {
     var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/contentsListUtils.d.ts

@@ -1,7 +1,7 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
 import type { CB_CONTENT_PROP_CONTENTSLIST } from '../types';
 import type { CB_STYLE_PROP_CONTENTSLIST_SPECS, ContentsListPropsKeys, CustomPaginationProps } from './types';
-import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { Device } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type ParseContentsListStyleToCarouselCoreProps = {
     props: CB_STYLE_PROP_CONTENTSLIST_SPECS;
     device: Device;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/types.d.ts

@@ -1,4 +1,4 @@
-import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type ContentsListPropsKeys = keyof CB_STYLE_PROP_CONTENTSLIST_SPECS;
 export type OUTSET_POSTIION = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12';
 export type INSET_POSTIION = 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/Embed.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/IframeDenied.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
 var react_i18next_1 = require("react-i18next");
-var components_1 = require("../../../../../../../DynamicLayout/components");
+var components_1 = require("@sub/DynamicLayout/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 function IframeDenied() {
     var t = (0, react_i18next_1.useTranslation)().t;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/types.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultBrightTheme } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
 export type CB_TWITTER_STYLE_PROPS = {
     CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js

@@ -43,8 +43,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var compositionQueryContext_1 = require("@sub/DynamicLayout/compositionQueryContext");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/types.d.ts

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, STRING_PLAIN } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, STRING_PLAIN } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type ImagePropsKeys = keyof CB_IMAGE_STYLE_PROPS;
 export type CB_IMAGE_STYLE_PROPS = {
     CB_STYLE_PROP_IMAGE_SPEC_FIT: STRING_PLAIN;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_RICHTEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_RICHTEXT_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_RICHTEXT_PROPERTIES_TYPE & IndexForIntersection;
 declare function RichText(props: Props): JSX.Element;
 export default RichText;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js

@@ -21,11 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var RichText_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks/RichText");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var RichText_1 = require("@sub/DynamicLayout/components/ComponentBlocks/RichText");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/types.d.ts

@@ -1,5 +1,5 @@
 import type { BGColorPropsKeys, CB_STYLE_PROP_BGCOLOR_SPECS } from '../Youtube/types';
-import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type CB_STYLE_PROP_BGOVERLAY_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
 export type CB_STYLE_PROP_BGOVERLAY_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
 export type CB_STYLE_PROP_BGOVERLAY_SPECS_BASE = {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
-import type { CB_SLIDEBANNER } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
-import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_SLIDEBANNER } from '@sub/DynamicLayout/sections/CustomSection/types';
+import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
     compositions: CB_SLIDEBANNER['compositions'];
 };

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js

@@ -20,10 +20,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var CustomSectionBackgroundMedia_1 = require("@sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
+var createCompositions_1 = require("@sub/DynamicLayout/CompositionRenderer/createCompositions");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var isNullOrUndefined_1 = __importDefault(require("@sub/DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+require("@sub/DynamicLayout/types");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
@@ -51,7 +54,7 @@ var createComponent = function (type, getDesignType, getLocation) {
 };
 function SlideBanner(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
-    var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA;
     var compositions = props.compositions;
     var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
     var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
@@ -120,6 +123,10 @@ function SlideBanner(props) {
                 return null;
         }
     };
+    var backgroundRef = (0, react_1.useRef)(null);
+    var isMobile = device === 'MOBILE';
+    var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
+    var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements", ref: function (el) {
@@ -130,16 +137,37 @@ function SlideBanner(props) {
                             delete positionRefs.current[position];
                         }
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3, pointerEvents: 'none' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
-            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
-                                    valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
-                                    queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
-                                    limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
-                                    queryData: queryData,
-                                    compositions: compositions
-                                }) })) })) })) })) }))] }));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
+                                        valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                                        queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
+                                        limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
+                                        queryData: queryData,
+                                        compositions: compositions
+                                    }) })) }))] })) })) }))] }));
 }
-var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
-var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
+var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])));
+function getIsBgMedia(isMobile, specs) {
+    if (!specs) {
+        return false;
+    }
+    if (isMobile) {
+        return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
+}
+function getMediaType(isMobile, specs) {
+    if (!specs) {
+        return 'NONE';
+    }
+    if (isMobile) {
+        return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
+            ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
+            : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
+}
+var S_SwiperLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
+var S_SwiperWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
     var ccbInset = _a.ccbInset;
     return ccbInset.bottom;
 }, function (_a) {
@@ -156,4 +184,4 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templ
     return customStyle;
 });
 exports.default = SlideBanner;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomNavigationNextBtn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var IconButton_1 = require("@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton");
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationNextBtn = function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomNavigationPrevBtn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var IconButton_1 = require("@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton");
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationPrevBtn = function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomPagination = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../../../../../DynamicLayout/components");
+var components_1 = require("@sub/DynamicLayout/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var CustomPagination = function (_a) {
     var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, isNextBtnDisabled = _a.isNextBtnDisabled, isPrevBtnDisabled = _a.isPrevBtnDisabled, styles = _a.styles, onBulletClick = _a.onBulletClick, onNextBtnClick = _a.onNextBtnClick, onPrevBtnClick = _a.onPrevBtnClick;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/navigationConfigs.d.ts

@@ -1,4 +1,4 @@
 import type { CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE, CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE } from '../types';
-import type { IconButtonProps } from '../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton';
+import type { IconButtonProps } from '@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton';
 export declare const prevButtonMappedIcons: Record<CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE, IconButtonProps>;
 export declare const nextButtonMappedIcons: Record<CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE, IconButtonProps>;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/slideBannerUtils.d.ts

@@ -1,5 +1,5 @@
 import type { CB_STYLE_PROP_SLIDEBANNER_SPECS, SlideBannerPropsKeys, CoreSlideBannerProps, CustomNavigationProps, CustomProgressbarProps, CustomPaginationProps } from './types';
-import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { Device } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 import type { css } from 'styled-components';
 type ParseSlideBannerStyleToSlideBannerCoreProps = {
     props: CB_STYLE_PROP_SLIDEBANNER_SPECS;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/types.d.ts

@@ -1,4 +1,4 @@
-import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 import type { SwiperProps } from 'swiper/react';
 export type SlideBannerPropsKeys = keyof CB_STYLE_PROP_SLIDEBANNER_SPECS;
 export type OUTSET_POSTIION = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12';

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var compositionQueryContext_1 = require("@sub/DynamicLayout/compositionQueryContext");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js

@@ -13,8 +13,8 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var ComponentBlocks_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var ComponentBlocks_1 = require("@sub/DynamicLayout/components/ComponentBlocks");
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/types.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultBrightTheme } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
 export type CB_TWITTER_STYLE_PROPS = {
     CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_VIDEOPLAYER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_VIDEOPLAYER_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_VIDEOPLAYER_PROPERTIES_TYPE & IndexForIntersection;
 declare function VideoPlayer(props: Props): JSX.Element;
 export default VideoPlayer;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js

@@ -20,11 +20,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Icon_1 = require("../../../../../../../DynamicLayout/components/pdsOriginal/hybrid/Icon");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var Icon_1 = require("@sub/DynamicLayout/components/pdsOriginal/hybrid/Icon");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_YOUTUBE_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_YOUTUBE_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_YOUTUBE_PROPERTIES_TYPE & IndexForIntersection;
 export type YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
 declare function Youtube(props: Props): JSX.Element;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js

@@ -20,10 +20,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.d.ts

@@ -1,6 +1,6 @@
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE } from './types';
 import type { YOUTUBE_AUTOPLAY_TRIGGER_POINT } from './Youtube';
-import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { Device } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE, device: Device, autoplayTriggerPoint: YOUTUBE_AUTOPLAY_TRIGGER_POINT): {
     id: string;
     youtubeSrc: string;