@redsift/products 12.5.3-muiv7 → 12.5.3

package/_internal/signal-cards.js

@@ -180,7 +180,7 @@ const spin = keyframes`
 // ============================================================================
 
 const BREAKPOINT_MOBILE = '937px';
-const BREAKPOINT_STACK = '980px';
+const BREAKPOINT_STACK$1 = '980px';
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -189,7 +189,7 @@ const Container = styled.div`
   box-sizing: border-box;
   padding: 0 48px 48px;
 
-  @media (max-width: ${BREAKPOINT_STACK}) {
+  @container sc-list (max-width: ${BREAKPOINT_STACK$1}) {
     padding: 0 24px 24px;
   }
 `;
@@ -199,7 +199,7 @@ const ContentLayout = styled.div`
   width: 100%;
   align-items: center;
 
-  @media (max-width: ${BREAKPOINT_STACK}) {
+  @container sc-list (max-width: ${BREAKPOINT_STACK$1}) {
     flex-direction: column;
     gap: 24px;
   }
@@ -214,7 +214,7 @@ const AnalysisColumn = styled.div`
   flex-direction: column;
   flex: 1;
 
-  @media (max-width: ${BREAKPOINT_STACK}) {
+  @container sc-list (max-width: ${BREAKPOINT_STACK$1}) {
     width: 100%;
   }
 `;
@@ -235,7 +235,7 @@ const AnalysisCardInner = styled.div`
   height: 100%;
   justify-content: center;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     padding: 16px 0;
     gap: 12px;
   }
@@ -246,7 +246,7 @@ const AnalysisHeader = styled.div`
   gap: 8px;
   padding: 0 24px 0 26px;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     padding: 0 12px;
   }
 `;
@@ -279,7 +279,7 @@ const BulletList = styled.ul`
   margin: 0;
   list-style: none;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     padding: 0 12px 0 12px;
   }
 `;
@@ -304,7 +304,7 @@ const BulletText = styled.span`
   color: var(--sc-text-color, #333333);
   flex: 1;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     font-size: 14px;
   }
 `;
@@ -328,7 +328,7 @@ const CTASlot = styled.div`
   gap: 12px;
   overflow: clip;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     padding: 12px 16px;
     margin: 8px 12px 0;
   }
@@ -393,7 +393,7 @@ const StatusColumn = styled.div`
   gap: 8px;
   justify-content: center;
 
-  @media (max-width: ${BREAKPOINT_STACK}) {
+  @container sc-list (max-width: ${BREAKPOINT_STACK$1}) {
     width: 100%;
   }
 `;
@@ -411,7 +411,7 @@ const StatusCard = styled.div`
   align-items: center;
   gap: 26px;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
@@ -487,7 +487,7 @@ const SkeletonContainer = styled.div`
   padding: 0 0 0 21px;
   width: 100%;
 
