@capillarytech/blaze-ui 5.18.10 → 5.18.13

package/CapStaticTemplates/index.js

@@ -3153,6 +3153,69 @@ const SvgNotepad = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _extends({
 }));
 var _default = exports["default"] = SvgNotepad;
 
+/***/ }),
+
+/***/ 16205:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// Imports
+var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-static-templates-v2{display:flex;flex-flow:nowrap;min-width:85vw}.sidebar{width:18.429rem;margin-right:1.214rem;border:.071rem solid #dfe2e7}.templates-and-search-container{width:var(--templates-container-width, 70.714rem)}.templates-container{max-height:var(--templates-container-max-height, 28.571rem);overflow-y:scroll;scroll-behavior:smooth}.category-container{display:flex;align-items:center;justify-content:space-between;height:2.857rem;padding:.857rem 1.142rem .857rem 1.428rem;border-left:.285rem solid var(--category-color, #97a0af);cursor:pointer}.category-container.selected{background-color:#f4f5f7}.search-box{width:19.857rem;margin-bottom:.857rem;margin-left:.428rem}.search-box .ant-input.ant-input-lg{height:2.285rem}.template-icon.cap-icon-v2{font-size:.929rem}.strategy-template .strategy-template-radio-root .strategy-template-radio-button{border-left:.285rem solid var(--category-color, #97a0af)}.strategy-template .strategy-template-radio-root .strategy-template-radio-button.template-disabled{opacity:.5}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .ant-card.ant-card-bordered{border-left:.285rem solid var(--border-color, #97a0af)}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .card-header-title{max-width:14.286rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .coming-soon-tag{display:none;margin-bottom:.857rem}.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover{opacity:1}.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover .coming-soon-tag{display:inline-flex;height:auto}.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover .card-header-title{margin-right:.143rem}.strategy-template .strategy-template-radio-root .strategy-template-radio-button:hover .card-available{max-width:14.286rem}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-container{height:2.857rem;width:2.857rem;border-radius:1.142rem}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-container .strategy-template-radio-div-icon{left:43%;top:21%}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-container .strategy-template-radio-div-icon .cap-icon-v2-add{display:block;margin-left:.071rem;margin-top:.428rem}.strategy-template .strategy-template-radio-root .strategy-template-radio-button .strategy-template-radio-icon-wrapper{width:2.857rem;height:2.857rem;margin-right:.571rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body{display:flex;align-items:center;flex-wrap:wrap;height:auto;padding:.571rem .571rem .285rem .857rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body div.strategy-template-radio-content-container{width:14.5rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .card-content{max-height:3.214rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .card-header-row{width:14.857rem;flex-flow:nowrap;align-items:center}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .custom-template{margin-left:.571rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .custom-template .title-desc-container{width:14rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon{display:flex;align-items:center;justify-content:center;height:2.857rem;width:2.857rem;margin-top:-0.571rem;margin-left:-0.857rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon svg{width:2.857rem;height:2.857rem}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon .text-label{font-weight:500;text-transform:uppercase}.strategy-template .strategy-template-radio-root .ant-card div.ant-card-body .strategy-icon .selected{color:#fff}.strategy-template-icon-placeholder .strategy-template-radio-div-icon{left:35% !important;top:30% !important}.templates-modal .ant-modal-container{width:52.643rem;height:19.571rem;right:50%;padding:0}.templates-modal .ant-modal-container div.ant-modal-body{padding:1.714rem 1.714rem 1.571rem 1.714rem}.templates-modal .ant-modal-container .modal-image{width:17.357rem;height:15.714rem}.templates-modal .ant-modal-container .modal-info-content{width:28.429rem;margin-right:1.714rem}.templates-modal .ant-modal-container .ant-modal-close-x{margin-top:.571rem}.templates-modal .ant-modal-container .ant-modal-footer{display:none}.styled-cap-card{width:6.571rem;height:6.143rem}.styled-cap-card div.ant-card-head{max-height:2.786rem;min-height:2.786rem;text-align:center;background-color:#e9f0fe}.styled-cap-card div.ant-card-head .ant-card-head-title{padding:.571rem 0}.styled-cap-card div.ant-card-body{height:3.357rem;margin-top:.571rem;padding:.643rem .714rem .428rem .714rem !important;text-align:center}.styled-cap-card .cap-icon svg{height:1.714rem;width:1.714rem;color:#c7d8fb}.premium-icon{margin-left:.285rem;color:#e8bc25}.cap-static-templates-v2-margin-t-4{margin-top:.285rem}.cap-static-templates-v2-margin-t-13{margin-top:.928rem}.cap-static-templates-v2-margin-l-8{margin-left:.571rem}.cap-static-templates-v2-margin-b-8{margin-bottom:.571rem}.cap-static-templates-v2-margin-t-16{margin-top:1.142rem}.cap-static-templates-v2-margin-b-16{margin-bottom:1.142rem}`, ""]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"cap-static-templates-v2": `cap-static-templates-v2`,
+	"sidebar": `sidebar`,
+	"templates-and-search-container": `templates-and-search-container`,
+	"templates-container": `templates-container`,
+	"category-container": `category-container`,
+	"selected": `selected`,
+	"search-box": `search-box`,
+	"template-icon": `template-icon`,
+	"cap-icon-v2": `cap-icon-v2`,
+	"strategy-template": `strategy-template`,
+	"strategy-template-radio-root": `strategy-template-radio-root`,
+	"strategy-template-radio-button": `strategy-template-radio-button`,
+	"template-disabled": `template-disabled`,
+	"card-header-title": `card-header-title`,
+	"coming-soon-tag": `coming-soon-tag`,
+	"card-available": `card-available`,
+	"strategy-template-radio-icon-container": `strategy-template-radio-icon-container`,
+	"strategy-template-radio-div-icon": `strategy-template-radio-div-icon`,
+	"cap-icon-v2-add": `cap-icon-v2-add`,
+	"strategy-template-radio-icon-wrapper": `strategy-template-radio-icon-wrapper`,
+	"strategy-template-radio-content-container": `strategy-template-radio-content-container`,
+	"card-content": `card-content`,
+	"card-header-row": `card-header-row`,
+	"custom-template": `custom-template`,
+	"title-desc-container": `title-desc-container`,
+	"strategy-icon": `strategy-icon`,
+	"text-label": `text-label`,
+	"strategy-template-icon-placeholder": `strategy-template-icon-placeholder`,
+	"templates-modal": `templates-modal`,
+	"ant-modal-body": `ant-modal-body`,
+	"modal-image": `modal-image`,
+	"modal-info-content": `modal-info-content`,
+	"ant-modal-close-x": `ant-modal-close-x`,
+	"ant-modal-footer": `ant-modal-footer`,
+	"styled-cap-card": `styled-cap-card`,
+	"ant-card-head": `ant-card-head`,
+	"ant-card-head-title": `ant-card-head-title`,
+	"ant-card-body": `ant-card-body`,
+	"cap-icon": `cap-icon`,
+	"premium-icon": `premium-icon`,
+	"cap-static-templates-v2-margin-t-4": `cap-static-templates-v2-margin-t-4`,
+	"cap-static-templates-v2-margin-t-13": `cap-static-templates-v2-margin-t-13`,
+	"cap-static-templates-v2-margin-l-8": `cap-static-templates-v2-margin-l-8`,
+	"cap-static-templates-v2-margin-b-8": `cap-static-templates-v2-margin-b-8`,
+	"cap-static-templates-v2-margin-t-16": `cap-static-templates-v2-margin-t-16`,
+	"cap-static-templates-v2-margin-b-16": `cap-static-templates-v2-margin-b-16`
+};
+module.exports = ___CSS_LOADER_EXPORT___;
+
+
 /***/ }),
 
 /***/ 16805:
