pds-dev-kit-web-test 2.7.229 → 2.7.230

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

@@ -23,7 +23,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var paginationConfigs_1 = require("./paginationConfigs");
 var CustomPagination = function (_a) {
-    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, styles = _a.styles, onPageClick = _a.onPageClick;
+    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, styles = _a.styles, style = _a.style, onPageClick = _a.onPageClick;
     var getPageGroupStart = function (page) {
         return Math.floor((page - 1) / 5) * 5 + 1;
     };
@@ -68,9 +68,9 @@ var CustomPagination = function (_a) {
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current) }, { children: renderPagination() })));
+    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ "data-pagination-type": styles.type, className: "custom-pagination_".concat(current) }, { children: renderPagination() })));
 };
 exports.CustomPagination = CustomPagination;
-var S_Pagination = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px;\n"], ["\n  padding: 8px;\n"])));
+var S_Pagination = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n\n  &[data-pagination-type='DESIGN1'],\n  &[data-pagination-type='DESIGN2'],\n  &[data-pagination-type='DESIGN3'],\n  &[data-pagination-type='DESIGN4'],\n  &[data-pagination-type='DESIGN5'],\n  &[data-pagination-type='DESIGN6'] {\n    padding: 8px 0;\n  }\n"], ["\n  padding: 0;\n\n  &[data-pagination-type='DESIGN1'],\n  &[data-pagination-type='DESIGN2'],\n  &[data-pagination-type='DESIGN3'],\n  &[data-pagination-type='DESIGN4'],\n  &[data-pagination-type='DESIGN5'],\n  &[data-pagination-type='DESIGN6'] {\n    padding: 8px 0;\n  }\n"])));
 exports.default = exports.CustomPagination;
 var templateObject_1;

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

