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

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts

@@ -5,11 +5,13 @@ export type IconButtonProps = {
     shapeType?: 'circular' | 'rectangle';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     baseColorKey?: UiColors;
+    overrideBaseColorHex?: string;
     borderColorKey?: UiColors;
     iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: PDSIconType;
     iconColorKey?: UiColors;
+    overrideIconColorHex?: string;
     shadow?: 'hidden' | 'visible';
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';
@@ -18,5 +20,5 @@ export type IconButtonProps = {
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, tabIndex, onClick, onMouseDown }: IconButtonProps): JSX.Element;
+declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, overrideBaseColorHex, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, overrideIconColorHex, shadow, colorTheme, type, state, tabIndex, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js

@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../hybrid");
 function IconButton(_a) {
-    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, overrideBaseColorHex = _a.overrideBaseColorHex, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, overrideIconColorHex = _a.overrideIconColorHex, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -76,7 +76,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }) })));
+    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, overrideBaseColorHex: overrideBaseColorHex, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), overrideColorHex: overrideIconColorHex, fillType: iconFillType }) })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -85,7 +85,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         : theme.ui_cpnt_button_fill_base_disabled;
 });
 var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    var theme = _a.theme, overrideBaseColorHex = _a.overrideBaseColorHex, baseColorKey = _a.baseColorKey;
+    if (overrideBaseColorHex)
+        return overrideBaseColorHex;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts

@@ -4,7 +4,8 @@ export type IconProps = {
     iconName?: PDSIconType;
     size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
     colorKey?: UiColors;
+    overrideColorHex?: string;
     fillType?: 'line' | 'fill';
 } & Record<string, any>;
-declare const Icon: ({ iconName, size, colorKey, fillType }: IconProps) => JSX.Element;
+declare const Icon: ({ iconName, size, colorKey, overrideColorHex, fillType }: IconProps) => JSX.Element;
 export default Icon;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.js

@@ -8,12 +8,19 @@ var styled_components_1 = require("styled-components");
 var fill_1 = __importDefault(require("../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../common/assets/icons/line"));
 var Icon = function (_a) {
-    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
+    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, overrideColorHex = _a.overrideColorHex, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
     var theme = (0, styled_components_1.useTheme)();
     var DefaultIcon = line_1.default.ic_unavailable;
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+    var hexToRgba = function (hex) {
+        var r = parseInt(hex.slice(1, 3), 16);
+        var g = parseInt(hex.slice(3, 5), 16);
+        var b = parseInt(hex.slice(5, 7), 16);
+        var a = parseInt(hex.slice(7, 9), 16) / 255;
+        return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
+    };
+    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: overrideColorHex ? hexToRgba(overrideColorHex) : theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: overrideColorHex ? hexToRgba(overrideColorHex) : theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

package/dist/src/sub/DynamicLayout/mock_contentsCarousel.js

@@ -259,6 +259,14 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION:MOBILE': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR: '#3834FFFF',
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR: '#5CFF00FF',
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': null,
                 CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE: 'DESIGN7',
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE:MOBILE': null,
@@ -271,6 +279,14 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:MOBILE': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR: '#FF1FFFFF',
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR: '#5CFF00FF',
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': null,
                 CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR: 'DESIGN8',
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:MOBILE:HOVER': null,
@@ -279,6 +295,14 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR: '#FF6B34FF',
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR: '#00FFD9FF',
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER': null,
                 CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING: 'NARROW',
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE': null,

package/dist/src/sub/DynamicLayout/mock_contentsList.js

@@ -1028,10 +1028,18 @@ exports.SAMPLE_LIST_CB = {
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE': null,
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER': null,
-                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: 'DESIGN10',
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: 'DESIGN13',
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE': null,
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR: '#3834FFFF',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR: '#5CFF00FF',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': null,
                 CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: 'DESIGN1',
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:HOVER': null,
                 'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE': null,

package/dist/src/sub/DynamicLayout/mock_slideBanner.d.ts

@@ -799,6 +799,38 @@ export declare const SAMPLE_SLIDEBANNER_CB: {
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:HOVER': null;
                 CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION: string;
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER': null;
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR: string;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': null;
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER': null;
             };
         };
         minVersion: string;

package/dist/src/sub/DynamicLayout/mock_slideBanner.js

@@ -781,7 +781,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:MOBILE:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:HOVER': null,
-                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION: 'OUTSET1',
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION: 'OUTSET5',
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:MOBILE': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION:MOBILE:HOVER': null,
@@ -804,13 +804,45 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:MOBILE': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:HOVER': null,
-                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE: 'DESIGN1',
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE: 'DESIGN16',
                 CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE: true,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE': null,
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME:HOVER': null,
                 CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION: 'OUTSET1',
-                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': null
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR: '#3834FFFF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR: '#5CFF00FF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR: '#3834FFFF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR: '#5CFF00FF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR: '#FF1FFFFF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR: '#5CFF00FF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR: '#FF6B34FF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR: '#00FFD9FF',
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER': null
             }
         },
         minVersion: '2023-08-03',

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