@@ -3996,6 +4059,49 @@ var f=__webpack_require__(9206),k=Symbol.for("react.element"),l=Symbol.for("reac
 function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;
 
 
+/***/ }),
+
+/***/ 21160:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _reactIntl = __webpack_require__(46407);
+const scope = 'blaze.components.CapStaticTemplates';
+var _default = exports["default"] = (0, _reactIntl.defineMessages)({
+  strategyTitleMsg: {
+    id: scope + ".strategyTitleMsg",
+    defaultMessage: 'Select the strategy'
+  },
+  strategyDescriptionMsg: {
+    id: scope + ".strategyDescriptionMsg",
+    defaultMessage: 'Use strategy driven pre-defined marketing use-cases or build your own strategy'
+  },
+  comingSoonMsg: {
+    id: scope + ".comingSoonMsg",
+    defaultMessage: 'Coming soon'
+  },
+  blankCategoryLabel: {
+    id: scope + ".blankCategoryLabel",
+    defaultMessage: 'Custom'
+  },
+  blankTemplateLabel: {
+    id: scope + ".blankTemplateLabel",
+    defaultMessage: 'Build from scratch'
+  },
+  blankTemplateDescription: {
+    id: scope + ".blankTemplateDescription",
+    defaultMessage: 'Create your own journey from scratch'
+  },
+  searchPlaceholderMsg: {
+    id: scope + ".searchPlaceholderMsg",
+    defaultMessage: 'Search strategy'
+  }
+});
+
 /***/ }),
 
 /***/ 21549:
@@ -4392,6 +4498,58 @@ ___CSS_LOADER_EXPORT___.locals = {
 module.exports = ___CSS_LOADER_EXPORT___;
 
 
+/***/ }),
+
+/***/ 22882:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(85072);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_singletonStyleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(64284);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_singletonStyleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_singletonStyleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(77659);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(55056);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10540);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16205);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
+/* harmony reexport (unknown) */ for(const __WEBPACK_IMPORT_KEY__ in _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5__) if(__WEBPACK_IMPORT_KEY__ !== "default") __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = () => _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5__[__WEBPACK_IMPORT_KEY__]
+/* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+;
+options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+options.domAPI = (_node_modules_style_loader_dist_runtime_singletonStyleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()((_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default()), options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default()) && (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) ? (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) : undefined);
+
+
 /***/ }),
 
 /***/ 23333:
@@ -5791,22 +5949,22 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.capRadioCardV2 .radioCardContentContainer{width:100%}.capRadioCardV2 .radioCardContent,.capRadioCardV2 .radioCardHeader{font-size:.857rem;line-height:1.17;letter-spacing:normal;color:#5e6c84;padding-top:.285rem}.capRadioCardV2 .radioCardIcon{width:3.429rem;height:3.429rem;object-fit:contain;margin-right:1.714rem}.capRadioCardV2 .radioCardChecked{position:absolute;right:-0.429rem;top:-0.857rem;display:none}.capRadioCardV2 .ant-radio-button-wrapper-checked .radioCardChecked{display:block;z-index:1}.capRadioCardV2 .divIcon{position:absolute;top:25%;left:25%}.capRadioCardV2 .iconContainer{padding-right:1.714rem;height:3.429rem;width:3.429rem;background-color:#dfe2e7;background-size:cover;text-decoration:none;display:inline-block;border-radius:1.286rem;position:relative}.capRadioCardV2 .iconContainer.greenColor{background-color:#47af46;color:#fff}.capRadioCardV2 .radioButtonWrapper{position:relative;height:120px;width:372px;border-radius:.285rem;background-color:#fff;margin:.428rem;padding:0;border-top-width:1px;vertical-align:top}.capRadioCardV2 .disabledWrapper{opacity:.5}.capRadioCardV2 .disabledWrapper.customDisableRadioButton{border:unset;max-height:5.357rem}.capRadioCardV2 .disabledWrapper.customDisableRadioButton .radioCardChecked{display:none}.capRadioCardV2 .disabledWrapper.customDisableRadioButton .ant-card-body{padding:unset}.capRadioCardV2 .customDisableRadioButton{border:unset;max-height:5.357rem}.capRadioCardV2 .customDisableRadioButton .ant-card-body{padding:unset}.capRadioCardV2 .ant-card-body{display:flex;padding:1.142rem;height:100%;position:relative}.capRadioCardV2 .infoIconWrapper{position:absolute;top:1.142rem;right:1.142rem}.capRadioCardV2 .ant-card{height:100%;border:none}.capRadioCardV2.smallRadioCard .iconContainer{padding-right:unset;background-color:unset}.capRadioCardV2.smallRadioCard .radioCardIcon{height:1.428rem;width:1.714rem}.capRadioCardV2.smallRadioCard .divIcon{top:0%;left:0%}.capRadioCardV2.smallRadioCard .radioButtonWrapper{margin:.428rem .857rem .428rem 0}.capRadioCardV2.smallRadioCard .radioButtonWrapper:nth-child(3n){margin-right:0}.capRadioCardV2.smallRadioCard .ant-card-body{padding:.857rem;height:48px}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-radioCard-v2 .radio-card-content-container{width:100%}.cap-radioCard-v2 .radio-card-content,.cap-radioCard-v2 .radio-card-header{font-size:.857rem;line-height:1.17;letter-spacing:normal;color:#5e6c84;padding-top:.285rem}.cap-radioCard-v2 .radio-card-icon{width:3.429rem;height:3.429rem;object-fit:contain;margin-right:1.714rem}.cap-radioCard-v2 .radio-card-checked{position:absolute;right:-0.429rem;top:-0.857rem;display:none}.cap-radioCard-v2 .ant-radio-button-wrapper-checked .radio-card-checked{display:block;z-index:1}.cap-radioCard-v2 .div-icon{position:absolute;top:25%;left:25%}.cap-radioCard-v2 .icon-container{padding-right:1.714rem;height:3.429rem;width:3.429rem;background-color:#dfe2e7;background-size:cover;text-decoration:none;display:inline-block;border-radius:1.286rem;position:relative}.cap-radioCard-v2 .icon-container.green-color{background-color:#47af46;color:#fff}.cap-radioCard-v2 .radio-button-wrapper{position:relative;height:120px;width:372px;border-radius:.285rem;background-color:#fff;margin:.428rem;padding:0;border-top-width:1px;vertical-align:top}.cap-radioCard-v2 .disabled-wrapper{opacity:.5}.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button{border:unset;max-height:5.357rem}.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button .radio-card-checked{display:none}.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button .ant-card-body{padding:unset}.cap-radioCard-v2 .custom-disable-radio-button{border:unset;max-height:5.357rem}.cap-radioCard-v2 .custom-disable-radio-button .ant-card-body{padding:unset}.cap-radioCard-v2 .ant-card-body{display:flex;padding:1.142rem;height:100%;position:relative}.cap-radioCard-v2 .info-icon-wrapper{position:absolute;top:1.142rem;right:1.142rem}.cap-radioCard-v2 .ant-card{height:100%;border:none}.cap-radioCard-v2.smallRadioCard .icon-container{padding-right:unset;background-color:unset}.cap-radioCard-v2.smallRadioCard .radio-card-icon{height:1.428rem;width:1.714rem}.cap-radioCard-v2.smallRadioCard .div-icon{top:0%;left:0%}.cap-radioCard-v2.smallRadioCard .radio-button-wrapper{margin:.428rem .857rem .428rem 0}.cap-radioCard-v2.smallRadioCard .radio-button-wrapper:nth-child(3n){margin-right:0}.cap-radioCard-v2.smallRadioCard .ant-card-body{padding:.857rem;height:48px}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	"capRadioCardV2": `capRadioCardV2`,
-	"radioCardContentContainer": `radioCardContentContainer`,
-	"radioCardContent": `radioCardContent`,
-	"radioCardHeader": `radioCardHeader`,
-	"radioCardIcon": `radioCardIcon`,
-	"radioCardChecked": `radioCardChecked`,
-	"divIcon": `divIcon`,
-	"iconContainer": `iconContainer`,
-	"greenColor": `greenColor`,
-	"radioButtonWrapper": `radioButtonWrapper`,
-	"disabledWrapper": `disabledWrapper`,
-	"customDisableRadioButton": `customDisableRadioButton`,
-	"infoIconWrapper": `infoIconWrapper`,
+	"cap-radioCard-v2": `cap-radioCard-v2`,
+	"radio-card-content-container": `radio-card-content-container`,
+	"radio-card-content": `radio-card-content`,
+	"radio-card-header": `radio-card-header`,
+	"radio-card-icon": `radio-card-icon`,
+	"radio-card-checked": `radio-card-checked`,
+	"div-icon": `div-icon`,
+	"icon-container": `icon-container`,
+	"green-color": `green-color`,
+	"radio-button-wrapper": `radio-button-wrapper`,
+	"disabled-wrapper": `disabled-wrapper`,
+	"custom-disable-radio-button": `custom-disable-radio-button`,
+	"info-icon-wrapper": `info-icon-wrapper`,
 	"smallRadioCard": `smallRadioCard`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
@@ -7959,86 +8117,6 @@ var _default = exports["default"] = SvgThreeStarDark;
 
 /***/ }),
 
