pds-dev-kit-web-test 2.7.245 → 2.7.247

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { ContentsListElementsProps } from '../ContentsList';
-import type { CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from '../types';
 import type { CSSProperties } from 'styled-components';
 export declare const useFlexGridLayout: ({ components }: {
     components: ContentsListElementsProps[];
@@ -14,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, ContentsListElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE) => 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,13 +13,13 @@ 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];
     var _c = (0, react_1.useState)({ width: 0, height: 0 }), layoutSize = _c[0], setLayoutSize = _c[1];
     var layoutRef = (0, react_1.useRef)(null);
     var positionRefs = (0, react_1.useRef)({});
-    console.log('useFlexGridLayout components:', components);
     // 위치별로 컴포넌트 그룹화
     var getComponentsByPosition = function () {
         var groups = {};
@@ -60,51 +60,33 @@ var useFlexGridLayout = function (_a) {
         };
         return directions[position];
     };
-    // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset, designType) {
+    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) {
@@ -130,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.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");
@@ -66,29 +67,33 @@ var createComponent = function (type, getDesignType, getLocation, designType, si
     };
 };
 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' } : {};
@@ -113,7 +118,7 @@ function SlideBanner(props) {
         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 = _k.ccbInset, componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
+    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) {
@@ -124,7 +129,7 @@ function SlideBanner(props) {
             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, 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;
         }
@@ -148,20 +153,39 @@ function SlideBanner(props) {
                             delete positionRefs.current[position];
                         }
                     }, 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, 
-                            // getPosition(position, component.designType, component.size, component.type)
-                            getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
+                            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 }), (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)({
+            }), (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, {}))] })) }))] }));
 }
-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"])));
+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_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;
@@ -182,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) {
@@ -200,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.js

@@ -49,10 +49,10 @@ var CustomNavigationNextBtn = function (_a) {
         ? undefined
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
     var buttonSize = 48;
-    var iconSize = 20;
+    var iconSize = 24;
     if (styles.nextBtnSize === 'SMALL') {
         buttonSize = 40;
-        iconSize = 24;
+        iconSize = 20;
     }
     if (styles.nextBtnSize === 'LARGE') {
         buttonSize = 80;

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

@@ -49,12 +49,12 @@ var CustomNavigationPrevBtn = function (_a) {
         ? undefined
         : navigationConfigs_1.prevButtonMappedIcons[styles.prevBtnType || 'DESIGN1'];
     var buttonSize = 48;
-    var iconSize = 20;
-    if (styles.nextBtnSize === 'SMALL') {
+    var iconSize = 24;
+    if (styles.prevBtnSize === 'SMALL') {
         buttonSize = 40;
-        iconSize = 24;
+        iconSize = 20;
     }
-    if (styles.nextBtnSize === 'LARGE') {
+    if (styles.prevBtnSize === 'LARGE') {
         buttonSize = 80;
         iconSize = 48;
     }

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

@@ -52,7 +52,7 @@ var CustomPagination = function (_a) {
                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                 case 'DESIGN1': {
                     var _j = SLIDE_BANNER_PAGINATION_SIZES.DESIGN1[(_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM'], SELECTED_TEXT_STYLE_THEME = _j.SELECTED_TEXT_STYLE_THEME, UNSELECTED_TEXT_STYLE_THEME = _j.UNSELECTED_TEXT_STYLE_THEME;
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: SELECTED_TEXT_STYLE_THEME, style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/ ".concat(total) }))] })));
+                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px", style: { color: styles.secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: SELECTED_TEXT_STYLE_THEME, style: { color: styles.primaryColor || 'inherit' } }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total }))] })));
                 }
                 // case 'DESIGN2': {
                 //   return (
@@ -96,7 +96,7 @@ var CustomPagination = function (_a) {
                                     marginLeft: '8px',
                                     marginRight: '4px',
                                     color: styles.primaryColor || 'inherit'
-                                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: ICON_SIZE, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+                                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '4px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNextBtnClick, disabled: isNextBtnDisabled }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { overrideColorHex: styles.primaryColor, iconName: "ic_arrow_right", size: ICON_SIZE, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
                 }
                 // case 'DESIGN6':
                 //   return (

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

@@ -4,6 +4,7 @@ type Props = {
     styles: CustomProgressbarProps;
     progressRef: React.RefObject<number>;
     leftTimeMsRef: React.RefObject<number>;
+    slidesLength: number;
 };
-export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef }: Props) => JSX.Element;
+export declare const CustomProgressbar: ({ styles, progressRef, leftTimeMsRef, slidesLength }: Props) => JSX.Element;
 export default CustomProgressbar;

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

@@ -24,7 +24,7 @@ var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var progressConfigs_1 = require("./progressConfigs");
 var CustomProgressbar = function (_a) {
-    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef;
+    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, slidesLength = _a.slidesLength;
     var _b = (0, react_1.useState)(0), leftTimeSec = _b[0], setLeftTimeSec = _b[1];
     var _c = (0, react_1.useState)(0), progress = _c[0], setProgress = _c[1];
     (0, react_1.useEffect)(function () {
@@ -55,19 +55,21 @@ var CustomProgressbar = function (_a) {
         animationId = requestAnimationFrame(updateProgress);
         return function () { return cancelAnimationFrame(animationId); };
     }, []);
+    var progressRender = slidesLength > 1 ? progress : 0;
+    var timeLeftRender = slidesLength > 1 ? leftTimeSec : 0;
     var renderProgressByType = function () {
         var _a, _b, _c, _d, _e;
         switch (styles.type) {
             case 'NONE':
                 return null;
             case 'DESIGN1':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN2':
             //   return (
             //     <ProgressDesign2
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
-            //       leftTimeSec={leftTimeSec}
+            //       progress={progressRender}
+            //       leftTimeSec={timeLeftRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
@@ -76,37 +78,37 @@ var CustomProgressbar = function (_a) {
             //   return (
             //     <ProgressDesign3
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN2':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN5':
             //   return (
             //     <ProgressDesign5
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN3':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             case 'DESIGN4':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN8':
             //   return (
             //     <ProgressDesign8
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             default:
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM' }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor, size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM' }));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));

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

@@ -1,5 +1,5 @@
 import type { SlideBannerElementsProps } from '../SlideBanner';
 import type { CSSProperties } from 'styled-components';
 export declare function getPosition(position: string, designType: string, size: string, elementType: SlideBannerElementsProps['type'] | 'GROUP'): CSSProperties;
-export declare const POS_INSET: Record<string, Record<string, CSSProperties>>;
+export declare const POS_INSET: Record<string, CSSProperties>;
 export declare const POS_OUTSET_NAVIGATION: Record<string, CSSProperties>;