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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/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/ContentsCarousel/contentsCarouselUtils.d.ts

@@ -27,7 +27,7 @@ export declare function parseCarouselStyleToCustomNavigationProp({ props, device
     normalStyle: CustomNavigationProps;
     hoverStyle: CustomNavigationProps;
 };
-export declare function getCustomNavigationPropKey(key: ContentsCarouselPropsKeys): "" | "prevBtnType" | "prevBtnOffset" | "prevBtnSize" | "nextBtnType" | "nextBtnOffset" | "nextBtnSize";
+export declare function getCustomNavigationPropKey(key: ContentsCarouselPropsKeys): "" | "prevBtnType" | "prevBtnOffset" | "prevBtnSize" | "prevBtnPrimaryColor" | "prevBtnSecondaryColor" | "nextBtnType" | "nextBtnOffset" | "nextBtnSize" | "nextBtnPrimaryColor" | "nextBtnSecondaryColor";
 type ParseCarouselStyleToCustomProgressbarProps = {
     props: CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS;
     device: Device;
@@ -36,5 +36,5 @@ export declare function parseCarouselStyleToCustomProgressbarProp({ props, devic
     normalStyle: CustomProgressbarProps;
     hoverStyle: CustomProgressbarProps;
 };
-export declare function getCustomProgressbarPropKey(key: ContentsCarouselPropsKeys): "" | "size" | "type";
+export declare function getCustomProgressbarPropKey(key: ContentsCarouselPropsKeys): "" | "size" | "type" | "primaryColor" | "secondaryColor";
 export {};

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

@@ -198,6 +198,22 @@ function parseCarouselStyleToCustomNavigationProp(_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];
@@ -222,6 +238,22 @@ function parseCarouselStyleToCustomNavigationProp(_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)
@@ -249,6 +281,16 @@ function getCustomNavigationPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:MOBILE:HOVER":
             return 'prevBtnSize';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnPrimaryColor';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'prevBtnSecondaryColor';
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:HOVER":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:MOBILE":
@@ -264,6 +306,16 @@ function getCustomNavigationPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:MOBILE:HOVER":
             return 'nextBtnSize';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnPrimaryColor';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER":
+            return 'nextBtnSecondaryColor';
         default:
             return '';
     }
@@ -466,6 +518,22 @@ function parseCarouselStyleToCustomProgressbarProp(_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)
@@ -488,6 +556,16 @@ function getCustomProgressbarPropKey(key) {
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE":
         case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE:HOVER":
             return 'size';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER":
+            return 'primaryColor';
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE":
+        case "CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER":
+            return 'secondaryColor';
         default:
             return '';
     }

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

@@ -7,11 +7,17 @@ export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL_TYPE = boolean;
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_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_CONTENTSCAROUSEL_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_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_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_CONTENTSCAROUSEL_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_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8';
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE';
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR = string;
+export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR = string;
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE_TYPE = boolean;
 export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS_BASE = {
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_STYLE_TYPE;
@@ -20,11 +26,17 @@ export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS_BASE = {
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSTYLE_TYPE;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNLOCATION_TYPE;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE;
+    CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNLOCATION_TYPE;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE;
+    CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE;
+    CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR;
+    CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE_TYPE;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYTIME: NUMBER_INTEGER;
     CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL_TYPE;
@@ -48,6 +60,12 @@ export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS = CB_STYLE_PROP_CONTENTSCAROUSE
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSIZE_TYPE;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PREVBTNSECONDARYCOLOR;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSTYLE_TYPE;
@@ -57,12 +75,24 @@ export type CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS = CB_STYLE_PROP_CONTENTSCAROUSE
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSIZE_TYPE;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_NEXTBTNSECONDARYCOLOR;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSIZE_TYPE;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARPRIMARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR;
+    'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBARSECONDARYCOLOR;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE:MOBILE': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE_TYPE;
     'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE:MOBILE:HOVER': CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_AUTOPLAYUSE_TYPE;

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

@@ -94,7 +94,7 @@ function ContentsList(props) {
                             limit: CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
                             queryData: queryData,
                             compositions: compositions
-                        }).slice(startIndex, endIndex) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onPageClick: handlePageClick })] }) })) })));
+                        }).slice(startIndex, endIndex) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, primaryColor: isHovered ? paginationHoverStyle.primaryColor : paginationNormalStyle.primaryColor, secondaryColor: isHovered ? paginationHoverStyle.secondaryColor : paginationNormalStyle.secondaryColor, onPageClick: handlePageClick })] }) })) })));
 }
 var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
 var S_ContentsListLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {

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

@@ -14,8 +14,10 @@ export interface CustomPaginationProps {
         transformOrigin?: string;
     };
     size?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
 }
-export declare const CustomPagination: ({ current, total, type, offset, size, onPageClick }: CustomPaginationProps & {
+export declare const CustomPagination: ({ current, total, type, offset, size, primaryColor, secondaryColor, onPageClick }: CustomPaginationProps & {
     onPageClick: (page: number) => void;
 }) => JSX.Element;
 export interface FlexBoxProps {

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

@@ -43,7 +43,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var paginationConfigs_1 = require("./paginationConfigs");
 var CustomPagination = function (_a) {
-    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _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, onPageClick = _a.onPageClick;
+    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, onPageClick = _a.onPageClick;
     var getPageGroupStart = function (page) {
         return Math.floor((page - 1) / 5) * 5 + 1;
     };
@@ -63,41 +63,41 @@ var CustomPagination = function (_a) {
     var handlePageClick = function (pageNumber) {
         onPageClick(pageNumber);
     };
-    var renderProgressByType = function () {
+    var renderPagination = function () {
         switch (type) {
             case 'NONE':
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             case 'DESIGN1':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN2':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN3':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN4':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design4, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design4, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN5':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design5, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design5, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN6':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design6, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design6, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN7':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN8':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN9':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN10':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN11':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN12':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             case 'DESIGN13':
-                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, primaryColor: primaryColor, secondaryColor: secondaryColor, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
             default:
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size }, { children: renderProgressByType() })));
+    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size }, { children: renderPagination() })));
 };
 exports.CustomPagination = CustomPagination;
 var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n"], ["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {

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

@@ -2,22 +2,24 @@
 type Props = {
     total: number;
     current: number;
+    primaryColor?: string;
+    secondaryColor?: string;
     onPrevious: () => void;
     onNext: () => void;
     pages?: number[];
     onPageChange?: (page: number) => void;
 };
-export declare function Design1({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design2({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design3({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design4({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design5({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design6({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design7({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design8({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design9({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design10({ total, current, onPageChange, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design11({ total, current, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design12({ total, current, onNext, onPrevious }: Props): JSX.Element;
-export declare function Design13({ total, current, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design1({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design2({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design3({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design4({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design5({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design6({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design7({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design8({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design9({ total, current, pages, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design10({ total, current, primaryColor, secondaryColor, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design11({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design12({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design13({ total, current, primaryColor, secondaryColor, onNext, onPrevious }: Props): JSX.Element;
 export {};