-/***/ 39867:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-
-exports.__esModule = true;
-exports.TemplatesModal = exports.TemplatesContainer = exports.TemplatesAndSearchContainer = exports.TemplateIcon = exports.StyledDiv = exports.StyledCapCard = exports.StrategyTemplate = exports.SideBar = exports.SearchBox = exports.PremiumIcon = exports.CategoryContainer = void 0;
-var _styledComponents = _interopRequireDefault(__webpack_require__(76480));
-var _CapCard = _interopRequireDefault(__webpack_require__(10841));
-var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
-var _CapInput = _interopRequireDefault(__webpack_require__(15773));
-var _CapModal = _interopRequireDefault(__webpack_require__(7442));
-var _CapRadioCard = _interopRequireDefault(__webpack_require__(46866));
-var _CapRow = _interopRequireDefault(__webpack_require__(69813));
-var _variables = __webpack_require__(56587);
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-const StyledDiv = exports.StyledDiv = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-flow: nowrap;\n  min-width: 85vw;\n"])));
-const SideBar = exports.SideBar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 258px;\n  margin-right: 17px;\n  border: 1px solid ", ";\n"])), _variables.CAP_G07);
-const TemplatesAndSearchContainer = exports.TemplatesAndSearchContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n"])), props => props.width);
-const TemplatesContainer = exports.TemplatesContainer = (0, _styledComponents.default)(_CapRow.default)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  overflow-y: scroll;\n  scroll-behavior: smooth;\n"])), props => props == null ? void 0 : props.maxHeight);
-const CategoryContainer = exports.CategoryContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: ", ";\n  background-color: ", ";\n  padding: ", " ", " ", " ", ";\n  border-left: ", ";\n  cursor: pointer;\n"])), _variables.CAP_SPACE_40, props => (props == null ? void 0 : props.selected) && _variables.CAP_G09, _variables.CAP_SPACE_12, _variables.CAP_SPACE_16, _variables.CAP_SPACE_12, _variables.CAP_SPACE_20, props => "4px solid " + ((props == null ? void 0 : props.color) || _variables.CAP_G05));
-const SearchBox = exports.SearchBox = (0, _styledComponents.default)(_CapInput.default.Search)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  .ant-input.ant-input-lg {\n    height: ", ";\n  }\n  width: 278px;\n  margin-bottom: ", ";\n  margin-left: 6px;\n"])), _variables.CAP_SPACE_32, _variables.CAP_SPACE_12);
-const TemplateIcon = exports.TemplateIcon = (0, _styledComponents.default)(_CapIcon.default)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  &.cap-icon-v2 {\n    font-size: 13px;\n  }\n"])));
-const StrategyTemplate = exports.StrategyTemplate = (0, _styledComponents.default)(_CapRadioCard.default)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  &.ant-radio-group {\n    .ant-radio-button-wrapper {\n      &.template-disabled {\n        opacity: 0.5;\n      }\n      .ant-card.ant-card-bordered {\n        border-left: ", ";\n      }\n      .card-header-title {\n        max-width: 200px;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      .coming-soon-tag {\n        display: none;\n      }\n      :hover {\n        opacity: 1;\n        .coming-soon-tag {\n          display: inline-flex;\n          height: auto;\n        }\n        .card-header-title {\n          margin-right: 2px;\n        }\n        .card-available {\n          max-width: 200px;\n        }\n      }\n      .icon-container {\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        .div-icon {\n          left: 32%;\n          top: 21%;\n          .cap-icon-v2-add {\n            display: block;\n            margin-left: 1px;\n            margin-top: 6px;\n          }\n        }\n      }\n      .radio-card-icon {\n        width: ", ";\n        height: ", ";\n        margin-right: ", ";\n      }\n    }\n    .ant-card {\n      div.ant-card-body {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        height: auto;\n        padding: ", " ", " ", " ", ";\n        div.radio-card-content-container {\n          width: 203px;\n        }\n        .card-content {\n          max-height: 45px;\n        }\n        .card-header-row {\n          width: 208px;\n          flex-flow: nowrap;\n        }\n        .custom-template {\n          margin-left: ", ";\n          .title-desc-container {\n            width: 196px;\n          }\n        }\n        .strategy-icon {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: ", ";\n          width: ", ";\n          margin-top: -8px;\n          margin-left: -12px;\n          svg {\n            width: ", ";\n            height: ", ";\n          }\n          .text-label {\n            font-weight: 500;\n            text-transform: uppercase;\n          }\n          .selected {\n            color: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), props => "4px solid " + ((props == null ? void 0 : props.borderColor) || _variables.CAP_G05), _variables.CAP_SPACE_40, _variables.CAP_SPACE_40, _variables.CAP_SPACE_16, _variables.CAP_SPACE_40, _variables.CAP_SPACE_40, _variables.CAP_SPACE_08, _variables.CAP_SPACE_08, _variables.CAP_SPACE_08, _variables.CAP_SPACE_04, _variables.CAP_SPACE_12, _variables.CAP_SPACE_08, _variables.CAP_SPACE_40, _variables.CAP_SPACE_40, _variables.CAP_SPACE_40, _variables.CAP_SPACE_40, _variables.CAP_WHITE);
-const TemplatesModal = exports.TemplatesModal = (0, _styledComponents.default)(_CapModal.default)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  .ant-modal-content {\n    width: 737px;\n    height: 274px;\n    right: 50%;\n    div.ant-modal-body {\n      padding: 24px 24px 22px 24px;\n    }\n    .modal-image {\n      width: 243px;\n      height: 220px;\n    }\n    .modal-info-content {\n      width: 398px;\n      margin-right: ", ";\n    }\n    .ant-modal-close-x {\n      margin-top: ", ";\n    }\n    .ant-modal-footer {\n      display: none;\n    }\n  }\n"])), _variables.CAP_SPACE_24, _variables.CAP_SPACE_08);
-const StyledCapCard = exports.StyledCapCard = (0, _styledComponents.default)(_CapCard.default)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteralLoose(["\n  &.ant-card.cap-card-v2 {\n    width: 92px;\n    height: 86px;\n    div.ant-card-head {\n      max-height: 39px;\n      min-height: 39px;\n      text-align: center;\n      background-color: ", ";\n      .ant-card-head-title {\n        padding: ", " 0;\n      }\n    }\n    div.ant-card-body {\n      height: 47px;\n      margin-top: ", ";\n      padding: 9px 10px 6px 10px;\n      text-align: center;\n    }\n    .cap-icon-v2 {\n      svg {\n        height: ", ";\n        width: ", ";\n        color: #c7d8fb;\n      }\n    }\n  }\n"])), _variables.CAP_PALE_GREY, _variables.CAP_SPACE_08, _variables.CAP_SPACE_08, _variables.CAP_SPACE_24, _variables.CAP_SPACE_24);
-const PremiumIcon = exports.PremiumIcon = (0, _styledComponents.default)(_CapIcon.default)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["\n  margin-left: ", ";\n  color: ", ";\n"])), _variables.CAP_SPACE_04, _variables.CAP_YELLOW01);
-
-/***/ }),
-
-/***/ 39879:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-
-exports.__esModule = true;
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(__webpack_require__(9206));
-var _reactIntl = __webpack_require__(46407);
-var _en = _interopRequireDefault(__webpack_require__(49540));
-var _jsxRuntime = __webpack_require__(74848);
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const prefix = "app.commonUtils.capUiLibrary";
-const LocaleHoc = (WrapperComponent, customProps) => {
-  const Wrapper = props => {
-    const componentName = customProps.key;
-    const translatedDefaults = _en.default[componentName];
-    const {
-      intl
-    } = props;
-    const translatedProps = (0, _react.useMemo)(() => {
-      if (!translatedDefaults) return {};
-      return Object.keys(translatedDefaults).reduce((acc, key) => {
-        const id = prefix + "." + componentName + "." + key;
-        const defaultMessage = translatedDefaults[key];
-        try {
-          acc[key] = intl.formatMessage({
-            id,
-            defaultMessage
-          });
-        } catch (_err) {
-          acc[key] = defaultMessage;
-        }
-        return acc;
-      }, {});
-    }, [translatedDefaults, intl, prefix, componentName]);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, _extends({}, translatedProps, props));
-  };
-  return (0, _reactIntl.injectIntl)(Wrapper);
-};
-var _default = exports["default"] = LocaleHoc;
-
-/***/ }),
-
 /***/ 39958:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -9465,7 +9543,16 @@ class CapRadioCard extends _react.default.Component {
         cardWidth,
         selected,
         defaultValue,
-        size
+        size,
+        radioButtonWrapperClassName,
+        checkedIconClassName,
+        iconWrapperClassName,
+        iconContainerClassName,
+        divIconClassName,
+        contentContainerClassName,
+        headerClassName,
+        contentClassName,
+        infoIconWrapperClassName
       } = this.props;
       const {
           content,
@@ -9490,42 +9577,42 @@ class CapRadioCard extends _react.default.Component {
         value: value,
         disabled: disabled,
         style: radioButtonStyle,
-        className: (0, _classnames.default)(_styles.default['radioButtonWrapper'], {
-          [_styles.default['customDisableRadioButton']]: customDisableClass,
-          [_styles.default['disabledWrapper']]: disabled
-        }, radioCardClassName)
+        className: (0, _classnames.default)(_styles.default['radio-button-wrapper'], {
+          [_styles.default['custom-disable-radio-button']]: customDisableClass,
+          [_styles.default['disabled-wrapper']]: disabled
+        }, radioCardClassName, radioButtonWrapperClassName)
       }, restParams, {
         children: [!customDisableClass && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
           type: "check-filled",
-          className: _styles.default['radioCardChecked']
+          className: (0, _classnames.default)(_styles.default['radio-card-checked'], checkedIconClassName)
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antdV.Card, {
           variant: "borderless",
           children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: _styles.default['radioCardIcon'],
+            className: (0, _classnames.default)(_styles.default['radio-card-icon'], iconWrapperClassName),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(_styles.default['iconContainer'], {
-                [_styles.default['greenColor']]: isChecked && !isSmall && !disabled
-              }),
+              className: (0, _classnames.default)(_styles.default['icon-container'], {
+                [_styles.default['green-color']]: isChecked && !isSmall && !disabled
+              }, iconContainerClassName),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: _styles.default['divIcon'],
+                className: (0, _classnames.default)(_styles.default['div-icon'], divIconClassName),
                 children: icon
               })
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: _styles.default['radioCardContentContainer'],
+            className: (0, _classnames.default)(_styles.default['radio-card-content-container'], contentContainerClassName),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: _styles.default['radioCardHeader'],
+              className: (0, _classnames.default)(_styles.default['radio-card-header'], headerClassName),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
                 type: "h4",
                 className: (0, _classnames.default)(titleClassName),
                 children: title
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: _styles.default['radioCardContent'],
-              children: [" ", content]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames.default)(_styles.default['radio-card-content'], contentClassName),
+              children: content
             })]
           }), infoIconDescription && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: _styles.default['infoIconWrapper'],
