@newskit-render/core 0.131.1 → 0.138.1

package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap

@@ -100,8 +100,8 @@ exports[`Lead 1`] = `
 .emotion-3 {
   box-sizing: border-box;
   overflow: hidden;
-  color: #2e2e2e;
-  background-color: #ffffff;
+  color: #2E2E2E;
+  background-color: #FFFFFF;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -131,19 +131,16 @@ exports[`Lead 1`] = `
 }
 
 .emotion-5 {
-  width: 100%;
-}
-
-.emotion-6 {
   position: relative;
   width: 100%;
   display: block;
   height: auto;
   padding-top: 0;
+  width: 100%;
   border-radius: 0;
 }
 
-.emotion-7 {
+.emotion-6 {
   opacity: 1;
   display: block;
   border-radius: inherit;
@@ -153,67 +150,67 @@ exports[`Lead 1`] = `
   animation: fadeIn 300ms;
 }
 
-.emotion-8 {
+.emotion-7 {
   box-sizing: border-box;
 }
 
-.emotion-9 {
+.emotion-8 {
   box-sizing: border-box;
   padding: 0;
 }
 
-.emotion-9 a:not(.nk-card-link) {
+.emotion-8 a:not(.nk-card-link) {
   z-index: 2;
   position: relative;
 }
 
-.emotion-10 {
+.emotion-9 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
 }
 
-.emotion-10 .nk-headline-kicker {
-  color: #0a68c1;
+.emotion-9 .nk-headline-kicker {
+  color: #3358CC;
 }
 
-.emotion-10:hover:not(:disabled) .nk-headline-kicker {
-  color: #02509b;
+.emotion-9:hover:not(:disabled) .nk-headline-kicker {
+  color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:active:not(:disabled) .nk-headline-kicker {
-  color: #01396e;
+.emotion-9:active:not(:disabled) .nk-headline-kicker {
+  color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited:not(:disabled) .nk-headline-kicker {
-  color: #7547a3;
+.emotion-9:visited:not(:disabled) .nk-headline-kicker {
+  color: #5E44E4;
 }
 
-.emotion-10 .nk-headline-heading {
-  color: #2e2e2e;
+.emotion-9 .nk-headline-heading {
+  color: #2E2E2E;
 }
 
-.emotion-10:hover:not(:disabled) .nk-headline-heading {
-  color: #02509b;
+.emotion-9:hover:not(:disabled) .nk-headline-heading {
+  color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:active:not(:disabled) .nk-headline-heading {
-  color: #01396e;
+.emotion-9:active:not(:disabled) .nk-headline-heading {
+  color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited:not(:disabled) .nk-headline-heading {
-  color: #7547a3;
+.emotion-9:visited:not(:disabled) .nk-headline-heading {
+  color: #5E44E4;
 }
 
-.emotion-10:before {
+.emotion-9:before {
   content: '';
   top: 0;
   right: 0;
@@ -225,106 +222,106 @@ exports[`Lead 1`] = `
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-11 {
+  .emotion-10 {
     margin-bottom: 20px;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-11 {
+  .emotion-10 {
     margin-bottom: 24px;
   }
 }
 
-.emotion-12 {
+.emotion-11 {
   margin: 0;
   padding: 1px 0;
-  color: #0a0a0a;
+  color: #0A0A0A;
 }
 
-.emotion-12 svg {
-  fill: #0a0a0a;
+.emotion-11 svg {
+  fill: #0A0A0A;
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-12 {
-    font-family: "Source Serif Pro",serif;
-    font-size: 28px;
-    line-height: 1.1428571428571428;
-    font-weight: 600;
-    letter-spacing: 0;
+  .emotion-11 {
+    font-family: "Bitter",serif;
+    font-size: 24px;
+    line-height: 1.1666666666666667;
+    font-weight: 500;
+    letter-spacing: -0.5px;
   }
 
-  .emotion-12::before {
+  .emotion-11::before {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-bottom: -0.09955357142857141em;
+    margin-bottom: -0.2333333333333334em;
   }
 
-  .emotion-12::after {
+  .emotion-11::after {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-top: -0.2839285714285714em;
+    margin-top: -0.2958333333333334em;
   }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-12 {
-    font-family: "Source Serif Pro",serif;
-    font-size: 40px;
-    line-height: 1.1;
-    font-weight: 600;
-    letter-spacing: 0;
+  .emotion-11 {
+    font-family: "Bitter",serif;
+    font-size: 36px;
+    line-height: 1.1111111111111112;
+    font-weight: 500;
+    letter-spacing: -0.5px;
   }
 
-  .emotion-12::before {
+  .emotion-11::before {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-bottom: -0.07812500000000006em;
+    margin-bottom: -0.2055555555555556em;
   }
 
-  .emotion-12::after {
+  .emotion-11::after {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-top: -0.26250000000000007em;
+    margin-top: -0.2680555555555556em;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-12 {
-    font-family: "Source Serif Pro",serif;
-    font-size: 48px;
-    line-height: 1.1666666666666667;
-    font-weight: 600;
-    letter-spacing: 0;
+  .emotion-11 {
+    font-family: "Bitter",serif;
+    font-size: 40px;
+    line-height: 1.2;
+    font-weight: 500;
+    letter-spacing: -0.5px;
   }
 
-  .emotion-12::before {
+  .emotion-11::before {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-bottom: -0.11145833333333338em;
+    margin-bottom: -0.25em;
   }
 
-  .emotion-12::after {
+  .emotion-11::after {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-top: -0.2958333333333334em;
+    margin-top: -0.3125em;
   }
 }
 
-.emotion-13 {
+.emotion-12 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -334,7 +331,7 @@ exports[`Lead 1`] = `
 }
 
 @media screen {
-  .emotion-13 {
+  .emotion-12 {
     padding: 0 8px;
     margin-top: 40px;
     -webkit-flex-basis: 100%;
@@ -345,19 +342,19 @@ exports[`Lead 1`] = `
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-13 {
+  .emotion-12 {
     margin-top: 32px;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-13 {
+  .emotion-12 {
     padding: 0 12px;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-13 {
+  .emotion-12 {
     margin-top: 0;
     -webkit-flex-basis: 33.333333333333336%;
     -ms-flex-preferred-size: 33.333333333333336%;
@@ -366,7 +363,7 @@ exports[`Lead 1`] = `
   }
 }
 
-.emotion-15 {
+.emotion-14 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -384,36 +381,36 @@ exports[`Lead 1`] = `
 }
 
 @media screen {
-  .emotion-15 {
+  .emotion-14 {
     margin: -40px -8px 0 -8px;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-15 {
+  .emotion-14 {
     margin: -40px -8px 0 -8px;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-15 {
+  .emotion-14 {
     margin: -32px -8px 0 -8px;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-15 {
+  .emotion-14 {
     margin: -32px -12px 0 -12px;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-15 {
+  .emotion-14 {
     margin: -24px -12px 0 -12px;
   }
 }
 
-.emotion-16 {
+.emotion-15 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -423,7 +420,7 @@ exports[`Lead 1`] = `
 }
 
 @media screen {
-  .emotion-16 {
+  .emotion-15 {
     padding: 0 8px;
     margin-top: 40px;
     -webkit-flex-basis: 100%;
@@ -434,7 +431,7 @@ exports[`Lead 1`] = `
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-16 {
+  .emotion-15 {
     margin-top: 32px;
     -webkit-flex-basis: 50%;
     -ms-flex-preferred-size: 50%;
@@ -444,13 +441,13 @@ exports[`Lead 1`] = `
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-16 {
+  .emotion-15 {
     padding: 0 12px;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-16 {
+  .emotion-15 {
     margin-top: 24px;
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
@@ -459,102 +456,102 @@ exports[`Lead 1`] = `
   }
 }
 
-.emotion-18 {
+.emotion-17 {
   box-sizing: border-box;
   display: block;
   position: relative;
   margin-bottom: 20px;
 }
 
-.emotion-25 {
+.emotion-23 {
   margin-bottom: 16px;
 }
 
-.emotion-26 {
+.emotion-24 {
   margin: 0;
   padding: 1px 0;
-  color: #0a0a0a;
+  color: #0A0A0A;
 }
 
-.emotion-26 svg {
-  fill: #0a0a0a;
+.emotion-24 svg {
+  fill: #0A0A0A;
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-26 {
-    font-family: "Source Serif Pro",serif;
-    font-size: 28px;
-    line-height: 1.1428571428571428;
-    font-weight: 600;
-    letter-spacing: 0;
+  .emotion-24 {
+    font-family: "Bitter",serif;
+    font-size: 24px;
+    line-height: 1.1666666666666667;
+    font-weight: 500;
+    letter-spacing: -0.5px;
   }
 
-  .emotion-26::before {
+  .emotion-24::before {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-bottom: -0.09955357142857141em;
+    margin-bottom: -0.2333333333333334em;
   }
 
-  .emotion-26::after {
+  .emotion-24::after {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-top: -0.2839285714285714em;
+    margin-top: -0.2958333333333334em;
   }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-26 {
-    font-family: "Source Serif Pro",serif;
-    font-size: 32px;
-    line-height: 1.125;
-    font-weight: 600;
-    letter-spacing: 0;
+  .emotion-24 {
+    font-family: "Bitter",serif;
+    font-size: 28px;
+    line-height: 1.1428571428571428;
+    font-weight: 500;
+    letter-spacing: -0.5px;
   }
 
-  .emotion-26::before {
+  .emotion-24::before {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-bottom: -0.09062500000000001em;
+    margin-bottom: -0.22142857142857142em;
   }
 
-  .emotion-26::after {
+  .emotion-24::after {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-top: -0.275em;
+    margin-top: -0.2839285714285714em;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-26 {
-    font-family: "Source Serif Pro",serif;
-    font-size: 36px;
-    line-height: 1.1111111111111112;
-    font-weight: 600;
-    letter-spacing: 0;
+  .emotion-24 {
+    font-family: "Bitter",serif;
+    font-size: 32px;
+    line-height: 1.125;
+    font-weight: 500;
+    letter-spacing: -0.5px;
   }
 
-  .emotion-26::before {
+  .emotion-24::before {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-bottom: -0.08368055555555559em;
+    margin-bottom: -0.21250000000000002em;
   }
 
-  .emotion-26::after {
+  .emotion-24::after {
     content: '';
     display: block;
     height: 0;
     width: 0;
-    margin-top: -0.2680555555555556em;
+    margin-top: -0.275em;
   }
 }
 
@@ -575,35 +572,31 @@ exports[`Lead 1`] = `
           <div
             class="emotion-4"
           >
-            <div
+            <picture
               class="emotion-5"
             >
-              <picture
+              <img
+                alt=""
                 class="emotion-6"
-              >
-                <img
-                  alt=""
-                  class="emotion-7"
-                  src=""
-                />
-              </picture>
-            </div>
+                src=""
+              />
+            </picture>
           </div>
           <div
-            class="emotion-8"
+            class="emotion-7"
           >
             <div
-              class="emotion-9"
+              class="emotion-8"
             >
               <a
-                class="nk-card-link emotion-10"
+                class="nk-card-link emotion-9"
                 href="catagory-one/demo-1/test-headline"
               >
                 <div
-                  class="emotion-11"
+                  class="emotion-10"
                 >
                   <h3
-                    class="emotion-12"
+                    class="emotion-11"
                   >
                     test headline
                   </h3>
@@ -614,55 +607,51 @@ exports[`Lead 1`] = `
         </div>
       </div>
       <div
-        class="emotion-13"
+        class="emotion-12"
         data-testid="titleTeaserVerticalsCell"
       >
         <div
           class="emotion-0"
         >
           <div
-            class="emotion-15"
+            class="emotion-14"
             data-testid="LEAD_1_AND_2-InnerGrid"
           >
             <div
-              class="emotion-16"
+              class="emotion-15"
               data-testid="titleVerticalCell-1"
             >
               <div
                 class="emotion-3"
               >
                 <div
-                  class="emotion-18"
+                  class="emotion-17"
                 >
-                  <div
+                  <picture
                     class="emotion-5"
                   >
-                    <picture
+                    <img
+                      alt=""
                       class="emotion-6"
-                    >
-                      <img
-                        alt=""
-                        class="emotion-7"
-                        src=""
-                      />
-                    </picture>
-                  </div>
+                      src=""
+                    />
+                  </picture>
                 </div>
                 <div
-                  class="emotion-8"
+                  class="emotion-7"
                 >
                   <div
-                    class="emotion-9"
+                    class="emotion-8"
                   >
                     <a
-                      class="nk-card-link emotion-10"
+                      class="nk-card-link emotion-9"
                       href="catagory-two/demo-2/test-headline-2"
                     >
                       <div
-                        class="emotion-25"
+                        class="emotion-23"
                       >
                         <h3
-                          class="emotion-26"
+                          class="emotion-24"
                         >
                           test headline 2
                         </h3>
@@ -673,44 +662,40 @@ exports[`Lead 1`] = `
               </div>
             </div>
             <div
-              class="emotion-16"
+              class="emotion-15"
               data-testid="titleVerticalCell-2"
             >
               <div
                 class="emotion-3"
               >
                 <div
-                  class="emotion-18"
+                  class="emotion-17"
                 >
-                  <div
+                  <picture
                     class="emotion-5"
                   >
-                    <picture
+                    <img
+                      alt=""
                       class="emotion-6"
-                    >
-                      <img
-                        alt=""
-                        class="emotion-7"
-                        src=""
-                      />
-                    </picture>
-                  </div>
+                      src=""
+                    />
+                  </picture>
                 </div>
                 <div
-                  class="emotion-8"
+                  class="emotion-7"
                 >
                   <div
-                    class="emotion-9"
+                    class="emotion-8"
                   >
                     <a
-                      class="nk-card-link emotion-10"
+                      class="nk-card-link emotion-9"
                       href="catagory-three/demo-3/test-headline-3"
                     >
                       <div
-                        class="emotion-25"
+                        class="emotion-23"
                       >
                         <h3
-                          class="emotion-26"
+                          class="emotion-24"
                         >
                           test headline 3
                         </h3>