@@ -8,6 +8,7 @@ type ParseContentsListStyleToCarouselCoreProps = {
 };
 type ParseContentsListContentToCarouselCoreProps = {
     props: CB_CONTENT_PROP_CONTENTSLIST;
+    device: Device;
 };
 type ParseContentsListStyleToCustomPaginationProps = {
     props: CB_STYLE_PROP_CONTENTSLIST_SPECS;
@@ -18,7 +19,7 @@ export declare function parseGridStyleProp({ props, device }: ParseContentsListS
     stylePropCss: CssFragment;
     hoverStylePropCss: CssFragment;
 };
-export declare function parseGridContentProp({ props }: ParseContentsListContentToCarouselCoreProps): {
+export declare function parseGridContentProp({ props, device }: ParseContentsListContentToCarouselCoreProps): {
     contentPropCss: CssFragment;
 };
 export declare function parsePaginationStyleProp({ props, device }: ParseContentsListStyleToCustomPaginationProps): {

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

@@ -42,10 +42,18 @@ function parseStylePropertyStyles(key, value) {
 function getColumnsPropStyleValues(value, rows) {
     return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "])), value, rows);
 }
-function parseContentPropertyStyles(key, value, rows) {
-    switch (key) {
-        case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
-            return getColumnsPropStyleValues(value, rows);
+function parseContentPropertyStyles(key, value, rows, device) {
+    if (device === 'DESKTOP') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
+    }
+    if (device === 'MOBILE') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
     }
     return undefined;
 }
@@ -70,16 +78,19 @@ function parseGridStyleProp(_a) {
 }
 exports.parseGridStyleProp = parseGridStyleProp;
 function parseGridContentProp(_a) {
-    var props = _a.props;
+    var props = _a.props, device = _a.device;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
     var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ||
         props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS ||
         1;
-    var columns = Math.min(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, displayCounts);
+    var columnsByDevice = device === 'DESKTOP'
+        ? props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var columns = Math.min(columnsByDevice, displayCounts);
     var rows = Math.ceil(displayCounts / columns);
     return availableSpecCodes.reduce(function (acc, currentKey) {
         var value = props[currentKey];
-        var styles = parseContentPropertyStyles(currentKey, value, rows);
+        var styles = parseContentPropertyStyles(currentKey, value, rows, device);
         return {
             contentPropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };

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

@@ -0,0 +1,4 @@
+import type { ContentsListElementsProps } from '../ContentsList';
+import type { CSSProperties } from 'react';
+export declare function getPosition(position: string, designType: string, size: string, elementType: ContentsListElementsProps['type'] | 'GROUP'): CSSProperties;
+export declare const POS_INSET: Record<string, CSSProperties>;

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POS_INSET = exports.getPosition = void 0;
+var GAP = 8;
+function getPosition(position, designType, size, elementType) {
+    if (position.startsWith('OUTSET')) {
+        if (elementType === 'GROUP') {
+            return POS_OUTSET_GROUP[position];
+        }
+        var val = POS_OUTSET_PAGINATION[position];
+        return val;
+    }
+    if (elementType === 'GROUP') {
+        return exports.POS_INSET[position];
+    }
+    return {};
+}
+exports.getPosition = getPosition;
+exports.POS_INSET = {
+    INSET1: { top: GAP, left: GAP },
+    INSET2: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
+    INSET3: { top: GAP, right: GAP },
+    INSET4: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
+    INSET5: { bottom: GAP, right: GAP },
+    INSET6: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
+    INSET7: { left: GAP, bottom: GAP },
+    INSET8: { top: '50%', left: GAP, transform: 'translateY(-50%)' }
+};
+var POS_OUTSET_PAGINATION = {
+    OUTSET1: { bottom: 15 },
+    OUTSET2: { bottom: 15 },
+    OUTSET3: { bottom: 15 },
+    OUTSET4: { left: 15 },
+    OUTSET5: { left: 15 },
+    OUTSET6: { left: 15 },
+    OUTSET7: { top: 15 },
+    OUTSET8: { top: 15 },
+    OUTSET9: { top: 15 },
+    OUTSET10: { right: 15 },
+    OUTSET11: { right: 15 },
+    OUTSET12: { right: 15 }
+};
+var POS_OUTSET_GROUP = {
+    OUTSET1: {
+        top: 0,
+        height: 0
+    },
+    OUTSET2: {
+        bottom: '100%',
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET3: {
+        bottom: '100%',
+        height: 0,
+        right: 0,
+        justifyContent: 'flex-start'
+    },
+    OUTSET4: {
+        top: 0,
+        width: 0,
+        right: 0
+    },
+    OUTSET5: {
+        top: '50%',
+        width: 0,
+        right: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET6: {
+        bottom: 0,
+        width: 0,
+        right: 0
+    },
+    OUTSET7: {
+        bottom: 0,
+        height: 0,
+        right: 0
+    },
+    OUTSET8: {
+        bottom: 0,
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET9: {
+        bottom: 0,
+        height: 0,
+        left: 0
+    },
+    OUTSET10: {
+        bottom: 0,
+        width: 0,
+        left: 0
+    },
+    OUTSET11: {
+        top: '50%',
+        width: 0,
+        left: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET12: {
+        top: 0,
+        width: 0,
+        left: 0
+    }
+};

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

@@ -13,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, ContentsListElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL' | 'GROUP', elementType: string) => CSSProperties;
     getComponentGroupLayout: (components: ContentsListElementsProps[], position: string) => CSSProperties;
 };

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

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFlexGridLayout = void 0;
 var react_1 = require("react");
+var elementPositions_1 = require("./elementPositions");
 var useFlexGridLayout = function (_a) {
     var components = _a.components;
     var _b = (0, react_1.useState)({ top: 0, right: 0, bottom: 0, left: 0 }), groupSizes = _b[0], setGroupSizes = _b[1];
@@ -59,51 +60,33 @@ var useFlexGridLayout = function (_a) {
         };
         return directions[position];
     };
-    // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset) {
+    var getPositionStyle = function (position, ccbInset, designType, size, elementType) {
+        var EAST = ['OUTSET4', 'OUTSET5', 'OUTSET6'];
+        var WEST = ['OUTSET10', 'OUTSET11', 'OUTSET12'];
+        var SOUTH = ['OUTSET7', 'OUTSET8', 'OUTSET9'];
+        var NORTH = ['OUTSET1', 'OUTSET2', 'OUTSET3'];
+        var isEAST = EAST.includes(position);
+        var isWEST = WEST.includes(position);
+        var isSOUTH = SOUTH.includes(position);
+        var isNORTH = NORTH.includes(position);
         var base = {
-            position: 'absolute',
+            position: 'relative',
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            alignItems: isSOUTH ? 'flex-start' : isNORTH ? 'flex-end' : 'center',
+            justifyContent: isEAST ? 'flex-start' : isWEST ? 'flex-end' : 'center'
         };
-        // CCB의 중앙 위치 계산
-        var ccbTop = parseFloat(ccbInset.top) || 0;
-        var ccbRight = parseFloat(ccbInset.right) || 0;
-        var ccbBottom = parseFloat(ccbInset.bottom) || 0;
-        var ccbLeft = parseFloat(ccbInset.left) || 0;
-        // CCB의 실제 크기와 중앙 위치 계산
-        var ccbWidth = layoutSize.width - ccbLeft - ccbRight;
-        var ccbHeight = layoutSize.height - ccbTop - ccbBottom;
-        var ccbCenterX = ccbLeft + ccbWidth / 2;
-        var ccbCenterY = ccbTop + ccbHeight / 2;
-        var positions = {
-            OUTSET1: { top: -50, left: ccbLeft },
-            OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            OUTSET3: { top: -50, right: ccbRight },
-            OUTSET4: { top: ccbTop, right: -50 },
-            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: -50, transform: 'translateY(-50%)' },
-            OUTSET6: { bottom: ccbBottom, right: -50 },
-            OUTSET7: { bottom: -50, right: ccbRight },
-            OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            OUTSET9: { bottom: -50, left: ccbLeft },
-            OUTSET10: { bottom: ccbBottom, left: -50 },
-            OUTSET11: { top: "".concat(ccbCenterY, "px"), left: -50, transform: 'translateY(-50%)' },
-            OUTSET12: { top: ccbTop, left: -50 },
-            INSET1: { top: ccbTop + GAP, left: ccbLeft + GAP },
-            INSET2: { top: ccbTop + GAP, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            INSET3: { top: ccbTop + GAP, right: ccbRight + GAP },
-            INSET4: { top: "".concat(ccbCenterY, "px"), right: ccbRight + GAP, transform: 'translateY(-50%)' },
-            INSET5: { bottom: ccbBottom + GAP, right: ccbRight + GAP },
-            INSET6: {
-                bottom: ccbBottom + GAP,
-                left: "".concat(ccbCenterX, "px"),
-                transform: 'translateX(-50%)'
-            },
-            INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
-            INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
-        };
-        return __assign(__assign({}, base), positions[position]);
+        // // CCB의 중앙 위치 계산
+        // const ccbTop = parseFloat(ccbInset.top) || 0;
+        // const ccbRight = parseFloat(ccbInset.right) || 0;
+        // const ccbBottom = parseFloat(ccbInset.bottom) || 0;
+        // const ccbLeft = parseFloat(ccbInset.left) || 0;
+        // // CCB의 실제 크기와 중앙 위치 계산
+        // const ccbWidth = layoutSize.width - ccbLeft - ccbRight;
+        // const ccbHeight = layoutSize.height - ccbTop - ccbBottom;
+        // const ccbCenterX = ccbLeft + ccbWidth / 2;
+        // const ccbCenterY = ccbTop + ccbHeight / 2;
+        var pos = (0, elementPositions_1.getPosition)(position, designType, size, elementType);
+        return __assign(__assign({}, base), pos);
     };
     // 컴포넌트 그룹 레이아웃
     var getComponentGroupLayout = function (components, position) {
@@ -129,8 +112,7 @@ var useFlexGridLayout = function (_a) {
         return {
             display: 'flex',
             flexDirection: isHorizontal ? 'row' : 'column',
-            gap: '8px',
-            alignItems: 'center'
+            gap: '8px'
         };
     };
     // ccbInset 계산

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

@@ -7,7 +7,7 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL'
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE = boolean | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null;
-export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17';
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR = string;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_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';
 type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,8 @@ type ComponentType = 'PREV' | 'NEXT' | 'PAGINATION' | 'PROGRESSBAR';
 export type SlideBannerElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    size: 'LARGE' | 'MEDIUM' | 'SMALL';
 };
 declare function SlideBanner(props: Props): JSX.Element;
 export default SlideBanner;

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

@@ -29,6 +29,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 react_i18next_1 = require("react-i18next");
 var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
 var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
@@ -42,12 +43,15 @@ var CustomNavigationNextBtn_1 = require("./components/CustomNavigationNextBtn");
 var CustomNavigationPrevBtn_1 = require("./components/CustomNavigationPrevBtn");
 var CustomPagination_1 = require("./components/CustomPagination");
 var CustomProgressbar_1 = require("./components/CustomProgressbar");
+require("./hooks/elementPositions");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
 var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
 var slideBannerUtils_1 = require("./slideBannerUtils");
-var createComponent = function (type, getDesignType, getLocation) {
-    return function (normalStyle, hoverStyle, isHovered) {
+var createComponent = function (type, getDesignType, getLocation, designType, size) {
+    if (size === void 0) { size = 'MEDIUM'; }
+    return function (normalStyle, hoverStyle, isHovered, size) {
+        if (size === void 0) { size = 'MEDIUM'; }
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
         if (isHovered && hoverDesign === 'NONE')
@@ -56,34 +60,40 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType,
+            size: size
         };
     };
 };
 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_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, 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_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
+    var _a;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
+    var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, 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_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
     var compositions = props.compositions;
     var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
-    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, overlayStyle = _c.overlayStyle, effect = _c.effect;
-    var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
+    var autoPlayEnabled = device === 'DESKTOP'
+        ? CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
+        : (_a = CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD['CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD_SPEC_AUTOPLAYUSE:MOBILE']) !== null && _a !== void 0 ? _a : CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD_SPEC_AUTOPLAYUSE;
+    var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, overlayStyle = _d.overlayStyle, effect = _d.effect;
+    var _e = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), slideBannerNormalStyle = _d.normalStyle, slideBannerHoverStyle = _d.hoverStyle;
-    var _e = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
+    }), slideBannerNormalStyle = _e.normalStyle, slideBannerHoverStyle = _e.hoverStyle;
+    var _f = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), customPaginationNormalStyle = _e.normalStyle, customPaginationHoverStyle = _e.hoverStyle;
-    var _f = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
+    }), customPaginationNormalStyle = _f.normalStyle, customPaginationHoverStyle = _f.hoverStyle;
+    var _g = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
-    var _g = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
+    }), customNavigationNormalStyle = _g.normalStyle, customNavigationHoverStyle = _g.hoverStyle;
+    var _h = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
-    var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, currentSlide = _h.currentSlide, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickBullet = _h.onClickBullet, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
-    var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
+    }), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
+    var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, currentSlide = _j.currentSlide, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickBullet = _j.onClickBullet, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
+    var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
     var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
@@ -99,35 +109,27 @@ function SlideBanner(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
-    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
-    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.prevBtnType || 'NONE', customNavigationNormalStyle.prevBtnSize || 'MEDIUM');
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.nextBtnType || 'NONE', customNavigationNormalStyle.nextBtnSize || 'MEDIUM');
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; }, customPaginationNormalStyle.type || 'NONE', customPaginationNormalStyle.size || 'MEDIUM');
     var components = [
         createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
         createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
         createPagination(customPaginationNormalStyle, customPaginationHoverStyle, isHovered),
         { type: 'PROGRESSBAR', position: 'INSET5' }
     ].filter(function (component) { return component !== undefined; });