+            className: (0, _classnames.default)(_styles.default['info-icon-wrapper'], infoIconWrapperClassName),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
               title: infoIconDescription
             })
@@ -9544,7 +9631,7 @@ class CapRadioCard extends _react.default.Component {
       rest = _objectWithoutPropertiesLoose(_this$props2, _excluded2);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioGroup, _extends({}, rest, {
       onChange: this.handleChange,
-      className: (0, _classnames.default)(_styles.default['capRadioCardV2'], {
+      className: (0, _classnames.default)(_styles.default['cap-radioCard-v2'], {
         [_styles.default['smallRadioCard']]: size === 'small'
       }, className),
       children: panes && panes.map(pane => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
@@ -9972,381 +10059,6 @@ function listCacheHas(key) {
 module.exports = listCacheHas;
 
 
-/***/ }),
-
-/***/ 49540:
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-
-exports.__esModule = true;
-exports["default"] = void 0;
-var _default = exports["default"] = {
-  CapMultiSelect: {
-    noResultsFoundText: 'No results found',
-    selectText: 'Select',
-    closeText: 'Close',
-    searchPlaceholder: 'Search',
-    selectedText: 'selected',
-    selectAllText: 'Select all',
-    selectAllSearchResultsText: 'Select all searched results',
-    moreText: 'more'
-  },
-  CapModal: {
-    okText: 'Yes',
-    closeText: 'No'
-  },
-  CapMultiSelectWithTree: {
-    noResultsFoundText: 'No results found',
-    selectText: 'Select',
-    closeText: 'Close',
-    searchPlaceholder: 'Search',
-    selectedText: 'selected',
-    selectAllText: 'Select all',
-    selectAllSearchResultsText: 'Select all searched results',
-    moreText: 'more',
-    storeUploadsText: 'Store IDs are uploaded already'
-  },
-  CapCustomSelect: {
-    searchPlaceholder: 'Search',
-    selectPlaceholder: 'Select Option'
-  },
-  CapMultiSelectDatePicker: {
-    lastDayText: 'Last day of month'
-  },
-  CapTable: {
-    loadMoreData: 'Loading more data...'
-  },
-  CapIllustration: {
-    accessForbiddenMsg: 'Action cannot be performed due to insufficient permission'
-  },
-  CapNavigation: {
-    businessProcesses: 'Workbench',
-    wecrm: 'Wecrm',
-    loyaltyProgram: 'Loyalty+',
-    storePerformance: 'Store Performance',
-    memberCare: 'Member Care',
-    storeCare: 'Store Care',
-    insights: 'Insights+',
-    connectPlus: 'Connect+',
-    settingsLabel: 'Settings',
-    campaign: 'Engage+',
-    selectOrganization: 'Select Organization',
-    organization: 'Organization',
-    noResultText: 'No results found',
-    selectProduct: 'Select Product'
-  },
-  InfoNote: {
-    noteText: 'Note'
-  },
-  SomethingWentWrong: {
-    title: 'Sorry, something went wrong.',
-    description: 'Please try again. If this issue occurs again, please reach out to Capillary support team.',
-    reloadText: 'Try refreshing again'
-  },
-  CapBlock: {
-    deleteBlockMsg: 'Delete',
-    expandBlockMsg: 'Expand',
-    collapseBlockMsg: 'Collapse'
-  },
-  CapMultiplePath: {
-    notUniqueMsg: 'Not Unique',
-    deleteConfirmationTitleMsg: 'Confirm delete path',
-    deleteConfirmationTextMsg: 'Are you sure you wish to delete path',
-    deleteConfirmationWarningMsg: 'This action cannot be undone.',
-    deleteButtonTextMsg: 'Yes, Delete',
-    yesMsg: 'Yes',
-    noMsg: 'No',
-    pathMsg: 'Path',
-    addPathMessage: 'Add Path'
-  },
-  CapCondition: {
-    includeMsg: 'include',
-    excludeMsg: 'exclude',
-    equalMsg: 'equal to',
-    greaterThanMsg: 'greater than',
-    lessThanMsg: 'less than',
-    greaterThanOrEqualMsg: 'greater than or equal to',
-    lessThanorEqualMsg: 'less than or equal',
-    inRangeMsg: 'in range',
-    notEqualMsg: 'not equal to',
-    whoseMsg: 'Whose',
-    isMsg: 'is',
-    andMsg: 'and',
-    ANDMsg: 'AND',
-    containsMsg: 'contains',
-    startsWithMsg: 'starts with',
-    endsWithMsg: 'ends with',
-    exactMsg: 'exact',
-    conditionStringInputPlaceholderMsg: 'Enter min. 3 characters',
-    lineItemMsg: 'only for lineitems with',
-    withMsg: 'with',
-    additionalFieldsMsg: 'Additional condition',
-    plusMinus: '+/-',
-    inMsg: 'in',
-    notInMsg: 'not in',
-    uploadFailedError: 'Upload failed',
-    uploadLimitExceeded: 'Please do not upload more than 1000 store codes',
-    uploadReqLoader: 'Uploading stores',
-    or: 'OR',
-    search: 'Search',
-    searchWithExact: 'Search with exact keyword',
-    customFieldsTag: 'custom fields',
-    storeSearchMsg: 'Enter min. 3 characters to search',
-    uploadInProgressMsg: 'Upload in progress',
-    unsupportedCsvHeaderMsg: "The CSV header must be 'Store code' or 'Store id'",
-    csvFileNoEntryTxt: 'Please upload a file with atleast one entry',
-    downloadedMsg: 'downloaded',
-    reuploadFileMsg: 'Reupload file',
-    storeIdsMsg: 'Store IDs',
-    downloadStoreIdMsg: 'Download Store ID',
-    downloadStoreIdCodeNameMsg: 'Download Store ID, code & name',
-    downloadInProgressMsg: 'Download in progress, might take a while',
-    onMsg: 'on',
-    beforeMsg: 'before',
-    afterMsg: 'after',
-    xDaysBeforeMsg: 'x days before',
-    xDaysAfterMsg: 'x days after',
-    betweenMsg: 'between',
-    specificDateLabel: 'specific date',
-    eventDateAttributeLabel: 'Event date attribute',
-    entryTriggerLabel: 'Entry trigger',
-    waitTillEventLabel: 'Wait till event',
-    andLabel: 'and',
-    beforeLabel: 'before',
-    afterLabel: 'after',
-    daysSuffix: 'days',
-    loadingTip: 'Loading...',
-    specificDateToolTip: "Specific date cannot be selected for 'x days before/after'"
-  },
-  CapConditionPreview: {
-    includeMsg: 'Include',
-    excludeMsg: 'Exclude',
-    equalMsg: 'equal to',
-    greaterThanMsg: 'greater than',
-    lessThanMsg: 'less than',
-    greaterThanOrEqualMsg: 'greater than or equal to',
-    lessThanorEqualMsg: 'less than or equal',
-    inRangeMsg: 'in range',
-    notEqualMsg: 'not equal to',
-    whoseMsg: 'whose',
-    isMsg: 'is',
-    andMsg: 'and',
-    ANDMsg: 'AND',
-    lineItemMsg: 'only for lineitems with',
-    withMsg: 'with',
-    addedSKUsMsg: 'Added SKUs',
-    skuFileName: 'SKU.csv',
-    uploadedMsg: 'uploaded',
-    inMsg: 'in',
-    notInMsg: 'not in',
-    storesMsg: 'Stores',
-    viewMoreMsg: 'View more',
-    uploadInProgressMsg: 'Upload in progress',
-    uploadFailedErrorMsg: 'Upload failed',
-    uploadInvalidErrorMsg: 'Invalid file uploaded'
-  },
-  CapPopoverTree: {
-    emptyDataMessage: 'No data found',
-    searchPlaceholder: 'Search'
-  },
-  CapGraphBlockNode: {
-    configureText: 'Configure',
-    replaceEngagementBlockMsg: 'Replace engagement block'
-  },
-  CapStaticTemplates: {
-    strategyTitleMsg: 'Select the strategy',
-    strategyDescriptionMsg: 'Use strategy driven pre-defined marketing use-cases or build your own strategy',
-    comingSoonMsg: 'Coming soon',
-    blankCategoryLabel: 'Custom',
-    blankTemplateLabel: 'Build from scratch',
-    blankTemplateDescription: 'Create your own journey from scratch',
-    searchPlaceholderMsg: 'Search strategy'
-  },
-  CapProductSelection: {
-    lineItem: 'Line items',
-    selectAttribute: 'Select Attribute',
-    brand: 'Brand',
-    brandInfo: 'Brand',
-    category: 'Category',
-    categoryInfo: 'Category',
-    product: 'Product',
-    productInfo: 'Product',
-    SKU: 'SKU',
-    uploadSKU: 'Upload SKU',
-    uploadSKUInfo: 'Upload SKU',
-    changeSelection: 'Change the selection',
-    description: 'Changing the attribute of additional condition will result in lose of previously defined additional condition',
-    okText: 'Yes, change',
-    cancelText: 'Cancel',
-    comingSoon: 'Coming soon',
-    selectValues: 'Select value(s)',
-    atleast1Attribute: 'At least 1 attribute is required'
-  },
-  CapTruncateList: {
-    more: 'more'
-  },
-  CapSKUUploader: {
-    validatingSKUs: 'Validating SKUs',
-    invalid: 'invalid',
-    invalidSKUs: 'Invalid SKUs',
-    valid: 'valid',
-    addedSKUsMsg: 'Added SKUs',
-    skuFileName: 'SKU.csv',
-    invalidSKUFilename: 'invalidSKU.csv',
-    uploadedMsg: 'uploaded'
-  },
-  CapDndGraph: {
-    deleteBlockModalHeaderText: 'Delete block',
-    deleteBlockModalDescriptionText: 'Are you sure you want to delete this block?',
-    yesDeleteButtonText: 'Yes, delete',
-    noButtonText: 'No',
-    joinDropErrorText: 'Join block can only be added at the end of the path',
-    jumpDropErrorText: 'Jump block can only be added at the end of the path',
-    theText: 'The',
-    endText: 'End',
-    blockIsLinkedText: 'block is linked to the',
-    blockText: 'block.',
-    disconnectText: 'Deleting this block will disconnect the join.',
-    areYouSureText: 'Are you sure?'
-  },
-  CapDragAndDrop: {
-    dropboxtext: 'Drop here!',
-    selectFilesText: 'Select files from your computer',
-    invalidFileSelectionText: 'Invalid file selection!',
-    or: 'OR',
-    droptext: 'Drag and drop files'
-  },
-  CapRoadMap: {
-    defaultRoadMapDisabledMessage: 'Not configured yet'
-  },
-  CapTimelineCard: {
-    defaultConfiguringMessage: 'Configuring...',
-    defaultNotConfiguredMessage: 'Not configured yet...',
-    toConfigure: 'To configure ',
-    completePrevSteps: ' complete the previous steps.'
-  },
-  CapTimelineNestedCard: {
-    defaultConfiguringMessage: 'Configuring...',
-    defaultNotConfiguredMessage: 'Not configured yet...',
-    toConfigure: 'To configure ',
-    completePrevSteps: ' complete the previous steps.'
-  },
-  NestedCardParent: {
-    defaultNestedTitle: 'Triggers',
-    toConfigure: 'To configure ',
-    completePrevSteps: ' complete the previous steps.'
-  },
-  'CapAskAira.DocumentationBot': {
-    textAskYourQuestion: 'Ask your question here',
-    textVisitDocs: 'Visit Capillary Documentation',
-    textNeedHelp: 'Need more help?',
-    textHowMayIHelp: 'How may AI help you?',
-    textAira: 'aiRA Documentation Bot',
-    textLinks: 'Links',
-    textWasHelpful: 'Was this response helpful?',
-    textConfidence: 'confidence',
-    textTooltip: 'Need help? Ask aiRA',
-    textCantConnect: "Can't connect to the server."
-  },
-  'CapAskAira.RuleGenerationBot': {
-    textTypeAMessage: 'Type a message above and ask aiRA to recommend the best content',
-    textError: 'An error occurred while generating rule. Try again.',
-    textAiraTitle: 'aiRA Rule Generation',
-    textAiraTooltip: 'aiRA, our proprietary AI tool, generates rule expressions based on text query.',
-    textCopy: 'Copy',
-    textCopied: 'Copied',
-    textRulePlaceholder: 'Enter query...',
-    textRuleLoading: 'Rule is loading... Hang tight!',
-    textThank: 'Thank you for your response!',
-    textWarn: 'aiRA responses may be inaccurate or misleading. Help us to improve!',
-    textAddCommentPlaceholder: 'Add comment'
-  },
-  'CapAskAira.ContentGenerationBot': {
-    textTypeAMessage: 'Type a message above and ask aiRA to recommend the best content',
-    textRecommendationsLoading: 'Recommendations loading... Hang tight!',
-    textError: 'An error occurred while loading recommendations. Try again.',
-    textAiraTitle: 'aiRA Content Recommendations',
-    textAiraTooltip: 'aiRA, our proprietary AI tool, recommends tailored language to effectively engage customers and prompt desired actions.',
-    textLoading: 'loading...',
-    textCharacters: 'characters',
-    textReplaceWithThis: 'Replace with this',
-    textReplaced: 'Replaced',
-    textResetToDefault: 'Reset to default',
-    textMoreLikeThis: 'More like this',
-    textGenerateMore: 'Generate more'
-  },
-  'CapAskAira.ConfigurationBot': {
-    textAiraTitle: 'aiRA Configuration Bot',
-    textAiraTooltip: 'aiRA, our proprietary AI tool, helps you configure promotions, campaigns, and more.',
-    textTypeAMessage: 'Type a message above and ask aiRA to recommend the best content',
-    textUser: 'Hello!',
-    textPilot: "I'm your Copilot. I can create all type of promotions (milestones, streaks, etc.) on your behalf. Meanwhile, you can sit back, relax, and enjoy a cup of chai.",
-    textCouponTile: 'Milestone on GS',
-    textCouponDescription: 'Customer has to do 1000/- gross sales in a month, and can get 100 points.',
-    textPromotionTitle: 'Milestone on count',
-    textPromotionDescription: 'Eligible customers get points on every 5 transactions.',
-    textStreakTitle: 'Reward on referral',
-    textStreakDescription: 'Award customer 150 points if they refer 3 users in a month. Promotion starts on July 1 and runs for 5 months.',
-    textPromptHere: 'Enter a prompt here...',
-    textCouponPrompt: 'If customer does 1000 gross sales in a month, award them 100 points that expire in 20 days. Promotion runs from 1 July to 1 December.',
-    textPromotionPrompt: 'After every 5 transactions I want to award customer with 200 points. Only customers with more than 2000 lifetime points are eligible. Promotion runs from 1 July to 1 December',
-    textStreakPrompt: 'Award customer 150 points if they refer 3 users in a month. Promotion starts on July 1 and runs for 5 months. ',
-    textCantConnect: "Can't connect to the server.",
-    textCreate: 'Create',
-    textCancel: 'Cancel',
-    textGeneratingResponse: 'Generating response'
-  },
-  'CapAskAira.DocumentationChatBot': {
-    textBotPlaceholder: 'Ask aiRA about anything on our CRM platform',
-    textChatBotLoader: 'Hang tight, analyzing your query...',
-    textChatBotDesc: 'Ask any doubts about our CRM platform and aiRA will do its best to find answers',
-    textChatBot: 'Documentation Chat Bot'
-  },
-  'CapAskAira.CapAiMediaGeneration': {
-    textImageBotPlaceholder: 'Ask aiRA to generate an image',
-    textChatBotLoader: 'Hang tight, analyzing your query...',
-    textImageBotDesc: 'Enter a prompt that describes your image.',
-    textImageBot: 'aiRA Media Generator',
-    textImageFooter: 'Dragging and dropping generated images is only supported in the basic email builder.',
-    textTipsGenerate: 'Tips to generate better images:',
-    textCopy: 'Copy image',
-    textCopied: 'Copied',
-    textDownload: 'Download',
-    textImageDownload: 'Image downloaded successfully!',
-    textComingSoon: 'Coming soon',
-    textGenerateMore: 'Generate more'
-  },
-  'CapAskAira.RuleSummarizationBot': {
-    textRuleBotPlaceholder: 'Ask aiRA to write an expression',
-    textSummarizeBotPlaceholder: 'Ask aiRA to explain an expression',
-    textRuleChatBotLoader: 'Hang tight, analyzing your query...',
-    textRuleChatBotDesc: 'Write your detailed rule in simple english and aiRA will write the expression for you',
-    textSummarizeChatBotDesc: 'Enter the expression and aiRA will generate a summary in plain english',
-    textRuleChatBot: 'aiRA Expression Translator'
-  },
-  'CapAskAira.AudienceFilterBot': {
-    textNeedHelp: 'Need help choosing the right filters?',
-    textAskAiraLink: 'Ask aiRA to apply filters',
-    textDescribeAudience: 'Describe your audience',
-    textPlaceholder: 'e.g.: Filter customers who have made a purchase in the last 7 days',
-    textError: 'Something went wrong, please try again',
-    textThoughtProcess: 'Thought Process',
-    textFiltersAdded: 'Filters added below',
-    textAnalyzing: 'Analyzing your query...',
-    textPartialFiltersAdded: 'Rest of the filters added below',
-    textFeedbackTitle: 'Give feedback',
-    textFeedbackOptional: '(Optional)',
-    textFeedbackMessage: 'Let us know what was wrong with the results',
-    textFeedbackPlaceholder: 'Share your feedback',
-    textFeedbackSubmit: 'Submit',
-    textFeedbackCancel: 'Cancel',
-    textThankYouFeedback: 'Thank you for your feedback!',
-    textThankYouDetailedFeedback: 'Thank you for your detailed feedback!'
-  }
-};
-
 /***/ }),
 
 /***/ 49580:
@@ -16748,14 +16460,6 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default()) && (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) ? (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) : undefined);
 
 
-/***/ }),
-
-/***/ 76480:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("styled-components");
-
 /***/ }),
 
 /***/ 76903:
