@capillarytech/blaze-ui 5.18.10 → 5.18.13

package/index.js

@@ -17239,6 +17239,425 @@ var _default = exports["default"] = SvgAlert;
 
 /***/ }),
 
+/***/ 9666:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(__webpack_require__(46942));
+var _debounce = _interopRequireDefault(__webpack_require__(38221));
+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 _constants = __webpack_require__(14423);
+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"];
+/**
+ *
+ * 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';
+const CapStaticTemplates = _ref => {
+  let {
+    categories = [],
+    className,
+    cardWidth = '278px',
+    cardHeight = '104px',
+    blankCardWidth = '278px',
+    blankCardHeight = '80px',
+    selectedCategory,
+    onSelectCategory,
+    selectedStrategyTemplate,
+    onSelectStrategyTemplate,
+    isBlankTemplateRequired = false,
+    templatesContainerWidth = '990px',
+    templatesContainerMaxHeight = '400px',
+    modalContent,
+    searchPlaceholder,
+    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: formatMessage(_messages.default.blankTemplateLabel),
+    description: formatMessage(_messages.default.blankTemplateDescription),
+    icon: _constants.BLANK_TEMPLATE_ICON,
+    isAvailable: true,
+    isBlankTemplate: true
+  };
+  function handleClick(value) {
+    scrollToSelectedCategory(value);
+    onSelectCategory == null || onSelectCategory(value);
+  }
+  function scrollToSelectedCategory(id) {
+    const selectedElement = document.getElementById(id);
+    const templateContainer = document.querySelector('.templates-container');
+    if (templateContainer && selectedElement) {
+      templateContainer.scrollTo(0, selectedElement.offsetTop);
+    }
+  }
+  const debounceSearch = (0, _debounce.default)(text => {
+    getSearchResult(text);
+  }, 300);
+  function handleSearch(event) {
+    var _event$target;
+    const {
+      value
+    } = (_event$target = event == null ? void 0 : event.target) != null ? _event$target : {};
+    setSearchText(value);
+    setIsSearching(true);
+    debounceSearch(value);
+  }
+  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 => {
+        if ((template == null ? void 0 : template.key) === value && !template.isAvailable) {
+          setShowModal(true);
+        }
+      });
+    });
+  }
+  function handleHideModal() {
+    setShowModal(false);
+  }
+  function getPane(pane) {
+    const {
+        value,
+        key,
+        label,
+        description,
+        icon,
+        isAvailable = false,
+        isBlankTemplate
+      } = pane,
+      rest = _objectWithoutPropertiesLoose(pane, _excluded);
+    const iconLabelArray = value == null ? void 0 : value.split(' ');
+    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' : ''),
+      children: label
+    });
+    return _extends({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+        type: "flex",
+        justify: "space-between",
+        className: "card-header-row " + (isBlankTemplate ? 'custom-template' : ''),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeader.default, {
+          title:
+          /* Handles the display of tooltip over template card title, which has a maximum limit of 30 characters,rest overflows.
+          If the length of the label exceeds 30 characters,
+          a tooltip is used to reveal the full label that the card is hiding. */
+          (label == null ? void 0 : label.length) >= 30 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltip.default, {
+            title: label,
+            children: templateCardTitle
+          }) : templateCardTitle,
+          description: isBlankTemplate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+            type: "label1",
+            className: "card-content",
+            children: description
+          })
+        }), showComingSoon && !isAvailable && !isBlankTemplate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColoredTag.default, {
+          className: "coming-soon-tag",
+          tagColor: "#0065ff",
+          children: formatMessage(_messages.default.comingSoonMsg)
+        })]
+      }),
+      value: key,
+      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", {
+          className: "text-label " + (selectedStrategyTemplate === value ? 'selected' : ''),
+          children: iconLabelText
+        })
+      }),
+      customComponent: !isBlankTemplate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+        type: "label1",
+        className: (0, _classnames.default)('card-content', _styles.default['cap-static-templates-v2-margin-t-4']),
+        children: description
+      }),
+      radioCardClassName: isAvailable || !showComingSoon ? 'template-enabled' : 'template-disabled'
+    }, rest);
+  }
+  const getAllPanes = function (panes) {
+    if (panes === void 0) {
+      panes = [];
+    }
+    return panes.map(pane => getPane(pane));
+  };
+  const getTemplates = (0, _react.useMemo)(() => {
+    const categoriesData = searchText ? filteredCategories : categories;
+    const strategyTemplates = (categoriesData || []).map(category => {
+      const {
+        value,
+        label,
+        key,
+        color,
+        panes = []
+      } = category;
+      const structuredPanes = getAllPanes(panes);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+        id: value,
+        className: _styles.default['cap-static-templates-v2-margin-t-13'],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+          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)("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]); // eslint-disable-line react-hooks/exhaustive-deps -- Dependencies match cap-ui-library
+
+  // This function is to handle the search;
+  function getSearchResult(searchValue) {
+    var _searchValue$toLowerC;
+    const searchString = searchValue == null || (_searchValue$toLowerC = searchValue.toLowerCase()) == null ? void 0 : _searchValue$toLowerC.trim();
+    if (!searchString) {
+      setIsSearching(false);
+      return;
+    }
+    const filteredData = categories.reduce((result, currentData) => {
+      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$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;
+      });
+      const hasPane = !!(childPanes != null && childPanes.length);
+      const currentDataCopy = _extends({}, currentData);
+      if (hasPane) {
+        currentDataCopy.panes = childPanes;
+        result.push(currentDataCopy);
+      } else if (isParent) {
+        result.push(currentData);
+      }
+      return result;
+    }, []);
+    setIsSearching(false);
+    setFilteredCategories(filteredData);
+  }
+  function getModalContent() {
+    if (!modalContent) return null;
+    const {
+      title,
+      description,
+      iconsAndMessages = []
+    } = modalContent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+      type: "flex",
+      justify: "space-between",
+      align: "middle",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapImage.default, {
+          src: _group.default,
+          className: "modal-image"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapColumn.default, {
+        className: "modal-info-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeader.default, {
+          title: title,
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColoredTag.default, {
+            tagColor: "#0065ff",
+            children: formatMessage(_messages.default.comingSoonMsg)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
+          type: "label2",
+          className: _styles.default['cap-static-templates-v2-margin-t-16'],
+          children: description
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRow.default, {
+          type: "flex",
+          align: "middle",
+          justify: "space-between",
+          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: {
+                fontWeight: 500
+              },
+              children: data == null ? void 0 : data.message
+            })
+          }, (data == null ? void 0 : data.iconType) || idx))
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeader.default, {
+      className: _styles.default['cap-static-templates-v2-margin-b-16'],
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
+        type: "h3",
+        children: formatMessage(_messages.default.strategyTitleMsg)
+      }),
+      description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+        type: "label3",
+        children: formatMessage(_messages.default.strategyDescriptionMsg)
+      })
+    }), /*#__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: formatMessage(_messages.default.blankCategoryLabel)
+          })
+        }), categories == null ? void 0 : categories.map(category => {
+          var _category$panes2;
+          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)(_CapIcon.default, {
+                type: "premium",
+                size: "s",
+                className: _styles.default['premium-icon']
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+              type: "label1",
+              children: category == null || (_category$panes2 = category.panes) == null ? void 0 : _category$panes2.length
+            })]
+          }, category == null ? void 0 : category.key);
+        })]
+      }), /*#__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 || 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: (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,
+                className: rootClassName,
+                radioButtonWrapperClassName: radioButtonWrapperClassName,
+                iconWrapperClassName: iconWrapperClassName,
+                iconContainerClassName: iconContainerClassName,
+                divIconClassName: divIconClassName,
+                contentContainerClassName: contentContainerClassName
+              })
+            }, _constants.BLANK_TEMPLATE), getTemplates]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapModal.default, {
+        open: showModal,
+        onCancel: handleHideModal,
+        className: _styles.default['templates-modal'],
+        children: getModalContent()
+      })]
+    })]
+  });
+};
+var _default = exports["default"] = (0, _reactIntl.injectIntl)(CapStaticTemplates);
+
+/***/ }),
+
 /***/ 9822:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -20696,6 +21115,19 @@ var _default = exports["default"] = SvgError;
 
 /***/ }),
 
