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

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

@@ -22,75 +22,141 @@ exports.ProgressDesign8 = exports.ProgressDesign7 = exports.ProgressDesign6 = ex
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ProgressDesign1 = function (_a) {
-    var progress = _a.progress, leftTimeSec = _a.leftTimeSec;
-    return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign1, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
+    var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign1, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
                     '--progress': 1 - progress,
                     transition: 'all 0.03s ease-out'
-                } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] }));
+                } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] })));
 };
 exports.ProgressDesign1 = ProgressDesign1;
 var ProgressDesign2 = function (_a) {
-    var progress = _a.progress, leftTimeSec = _a.leftTimeSec;
-    return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign2, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
+    var progress = _a.progress, leftTimeSec = _a.leftTimeSec, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsxs)(S_ProgressDesign2, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: [(0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
                     '--progress': 1 - progress,
                     transition: 'all 0.03s linear'
-                } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] }));
+                } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })), (0, jsx_runtime_1.jsx)("span", { children: Math.ceil(leftTimeSec) })] })));
 };
 exports.ProgressDesign2 = ProgressDesign2;
 var ProgressDesign3 = function (_a) {
-    var progress = _a.progress;
-    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign3, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
+    var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign3, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
                 '--progress': 1 - progress,
                 transition: 'all 0.03s ease-out'
-            } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) }));
+            } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) })));
 };
 exports.ProgressDesign3 = ProgressDesign3;
 var ProgressDesign4 = function (_a) {
-    var progress = _a.progress;
-    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign4, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
+    var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign4, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 48 48", style: {
                 '--progress': 1 - progress,
                 transition: 'all 0.03s linear'
-            } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) }));
+            } }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "bg-circle" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20", className: "progress-circle" })] })) })));
 };
 exports.ProgressDesign4 = ProgressDesign4;
 var ProgressDesign5 = function (_a) {
-    var progress = _a.progress;
-    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign5, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
+    var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign5, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
                     '--progress': 1 - progress,
                     transition: 'all 0.03s ease-out'
-                } }) })) }));
+                } }) })) })));
 };
 exports.ProgressDesign5 = ProgressDesign5;
 var ProgressDesign6 = function (_a) {
-    var progress = _a.progress;
-    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign6, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
+    var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign6, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
                     '--progress': 1 - progress,
                     transition: 'all 0.03s ease-out'
-                } }) })) }));
+                } }) })) })));
 };
 exports.ProgressDesign6 = ProgressDesign6;
 var ProgressDesign7 = function (_a) {
-    var progress = _a.progress;
-    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
+    var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign7, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
                     '--progress': 1 - progress,
                     transition: 'all 0.03s ease-out'
-                } }) })) }));
+                } }) })) })));
 };
 exports.ProgressDesign7 = ProgressDesign7;
 var ProgressDesign8 = function (_a) {
-    var progress = _a.progress;
-    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign8, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
+    var progress = _a.progress, progressColor = _a.progressColor, bufferColor = _a.bufferColor;
+    return ((0, jsx_runtime_1.jsx)(S_ProgressDesign8, __assign({ barColor: progressColor, bgColor: bufferColor }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "progress-bar-container" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar-fill", style: {
                     '--progress': 1 - progress,
                     transition: 'all 0.03s ease-out'
-                } }) })) }));
+                } }) })) })));
 };
 exports.ProgressDesign8 = ProgressDesign8;