@@ -20748,23 +20452,26 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _classnames = _interopRequireDefault(__webpack_require__(46942));
 var _debounce = _interopRequireDefault(__webpack_require__(38221));
-var _propTypes = _interopRequireDefault(__webpack_require__(43363));
 var _react = _interopRequireWildcard(__webpack_require__(9206));
+var _reactIntl = __webpack_require__(46407);
 var _group = _interopRequireDefault(__webpack_require__(67636));
+var _CapCard = _interopRequireDefault(__webpack_require__(10841));
 var _CapColoredTag = _interopRequireDefault(__webpack_require__(22029));
 var _CapColumn = _interopRequireDefault(__webpack_require__(4757));
 var _CapHeader = _interopRequireDefault(__webpack_require__(93140));
 var _CapHeading = _interopRequireDefault(__webpack_require__(7319));
 var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
 var _CapImage = _interopRequireDefault(__webpack_require__(84446));
+var _CapInput = _interopRequireDefault(__webpack_require__(15773));
 var _CapLabel = _interopRequireDefault(__webpack_require__(92675));
+var _CapModal = _interopRequireDefault(__webpack_require__(7442));
+var _CapRadioCard = _interopRequireDefault(__webpack_require__(46866));
 var _CapRow = _interopRequireDefault(__webpack_require__(69813));
 var _CapSpin = _interopRequireDefault(__webpack_require__(56543));
 var _CapTooltip = _interopRequireDefault(__webpack_require__(85684));
