pds-dev-kit-web-test 2.5.418 → 2.5.420

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

@@ -68,13 +68,13 @@ function parseStylePropertyStyles(key, value) {
     }
     return undefined;
 }
-function getColumnsPropStyleValues(value, rows) {
-    return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __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 getColumnsPropStyleValues(value) {
+    return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n  "])), value);
 }
-function parseContentPropertyStyles(key, value, rows) {
+function parseContentPropertyStyles(key, value) {
     switch (key) {
         case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
-            return getColumnsPropStyleValues(value, rows);
+            return getColumnsPropStyleValues(value);
     }
     return undefined;
 }
@@ -87,31 +87,34 @@ function parseGridStyleProp(_a) {
         var value = props[keyWithDevice];
         var hoverValue = props[keyWithHover];
         var styles = parseStylePropertyStyles(currentKey, value);
-        var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue !== null && hoverValue !== void 0 ? hoverValue : value);
+        var hoverStyles = parseStylePropertyStyles(currentKey, hoverValue);
+        if (hoverValue === null || hoverValue === undefined) {
+            return {
+                stylePropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            ", "\n            ", "\n          "], ["\n            ", "\n            ", "\n          "])), acc.stylePropCss, styles),
+                hoverStylePropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), acc.hoverStylePropCss)
+            };
+        }
         return {
-            stylePropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.stylePropCss, styles),
-            hoverStylePropCss: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.hoverStylePropCss, hoverStyles)
+            stylePropCss: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.stylePropCss, styles),
+            hoverStylePropCss: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.hoverStylePropCss, hoverStyles)
         };
     }, {
-        stylePropCss: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""]))),
-        hoverStylePropCss: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])))
+        stylePropCss: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
+        hoverStylePropCss: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])))
     });
 }
 exports.parseGridStyleProp = parseGridStyleProp;
 function parseGridContentProp(_a) {
     var props = _a.props;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
-    var columns = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS || 1;
-    var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS || 1;
-    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);
         return {
-            contentPropCss: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
+            contentPropCss: (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };
     }, {
-        contentPropCss: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])))
+        contentPropCss: (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])))
     });
 }
 exports.parseGridContentProp = parseGridContentProp;