@@ -224,13 +224,25 @@ function ContentsCarousel(props) {
                             ? customNavigationHoverStyle.prevBtnOffset
                             : customNavigationNormalStyle.prevBtnOffset, prevBtnSize: isHovered
                             ? customNavigationHoverStyle.prevBtnSize
-                            : customNavigationNormalStyle.prevBtnSize, onPrevBtnClick: handlePrevBtnClick, nextBtnDisabled: loop ? false : isEnd, nextBtnType: isHovered
+                            : customNavigationNormalStyle.prevBtnSize, prevBtnPrimaryColor: isHovered
+                            ? customNavigationHoverStyle.prevBtnPrimaryColor
+                            : customNavigationNormalStyle.prevBtnPrimaryColor, prevBtnSecondaryColor: isHovered
+                            ? customNavigationHoverStyle.prevBtnSecondaryColor
+                            : customNavigationNormalStyle.prevBtnSecondaryColor, onPrevBtnClick: handlePrevBtnClick, nextBtnDisabled: loop ? false : isEnd, nextBtnType: isHovered
                             ? customNavigationHoverStyle.nextBtnType
                             : customNavigationNormalStyle.nextBtnType, nextBtnOffset: isHovered
                             ? customNavigationHoverStyle.nextBtnOffset
                             : customNavigationNormalStyle.nextBtnOffset, nextBtnSize: isHovered
                             ? customNavigationHoverStyle.nextBtnSize
-                            : customNavigationNormalStyle.nextBtnSize, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset })] })) })) })));
+                            : customNavigationNormalStyle.nextBtnSize, nextBtnPrimaryColor: isHovered
+                            ? customNavigationHoverStyle.nextBtnPrimaryColor
+                            : customNavigationNormalStyle.nextBtnPrimaryColor, nextBtnSecondaryColor: isHovered
+                            ? customNavigationHoverStyle.nextBtnSecondaryColor
+                            : customNavigationNormalStyle.nextBtnSecondaryColor, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, primaryColor: isHovered
+                            ? customProgressbarHoverStyle.primaryColor
+                            : customProgressbarNormalStyle.primaryColor, secondaryColor: isHovered
+                            ? customProgressbarHoverStyle.secondaryColor
+                            : customProgressbarNormalStyle.secondaryColor })] })) })) })));
 }
 var S_SwiperWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  ", "\n"], ["\n  height: 100%;\n  width: 100%;\n  ", "\n"])), function (_a) {
     var customStyle = _a.customStyle;

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

@@ -14,14 +14,18 @@ export interface CustomNavigationProps {
     prevBtnType?: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE;
     prevBtnOffset?: NavigationOffset;
     prevBtnSize?: number;
+    prevBtnPrimaryColor?: string;
+    prevBtnSecondaryColor?: string;
     nextBtnDisabled?: boolean;
     nextBtnType?: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE;
     nextBtnOffset?: NavigationOffset;
     nextBtnSize?: number;
+    nextBtnPrimaryColor?: string;
+    nextBtnSecondaryColor?: string;
     onPrevBtnClick?: () => void;
     onNextBtnClick?: () => void;
 }