-  @media (max-width: ${BREAKPOINT_MOBILE}) {
+  @container sc-list (max-width: ${BREAKPOINT_MOBILE}) {
     padding: 0 0 0 8px;
   }
 `;
@@ -1716,14 +1716,13 @@ function DmarcSummaryBoxes(_ref2) {
   let {
     dmarc,
     isDomainAnalyzer = false,
-    cardType,
     t
   } = _ref2;
   const domainState = getDomainPolicyState(dmarc);
   const emailState = isDomainAnalyzer ? null : getEmailComplianceState(dmarc);
   const pct = (_dmarc$policy$pct = dmarc === null || dmarc === void 0 ? void 0 : (_dmarc$policy2 = dmarc.policy) === null || _dmarc$policy2 === void 0 ? void 0 : _dmarc$policy2.pct) !== null && _dmarc$policy$pct !== void 0 ? _dmarc$policy$pct : 100;
   const reportWarnings = hasReportWarnings(dmarc);
-  Boolean(dmarc === null || dmarc === void 0 ? void 0 : (_dmarc$policy3 = dmarc.policy) === null || _dmarc$policy3 === void 0 ? void 0 : (_dmarc$policy3$rua = _dmarc$policy3.rua) === null || _dmarc$policy3$rua === void 0 ? void 0 : _dmarc$policy3$rua.length) || /(?:^|;\s*)rua\s*=\s*mailto:/i.test((_dmarc$raw2 = dmarc === null || dmarc === void 0 ? void 0 : dmarc.raw) !== null && _dmarc$raw2 !== void 0 ? _dmarc$raw2 : '');
+  const hasRua = Boolean(dmarc === null || dmarc === void 0 ? void 0 : (_dmarc$policy3 = dmarc.policy) === null || _dmarc$policy3 === void 0 ? void 0 : (_dmarc$policy3$rua = _dmarc$policy3.rua) === null || _dmarc$policy3$rua === void 0 ? void 0 : _dmarc$policy3$rua.length) || /(?:^|;\s*)rua\s*=\s*mailto:/i.test((_dmarc$raw2 = dmarc === null || dmarc === void 0 ? void 0 : dmarc.raw) !== null && _dmarc$raw2 !== void 0 ? _dmarc$raw2 : '');
   const inherited = isInheritedPolicy(dmarc);
   const orgDomain = (_dmarc$policyDomain$r = dmarc === null || dmarc === void 0 ? void 0 : (_dmarc$policyDomain = dmarc.policyDomain) === null || _dmarc$policyDomain === void 0 ? void 0 : _dmarc$policyDomain.replace(/^_dmarc\./, '')) !== null && _dmarc$policyDomain$r !== void 0 ? _dmarc$policyDomain$r : '';
   const getDomainBody = state => {
@@ -1773,7 +1772,7 @@ function DmarcSummaryBoxes(_ref2) {
         body = t('card.dmarc.summary-domain-no-record');
         break;
       case 'permerror':
-        body = cardType === 'warning' ? t('card.dmarc.permerror-rua-fallback_md') : t('card.dmarc.permerror-no-rua_md');
+        body = hasRua ? t('card.dmarc.summary-domain-permerror-rua-fallback') : t('card.dmarc.summary-domain-permerror');
         break;
       case 'temperror':
         body = t('card.dmarc.summary-domain-temperror');
@@ -1825,7 +1824,7 @@ function DmarcSummaryBoxes(_ref2) {
   }), /*#__PURE__*/React__default.createElement(SummaryBox, {
     title: t('card.dmarc.summary-domain-title'),
     body: getDomainBody(domainState),
-    status: reportWarnings && DOMAIN_STATUS[domainState] === 'good' ? 'warning' : domainState === 'permerror' && cardType === 'warning' ? 'warning' : DOMAIN_STATUS[domainState],
+    status: reportWarnings && DOMAIN_STATUS[domainState] === 'good' ? 'warning' : domainState === 'permerror' && hasRua ? 'warning' : DOMAIN_STATUS[domainState],
     "data-testid": "dmarc-summary-domain"
   }));
 }
@@ -3110,6 +3109,16 @@ const DS_TEXT_HEADING = 'var(--redsift-color-neutral-x-dark-grey, #201F36)';
 const DS_BORDER_LIGHT = 'var(--redsift-color-neutral-light-grey, #EAEAED)';
 const DS_BG_HOVER = 'var(--redsift-color-neutral-xx-light-grey, #f8f9fc)';
 const DS_BG_SELECTED = 'var(--redsift-color-neutral-x-light-grey, #F7F7F7)';
+const SC_LIST_CONTAINER = 'sc-list';
+const BREAKPOINT_STACK = '937px';
+const StyledRoot = styled.div`
+  container-type: inline-size;
+  container-name: ${SC_LIST_CONTAINER};
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-list-section-gap, 48px);
+  width: 100%;
+`;
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -3117,7 +3126,7 @@ const StyledContainer = styled.div`
   width: 100%;
   min-height: 400px;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     flex-direction: column;
   }
 `;
@@ -3133,7 +3142,7 @@ const StyledSidebar = styled.aside`
   overflow-y: auto;
   box-sizing: border-box;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     display: none;
   }
 `;
@@ -3143,7 +3152,7 @@ const StyledMobileDropdownWrapper = styled.div`
   background: #ffffff;
   border-bottom: 1px solid var(--sc-border-color-light, ${DS_BORDER_LIGHT});
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     display: block;
   }
 `;
@@ -3317,7 +3326,7 @@ const StyledOuterWrapper = styled.div`
   background: var(--sc-bg-container, ${DS_BG_CONTAINER});
   border-radius: 16px;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     padding: 16px 0;
     gap: 24px;
   }