@@ -127,7 +130,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { type: value }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { type: hoverValue })
             };
         }
         if (customPaginationPropertyKey === 'offset') {
@@ -135,7 +138,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { offset: getCustomPaginationOffset(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { offset: getCustomPaginationOffset(hoverValue) })
             };
         }
         if (customPaginationPropertyKey === 'size') {
@@ -143,7 +146,7 @@ function parsePaginationStyleProp(_a) {
             var hoverValue = props[keyWithHover];
             return {
                 normalStyle: __assign(__assign({}, acc.normalStyle), { size: getCustomPaginationSize(value) }),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue) })
             };
         }
         return {
@@ -200,10 +203,10 @@ function getCustomPaginationOffset(value) {
         case 'OUTSET3':
             return {
                 top: '0px',
-                left: '100%',
-                translateX: -100,
+                right: '0px',
+                translateX: 0,
                 translateY: -100,
-                transformOrigin: 'top left'
+                transformOrigin: 'top right'
             };
         case 'OUTSET4':
             return {
@@ -277,9 +280,9 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'right top'
             };
-        case 'INSET1':
+        case 'INSET13':
             return { top: '0px', left: '0px', translateX: 0, translateY: 0, transformOrigin: 'left top' };
-        case 'INSET2':
+        case 'INSET14':
             return {
                 top: '0px',
                 left: '50%',
@@ -287,7 +290,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET3':
+        case 'INSET15':
             return {
                 top: '0px',
                 left: '100%',
@@ -295,7 +298,7 @@ function getCustomPaginationOffset(value) {
                 translateY: 0,
                 transformOrigin: 'left top'
             };
-        case 'INSET4':
+        case 'INSET16':
             return {
                 top: '50%',
                 left: '100%',
@@ -303,7 +306,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -50,
                 transformOrigin: 'left top'
             };
-        case 'INSET5':
+        case 'INSET17':
             return {
                 top: '100%',
                 left: '100%',
@@ -311,7 +314,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET6':
+        case 'INSET18':
             return {
                 top: '100%',
                 left: '50%',
@@ -319,7 +322,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'left top'
             };
-        case 'INSET7':
+        case 'INSET19':
             return {
                 top: '100%',
                 left: '0px',
@@ -327,7 +330,7 @@ function getCustomPaginationOffset(value) {
                 translateY: -100,
                 transformOrigin: 'top left'
             };
-        case 'INSET8':
+        case 'INSET20':
             return {
                 top: '50%',
                 left: '0px',
@@ -344,11 +347,11 @@ function getCustomPaginationSize(value) {
         case 'SMALL':
             return 1;
         case 'MEDIUM':
-            return 1.5;
-        case 'LARGE':
             return 2;
+        case 'LARGE':
+            return 3;
         default:
             return 1;
     }
 }
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

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

@@ -1,4 +1,4 @@
-import type { NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export type ContentsListPropsKeys = keyof CB_STYLE_PROP_CONTENTSLIST_SPECS;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE = 'DESIGN1' | 'DESIGN2' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL' | 'NARROW' | null;
@@ -6,7 +6,7 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER
 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_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET13' | 'INSET14' | 'INSET15' | 'INSET16' | 'INSET17' | 'INSET18' | 'INSET19' | 'INSET20' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPECS_BASE = {
     CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE_TYPE;

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

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

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

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

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

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

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

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

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

@@ -43,8 +43,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var compositionQueryContext_1 = require("@sub/DynamicLayout/compositionQueryContext");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
@@ -57,8 +57,7 @@ function Image(props) {
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var cLinkValue = function () {
-        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
-            CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
                 return "ERROR: QueryData NOT FOUND";
             }
@@ -91,26 +90,19 @@ function Image(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var imgSrc = function () {
-        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
-            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA';
         if (!isDataConnected) {
             return CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR;
         }
         if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-            // eslint-disable-next-line
-            console.warn('ERROR: No query data found');
-            return 'ERROR';
+            return 'ERROR: No query data found';
         }
         if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
-            // eslint-disable-next-line
-            console.warn("ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data"));
-            return 'ERROR';
+            return "ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data");
         }
         return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
-                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
-                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

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

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

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

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

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

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

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

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

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

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

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

@@ -14,40 +14,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
-var styled_components_1 = __importStar(require("styled-components"));
+var createCompositions_1 = require("@sub/DynamicLayout/CompositionRenderer/createCompositions");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var CustomNavigation_1 = require("./components/CustomNavigation");
@@ -56,11 +33,10 @@ var CustomProgressbar_1 = require("./components/CustomProgressbar");
 var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
 var slideBannerUtils_1 = require("./slideBannerUtils");
 function SlideBanner(props) {
-    var _a;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
     var index = props.index, 
     // CONTENT : 슬라이드배너
-    _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, 
+    _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, 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, 
     // STYLE: 슬라이드배너
     CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, 
     // STYLE: 그림자
@@ -68,8 +44,9 @@ function SlideBanner(props) {
     // EFFECT: 진입
     CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var compositions = props.compositions;
-    var _d = (0, react_1.useState)(false), isHovered = _d[0], setIsHovered = _d[1];
-    var _e = (0, react_1.useState)(1), currentSlide = _e[0], setCurrentSlide = _e[1];
+    var _c = (0, react_1.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = (0, react_1.useState)(1), currentSlide = _d[0], setCurrentSlide = _d[1];
+    var _e = (0, react_1.useState)(0), totalPages = _e[0], setTotalPages = _e[1];
     var _f = (0, react_1.useState)(true), isBeginning = _f[0], setIsBeginning = _f[1];
     var _g = (0, react_1.useState)(false), isEnd = _g[0], setIsEnd = _g[1];
     var progressRef = (0, react_1.useRef)(0);
@@ -92,7 +69,6 @@ function SlideBanner(props) {
         device: device
     }), customProgressbarNormalStyle = _l.normalStyle, customProgressbarHoverStyle = _l.hoverStyle;
     var _m = (0, util_1.parseProperties)(props, device), style = _m.style, hoverStyle = _m.hoverStyle, layout = _m.layout, effect = _m.effect;
-    var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     // NOTE: EFFECT와 관련된 함수들입니다.
@@ -113,29 +89,28 @@ function SlideBanner(props) {
         (_c = swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper.update();
     }, [isHovered]);
     var handleSwiper = function (swiper) {
+        var totalSlides = swiper.slides.length;
+        var slidesPerView = typeof swiper.params.slidesPerView === 'number' ? swiper.params.slidesPerView : 1;
+        var slidesPerGroup = typeof swiper.params.slidesPerGroup === 'number' ? swiper.params.slidesPerGroup : 1;
+        var totalPages = Math.ceil((totalSlides - slidesPerView) / slidesPerGroup) + 1;
+        setTotalPages(totalPages);
         setIsBeginning(swiper.isBeginning);
         setIsEnd(swiper.isEnd);
+        setCurrentSlide(swiper.activeIndex + 1);
     };
-    var handleSlideChangeTransitionEnd = function (swiper) {
-        var isLoop = swiper.params.loop || false;
+    var handleSlideChange = function (swiper) {
         setIsBeginning(swiper.isBeginning);
         setIsEnd(swiper.isEnd);
-        if (isLoop) {
-            // loop 모드에서는 realIndex가 실제 슬라이드 인덱스
-            setCurrentSlide(swiper.realIndex + 1);
-        }
-        else {
-            // loop가 꺼져있을 때는 activeIndex 사용
-            setCurrentSlide(swiper.activeIndex + 1);
-        }
+        setCurrentSlide(swiper.activeIndex + 1);
     };
-    var handleAutoplayTimeLeft = (0, react_1.useCallback)(function (_, time, progress) {
+    var handleAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
         leftTimeMsRef.current = time;
         progressRef.current = progress;
     }, []);
     var handleBulletClick = function (index) {
         if (swiperRef.current) {
-            swiperRef.current.swiper.slideTo(index);
+            var targetIndex = (swiperRef.current.swiper.params.slidesPerGroup || 1) * index;
+            swiperRef.current.swiper.slideTo(targetIndex);
         }
     };
     var handlePrevBtnClick = function () {
@@ -148,29 +123,12 @@ function SlideBanner(props) {
             swiperRef.current.swiper.slideNext();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { borderBottomLeftRadius: style.borderBottomLeftRadius, borderBottomRightRadius: style.borderBottomRightRadius, borderTopLeftRadius: style.borderTopLeftRadius, borderTopRightRadius: style.borderTopRightRadius, borderWidth: undefined, borderColor: undefined, borderStyle: undefined }), hoverStyle: __assign(__assign({}, hoverStyle), { borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius, borderBottomRightRadius: hoverStyle.borderBottomRightRadius, borderTopLeftRadius: hoverStyle.borderTopLeftRadius, borderTopRightRadius: hoverStyle.borderTopRightRadius, borderWidth: undefined, borderColor: undefined, borderStyle: undefined }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperWrapper, __assign({ 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)(S_SwiperLayout, __assign({ borderStyle: {
-                            borderBottomLeftRadius: style.borderBottomLeftRadius,
-                            borderBottomRightRadius: style.borderBottomRightRadius,
-                            borderTopLeftRadius: style.borderTopLeftRadius,
-                            borderTopRightRadius: style.borderTopRightRadius,
-                            borderWidth: style.borderWidth,
-                            borderColor: style.borderColor,
-                            borderStyle: style.borderStyle
-                        }, hoverBorderStyle: {
-                            borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
-                            borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
-                            borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
-                            borderTopRightRadius: hoverStyle.borderTopRightRadius,
-                            borderWidth: hoverStyle.borderWidth,
-                            borderColor: hoverStyle.borderColor,
-                            borderStyle: hoverStyle.borderStyle
-                        } }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, onSwiper: handleSwiper, onSlideChangeTransitionEnd: handleSlideChangeTransitionEnd, onAutoplayTimeLeft: handleAutoplayTimeLeft, slidesPerView: 1, scrollbar: isHovered ? slideBannerHoverStyle.scrollbar : slideBannerNormalStyle.scrollbar, freeMode: isHovered ? slideBannerHoverStyle.freeMode : slideBannerNormalStyle.freeMode, autoplay: isHovered ? slideBannerHoverStyle.autoplay : slideBannerNormalStyle.autoplay, useAutoplay: isHovered ? slideBannerHoverStyle.useAutoplay : slideBannerNormalStyle.useAutoplay, loop: isHovered ? slideBannerHoverStyle.loop : slideBannerNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
-                                valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
-                                queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
-                                limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
-                                queryData: queryData,
-                                compositions: compositions
-                            }) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, prevBtnDisabled: loop ? false : isBeginning, nextBtnDisabled: loop ? false : isEnd, total: (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick, onPrevBtnClick: handlePrevBtnClick, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperWrapper, __assign({ 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, onSwiper: handleSwiper, onSlideChange: handleSlideChange, onAutoplayTimeLeft: handleAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, scrollbar: isHovered ? slideBannerHoverStyle.scrollbar : slideBannerNormalStyle.scrollbar, freeMode: isHovered ? slideBannerHoverStyle.freeMode : slideBannerNormalStyle.freeMode, autoplay: isHovered ? slideBannerHoverStyle.autoplay : slideBannerNormalStyle.autoplay, useAutoplay: isHovered ? slideBannerHoverStyle.useAutoplay : slideBannerNormalStyle.useAutoplay, loop: isHovered ? slideBannerHoverStyle.loop : slideBannerNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
+                            valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                            queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
+                            queryData: queryData,
+                            compositions: compositions
+                        }) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, total: totalPages, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
                             ? customNavigationHoverStyle.prevBtnType
                             : customNavigationNormalStyle.prevBtnType, prevBtnOffset: isHovered
                             ? customNavigationHoverStyle.prevBtnOffset
@@ -188,12 +146,5 @@ var S_SwiperWrapper = styled_components_1.default.div(templateObject_1 || (templ
     var customStyle = _a.customStyle;
     return customStyle;
 });
-var S_SwiperLayout = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
-    var hoverBorderStyle = _a.hoverBorderStyle;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, hoverBorderStyle), { boxShadow: '' }));
-}, function (_a) {
-    var borderStyle = _a.borderStyle;
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, borderStyle), { boxShadow: '' }));
-});
 exports.default = SlideBanner;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1;

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

@@ -40,9 +40,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomNavigation = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal/desktop/IconButton");
+var IconButton_1 = require("@sub/DynamicLayout/components/pdsOriginal/desktop/IconButton");
 var styled_components_1 = __importStar(require("styled-components"));
-var navigationConfigs_1 = require("./navigationConfigs");
 var CustomNavigation = function (_a) {
     var _b = _a.prevBtnDisabled, prevBtnDisabled = _b === void 0 ? false : _b, _c = _a.prevBtnType, prevBtnType = _c === void 0 ? 'NONE' : _c, _d = _a.prevBtnOffset, prevBtnOffset = _d === void 0 ? { top: '0' } : _d, _e = _a.prevBtnSize, prevBtnSize = _e === void 0 ? 1 : _e, _f = _a.nextBtnDisabled, nextBtnDisabled = _f === void 0 ? false : _f, _g = _a.nextBtnType, nextBtnType = _g === void 0 ? 'NONE' : _g, _h = _a.nextBtnOffset, nextBtnOffset = _h === void 0 ? { top: '0' } : _h, _j = _a.nextBtnSize, nextBtnSize = _j === void 0 ? 1 : _j, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
     var getIsSameOffset = function (prevBtnOffset, nextBtnOffset) {
@@ -55,9 +54,61 @@ var CustomNavigation = function (_a) {
             prevBtnOffset.transformOrigin === nextBtnOffset.transformOrigin);
     };
     var isSameOffset = getIsSameOffset(prevBtnOffset, nextBtnOffset);
-    var prevButton = prevBtnType === 'NONE' ? undefined : navigationConfigs_1.prevButtonMappedIcons[prevBtnType];
-    var nextButton = nextBtnType === 'NONE' ? undefined : navigationConfigs_1.nextButtonMappedIcons[nextBtnType];
-    return ((0, jsx_runtime_1.jsxs)(S_Navigation, __assign({ "$offset": isSameOffset ? prevBtnOffset : undefined, "$size": isSameOffset ? prevBtnSize : 1 }, { children: [prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "".concat(prevBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : prevBtnOffset, "$size": isSameOffset ? undefined : prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", shapeType: prevButton.shapeType, baseColorKey: prevButton.baseColorKey || 'ui_cpnt_button_fill_base_transparent', borderColorKey: prevButton.borderColorKey, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', shadow: prevButton.shadow, onClick: onPrevBtnClick }) }))), nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "".concat(nextBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : nextBtnOffset, "$size": isSameOffset ? undefined : nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", shapeType: nextButton.shapeType, baseColorKey: nextButton.baseColorKey || 'ui_cpnt_button_fill_base_transparent', borderColorKey: nextButton.baseColorKey, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', shadow: nextButton.shadow, onClick: onNextBtnClick }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Navigation, __assign({ "$offset": isSameOffset ? prevBtnOffset : undefined, "$size": isSameOffset ? prevBtnSize : 1 }, { children: [(0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "".concat(prevBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : prevBtnOffset, "$size": isSameOffset ? undefined : prevBtnSize, onClick: onPrevBtnClick }, { children: (function () {
+                    switch (prevBtnType) {
+                        case 'NONE':
+                        case 'DESIGN1':
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                        case 'DESIGN2':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN3':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN4':
+                        case 'DESIGN5':
+                        case 'DESIGN6':
+                        case 'DESIGN7':
+                        case 'DESIGN8':
+                        case 'DESIGN9':
+                        case 'DESIGN10':
+                        case 'DESIGN11':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left_bold", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN12':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN13':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN14':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        default:
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                    }
+                })() })), (0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "".concat(nextBtnDisabled ? 'disabled' : ''), "$offset": isSameOffset ? undefined : nextBtnOffset, "$size": isSameOffset ? undefined : nextBtnSize, onClick: onNextBtnClick }, { children: (function () {
+                    switch (nextBtnType) {
+                        case 'NONE':
+                        case 'DESIGN1':
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                        case 'DESIGN2':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN3':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN4':
+                        case 'DESIGN5':
+                        case 'DESIGN6':
+                        case 'DESIGN7':
+                        case 'DESIGN8':
+                        case 'DESIGN9':
+                        case 'DESIGN10':
+                        case 'DESIGN11':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right_bold", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_dark" }));
+                        case 'DESIGN12':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right_thin", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN13':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        case 'DESIGN14':
+                            return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_icon_sys_white" }));
+                        default:
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                    }
+                })() }))] })));
 };
 exports.CustomNavigation = CustomNavigation;
 var S_Navigation = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  position: ", ";\n  transform: ", ";\n  ", ";\n  transform-origin: ", ";\n  z-index: 3;\n"], ["\n  display: ", ";\n  padding: ", ";\n  position: ", ";\n  transform: ", ";\n  ", ";\n  transform-origin: ", ";\n  z-index: 3;\n"])), function (_a) {