@capillarytech/creatives-library 8.0.339 → 8.0.340-beta.0

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -130,7 +130,8 @@
     overflow: hidden;
     background-color: $CAP_WHITE;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
   }
 
   // Split container - integrated design

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -59,6 +59,7 @@ const CodeEditorPaneComponent = ({
   injectedTags = {},
   location,
   eventContextTags = [],
+  waitEventContextTags = {},
   selectedOfferDetails = [],
   channel,
   userLocale = 'en',
@@ -273,7 +274,7 @@ const CodeEditorPaneComponent = ({
         <div className="codemirror-wrapper">
           <div ref={editorRef} className="codemirror-editor" />
           {/* Floating Add Label Button */}
-          <CapRow className="code-editor-pane__actions">
+          <CapRow useLegacy className="code-editor-pane__actions">
             <TagList
               key="html-editor-taglist"
               label={intl.formatMessage(messages.addLabel)}
@@ -289,6 +290,7 @@ const CodeEditorPaneComponent = ({
               location={location}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               popoverPlacement="rightTop"
             />
           </CapRow>
@@ -327,6 +329,7 @@ CodeEditorPane.propTypes = {
   injectedTags: PropTypes.object,
   location: PropTypes.object,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   channel: PropTypes.string,
   userLocale: PropTypes.string,

package/v2Components/HtmlEditor/components/DeviceToggle/_deviceToggle.scss

@@ -41,7 +41,7 @@
     transition: all 0.2s ease-in-out;
 
     // Override any Cap UI button styles with high specificity
-    &.cap-button,
+    &.cap-button-v2,
     &.ant-btn,
     &.cap-button-primary,
     &.cap-button-success,
@@ -94,7 +94,7 @@
       }
 
       // Override Cap UI styles for active state with high specificity
-      &.cap-button,
+      &.cap-button-v2,
       &.ant-btn,
       &.cap-button-primary,
       &.cap-button-success,

package/v2Components/HtmlEditor/components/DeviceToggle/index.js

@@ -51,7 +51,7 @@ const DeviceToggle = ({
   return (
     <CapRow className={`device-toggle ${className}`}>
       {/* Device Tabs */}
-      <CapRow className="device-toggle__tabs">
+      <CapRow useLegacy className="device-toggle__tabs">
         {/* Android Tab */}
         <CapButton
           type={activeDevice === DEVICE_TYPES.ANDROID ? "primary" : "default"}
@@ -78,7 +78,7 @@ const DeviceToggle = ({
       </CapRow>
 
       {/* Content Sync Checkbox */}
-      <CapRow className="device-toggle__sync">
+      <CapRow useLegacy className="device-toggle__sync">
         <CapCheckbox
           checked={keepContentSame}
           onChange={handleCheckboxChange}

package/v2Components/HtmlEditor/components/EditorToolbar/PreviewModeGroup.js

@@ -35,7 +35,7 @@ const PreviewModeGroup = ({
   return (
     <div className="preview-mode-group">
       <CapButton
-        type="flat"
+        type="link"
         onClick={() => onChange(DESKTOP)}
         disabled={disabled}
         className={value === DESKTOP ? 'preview-mode-group__btn preview-mode-group__btn--active' : 'preview-mode-group__btn'}
@@ -45,7 +45,7 @@ const PreviewModeGroup = ({
         <CapIcon type="desktop" size="m" />
       </CapButton>
       <CapButton
-        type="flat"
+        type="link"
         onClick={() => onChange(MOBILE)}
         disabled={disabled}
         className={value === MOBILE ? 'preview-mode-group__btn preview-mode-group__btn--active' : 'preview-mode-group__btn'}

package/v2Components/HtmlEditor/components/EditorToolbar/index.js

@@ -61,7 +61,7 @@ const EditorToolbar = ({
     <Header className={`editor-toolbar ${className}`}>
       {/* Left Section - Title (conditional) */}
       {showTitle && (
-        <CapRow className="editor-toolbar__left">
+        <CapRow useLegacy className="editor-toolbar__left">
           <Text strong className="editor-toolbar__title">
             {variant === HTML_EDITOR_VARIANTS.INAPP
               ? intl.formatMessage(messages.inAppEditor)
@@ -95,7 +95,7 @@ const EditorToolbar = ({
       )}
 
       {/* Right Section - Actions */}
-      <CapRow className="editor-toolbar__right">
+      <CapRow useLegacy className="editor-toolbar__right">
         {showFullscreenButton && (
           <CapButton
             type="text"

package/v2Components/HtmlEditor/components/InAppPreviewPane/index.js

@@ -153,6 +153,7 @@ const InAppPreviewPane = ({
       onTouchMove={handleTouchMove}
     >
       <CapRow
+        useLegacy
         ref={deviceContainerRef}
         className={getDeviceContainerClasses()}
       >

package/v2Components/HtmlEditor/components/PreviewPane/index.js

@@ -183,14 +183,14 @@ const PreviewPane = ({
   // Render Email preview for Email variant
   return (
     <div className={`preview-pane ${className}`}>
-      <CapRow className="preview-pane__mode-controls">
+      <CapRow useLegacy className="preview-pane__mode-controls">
         <PreviewModeGroup
           value={viewMode}
           onChange={setViewMode}
         />
       </CapRow>
 
-      <CapRow className="preview-pane__content">
+      <CapRow useLegacy className="preview-pane__content">
         {iframeContent ? renderDeviceFrame() : renderEmptyState()}
       </CapRow>
     </div>

package/v2Components/HtmlEditor/components/SplitContainer/SplitContainer.js

@@ -235,7 +235,7 @@ const SplitContainer = ({
       className={containerClasses}
       style={containerStyle}
     >
-      <CapRow className="split-container__panel split-container__panel--first">
+      <CapRow useLegacy className="split-container__panel split-container__panel--first">
         {children?.[0]}
       </CapRow>
 
@@ -256,7 +256,7 @@ const SplitContainer = ({
         </div>
       </div>
 
-      <CapRow className="split-container__panel split-container__panel--second">
+      <CapRow useLegacy className="split-container__panel split-container__panel--second">
         {children?.[1]}
       </CapRow>
     </div>

package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss

@@ -47,7 +47,8 @@
   &__panel {
     overflow: hidden;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     position: relative;
     min-width: 0; // Prevent flex items from overflowing
     min-height: 0;

package/v2Components/HtmlEditor/components/ValidationPanel/index.js

@@ -14,12 +14,9 @@ import Empty from 'antd/lib/empty';
 import Spin from 'antd/lib/spin';
 
 // Import icons individually
-import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
-import WarningOutlined from '@ant-design/icons/WarningOutlined';
-import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
+// TODO: ShieldOutlined, BugOutlined, EyeInvisibleOutlined have no direct CapIcon equivalent — kept for follow-up
 import ShieldOutlined from '@ant-design/icons/ShieldOutlined';
 import BugOutlined from '@ant-design/icons/BugOutlined';
-import CodeOutlined from '@ant-design/icons/CodeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 
@@ -90,15 +87,15 @@ const ValidationPanel = ({
   const getSourceIcon = (source) => {
     switch (source) {
       case 'htmlhint':
-        return <CodeOutlined />;
+        return <CapIcon type="code" outlined />;
       case 'css-validator':
-        return <CodeOutlined />;
+        return <CapIcon type="code" outlined />;
       case 'security':
         return <ShieldOutlined />;
       case 'custom':
         return <BugOutlined />;
       default:
-        return <InfoCircleOutlined />;
+        return <CapIcon type="info" outlined />;
     }
   };
 
@@ -213,13 +210,13 @@ const ValidationPanel = ({
     <div className="validation-panel">
       <div className="validation-panel__summary">
         <div className="validation-panel__summary-item">
-          <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
+          <CapIcon type="exclamation-circle" outlined style={{ color: '#ff4d4f' }} />
           <span>{validation?.summary?.totalErrors || 0}</span>
           <FormattedMessage {...messages.errors} />
         </div>
 
         <div className="validation-panel__summary-item">
-          <WarningOutlined style={{ color: '#faad14' }} />
+          <CapIcon type="warning" outlined style={{ color: '#faad14' }} />
           <span>{validation?.summary?.totalWarnings || 0}</span>
           <FormattedMessage {...messages.warnings} />
         </div>

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -247,14 +247,14 @@ const ValidationTabs = ({
 
   return (
     <div className={`validation-tabs ${isCollapsed ? 'validation-tabs--collapsed' : ''} ${className || ''}`}>
-      <CapRow className="validation-tabs__header">
+      <CapRow useLegacy className="validation-tabs__header">
         <StyledCapTab
           className="validation-tabs__tabs"
           activeKey={activeKey || (tabPanes[0]?.key)}
           onChange={setActiveKey}
           panes={tabPanes}
         />
-        <CapRow className="validation-tabs__actions">
+        <CapRow useLegacy className="validation-tabs__actions">
           <CapTooltip title={collapseLabel}>
             <button
               type="button"

package/v2Components/NavigationBar/index.js

@@ -35,7 +35,13 @@ const CapWrapper = styled.div`
   background-color: #ffffff;
   width: 100%;
   display: flex;
-  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'}
+  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'};
+  .sidebar-container {
+    margin-right: 10px;
+  }
+  .ant-collapse {
+    background-color: #ffffff;
+  }
 `;
 
 const ComponentWrapper = styled.div`

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -7,8 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // import { connect } from 'react-redux';
-import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
-import { CapHeading, CapLabel, CapTab, CapIcon, CapImage } from '@capillarytech/cap-ui-library/';
+import { CapRow, CapColumn, CapButton, CapHeading, CapLabel, CapTab, CapIcon, CapImage } from '@capillarytech/cap-ui-library';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import './_wechatRichmediaTemplatePrev.scss';
@@ -61,12 +60,12 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
       if (id === 0) {
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
-            <CapRow>
+            <CapRow useLegacy>
               <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
               <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
             </CapRow>
             {Object.keys(mediaList).length === 1 ?
-              <CapRow style={{ height: 32, left: "12%" }}>
+              <CapRow useLegacy style={{ height: 32, left: "12%" }}>
                 {contentData.digest ? contentData.digest : ""}
               </CapRow>
               :

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -818,7 +818,8 @@
 
   .msg-container-carousel {
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     .scroll-container {
       overflow-x: auto;
       display: flex;
@@ -987,7 +988,7 @@
   margin-bottom: 12px;
 }
 
-.ant-btn.cap-button-v2.flat-btn.preview-video-btn {
+.ant-btn.cap-button-v2.ant-btn-link.preview-video-btn {
   padding: 0;
   background-color: transparent;
   height: auto;
@@ -1218,7 +1219,8 @@
             padding: $CAP_SPACE_08;
             text-align: center;
             display: flex;
-            flex-direction: column;
+            flex-direction: column !important;
+            flex-flow: column nowrap;
             align-items: center;
             justify-content: center;
             gap: $CAP_SPACE_08;

package/v2Components/TemplatePreview/index.js

@@ -196,7 +196,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   </CapRow>
                 </CapRow>
               )}
-              <CapRow className="carousel-content">
+              <CapRow useLegacy className="carousel-content">
                 <CapLabel className="carousel-title">
                   {item?.title || item?.header || ""}
                 </CapLabel>
@@ -350,7 +350,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 >
                   <CapButton
                     className="preview-video-btn"
-                    type="flat"
+                    type="link"
                   >
                   <CapIcon type="play"/>
                     <FormattedMessage {...messages.playVideo} />
@@ -360,7 +360,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       ? (
                         <CapButton
                           className="preview-video-btn"
-                          type="flat"
+                          type="link"
                         >
                       <CapIcon type="reply" style={{ fontSize: 18 }}/>
                           <FormattedMessage {...messages.showDetails} />
@@ -739,6 +739,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   !!content.bodyText ||
                   !!content.bodyImage || !!content.bodyVideo?.videoSrc || !!content.bodyGif) && (
                   <CapRow
+                    useLegacy
                     className={`${
                       this.props.device === "ios" ? "iphone" : this.props.device
                     }-push-message-Container`}
@@ -757,7 +758,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapRow>
                         <CapLabel className="body-text">{content.bodyText}</CapLabel>
                         {(content.bodyImage || content?.bodyVideo?.videoSrc || content?.bodyGif) && (
-                          <CapRow className="body-image">
+                          <CapRow useLegacy className="body-image">
                             {(() => {
                               if (content?.bodyVideo?.videoSrc && !content?.bodyImage && !content?.bodyGif) {
                                 return (
@@ -821,7 +822,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapRow>
                         <CapLabel className="body-text">{content.bodyText}</CapLabel>
                         {(content?.bodyImage || content?.bodyVideo?.videoSrc || content?.bodyGif) && (
-                          <CapRow className="body-image">
+                          <CapRow useLegacy className="body-image">
                             {(() => {
                               if (content?.bodyVideo?.videoSrc && !content?.bodyImage && !content?.bodyGif) {
                                 return (
@@ -1303,23 +1304,24 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             )}
             {channel?.toUpperCase() === ZALO && (
               <CapRow
+                useLegacy
                 className={`zalo-preview-container ${
                   templateData?.fullMode
                     ? "zalo-preview-container-creative"
                     : "zalo-preview-container-campaign"
                 }`}
               >
-                <CapRow>
+                <CapRow useLegacy>
                   <CapLabel className="preview-head">
                     {formatMessage(zaloMessage.previewHead)}
                   </CapLabel>
                 </CapRow>
-                <CapRow>
+                <CapRow useLegacy>
                   <CapLabel className="preview-text">
                     {formatMessage(zaloMessage.previewText)}
                   </CapLabel>
                 </CapRow>
-                <CapRow>
+                <CapRow useLegacy>
                   <CapLabel
                     data-testid="preview-link-button"
                     onClick={handlePreview}
@@ -1356,7 +1358,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             {channel?.toUpperCase() === INAPP && (
               isBeeFreeTemplate ? (
                   <div className="shell-v2 align-center">
-                    <CapRow className="preview-image-container">
+                    <CapRow useLegacy className="preview-image-container">
                       <CapImage
                         className="preview-image"
                         src={this.props.device === ANDROID ? inAppMobileDeviceAndroid : inAppMobileDeviceIos}

package/v2Components/TestAndPreviewSlidebox/CustomValuesEditor.js

@@ -27,9 +27,9 @@ const CustomValuesEditor = ({
 }) => {
   if (isExtractingTags) {
     return (
-      <CapRow className="loading-container">
+      <CapRow useLegacy className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           <FormattedMessage {...messages.extractingTags} />
         </CapRow>
       </CapRow>
@@ -128,7 +128,7 @@ const CustomValuesEditor = ({
       <div className="editor-actions">
         <CapButton
           className="discard-button"
-          type="flat"
+          type="link"
           size="small"
           onClick={handleDiscardCustomValues}
           icon="close"

package/v2Components/TestAndPreviewSlidebox/LeftPanelContent.js

@@ -25,9 +25,9 @@ const LeftPanelContent = ({
 }) => {
   if (isExtractingTags) {
     return (
-      <CapRow className="loading-container">
+      <CapRow useLegacy className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           <FormattedMessage {...messages.extractingTags} />
         </CapRow>
       </CapRow>
@@ -37,7 +37,7 @@ const LeftPanelContent = ({
     return (
       <>
         {/* Customer Search Section */}
-        <CapRow className="panel-section customer-section">
+        <CapRow useLegacy className="panel-section customer-section">
           <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
           <CustomerSearchSection
             selectedCustomer={selectedCustomer}
@@ -50,8 +50,8 @@ const LeftPanelContent = ({
         </CapRow>
         {/* Tags Section */}
         {!tagsExtracted && (
-          <CapRow className="panel-section">
-            <CapButton type="flat" className="extract-tags-button" onClick={handleExtractTags}>
+          <CapRow useLegacy className="panel-section">
+            <CapButton type="link" className="extract-tags-button" onClick={handleExtractTags}>
               <CapLabel type="label33">
                 <FormattedMessage {...messages.enterCustomValuesForTags} />
               </CapLabel>

package/v2Components/TestAndPreviewSlidebox/PreviewSection.js

@@ -15,7 +15,7 @@ const PreviewSection = ({
   formatMessage,
   PreviewChrome,
 }) => (
-  <CapRow className="test-and-preview-section panel-section">
+  <CapRow useLegacy className="test-and-preview-section panel-section">
     <PreviewChrome
       device={previewDevice}
       onDeviceChange={setPreviewDevice}
@@ -23,9 +23,9 @@ const PreviewSection = ({
       subject={previewDataHtml?.resolvedTitle || formData['template-subject']}
     >
       {isUpdatingPreview && (
-        <CapRow className="loading-container">
+        <CapRow useLegacy className="loading-container">
           <CapSpin />
-          <CapRow className="loading-text">{formatMessage(messages.updatingPreview)}</CapRow>
+          <CapRow useLegacy className="loading-text">{formatMessage(messages.updatingPreview)}</CapRow>
         </CapRow>
       )}
       {!isUpdatingPreview && previewDataHtml && (

package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss

@@ -31,7 +31,8 @@
     margin-left: 2%;
     height: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
   }
 
   .discard-button {
@@ -79,7 +80,8 @@
 
   .loading-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
     padding: $CAP_SPACE_32;

package/v2Containers/BeeEditor/index.js

@@ -53,6 +53,7 @@ function BeeEditor(props) {
     BEESelect,
     currentOrgDetails,
     eventContextTags,
+    waitEventContextTags,
     isGetBeeData,
     getBEEData,
   } = props;
@@ -381,6 +382,7 @@ function BeeEditor(props) {
         }}
         onContextChange={onContextChange}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
       />
       <CapModal
         className="custom-row-modal"
@@ -427,6 +429,7 @@ BeeEditor.propTypes = {
   onContextChange: PropTypes.func,
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   isGetBeeData: PropTypes.bool,
   getBEEData: PropTypes.func,
 };

package/v2Containers/BeePopupEditor/index.js

@@ -152,7 +152,7 @@ function BeePopupEditor(props) {
   };
 
   return (
-    <CapRow>
+    <CapRow useLegacy>
       <div id="bee-plugin-container" className="bee-popup-editor__container"></div>
       <TagList
         moduleFilterEnabled={moduleFilterEnabled}

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -127,7 +127,7 @@ const CommunicationFlow = ({
     switch (step) {
       case STEPS.MESSAGE_TYPE:
         return (
-          <CapRow key={step}>
+          <CapRow useLegacy key={step}>
             <MessageTypeStep
               {...commonProps}
               value={stepData.messageType}
@@ -140,7 +140,7 @@ const CommunicationFlow = ({
         );
       case STEPS.COMMUNICATION_STRATEGY:
         return (
-          <CapRow key={step}>
+          <CapRow useLegacy key={step}>
             <CommunicationStrategyStep
               {...commonProps}
               value={stepData.communicationStrategy}
@@ -158,7 +158,7 @@ const CommunicationFlow = ({
           return null;
         }
         return (
-          <CapRow key={step}>
+          <CapRow useLegacy key={step}>
             <ChannelSelectionStep
               {...commonProps}
               value={stepData}
@@ -206,10 +206,10 @@ const CommunicationFlow = ({
   }), [enabledSteps, stepData, validationErrors, config, handleStepChange, messageTypeData, communicationStrategyData, contentTemplateData]);
 
   return (
-    <CapRow className="communication-flow-container">
+    <CapRow useLegacy className="communication-flow-container">
       {renderSteps()}
       {onSave && (
-        <CapRow className="communication-flow-container__footer">
+        <CapRow useLegacy className="communication-flow-container__footer">
           <CapButton type="primary" onClick={() => onSave(getAggregatedData())}>
             {formatMessage(messages.save)}
           </CapButton>

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js

@@ -367,7 +367,7 @@ const ChannelSelectionStep = ({
             onVisibleChange={(visible) => handleIncentivesVisibleChange(visible, item.contentId)}
             visible={!!showIncentivesMenuMap[item.contentId]}
           >
-            <CapButton isAddBtn type="flat" className="add-incentives-button add-incentive-link">
+            <CapButton isAddBtn type="link" className="add-incentives-button add-incentive-link">
               {formatMessage(messages.addIncentive)}
             </CapButton>
           </CapDropdown>
@@ -389,6 +389,7 @@ const ChannelSelectionStep = ({
         </CapHeading>
 
         <CapRow
+          useLegacy
           className={`content-template-container ${contentItems?.length > 0 ? 'content-template-container--has-content' : ''}`}
         >
           {contentItems?.length === 0 ? (
@@ -427,7 +428,7 @@ const ChannelSelectionStep = ({
                   onVisibleChange={(visible) => handleIncentivesVisibleChange(visible, 'standalone')}
                   visible={!!showIncentivesMenuMap.standalone}
                 >
-                  <CapButton isAddBtn type="flat" className="add-incentive-button">
+                  <CapButton isAddBtn type="link" className="add-incentive-button">
                     {formatMessage(messages.addIncentive)}
                   </CapButton>
                 </CapDropdown>
@@ -449,7 +450,7 @@ const ChannelSelectionStep = ({
         </CapRow>
 
         {error && (
-          <CapRow className="validation-error">
+          <CapRow useLegacy className="validation-error">
             {error}
           </CapRow>
         )}

package/v2Containers/CommunicationFlow/steps/CommunicationStrategyStep/CommunicationStrategyStep.js

@@ -53,7 +53,7 @@ const CommunicationStrategyStep = ({
   const selectValue = (value === null || value === '') ? undefined : value;
 
   return (
-    <CapRow className="communication-strategy-step">
+    <CapRow useLegacy className="communication-strategy-step">
       <CapHeading type="h3" className="heading-style">
         {formatMessage(messages.communicationStrategyHeading)}
       </CapHeading>
@@ -68,7 +68,7 @@ const CommunicationStrategyStep = ({
       />
 
       {error && (
-        <CapRow className="validation-error">
+        <CapRow useLegacy className="validation-error">
           {error}
         </CapRow>
       )}

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/DeliverySettingsSection.js

@@ -216,13 +216,14 @@ const DeliverySettingsSection = ({
   return (
     <>
       <CapRow
+        useLegacy
         type="flex"
         align="middle"
         justify="space-between"
         className="delivery-settings-section delivery-settings-section--clickable"
         onClick={() => setShowSlidebox(true)}
       >
-        <CapRow type="flex" className="delivery-settings-section__content">
+        <CapRow useLegacy type="flex" className="delivery-settings-section__content">
           <CapHeading type="h5">
             {formatMessage(messages.senderDetails)}
           </CapHeading>
@@ -236,7 +237,7 @@ const DeliverySettingsSection = ({
                 return value != null && value !== '';
               })
               .map((channelConfig) => (
-                <CapRow key={`${channel}-${channelConfig.valueKey}`} type="flex" align="middle" justify="space-between" className="delivery-settings-section__field-row">
+                <CapRow useLegacy key={`${channel}-${channelConfig.valueKey}`} type="flex" align="middle" justify="space-between" className="delivery-settings-section__field-row">
                   <CapHeading type="label4" className="delivery-settings-section__label">
                     {formatMessage(messages[channelConfig.labelKey])}
                   </CapHeading>