-    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
-    // ccbInset,
-    componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
-    var ccbInset = {
-        top: '0px',
-        right: '0px',
-        bottom: '0px',
-        left: '0px'
-    };
-    var renderElements = function (component) {
+    var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, ccbInset = _l.ccbInset, componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
+    var renderElements = function (component, positionStyle) {
         var _a;
         switch (component.type) {
             case 'PREV':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn }));
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, style: positionStyle }));
             case 'NEXT':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn }));
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: positionStyle }));
             case 'PAGINATION':
-                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn }));
+                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn, style: positionStyle }));
             case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
             default:
                 return null;
         }
@@ -150,17 +152,40 @@ function SlideBanner(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { 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.jsxs)(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_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_Overlay, { style: overlayStyle }), (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, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { 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, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
+                        }) })) }), 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.jsxs)(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_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_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((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, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { 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: orderedCompositions
-                                    }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE) })) }))] })) }))] }));
+                                    }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE +
+                                    autoPlayEnabled +
+                                    orderedCompositions.length) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
+}
+function EmptyString() {
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
 }
-var S_Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
-var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: inherit;\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  border-radius: inherit;\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"])));
+var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Overlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
+var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: inherit;\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  border-radius: inherit;\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;
@@ -181,8 +206,8 @@ function getMediaType(isMobile, specs) {
     }
     return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
 }
