@newskit-render/core 1.49.0 → 1.54.0

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

@@ -2,287 +2,51 @@
 
 exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  margin-bottom: 32px;
-  background: transparent;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  background-color: transparent;
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-1 {
-    padding: 12px 16px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-1 {
-    padding: 16px 24px;
-  }
-}
-
-.emotion-2 {
-  margin-right: 16px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 32px;
-    line-height: 36px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-4 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-4 svg {
-  fill: #0A0A0A;
-}
-
-@media screen {
-  .emotion-5 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-.emotion-6 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #0A0A0A;
-}
-
-.emotion-6 svg {
-  fill: #0A0A0A;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  margin-left: calc(-8px/2);
-  margin-right: calc(-8px/2);
-}
-
-.emotion-8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(8px/2);
-  margin-right: calc(8px/2);
-}
-
-.emotion-9 {
-  margin: 0;
-  font-family: "Poppins",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-9::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-9::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-.emotion-11 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  fill: #2E2E2E;
-  vertical-align: unset;
-  display: inline-block;
-  top: 1px;
-  position: relative;
-}
-
-.emotion-11.emotion-11 {
-  width: 24px;
-  height: 24px;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1hbzjqt"
     data-testid="SectionTitleBar"
   >
     <div
-      class="emotion-1"
+      class="css-16ev6l1"
     >
       <div
-        class="emotion-2"
+        class="css-1tdjaxu"
       >
         <section
-          class="emotion-3"
+          class="css-148i9wz"
         >
           <h3
-            class="nk-headline-heading emotion-4"
+            class="nk-headline-heading css-5gd387"
           >
             Section 1
           </h3>
         </section>
       </div>
       <div
-        class="emotion-5"
+        class="css-1h0bvuz"
       >
         <a
-          class="emotion-6"
+          class="css-1e3z2n"
           href="/section-one"
         >
           <span
-            class="emotion-7"
+            class="css-qg3ppo"
           >
             <span
-              class="emotion-8"
+              class="css-1yztr03"
             >
               <span
-                class="emotion-9"
+                class="css-1l5ehtz"
               >
                 Link
               </span>
             </span>
             <span
-              class="emotion-8"
+              class="css-1yztr03"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-11 emotion-12"
+                class="css-ns2ihd-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -307,287 +71,51 @@ exports[`SectionTitle SectionTitle alternative titlebar 1`] = `
 
 exports[`SectionTitle SectionTitle with title 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  margin-bottom: 32px;
-  background: #3358CC;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  background-color: transparent;
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-1 {
-    padding: 12px 16px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-1 {
-    padding: 16px 24px;
-  }
-}
-
-.emotion-2 {
-  margin-right: 16px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 32px;
-    line-height: 36px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-4 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #FFFFFF;
-}
-
-.emotion-4 svg {
-  fill: #FFFFFF;
-}
-
-@media screen {
-  .emotion-5 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-.emotion-6 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #FFFFFF;
-}
-
-.emotion-6 svg {
-  fill: #FFFFFF;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  margin-left: calc(-8px/2);
-  margin-right: calc(-8px/2);
-}
-
-.emotion-8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(8px/2);
-  margin-right: calc(8px/2);
-}
-
-.emotion-9 {
-  margin: 0;
-  font-family: "Poppins",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-9::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-9::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-.emotion-11 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  fill: #2E2E2E;
-  vertical-align: unset;
-  display: inline-block;
-  top: 1px;
-  position: relative;
-}
-
-.emotion-11.emotion-11 {
-  width: 24px;
-  height: 24px;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1k1zs74"
     data-testid="SectionTitleBar"
   >
     <div
-      class="emotion-1"
+      class="css-16ev6l1"
     >
       <div
-        class="emotion-2"
+        class="css-1tdjaxu"
       >
         <section
-          class="emotion-3"
+          class="css-148i9wz"
         >
           <h3
-            class="nk-headline-heading emotion-4"
+            class="nk-headline-heading css-4eltk5"
           >
             Section 1
           </h3>
         </section>
       </div>
       <div
-        class="emotion-5"
+        class="css-1h0bvuz"
       >
         <a
-          class="emotion-6"
+          class="css-10qmydh"
           href="/section-one"
         >
           <span
-            class="emotion-7"
+            class="css-qg3ppo"
           >
             <span
-              class="emotion-8"
+              class="css-1yztr03"
             >
               <span
-                class="emotion-9"
+                class="css-1l5ehtz"
               >
                 Link
               </span>
             </span>
             <span
-              class="emotion-8"
+              class="css-1yztr03"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-11 emotion-12"
+                class="css-ns2ihd-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -612,313 +140,61 @@ exports[`SectionTitle SectionTitle with title 1`] = `
 
 exports[`SectionTitle SectionTitle without extra space 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  margin-bottom: 32px;
-}
-
-.emotion-1 {
-  border-style: solid;
-  border-color: #DEDEDE;
-  border-width: 1px;
-  border-width: 0px;
-  margin: 0;
-  border-top-width: 1px;
-  width: 100%;
-  background: transparent;
-  border-color: transparent;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1r3hoet"
     data-testid="addTopSpace"
   >
     <hr
       aria-hidden="true"
-      class="emotion-1"
+      class="css-90chx2"
       data-testid="divider"
     />
   </div>
-  .emotion-0 {
-  margin-bottom: 32px;
-  background: #3358CC;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  background-color: transparent;
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-1 {
-    padding: 12px 16px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-1 {
-    padding: 16px 24px;
-  }
-}
-
-.emotion-2 {
-  margin-right: 16px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 32px;
-    line-height: 36px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-3 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-3::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-3::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-4 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #FFFFFF;
-}
-
-.emotion-4 svg {
-  fill: #FFFFFF;
-}
-
-@media screen {
-  .emotion-5 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-5 {
-    display: block;
-  }
-}
-
-.emotion-6 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #FFFFFF;
-}
-
-.emotion-6 svg {
-  fill: #FFFFFF;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  margin-left: calc(-8px/2);
-  margin-right: calc(-8px/2);
-}
-
-.emotion-8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(8px/2);
-  margin-right: calc(8px/2);
-}
-
-.emotion-9 {
-  margin: 0;
-  font-family: "Poppins",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-9::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-9::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-.emotion-11 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  fill: #2E2E2E;
-  vertical-align: unset;
-  display: inline-block;
-  top: 1px;
-  position: relative;
-}
-
-.emotion-11.emotion-11 {
-  width: 24px;
-  height: 24px;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1k1zs74"
     data-testid="SectionTitleBar"
   >
     <div
-      class="emotion-1"
+      class="css-16ev6l1"
     >
       <div
-        class="emotion-2"
+        class="css-1tdjaxu"
       >
         <section
-          class="emotion-3"
+          class="css-148i9wz"
         >
           <h3
-            class="nk-headline-heading emotion-4"
+            class="nk-headline-heading css-4eltk5"
           >
             Section 1
           </h3>
         </section>
       </div>
       <div
-        class="emotion-5"
+        class="css-1h0bvuz"
       >
         <a
-          class="emotion-6"
+          class="css-10qmydh"
           href="/section-one"
         >
           <span
-            class="emotion-7"
+            class="css-qg3ppo"
           >
             <span
-              class="emotion-8"
+              class="css-1yztr03"
             >
               <span
-                class="emotion-9"
+                class="css-1l5ehtz"
               >
                 Link
               </span>
             </span>
             <span
-              class="emotion-8"
+              class="css-1yztr03"
             >
               <svg
                 aria-hidden="true"
-                class="emotion-11 emotion-12"
+                class="css-ns2ihd-EmotionIconBase ex0cdmw0"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"