@@ -3329,7 +3338,7 @@ const StyledHeaderBar = styled.div`
   padding: 0 48px;
   gap: 24px;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     flex-direction: column;
     align-items: flex-start;
     padding: 0 24px;
@@ -3343,7 +3352,7 @@ const StyledHeaderLeft = styled.div`
   flex: 1;
   min-width: 0;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
@@ -3371,7 +3380,7 @@ const StyledEmailAddress = styled.span`
   line-height: 1.3;
   word-break: break-all;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     font-size: 18px;
   }
 `;
@@ -3440,7 +3449,7 @@ const StyledCheckAnotherButton = styled.button`
     flex-shrink: 0;
   }
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     width: 100%;
     justify-content: center;
     font-size: 16px;
@@ -3452,7 +3461,7 @@ const StyledDivider = styled.hr`
   border-top: 1px solid var(--sc-border-divider, #e0e0e0);
   margin: 0 48px 24px;
 
-  @media (max-width: 937px) {
+  @container ${SC_LIST_CONTAINER} (max-width: ${BREAKPOINT_STACK}) {
     margin: 0 24px 24px;
   }
 `;
@@ -3938,7 +3947,7 @@ const SignalCardList$1 = /*#__PURE__*/forwardRef(function SignalCardList(_ref, r
     theme: {
       useInvestigateColors
     }
-  }, (showHeader || shouldShowRecommendations) && /*#__PURE__*/React__default.createElement(StyledOuterWrapper, null, showHeader && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledHeaderBar, {
+  }, /*#__PURE__*/React__default.createElement(StyledRoot, null, (showHeader || shouldShowRecommendations) && /*#__PURE__*/React__default.createElement(StyledOuterWrapper, null, showHeader && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledHeaderBar, {
     "data-testid": "signal-card-list-header"
   }, /*#__PURE__*/React__default.createElement(StyledHeaderLeft, null, /*#__PURE__*/React__default.createElement(StyledEmailInfo, null, /*#__PURE__*/React__default.createElement(StyledEmailLabel, null, t('signal-card-list.checked-email-label')), /*#__PURE__*/React__default.createElement(StyledEmailAddress, null, checkedEmail), (emailSubject || emailDate) && /*#__PURE__*/React__default.createElement(StyledEmailMeta, null, emailSubject && /*#__PURE__*/React__default.createElement(StyledEmailMetaItem, null, /*#__PURE__*/React__default.createElement(StyledEmailMetaLabel, null, t('subject'), ":"), " ", emailSubject), emailDate && /*#__PURE__*/React__default.createElement(StyledEmailMetaItem, null, /*#__PURE__*/React__default.createElement(StyledEmailMetaLabel, null, t('date'), ":"), ' ', new Date(emailDate).toLocaleString(undefined, {
     year: 'numeric',
@@ -4045,7 +4054,7 @@ const SignalCardList$1 = /*#__PURE__*/forwardRef(function SignalCardList(_ref, r
       areAllCollapsed: areAllCollapsed,
       onCollapseAll: onCollapseAll
     })))));
-  }))));
+  })))));
 });
 SignalCardList$1.className = CLASSNAME;
 SignalCardList$1.displayName = COMPONENT_NAME;