-var S_SwiperLayout = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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_4 || (templateObject_4 = __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_SwiperLayout = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __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) {
@@ -199,4 +224,4 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_4 || (templ
     return customStyle;
 });
 exports.default = SlideBanner;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -4,9 +4,10 @@ export interface CustomNavigationNextBtnProps {
     isDisabled: boolean;
     styles: CustomNavigationProps;
     hoverStyles?: CustomNavigationProps;
+    style?: React.CSSProperties;
     onClick?: () => void;
 }
-export declare const CustomNavigationNextBtn: ({ isDisabled, styles, hoverStyles, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
+export declare const CustomNavigationNextBtn: ({ isDisabled, styles, hoverStyles, style, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -44,24 +44,24 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
 var styled_components_1 = __importStar(require("styled-components"));
 var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigationNextBtn = function (_a) {
-    var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, onClick = _a.onClick;
+    var isDisabled = _a.isDisabled, styles = _a.styles, hoverStyles = _a.hoverStyles, style = _a.style, onClick = _a.onClick;
     var nextButton = styles.nextBtnType === 'NONE'
         ? undefined
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
-    var buttonSize = 'large';
+    var buttonSize = 48;
     var iconSize = 24;
     if (styles.nextBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+        buttonSize = 40;
+        iconSize = 20;
     }
     if (styles.nextBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
+        buttonSize = 80;
         iconSize = 48;
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-slidebanner-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-slidebanner-next-button", disabled: isDisabled, "$size": styles.nextBtnSize, style: style }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
 };
 exports.CustomNavigationNextBtn = CustomNavigationNextBtn;
-var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  ", ";\n"], ["\n  cursor: pointer;\n\n  ", ";\n"])), function (_a) {
+var S_NextButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n\n  ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "], ["\n      cursor: auto;\n      opacity: 0.35;\n      pointer-events: none;\n    "])));
 });

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

@@ -4,9 +4,10 @@ export interface CustomNavigationPrevBtnProps {
     isDisabled: boolean;
     styles: CustomNavigationProps;
     hoverStyles?: CustomNavigationProps;
+    style?: React.CSSProperties;
     onClick?: () => void;
 }
-export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, hoverStyles, onClick }: CustomNavigationPrevBtnProps) => JSX.Element;
+export declare const CustomNavigationPrevBtn: ({ isDisabled, styles, hoverStyles, style, onClick }: CustomNavigationPrevBtnProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;