@nnc-digital/nnc-design-system 1.0.0-beta13 → 1.0.0-beta15

package/build/index.mjs.js

@@ -7724,15 +7724,12 @@ const PromotedLinks$1 = styled.div`
 `;
 
 const PromotedLink$1 = styled.a`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  display: block;
   height: 100%;
-  text-align: center;
 
   /* Memorial theme styling - horizontal layout like HeadingWithIconLink */
-  ${props => props.theme.is_memorial && `
+  ${props => props.theme.is_memorial && props.theme.theme_vars && props.theme.theme_vars.theme_name && (props.theme.theme_vars.theme_name.includes('Memorial')) && `
+    display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
@@ -7761,10 +7758,9 @@ const PromotedLink$1 = styled.a`
 
   span {
     ${(props) => props.theme.linkStyles};
-    margin-top: 10px;
 
     /* Memorial theme - larger text like Heading component */
-    ${props => props.theme.is_memorial && `
+    ${props => props.theme.is_memorial && props.theme.theme_vars && props.theme.theme_vars.theme_name && (props.theme.theme_vars.theme_name.includes('Memorial')) && `
       font-size: 24px;
       font-size: 1.3rem;
       line-height: 1.4;
@@ -7780,14 +7776,15 @@ const PromotedLink$1 = styled.a`
   }
 
   [data-testid="DynamicIcon"] {
-    margin-bottom: 10px;
-
     .service-icon-hover {
       display: none;
     }
 
-    /* Memorial theme - no bottom margin, icon on left */
-    ${props => props.theme.is_memorial && `
+    /* Regular theme - icon above text */
+    margin-bottom: 10px;
+
+    /* Memorial theme - icon on left */
+    ${props => props.theme.is_memorial && props.theme.theme_vars && props.theme.theme_vars.theme_name && (props.theme.theme_vars.theme_name.includes('Memorial')) && `
       margin-bottom: 0;
       margin-right: 0;
     `}
@@ -26121,6 +26118,8 @@ var Header = function (_a) {
  * Optimised for an image in 16:5 ratio on all but small width screens
  */
 const Container$u = styled.div`
+  position: relative;
+  overflow: hidden;
   background-image: ${(props) => {
     const gradient = !props.$backgroundBox ? `linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` : '';
     const imageUrl = props.$image && props.$image.trim() ? `url('${props.$image}')` : '';
@@ -26144,6 +26143,17 @@ const Container$u = styled.div`
   flex-direction: row;
   align-items: flex-end;
 
+  /* Max heights for large screens */
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    max-height: 410px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    max-height: 560px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
+    max-height: 636px;
+  }
+
   &::before {
     content: '';
     /* phones */
@@ -26164,7 +26174,7 @@ const InnerContainer = styled.div`
   margin-right: auto;
   margin-left: auto;
   flex-grow: 1;
-  z-index: 1;
+  z-index: 2;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
     max-width: ${(props) => props.theme.theme_vars.breakpoints.l};
@@ -26290,38 +26300,22 @@ const Search = styled.div`
 
 const VideoContainer = styled.div`
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    height: 580px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 410px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 560px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
-    height: 636px;
-  }
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
 `;
 
 const VideoBackground = styled.video`
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  height: 575px;
+  height: 100%;
   object-fit: cover;
-  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    height: 590px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 420px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 568px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
-    height: 645px;
-  }
+  z-index: 0;
 `;
 
 const PlayPauseButton = styled.button`
@@ -26333,7 +26327,7 @@ const PlayPauseButton = styled.button`
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 3;
     background: rgba(0, 0, 0, 0.5);
     border: 1px solid white;
     color: white;