@newskit-render/core 1.50.1 → 1.54.0

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

@@ -2,542 +2,48 @@
 
 exports[`Lead should render Lead 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: grid;
-  -webkit-column-gap: 24px;
-  column-gap: 24px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-0 {
-    row-gap: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-0 {
-    row-gap: 32px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-0 {
-    row-gap: 0;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-0 {
-    grid-template-columns: 2fr 1fr;
-  }
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #2E2E2E;
-  background-color: #FFFFFF;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-3 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-3 {
-    margin-bottom: 20px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-3 {
-    margin-bottom: 24px;
-  }
-}
-
-.emotion-4 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 0;
-  height: auto;
-  width: 100%;
-  border-radius: 0;
-}
-
-.emotion-5 {
-  opacity: 1;
-  display: block;
-  border-radius: inherit;
-  height: auto;
-  width: 100%;
-  -webkit-animation: fadeIn 300ms;
-  animation: fadeIn 300ms;
-}
-
-.emotion-6 {
-  box-sizing: border-box;
-}
-
-.emotion-7 {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.emotion-7 a:not(.nk-card-link) {
-  z-index: 2;
-  position: relative;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-8 {
-    margin-bottom: 20px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-8 {
-    margin-bottom: 24px;
-  }
-}
-
-.emotion-9 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-}
-
-.emotion-9 .nk-headline-kicker {
-  color: #3358CC;
-}
-
-.emotion-9:hover:not(:disabled) .nk-headline-kicker {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-9:active:not(:disabled) .nk-headline-kicker {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-9:visited:not(:disabled) .nk-headline-kicker {
-  color: #5E44E4;
-}
-
-.emotion-9 .nk-headline-heading {
-  color: #2E2E2E;
-}
-
-.emotion-9:hover:not(:disabled) .nk-headline-heading {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-9:active:not(:disabled) .nk-headline-heading {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-9:visited:not(:disabled) .nk-headline-heading {
-  color: #5E44E4;
-}
-
-.emotion-9:before {
-  content: '';
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 40px;
-    line-height: 45px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-11 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #2E2E2E;
-}
-
-.emotion-11:hover:not(:disabled) {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-11:active:not(:disabled) {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-11:visited:not(:disabled) {
-  color: #5E44E4;
-}
-
-.emotion-12 {
-  display: grid;
-  height: 100%;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-12 {
-    row-gap: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-12 {
-    row-gap: 32px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-12 {
-    row-gap: 24px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-12 {
-    -webkit-column-gap: 20px;
-    column-gap: 20px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-12 {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-12 {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-12 {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-12 {
-    -webkit-box-pack: stretch;
-    -ms-flex-pack: stretch;
-    -webkit-justify-content: stretch;
-    justify-content: stretch;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-12 {
-    -webkit-align-content: space-between;
-    -ms-flex-line-pack: space-between;
-    align-content: space-between;
-  }
-}
-
-.emotion-14 {
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #2E2E2E;
-  background-color: #FFFFFF;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: rowfalse;
-  -ms-flex-direction: rowfalse;
-  flex-direction: rowfalse;
-}
-
-.emotion-15 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-@media screen and (max-width: 479px) {
-  .emotion-15 {
-    margin-right: 16px;
-  }
-}
-
-@media screen and (min-width: 480px) and (max-width: 767px) {
-  .emotion-15 {
-    margin-right: 16px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-15 {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-15 {
-    margin-right: 24px;
-  }
-}
-
-.emotion-18 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-19 {
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding: 0;
-}
-
-.emotion-19 a:not(.nk-card-link) {
-  z-index: 2;
-  position: relative;
-}
-
-.emotion-20 {
-  margin-bottom: 8px;
-}
-
-@media screen and (max-width: 479px) {
-  .emotion-22 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-22::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-22::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 480px) and (max-width: 767px) {
-  .emotion-22 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-22::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-22::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-22 {
-    font-family: "Bitter",serif;
-    font-size: 22px;
-    line-height: 24.75px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-22::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-22::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-22 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-22::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-22::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1u38jm6"
     data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
   >
     <div
-      class="emotion-1"
+      class="css-151qm6o"
       data-testid="featureVerticalCell"
     >
       <div
-        class="emotion-2"
+        class="css-syq769"
       >
         <div
-          class="emotion-3"
+          class="css-1ku19cs"
         >
           <picture
-            class="emotion-4"
+            class="css-iq6vim"
           >
             <img
               alt=""
-              class="emotion-5"
+              class="css-ssxt4f"
               src=""
             />
           </picture>
         </div>
         <div
-          class="emotion-6"
+          class="css-1shocxe"
         >
           <div
-            class="emotion-7"
+            class="css-1a2irou"
           >
             <div
-              class="emotion-8"
+              class="css-1hcm6l"
             >
               <a
-                class="nk-card-link emotion-9"
+                class="nk-card-link css-1cq1vxv"
                 href="catagory-one/demo-1/test-headline"
               >
                 <section
-                  class="emotion-10"
+                  class="css-kxmtg8"
                 >
                   <h3
-                    class="nk-headline-heading emotion-11"
+                    class="nk-headline-heading css-10swdqn"
                   >
                     test headline
                   </h3>
@@ -549,46 +55,46 @@ exports[`Lead should render Lead 1`] = `
       </div>
     </div>
     <div
-      class="emotion-12"
+      class="css-7644f"
     >
       <div
-        class="emotion-1"
+        class="css-151qm6o"
         data-testid="titleVerticalCell-0"
       >
         <div
-          class="emotion-14"
+          class="css-51dsvu"
         >
           <div
-            class="emotion-15"
+            class="css-fv6m0t"
           >
             <picture
-              class="emotion-4"
+              class="css-iq6vim"
             >
               <img
                 alt=""
-                class="emotion-5"
+                class="css-ssxt4f"
                 src=""
               />
             </picture>
           </div>
           <div
-            class="emotion-18"
+            class="css-1r2lt0d"
           >
             <div
-              class="emotion-19"
+              class="css-bw3bp5"
             >
               <div
-                class="emotion-20"
+                class="css-vj2a37"
               >
                 <a
-                  class="nk-card-link emotion-9"
+                  class="nk-card-link css-1cq1vxv"
                   href="catagory-two/demo-2/test-headline-2"
                 >
                   <section
-                    class="emotion-22"
+                    class="css-75k513"
                   >
                     <h3
-                      class="nk-headline-heading emotion-11"
+                      class="nk-headline-heading css-10swdqn"
                     >
                       test headline 2
                     </h3>
@@ -600,43 +106,43 @@ exports[`Lead should render Lead 1`] = `
         </div>
       </div>
       <div
-        class="emotion-1"
+        class="css-151qm6o"
         data-testid="titleVerticalCell-1"
       >
         <div
-          class="emotion-14"
+          class="css-51dsvu"
         >
           <div
-            class="emotion-15"
+            class="css-fv6m0t"
           >
             <picture
-              class="emotion-4"
+              class="css-iq6vim"
             >
               <img
                 alt=""
-                class="emotion-5"
+                class="css-ssxt4f"
                 src=""
               />
             </picture>
           </div>
           <div
-            class="emotion-18"
+            class="css-1r2lt0d"
           >
             <div
-              class="emotion-19"
+              class="css-bw3bp5"
             >
               <div
-                class="emotion-20"
+                class="css-vj2a37"
               >
                 <a
-                  class="nk-card-link emotion-9"
+                  class="nk-card-link css-1cq1vxv"
                   href="catagory-three/demo-3/test-headline-3"
                 >
                   <section
-                    class="emotion-22"
+                    class="css-75k513"
                   >
                     <h3
-                      class="nk-headline-heading emotion-11"
+                      class="nk-headline-heading css-10swdqn"
                     >
                       test headline 3
                     </h3>