-var _LocaleHoc = _interopRequireDefault(__webpack_require__(39879));
-var _variables = __webpack_require__(56587);
 var _constants = __webpack_require__(14423);
-var _style = __webpack_require__(39867);
+var _messages = _interopRequireDefault(__webpack_require__(21160));
+var _styles = _interopRequireDefault(__webpack_require__(22882));
 var _jsxRuntime = __webpack_require__(74848);
 const _excluded = ["value", "key", "label", "description", "icon", "isAvailable", "isBlankTemplate"];
 /**
@@ -20772,59 +20479,65 @@ const _excluded = ["value", "key", "label", "description", "icon", "isAvailable"
  * CapStaticTemplates
  *
  */
+// @ts-ignore - SCSS module types are declared in types.d.ts and components/styles.d.ts
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const clsPrefix = 'cap-static-templates-v2';
-function CapStaticTemplates(props) {
-  const {
-    categories,
+const CapStaticTemplates = _ref => {
+  let {
+    categories = [],
     className,
-    cardWidth,
-    cardHeight,
-    blankCardWidth,
-    blankCardHeight,
+    cardWidth = '278px',
+    cardHeight = '104px',
+    blankCardWidth = '278px',
+    blankCardHeight = '80px',
     selectedCategory,
     onSelectCategory,
     selectedStrategyTemplate,
     onSelectStrategyTemplate,
-    isBlankTemplateRequired,
-    templatesContainerWidth,
-    templatesContainerMaxHeight,
+    isBlankTemplateRequired = false,
+    templatesContainerWidth = '990px',
+    templatesContainerMaxHeight = '400px',
     modalContent,
     searchPlaceholder,
-    // Below props are messages form LocaleHoc
-    strategyTitleMsg,
-    strategyDescriptionMsg,
-    comingSoonMsg,
-    blankCategoryLabel,
-    blankTemplateLabel,
-    blankTemplateDescription,
-    searchPlaceholderMsg,
-    showComingSoon = true
-  } = props;
+    showComingSoon = true,
+    intl: {
+      formatMessage
+    }
+  } = _ref;
   const [showModal, setShowModal] = (0, _react.useState)(false);
   const [searchText, setSearchText] = (0, _react.useState)(null);
   const [isSearching, setIsSearching] = (0, _react.useState)(false);
   const [filteredCategories, setFilteredCategories] = (0, _react.useState)([]);
+
+  // Class names for CapRadioCard elements (one per element, same names as CapRadioCard props)
+  const rootClassName = _styles.default['strategy-template-radio-root'];
+  const radioButtonWrapperClassName = _styles.default['strategy-template-radio-button'];
+  const iconWrapperClassName = _styles.default['strategy-template-radio-icon-wrapper'];
+  const iconContainerClassName = _styles.default['strategy-template-radio-icon-container'];
+  const divIconClassName = _styles.default['strategy-template-radio-div-icon'];
+  const contentContainerClassName = _styles.default['strategy-template-radio-content-container'];
   const CUSTOM_STRATEGY_PANE = {
     value: _constants.BLANK_TEMPLATE,
     key: _constants.BLANK_TEMPLATE,
-    label: blankTemplateLabel,
-    description: blankTemplateDescription,
+    label: formatMessage(_messages.default.blankTemplateLabel),
+    description: formatMessage(_messages.default.blankTemplateDescription),
     icon: _constants.BLANK_TEMPLATE_ICON,
     isAvailable: true,
     isBlankTemplate: true
   };
   function handleClick(value) {
     scrollToSelectedCategory(value);
-    onSelectCategory(value);
+    onSelectCategory == null || onSelectCategory(value);
   }
   function scrollToSelectedCategory(id) {
     const selectedElement = document.getElementById(id);
     const templateContainer = document.querySelector('.templates-container');
-    templateContainer.scrollTo(0, selectedElement == null ? void 0 : selectedElement.offsetTop);
+    if (templateContainer && selectedElement) {
+      templateContainer.scrollTo(0, selectedElement.offsetTop);
+    }
   }
   const debounceSearch = (0, _debounce.default)(text => {
     getSearchResult(text);
@@ -20838,15 +20551,12 @@ function CapStaticTemplates(props) {
     setIsSearching(true);
     debounceSearch(value);
   }
-  function handleShowModal(event) {
-    var _event$target2;
-    const {
-      value
-    } = (_event$target2 = event == null ? void 0 : event.target) != null ? _event$target2 : {};
-    onSelectStrategyTemplate(value);
-
-    //Show modal only if template is not Available.
+  function handleShowModal(e) {
+    var _e$target;
+    const value = e == null || (_e$target = e.target) == null ? void 0 : _e$target.value;
+    onSelectStrategyTemplate == null || onSelectStrategyTemplate(value);
 
+    // Show modal only if template is not Available.
     categories == null || categories.forEach(category => {
       var _category$panes;
       category == null || (_category$panes = category.panes) == null || _category$panes.forEach(template => {
@@ -20871,7 +20581,7 @@ function CapStaticTemplates(props) {
       } = pane,
       rest = _objectWithoutPropertiesLoose(pane, _excluded);
     const iconLabelArray = value == null ? void 0 : value.split(' ');
-    const iconLabelText = (iconLabelArray == null ? void 0 : iconLabelArray.length) > 1 ? (iconLabelArray == null ? void 0 : iconLabelArray[0][0]) + (iconLabelArray == null ? void 0 : iconLabelArray[1][0]) : iconLabelArray == null ? void 0 : iconLabelArray[0][0];
+    const iconLabelText = iconLabelArray && iconLabelArray.length > 1 ? iconLabelArray[0][0] + iconLabelArray[1][0] : (iconLabelArray == null ? void 0 : iconLabelArray[0][0]) || '';
     const templateCardTitle = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
       type: "h4",
       className: "card-header-title " + (isAvailable ? 'card-available' : ''),
@@ -20898,17 +20608,15 @@ function CapStaticTemplates(props) {
           })
         }), showComingSoon && !isAvailable && !isBlankTemplate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColoredTag.default, {
           className: "coming-soon-tag",
-          style: {
-            marginBottom: _variables.CAP_SPACE_12
-          },
           tagColor: "#0065ff",
-          children: comingSoonMsg
+          children: formatMessage(_messages.default.comingSoonMsg)
         })]
       }),
       value: key,
-      icon: isBlankTemplate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.TemplateIcon, {
-        type: icon,
-        color: "blue"
+      icon: isBlankTemplate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
+        type: icon || '',
+        color: "blue",
+        size: "xs"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
         className: "strategy-icon",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -20918,7 +20626,7 @@ function CapStaticTemplates(props) {
       }),
       customComponent: !isBlankTemplate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
         type: "label1",
-        className: !isBlankTemplate && 'card-content margin-t-4',
+        className: (0, _classnames.default)('card-content', _styles.default['cap-static-templates-v2-margin-t-4']),
         children: description
       }),
       radioCardClassName: isAvailable || !showComingSoon ? 'template-enabled' : 'template-disabled'
@@ -20932,7 +20640,7 @@ function CapStaticTemplates(props) {
   };
   const getTemplates = (0, _react.useMemo)(() => {
     const categoriesData = searchText ? filteredCategories : categories;
-    const strategyTemplates = categoriesData == null ? void 0 : categoriesData.map(category => {
+    const strategyTemplates = (categoriesData || []).map(category => {
       const {
         value,
         label,
@@ -20943,25 +20651,35 @@ function CapStaticTemplates(props) {
       const structuredPanes = getAllPanes(panes);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
         id: value,
-        className: "margin-t-13",
+        className: _styles.default['cap-static-templates-v2-margin-t-13'],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
-          className: "margin-l-8 margin-b-8",
+          className: (0, _classnames.default)(_styles.default['cap-static-templates-v2-margin-l-8'], _styles.default['cap-static-templates-v2-margin-b-8']),
           type: "label4",
           children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.StrategyTemplate, {
-          panes: structuredPanes,
-          cardWidth: cardWidth,
-          cardHeight: cardHeight,
-          borderColor: color,
-          selected: selectedStrategyTemplate,
-          value: selectedStrategyTemplate,
-          onChange: handleShowModal,
-          className: (0, _classnames.default)(clsPrefix, className)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(clsPrefix, className, _styles.default['strategy-template']),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRadioCard.default, {
+            panes: structuredPanes,
+            cardWidth: cardWidth,
+            cardHeight: cardHeight,
+            selected: selectedStrategyTemplate,
+            value: selectedStrategyTemplate,
+            onChange: handleShowModal,
+            rootClassName: rootClassName,
+            radioButtonWrapperClassName: radioButtonWrapperClassName,
+            iconWrapperClassName: iconWrapperClassName,
+            iconContainerClassName: iconContainerClassName,
+            divIconClassName: divIconClassName,
+            contentContainerClassName: contentContainerClassName,
+            style: {
+              '--category-color': color
+            }
+          })
         })]
       }, key);
     });
     return strategyTemplates;
-  }, [searchText, filteredCategories, categories, selectedStrategyTemplate]);
+  }, [searchText, filteredCategories, categories, selectedStrategyTemplate]); // eslint-disable-line react-hooks/exhaustive-deps -- Dependencies match cap-ui-library
 
   // This function is to handle the search;
   function getSearchResult(searchValue) {
@@ -20975,7 +20693,7 @@ function CapStaticTemplates(props) {
       var _currentData$value, _currentData$panes;
       const parentName = currentData == null || (_currentData$value = currentData.value) == null ? void 0 : _currentData$value.toLowerCase();
       const isParent = (parentName == null ? void 0 : parentName.indexOf(searchString)) > -1;
-      const childPanes = currentData == null || (_currentData$panes = currentData.panes) == null ? void 0 : _currentData$panes.filter(childPane => {
+      const childPanes = (_currentData$panes = currentData.panes) == null ? void 0 : _currentData$panes.filter(childPane => {
         var _childPane$value;
         return (childPane == null || (_childPane$value = childPane.value) == null || (_childPane$value = _childPane$value.toLowerCase()) == null ? void 0 : _childPane$value.indexOf(searchString)) > -1;
       });
@@ -20993,6 +20711,7 @@ function CapStaticTemplates(props) {
     setFilteredCategories(filteredData);
   }
   function getModalContent() {
+    if (!modalContent) return null;
     const {
       title,
       description,
@@ -21001,7 +20720,7 @@ function CapStaticTemplates(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
       type: "flex",
       justify: "space-between",
-      align: "center",
+      align: "middle",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapImage.default, {
           src: _group.default,
@@ -21013,22 +20732,23 @@ function CapStaticTemplates(props) {
           title: title,
           description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColoredTag.default, {
             tagColor: "#0065ff",
-            children: comingSoonMsg
+            children: formatMessage(_messages.default.comingSoonMsg)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
           type: "label2",
-          className: "margin-t-16",
+          className: _styles.default['cap-static-templates-v2-margin-t-16'],
           children: description
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRow.default, {
           type: "flex",
-          align: "center",
+          align: "middle",
           justify: "space-between",
-          className: "margin-t-16",
-          children: iconsAndMessages == null ? void 0 : iconsAndMessages.map((data, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.StyledCapCard, {
+          className: _styles.default['cap-static-templates-v2-margin-t-16'],
+          children: iconsAndMessages == null ? void 0 : iconsAndMessages.map((data, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapCard.default, {
             title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
               type: data == null ? void 0 : data.iconType,
               size: "m"
             }),
+            className: _styles.default['styled-cap-card'],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
               type: "label5",
               style: {
@@ -21043,37 +20763,46 @@ function CapStaticTemplates(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeader.default, {
-      className: "margin-b-16",
+      className: _styles.default['cap-static-templates-v2-margin-b-16'],
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
         type: "h3",
-        children: strategyTitleMsg
+        children: formatMessage(_messages.default.strategyTitleMsg)
       }),
       description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
         type: "label3",
-        children: strategyDescriptionMsg
+        children: formatMessage(_messages.default.strategyDescriptionMsg)
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.StyledDiv, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SideBar, {
-        children: [isBlankTemplateRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.CategoryContainer, {
-          selected: _constants.BLANK_TEMPLATE === selectedCategory,
-          className: "category-selector",
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _styles.default[clsPrefix],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _styles.default['sidebar'],
+        children: [isBlankTemplateRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(_styles.default['category-container'], {
+            [_styles.default['selected']]: _constants.BLANK_TEMPLATE === selectedCategory,
+            'category-selector': true
+          }),
           onClick: () => handleClick(_constants.BLANK_TEMPLATE),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
             type: _constants.BLANK_TEMPLATE === selectedCategory ? 'label4' : 'label9',
-            children: blankCategoryLabel
+            children: formatMessage(_messages.default.blankCategoryLabel)
           })
         }), categories == null ? void 0 : categories.map(category => {
           var _category$panes2;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.CategoryContainer, {
-            className: "category-selector",
-            color: category == null ? void 0 : category.color,
-            selected: (category == null ? void 0 : category.value) === selectedCategory,
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)(_styles.default['category-container'], {
+              [_styles.default['selected']]: (category == null ? void 0 : category.value) === selectedCategory,
+              'category-selector': true
+            }),
+            style: {
+              '--category-color': category == null ? void 0 : category.color
+            },
             onClick: () => handleClick(category == null ? void 0 : category.value),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapLabel.default, {
               type: (category == null ? void 0 : category.value) === selectedCategory ? 'label4' : 'label9',
-              children: [category == null ? void 0 : category.label, (category == null ? void 0 : category.premium) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.PremiumIcon, {
+              children: [category == null ? void 0 : category.label, (category == null ? void 0 : category.premium) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
                 type: "premium",
-                size: "s"
+                size: "s",
+                className: _styles.default['premium-icon']
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
               type: "label1",
@@ -21081,69 +20810,54 @@ function CapStaticTemplates(props) {
             })]
           }, category == null ? void 0 : category.key);
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.TemplatesAndSearchContainer, {
-        width: templatesContainerWidth,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SearchBox, {
-          value: searchText,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _styles.default['templates-and-search-container'],
+        style: {
+          '--templates-container-width': templatesContainerWidth
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapInput.default.Search, {
+          value: searchText || undefined,
           onChange: handleSearch,
           onClear: handleSearch,
-          placeholder: searchPlaceholder || searchPlaceholderMsg
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.TemplatesContainer, {
-          className: "templates-container",
-          maxHeight: templatesContainerMaxHeight,
+          placeholder: searchPlaceholder || formatMessage(_messages.default.searchPlaceholderMsg),
+          className: _styles.default['search-box']
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRow.default, {
+          className: (0, _classnames.default)('templates-container', _styles.default['templates-container']),
+          style: {
+            '--templates-container-max-height': templatesContainerMaxHeight
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapSpin.default, {
             spinning: isSearching,
             children: [isBlankTemplateRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRow.default, {
               id: _constants.BLANK_TEMPLATE,
-              className: "margin-t-4",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.StrategyTemplate, {
+              className: (0, _classnames.default)(_styles.default['cap-static-templates-v2-margin-t-4'], _styles.default['strategy-template'], _styles.default['strategy-template-icon-placeholder']),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRadioCard.default, {
                 panes: [getPane(CUSTOM_STRATEGY_PANE)],
                 cardWidth: blankCardWidth,
                 cardHeight: blankCardHeight,
                 selected: selectedStrategyTemplate,
                 value: selectedStrategyTemplate,
-                onChange: handleShowModal
+                onChange: handleShowModal,
+                className: rootClassName,
+                radioButtonWrapperClassName: radioButtonWrapperClassName,
+                iconWrapperClassName: iconWrapperClassName,
+                iconContainerClassName: iconContainerClassName,
+                divIconClassName: divIconClassName,
+                contentContainerClassName: contentContainerClassName
               })
             }, _constants.BLANK_TEMPLATE), getTemplates]
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.TemplatesModal, {
-        visible: showModal,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapModal.default, {
+        open: showModal,
         onCancel: handleHideModal,
+        className: _styles.default['templates-modal'],
         children: getModalContent()
       })]
     })]
   });
-}
-CapStaticTemplates.defaultProps = {
-  cardWidth: '278px',
-  cardHeight: '104px',
-  blankCardWidth: '278px',
-  blankCardHeight: '80px',
-  categories: [],
-  isBlankTemplateRequired: false,
-  templatesContainerWidth: '990px',
-  templatesContainerMaxHeight: '400px'
-};
-CapStaticTemplates.propTypes = {
-  categories: _propTypes.default.array,
-  className: _propTypes.default.string,
-  cardWidth: _propTypes.default.string,
-  cardHeight: _propTypes.default.string,
-  blankCardWidth: _propTypes.default.string,
-  blankCardHeight: _propTypes.default.string,
-  selectedCategory: _propTypes.default.string,
-  onSelectCategory: _propTypes.default.func,
-  selectedStrategyTemplate: _propTypes.default.string,
-  onSelectStrategyTemplate: _propTypes.default.func,
-  isBlankTemplateRequired: _propTypes.default.bool,
-  templatesContainerWidth: _propTypes.default.string,
-  templatesContainerMaxHeight: _propTypes.default.string,
-  searchPlaceholder: _propTypes.default.any
 };
-var _default = exports["default"] = (0, _LocaleHoc.default)(CapStaticTemplates, {
-  key: 'CapStaticTemplates'
-});
+var _default = exports["default"] = (0, _reactIntl.injectIntl)(CapStaticTemplates);
 })();
 
 module.exports = __webpack_exports__;