+/***/ 14423:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports.BLANK_TEMPLATE_ICON = exports.BLANK_TEMPLATE = void 0;
+const BLANK_TEMPLATE = exports.BLANK_TEMPLATE = 'BLANK_TEMPLATE';
+const BLANK_TEMPLATE_ICON = exports.BLANK_TEMPLATE_ICON = 'add';
+
+/***/ }),
+
 /***/ 14424:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -21442,6 +21874,69 @@ function baseIsSet(value) {
 module.exports = baseIsSet;
 
 
+/***/ }),
+
+/***/ 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___;
+
+
 /***/ }),
 
 /***/ 16242:
@@ -25232,6 +25727,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'
+  }
+});
+
 /***/ }),
 
 /***/ 21334:
@@ -28496,6 +29034,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);
+
+
 /***/ }),
 
 /***/ 22884:
@@ -36066,22 +36656,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___;
@@ -59380,7 +59970,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,
@@ -59405,42 +60004,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
             })
@@ -59459,7 +60058,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, {
@@ -71648,6 +72247,7 @@ var _exportNames = {
   CapStatus: true,
   CapSupportVideosWrapper: true,
   CapSpin: true,
+  CapStaticTemplates: true,
   CapStepsAccordian: true,
   CapStatisticCard: true,
   CapSteps: true,
@@ -71683,8 +72283,8 @@ var _exportNames = {
   CapIcons: true,
   styledVars: true
 };
-exports.CapTable = exports.CapTabV3 = exports.CapTab = exports.CapSwitch = exports.CapSupportVideosWrapper = exports.CapStepsAccordian = exports.CapSteps = exports.CapStatus = exports.CapStatisticCard = exports.CapSplit = exports.CapSpin = exports.CapSomethingWentWrong = exports.CapSnackBar = exports.CapSlider = exports.CapSlideBox = exports.CapSkeleton = exports.CapSideBar = exports.CapShape = exports.CapSelectFilter = exports.CapSelect = exports.CapSecondaryTopBar = exports.CapSearchBar = exports.CapSKUUploader = exports.CapRow = exports.CapRoadMap = exports.CapReorderComponent = exports.CapRadioGroup = exports.CapRadioCard = exports.CapRadioButton = exports.CapRadio = exports.CapProgress = exports.CapPopover = exports.CapNotificationDropdown = exports.CapNotification = exports.CapNavigation = exports.CapMultiSelectDatePicker = exports.CapMultiSelect = exports.CapModal = exports.CapMenu = exports.CapLogin = exports.CapListLayout = exports.CapList = exports.CapLink = exports.CapLevelGraphRenderer = exports.CapLanguageProvider = exports.CapLabel = exports.CapInputTextArea = exports.CapInputSearch = exports.CapInputNumber = exports.CapInput = exports.CapInfoNote = exports.CapImportMFEComponent = exports.CapImage = exports.CapIllustration = exports.CapIcons = exports.CapIcon = exports.CapHeading = exports.CapHeader = exports.CapHamburgerMenu = exports.CapGraph = exports.CapFormItem = exports.CapForm = exports.CapExpressionEditor = exports.CapErrorStateIllustration = exports.CapErrorBoundary = exports.CapError = exports.CapEmptyDivWithBorder = exports.CapDropdown = exports.CapDrawer = exports.CapDivider = exports.CapDateTimeRangePicker = exports.CapDateTimePicker = exports.CapDateRangePicker = exports.CapDatePicker = exports.CapCustomSelect = exports.CapCustomList = exports.CapCustomCheckboxList = exports.CapCustomCarousel = exports.CapCustomCard = exports.CapConditionPreview = exports.CapColumn = exports.CapColoredTag = exports.CapColorPicker = exports.CapCollapsibleLeftNavigationSaga = exports.CapCollapsibleLeftNavigationReducer = exports.CapCheckbox = exports.CapCarousel = exports.CapCardBox = exports.CapCard = exports.CapCalendarDatePicker = exports.CapCSVFileUploader = exports.CapButton = exports.CapBorderedBox = exports.CapBlock = exports.CapBanner = exports.CapAskAira = exports.CapAppNotEnabled = exports.CapAlert = exports.CapAdvancedIcon = exports.CapActionBar = void 0;
-exports.styledVars = exports.request = exports.loadCapUIFonts = exports.loadCapUI = exports.getCapUIFontLinks = exports.getCapThemeConfig = exports.LocaleHoc = exports.CapVirtualList = exports.CapUserProfile = exports.CapUploader = exports.CapUnifiedSelect = exports.CapTruncateList = exports.CapTreeSelect = exports.CapTree = exports.CapTopBar = exports.CapTooltipWithInfo = exports.CapTooltip = exports.CapTimePicker = exports.CapTagDropdown = exports.CapTag = void 0;
+exports.CapTabV3 = exports.CapTab = exports.CapSwitch = exports.CapSupportVideosWrapper = exports.CapStepsAccordian = exports.CapSteps = exports.CapStatus = exports.CapStatisticCard = exports.CapStaticTemplates = exports.CapSplit = exports.CapSpin = exports.CapSomethingWentWrong = exports.CapSnackBar = exports.CapSlider = exports.CapSlideBox = exports.CapSkeleton = exports.CapSideBar = exports.CapShape = exports.CapSelectFilter = exports.CapSelect = exports.CapSecondaryTopBar = exports.CapSearchBar = exports.CapSKUUploader = exports.CapRow = exports.CapRoadMap = exports.CapReorderComponent = exports.CapRadioGroup = exports.CapRadioCard = exports.CapRadioButton = exports.CapRadio = exports.CapProgress = exports.CapPopover = exports.CapNotificationDropdown = exports.CapNotification = exports.CapNavigation = exports.CapMultiSelectDatePicker = exports.CapMultiSelect = exports.CapModal = exports.CapMenu = exports.CapLogin = exports.CapListLayout = exports.CapList = exports.CapLink = exports.CapLevelGraphRenderer = exports.CapLanguageProvider = exports.CapLabel = exports.CapInputTextArea = exports.CapInputSearch = exports.CapInputNumber = exports.CapInput = exports.CapInfoNote = exports.CapImportMFEComponent = exports.CapImage = exports.CapIllustration = exports.CapIcons = exports.CapIcon = exports.CapHeading = exports.CapHeader = exports.CapHamburgerMenu = exports.CapGraph = exports.CapFormItem = exports.CapForm = exports.CapExpressionEditor = exports.CapErrorStateIllustration = exports.CapErrorBoundary = exports.CapError = exports.CapEmptyDivWithBorder = exports.CapDropdown = exports.CapDrawer = exports.CapDivider = exports.CapDateTimeRangePicker = exports.CapDateTimePicker = exports.CapDateRangePicker = exports.CapDatePicker = exports.CapCustomSelect = exports.CapCustomList = exports.CapCustomCheckboxList = exports.CapCustomCarousel = exports.CapCustomCard = exports.CapConditionPreview = exports.CapColumn = exports.CapColoredTag = exports.CapColorPicker = exports.CapCollapsibleLeftNavigationSaga = exports.CapCollapsibleLeftNavigationReducer = exports.CapCheckbox = exports.CapCarousel = exports.CapCardBox = exports.CapCard = exports.CapCalendarDatePicker = exports.CapCSVFileUploader = exports.CapButton = exports.CapBorderedBox = exports.CapBlock = exports.CapBanner = exports.CapAskAira = exports.CapAppNotEnabled = exports.CapAlert = exports.CapAdvancedIcon = exports.CapActionBar = void 0;
+exports.styledVars = exports.request = exports.loadCapUIFonts = exports.loadCapUI = exports.getCapUIFontLinks = exports.getCapThemeConfig = exports.LocaleHoc = exports.CapVirtualList = exports.CapUserProfile = exports.CapUploader = exports.CapUnifiedSelect = exports.CapTruncateList = exports.CapTreeSelect = exports.CapTree = exports.CapTopBar = exports.CapTooltipWithInfo = exports.CapTooltip = exports.CapTimePicker = exports.CapTagDropdown = exports.CapTag = exports.CapTable = void 0;
 var _CapAlert = _interopRequireDefault(__webpack_require__(20855));
 exports.CapAlert = _CapAlert.default;
 var _CapAdvancedIcon = _interopRequireDefault(__webpack_require__(33006));
@@ -71860,6 +72460,8 @@ var _CapSupportVideosWrapper = _interopRequireDefault(__webpack_require__(54641)
 exports.CapSupportVideosWrapper = _CapSupportVideosWrapper.default;
 var _CapSpin = _interopRequireDefault(__webpack_require__(56543));
 exports.CapSpin = _CapSpin.default;
+var _CapStaticTemplates = _interopRequireDefault(__webpack_require__(9666));
+exports.CapStaticTemplates = _CapStaticTemplates.default;
 var _CapStepsAccordian = _interopRequireDefault(__webpack_require__(28780));
 exports.CapStepsAccordian = _CapStepsAccordian.default;
 var _CapStatisticCard = _interopRequireDefault(__webpack_require__(7393));
@@ -74911,6 +75513,14 @@ var _default = exports["default"] = SvgReorder;
 
 /***/ }),
 
+/***/ 67636:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+module.exports = __webpack_require__.p + "assets/images/group-3.svg";
+
+/***/ }),
+
 /***/ 67873:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -94846,7 +95456,7 @@ 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-customCheckboxList-v2{width:208px;border-radius:.285rem;border:solid 1px #dfe2e7;background-color:#fff;margin-right:.857rem}.div-icon{width:208px;height:92px;padding:1.614rem 5.714rem;border-radius:.285rem;background-color:#e9f0fe}.customCheckbox-icon{margin:1.428rem 5.714rem;width:48px;height:48px;padding:.571rem .285rem;display:contents;font-size:1.428rem !important}.customCheckbox-inductive-text{width:168px;height:auto;min-height:48px}.customCheckbox{padding:1.285rem 1.714rem 1.285rem 1.142rem}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-customCheckboxList-v2{width:208px;border-radius:.285rem;border:solid 1px #dfe2e7;background-color:#fff;margin-right:.857rem}.cap-customCheckboxList-v2 .div-icon{width:208px;height:92px;padding:1.614rem 5.714rem;border-radius:.285rem;background-color:#e9f0fe}.customCheckbox-icon{margin:1.428rem 5.714rem;width:48px;height:48px;padding:.571rem .285rem;display:contents;font-size:1.428rem !important}.customCheckbox-inductive-text{width:168px;height:auto;min-height:48px}.customCheckbox{padding:1.285rem 1.714rem 1.285rem 1.142rem}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"cap-customCheckboxList-v2": `cap-customCheckboxList-v2`,