-export declare const CustomNavigation: ({ prevBtnDisabled, prevBtnType, prevBtnOffset, prevBtnSize, nextBtnDisabled, nextBtnType, nextBtnOffset, nextBtnSize, onPrevBtnClick, onNextBtnClick }: CustomNavigationProps) => JSX.Element;
+export declare const CustomNavigation: ({ prevBtnDisabled, prevBtnType, prevBtnOffset, prevBtnSize, prevBtnPrimaryColor, prevBtnSecondaryColor, nextBtnDisabled, nextBtnType, nextBtnOffset, nextBtnSize, nextBtnPrimaryColor, nextBtnSecondaryColor, onPrevBtnClick, onNextBtnClick }: CustomNavigationProps) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -44,7 +44,7 @@ var IconButton_1 = require("../../../../../../../../DynamicLayout/components/pds
 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 _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, prevBtnPrimaryColor = _a.prevBtnPrimaryColor, prevBtnSecondaryColor = _a.prevBtnSecondaryColor, _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, nextBtnPrimaryColor = _a.nextBtnPrimaryColor, nextBtnSecondaryColor = _a.nextBtnSecondaryColor, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
     var getIsSameOffset = function (prevBtnOffset, nextBtnOffset) {
         return (prevBtnOffset.top === nextBtnOffset.top &&
             prevBtnOffset.bottom === nextBtnOffset.bottom &&
@@ -57,7 +57,7 @@ var CustomNavigation = function (_a) {
     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: [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, borderColorKey: prevButton.borderColorKey, overrideBaseColorHex: prevBtnPrimaryColor, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: prevBtnSecondaryColor, 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, borderColorKey: nextButton.baseColorKey, overrideBaseColorHex: nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: nextBtnSecondaryColor, shadow: nextButton.shadow, onClick: onNextBtnClick }) })))] })));
 };
 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) {

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

@@ -13,8 +13,10 @@ export interface CustomPaginationProps {
         transformOrigin?: string;
     };
     size?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
 }
-export declare const CustomPagination: ({ current, total, type, offset, size, prevBtnDisabled, nextBtnDisabled, onBulletClick, onPrevBtnClick, onNextBtnClick }: CustomPaginationProps & {
+export declare const CustomPagination: ({ current, total, type, offset, size, primaryColor, secondaryColor, prevBtnDisabled, nextBtnDisabled, onBulletClick, onPrevBtnClick, onNextBtnClick }: CustomPaginationProps & {
     prevBtnDisabled: boolean;
     nextBtnDisabled: boolean;
     onBulletClick: (index: number) => void;

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

@@ -43,7 +43,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var components_1 = require("../../../../../../../../DynamicLayout/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var CustomPagination = function (_a) {
-    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, prevBtnDisabled = _a.prevBtnDisabled, nextBtnDisabled = _a.nextBtnDisabled, onBulletClick = _a.onBulletClick, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
+    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, prevBtnDisabled = _a.prevBtnDisabled, nextBtnDisabled = _a.nextBtnDisabled, onBulletClick = _a.onBulletClick, onPrevBtnClick = _a.onPrevBtnClick, onNextBtnClick = _a.onNextBtnClick;
     var bullets = Array.from({ length: total }, function (_, i) { return i; });
     return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size }, { children: (function () {
             switch (type) {
@@ -72,15 +72,15 @@ var CustomPagination = function (_a) {
                 case 'DESIGN11':
                     return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
                 case 'DESIGN12':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
                 case 'DESIGN13':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
                 case 'DESIGN14':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
                 case 'DESIGN15':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "DARK", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
                 case 'DESIGN16':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "WHITE", isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
+                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: index + 1 === current ? primaryColor : secondaryColor, isActive: index + 1 === current, onClick: function () { return onBulletClick(index); } }, index)); }) })));
                 default:
                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             }
@@ -164,23 +164,15 @@ var S_Divider = styled_components_1.default.div(templateObject_11 || (templateOb
     var type = _a.type;
     return (type === 'VERTICAL' ? verticalDivider : horizontalDivider);
 });