-var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #ffffff;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(255, 255, 255, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"], ["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #ffffff;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(255, 255, 255, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"])));
-var S_ProgressDesign2 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #333333;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(0, 0, 0, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"], ["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #333333;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(0, 0, 0, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"])));
-var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #ffffff;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(255, 255, 255, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"], ["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #ffffff;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(255, 255, 255, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"])));
-var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #333333;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(0, 0, 0, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"], ["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: #333333;\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: rgba(0, 0, 0, 0.2);\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"])));
-var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(255, 255, 255, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #ffffff;\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(255, 255, 255, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #ffffff;\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])));
-var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #333333;\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #333333;\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])));
-var S_ProgressDesign7 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #ffffff;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #ffffff;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])));
-var S_ProgressDesign8 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #333333;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: #333333;\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: #333333;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])));
+var S_ProgressDesign1 = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+});
+var S_ProgressDesign2 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+});
+var S_ProgressDesign3 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+});
+var S_ProgressDesign4 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: bold;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n\n  svg {\n    --progress: 0;\n    fill: none;\n    height: calc(100% - 10px);\n    left: 5px;\n    position: absolute;\n    stroke: ", ";\n    stroke-dasharray: 125.6;\n    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));\n    stroke-width: 4px;\n    top: 5px;\n    transform: rotate(-90deg);\n    width: calc(100% - 10px);\n    z-index: 10;\n\n    .bg-circle {\n      stroke: ", ";\n      stroke-dasharray: none;\n      stroke-width: 4px;\n    }\n  }\n\n  span {\n    font-size: 11px;\n    z-index: 11;\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+});
+var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(255, 255, 255, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(255, 255, 255, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+});
+var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+});
+var S_ProgressDesign7 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+});
+var S_ProgressDesign8 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  padding-bottom: 12px;\n  padding-right: 12px;\n  width: 80px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    height: 6px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor;
+}, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -26,7 +26,7 @@ export declare function parseSlideBannerStyleToCustomPaginationProp({ props, dev
     normalStyle: CustomPaginationProps;
     hoverStyle: CustomPaginationProps;
 };
-export declare function getCustomPaginationPropKey(key: SlideBannerPropsKeys): "" | "size" | "type" | "offset";
+export declare function getCustomPaginationPropKey(key: SlideBannerPropsKeys): "" | "size" | "type" | "primaryColor" | "secondaryColor" | "offset";
 type ParseSlideBannerStyleToCustomNavigationProps = {
     props: CB_STYLE_PROP_SLIDEBANNER_SPECS;
     device: Device;
@@ -35,7 +35,7 @@ export declare function parseSlideBannerStyleToCustomNavigationProp({ props, dev
     normalStyle: CustomNavigationProps;
     hoverStyle: CustomNavigationProps;
 };
-export declare function getCustomNavigationPropKey(key: SlideBannerPropsKeys): "" | "prevBtnType" | "prevBtnOffset" | "prevBtnSize" | "nextBtnType" | "nextBtnOffset" | "nextBtnSize";
+export declare function getCustomNavigationPropKey(key: SlideBannerPropsKeys): "" | "prevBtnType" | "prevBtnOffset" | "prevBtnSize" | "prevBtnPrimaryColor" | "prevBtnSecondaryColor" | "nextBtnType" | "nextBtnOffset" | "nextBtnSize" | "nextBtnPrimaryColor" | "nextBtnSecondaryColor";
 type ParseSlideBannerStyleToCustomProgressbarProps = {
     props: CB_STYLE_PROP_SLIDEBANNER_SPECS;
     device: Device;
@@ -44,5 +44,5 @@ export declare function parseSlideBannerStyleToCustomProgressbarProp({ props, de
     normalStyle: CustomProgressbarProps;
     hoverStyle: CustomProgressbarProps;
 };
-export declare function getCustomProgressbarPropKey(key: SlideBannerPropsKeys): "" | "size" | "type";
+export declare function getCustomProgressbarPropKey(key: SlideBannerPropsKeys): "" | "size" | "type" | "primaryColor" | "secondaryColor";
 export {};

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

@@ -145,6 +145,22 @@ function parseSlideBannerStyleToCustomPaginationProp(_a) {
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomPaginationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
+        if (customPaginationPropertyKey === 'primaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { primaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { primaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
+        if (customPaginationPropertyKey === 'secondaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { secondaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { secondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
         return {
             normalStyle: __assign({}, acc.normalStyle),
             hoverStyle: __assign({}, acc.hoverStyle)
@@ -172,6 +188,16 @@ function getCustomPaginationPropKey(key) {
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE":
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE:HOVER":
             return 'size';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER":
+            return 'primaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER":
+            return 'secondaryColor';
         default:
             return '';
     }
@@ -381,6 +407,22 @@ function parseSlideBannerStyleToCustomNavigationProp(_a) {
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSize: getCustomNavigationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
+        if (customNavigationPropertyKey === 'prevBtnPrimaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnPrimaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnPrimaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
+        if (customNavigationPropertyKey === 'prevBtnSecondaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { prevBtnSecondaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { prevBtnSecondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
         if (customNavigationPropertyKey === 'nextBtnType') {
             var value = props[keyWithDevice];
             var hoverValue = props[keyWithHover];
@@ -405,6 +447,22 @@ function parseSlideBannerStyleToCustomNavigationProp(_a) {
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSize: getCustomNavigationSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value) })
             };
         }
+        if (customNavigationPropertyKey === 'nextBtnPrimaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnPrimaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnPrimaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
+        if (customNavigationPropertyKey === 'nextBtnSecondaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { nextBtnSecondaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { nextBtnSecondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
         return {
             normalStyle: __assign({}, acc.normalStyle),
             hoverStyle: __assign({}, acc.hoverStyle)
@@ -432,6 +490,16 @@ function getCustomNavigationPropKey(key) {
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE":
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE:HOVER":
             return 'prevBtnSize';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnPrimaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnSecondaryColor';
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE":
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:HOVER":
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE":
@@ -447,6 +515,16 @@ function getCustomNavigationPropKey(key) {
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE":
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER":
             return 'nextBtnSize';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnPrimaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnSecondaryColor';
         default:
             return '';
     }
@@ -649,6 +727,22 @@ function parseSlideBannerStyleToCustomProgressbarProp(_a) {
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), { size: getCustomProgressbarSize(hoverValue !== null && hoverValue !== void 0 ? hoverValue : value), offset: offset })
             };
         }
+        if (customProgressbarPropertyKey === 'primaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { primaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { primaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
+        if (customProgressbarPropertyKey === 'secondaryColor') {
+            var value = props[keyWithDevice];
+            var hoverValue = props[keyWithHover];
+            return {
+                normalStyle: __assign(__assign({}, acc.normalStyle), { secondaryColor: value }),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), { secondaryColor: hoverValue !== null && hoverValue !== void 0 ? hoverValue : value })
+            };
+        }
         return {
             normalStyle: __assign({}, acc.normalStyle),
             hoverStyle: __assign({}, acc.hoverStyle)
@@ -671,6 +765,16 @@ function getCustomProgressbarPropKey(key) {
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE":
         case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER":
             return 'size';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER":
+            return 'primaryColor';
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER":
+            return 'secondaryColor';
         default:
             return '';
     }

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

@@ -5,28 +5,44 @@ export type CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE = boolean;
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | 'DESIGN18' | 'DESIGN19' | 'DESIGN20' | 'DESIGN21' | 'DESIGN22' | 'DESIGN23' | 'DESIGN24' | 'DESIGN25' | 'DESIGN26' | 'DESIGN27' | 'DESIGN28' | 'DESIGN29' | 'DESIGN30' | 'DESIGN31' | 'DESIGN32' | 'DESIGN33' | 'DESIGN34' | 'DESIGN35' | 'DESIGN36' | 'DESIGN37' | 'DESIGN38' | 'DESIGN39' | 'DESIGN40' | 'DESIGN41' | 'DESIGN42' | 'DESIGN43' | 'DESIGN44' | 'DESIGN45' | 'DESIGN46' | 'DESIGN47' | 'DESIGN48' | 'DESIGN49' | 'DESIGN50' | 'DESIGN51' | 'DESIGN52' | 'DESIGN53' | 'DESIGN54' | 'DESIGN55' | 'DESIGN56' | 'DESIGN57' | 'DESIGN58' | 'DESIGN59' | 'DESIGN60' | 'DESIGN61' | 'DESIGN62' | 'DESIGN63' | 'DESIGN64' | 'DESIGN65' | 'DESIGN66' | 'DESIGN67' | 'DESIGN68' | 'DESIGN69' | 'DESIGN70' | 'DESIGN71' | 'DESIGN72' | 'DESIGN73' | 'DESIGN74' | 'DESIGN75' | 'DESIGN76' | 'DESIGN77' | 'DESIGN78' | 'DESIGN79' | 'DESIGN80' | 'DESIGN81' | 'DESIGN82' | 'DESIGN83' | 'DESIGN84' | 'DESIGN85' | 'DESIGN86' | 'DESIGN87' | 'DESIGN88' | 'DESIGN89' | 'DESIGN90' | 'DESIGN91' | 'DESIGN92' | 'DESIGN93' | 'DESIGN94' | 'DESIGN95' | 'DESIGN96' | 'DESIGN97' | 'DESIGN98' | 'DESIGN99' | 'DESIGN100';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE = 'OUTSET1' | 'OUTSET2' | 'OUTSET3' | 'OUTSET4' | 'OUTSET5' | 'OUTSET6' | 'OUTSET7' | 'OUTSET8' | 'OUTSET9' | 'OUTSET10' | 'OUTSET11' | 'OUTSET12' | 'INSET1' | 'INSET2' | 'INSET3' | 'INSET4' | 'INSET5' | 'INSET6' | 'INSET7' | 'INSET8';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8';
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE = boolean;
 export type CB_STYLE_PROP_SLIDEBANNER_SPECS_BASE = {
     CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_STYLE_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSTYLE_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONLOCATION_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNLOCATION_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNLOCATION: CB_STYLE_PROP_SLIDEBANNER_SPEC__NEXTBTNLOCATION_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE: CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE: CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYTIME: NUMBER_INTEGER;
     CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL: CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL_TYPE;
@@ -44,6 +60,12 @@ export type CB_STYLE_PROP_SLIDEBANNER_SPECS = CB_STYLE_PROP_SLIDEBANNER_SPECS_BA
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PAGINATIONSECONDARYCOLOR;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
@@ -53,6 +75,12 @@ export type CB_STYLE_PROP_SLIDEBANNER_SPECS = CB_STYLE_PROP_SLIDEBANNER_SPECS_BA
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSECONDARYCOLOR;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSTYLE_TYPE;
@@ -62,12 +90,24 @@ export type CB_STYLE_PROP_SLIDEBANNER_SPECS = CB_STYLE_PROP_SLIDEBANNER_SPECS_BA
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_NEXTBTNSECONDARYCOLOR;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSIZE_TYPE;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBARSECONDARYCOLOR;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:MOBILE': CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;
     'CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE:MOBILE:HOVER': CB_STYLE_PROP_SLIDEBANNER_SPEC_AUTOPLAYUSE_TYPE;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.418",
+  "version": "2.5.419",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",