-var whiteBullet = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: #ffffff;\n  opacity: ", ";\n"], ["\n  background-color: #ffffff;\n  opacity: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 1 : 0.2);
-});
-var darkBullet = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: #000000;\n  opacity: ", ";\n"], ["\n  background-color: #000000;\n  opacity: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 1 : 0.3);
-});
-var S_Dot = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"], ["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"])), function (_a) {
+var S_Dot = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"], ["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"])), function (_a) {
     var color = _a.color;
-    return (color === 'WHITE' ? whiteBullet : darkBullet);
+    return color;
 });
-var S_Bar = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"], ["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"])), function (_a) {
+var S_Bar = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"], ["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"])), function (_a) {
     var color = _a.color;
-    return (color === 'WHITE' ? whiteBullet : darkBullet);
+    return color;
 });
-var S_Pointer = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"], ["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"])), function (_a) {
+var S_Pointer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"], ["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {
@@ -188,4 +180,4 @@ var S_Pointer = styled_components_1.default.div(templateObject_16 || (templateOb
     return (disabled ? 0.4 : 1);
 });
 exports.default = exports.CustomPagination;
-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;
+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;

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

@@ -12,10 +12,12 @@ export interface CustomProgressbarProps {
         transformOrigin?: string;
     };
     size?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
 }
 type Props = {
     progressRef: React.RefObject<number>;
     leftTimeMsRef: React.RefObject<number>;
 } & CustomProgressbarProps;
-export declare const CustomProgressbar: ({ progressRef, leftTimeMsRef, type, offset, size }: Props) => JSX.Element;
+export declare const CustomProgressbar: ({ progressRef, leftTimeMsRef, type, offset, size, primaryColor, secondaryColor }: Props) => JSX.Element;
 export default CustomProgressbar;

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

@@ -44,7 +44,7 @@ var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var progressConfigs_1 = require("./progressConfigs");
 var CustomProgressbar = function (_a) {
-    var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d;
+    var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor;
     var _e = (0, react_1.useState)(0), leftTimeSec = _e[0], setLeftTimeSec = _e[1];
     var _f = (0, react_1.useState)(0), progress = _f[0], setProgress = _f[1];
     (0, react_1.useEffect)(function () {
@@ -80,23 +80,23 @@ var CustomProgressbar = function (_a) {
             case 'NONE':
                 return null;
             case 'DESIGN1':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN2':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign2, { progress: progress, leftTimeSec: leftTimeSec, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN3':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign3, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN4':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN5':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign5, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN6':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN7':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
             case 'DESIGN8':
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign8, { progress: progress, progressColor: primaryColor, bufferColor: secondaryColor }));
             default:
-                return (0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec });
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { progress: progress, leftTimeSec: leftTimeSec, progressColor: primaryColor, bufferColor: secondaryColor }));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ "$offset": offset, "$size": size }, { children: renderProgressByType() })));

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

@@ -1,27 +1,43 @@
 /// <reference types="react" />
-export declare const ProgressDesign1: ({ progress, leftTimeSec }: {
+export declare const ProgressDesign1: ({ progress, leftTimeSec, progressColor, bufferColor }: {
     progress: number;
     leftTimeSec: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign2: ({ progress, leftTimeSec }: {
+export declare const ProgressDesign2: ({ progress, leftTimeSec, progressColor, bufferColor }: {
     progress: number;
     leftTimeSec: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign3: ({ progress }: {
+export declare const ProgressDesign3: ({ progress, progressColor, bufferColor }: {
     progress: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign4: ({ progress }: {
+export declare const ProgressDesign4: ({ progress, progressColor, bufferColor }: {
     progress: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign5: ({ progress }: {
+export declare const ProgressDesign5: ({ progress, progressColor, bufferColor }: {
     progress: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign6: ({ progress }: {
+export declare const ProgressDesign6: ({ progress, progressColor, bufferColor }: {
     progress: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign7: ({ progress }: {
+export declare const ProgressDesign7: ({ progress, progressColor, bufferColor }: {
     progress: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;
-export declare const ProgressDesign8: ({ progress }: {
+export declare const ProgressDesign8: ({ progress, progressColor, bufferColor }: {
     progress: number;
+    progressColor?: string | undefined;
+    bufferColor?: string | undefined;
 }) => JSX.Element;