@guardian/interactive-component-library 0.1.0-alpha.41 → 0.1.0-alpha.42

package/dist/style.css

@@ -1921,49 +1921,79 @@ body.android {
   --top-inset: 58px;
 }
 
-._borderTop_gph7y_9::before {
+._borderTop_1xpz0_9 {
   border-top: 1px solid var(--border-divider-color);
+  transform: translate(-10px);
+  width: calc(100% + 20px);
+}
+@media (min-width: 30em) {
+  ._borderTop_1xpz0_9 {
+    transform: translate(-20px);
+    width: calc(100% + 40px);
+  }
+}
+@media (min-width: 46.25em) {
+  ._borderTop_1xpz0_9 {
+    width: calc(100% + 40px);
+  }
+}
+@media (min-width: 71.25em) {
+  ._borderTop_1xpz0_9 {
+    transform: translate(-180px);
+    width: calc(100% + 197px);
+    background-color: transparent;
+  }
+}
+@media (min-width: 81.25em) {
+  ._borderTop_1xpz0_9 {
+    transform: translate(-260px);
+    width: calc(100% + 279px);
+  }
+}
+
+._section_1xpz0_39._fullWidth_1xpz0_39 ._borderTop_1xpz0_9 {
+  transform: none;
+  width: calc(100% - 1px);
 }
 
-._section_gph7y_13 {
+._section_1xpz0_39 {
   position: relative;
   z-index: 0;
-  margin-bottom: var(--space-8);
+  padding-bottom: var(--space-8);
 }
 
-._section_gph7y_13._fullWidth_gph7y_19 {
+._section_1xpz0_39._fullWidth_1xpz0_39 {
   transform: translate(-10px);
   width: calc(100% + 20px);
   margin: 0;
   padding: 0;
-  background-color: var(--background-color);
 }
 @media (min-width: 30em) {
-  ._section_gph7y_13._fullWidth_gph7y_19 {
+  ._section_1xpz0_39._fullWidth_1xpz0_39 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_gph7y_13._fullWidth_gph7y_19 {
+  ._section_1xpz0_39._fullWidth_1xpz0_39 {
     transform: translate(-20px);
-    width: calc(100% + 60px);
+    width: calc(100% + 40px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_gph7y_13._fullWidth_gph7y_19 {
+  ._section_1xpz0_39._fullWidth_1xpz0_39 {
     transform: translate(-180px);
-    width: calc(100% + 200px);
+    width: calc(100% + 197px);
   }
 }
 @media (min-width: 81.25em) {
-  ._section_gph7y_13._fullWidth_gph7y_19 {
+  ._section_1xpz0_39._fullWidth_1xpz0_39 {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_gph7y_13::before {
+._section_1xpz0_39::before {
   display: block;
   content: "";
   position: absolute;
@@ -1971,50 +2001,75 @@ body.android {
   left: 0;
   transform: translate(-10px);
   width: calc(100% + 20px);
-  height: calc(100% + var(--space-8));
-  background-color: var(--background-color);
+  height: 100%;
   z-index: -1;
+  background-color: var(--background-color);
 }
 @media (min-width: 30em) {
-  ._section_gph7y_13::before {
+  ._section_1xpz0_39::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_gph7y_13::before {
-    width: calc(100% + 60px);
+  ._section_1xpz0_39::before {
+    width: calc(100% + 40px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_gph7y_13::before {
-    transform: translate(-180px);
-    width: calc(100% + 200px);
-    background-color: transparent;
+  ._section_1xpz0_39::before {
+    transform: translateX(-9px);
+    width: calc(100% + 26px);
   }
 }
 @media (min-width: 81.25em) {
-  ._section_gph7y_13::before {
-    transform: translate(-260px);
-    width: calc(100% + 280px);
+  ._section_1xpz0_39::before {
+    width: calc(100% + 27px);
   }
 }
 
-._section_gph7y_13._fullWidth_gph7y_19::before {
+._section_1xpz0_39._fullWidth_1xpz0_39::before {
   transform: none;
-  width: 100%;
-  height: 1px;
-  background-color: transparent;
+  width: calc(100% - 3px);
+  height: 100%;
+  left: 1px;
+  background-color: var(--background-color);
+  transform: translate(-10px);
+  width: calc(100% + 20px);
+}
+@media (min-width: 30em) {
+  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+    transform: translate(-20px);
+    width: calc(100% + 40px);
+  }
+}
+@media (min-width: 46.25em) {
+  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+    width: 100%;
+    transform: translateX(-1px);
+  }
+}
+@media (min-width: 71.25em) {
+  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+    transform: translateX(-1px);
+    width: 100%;
+  }
+}
+@media (min-width: 81.25em) {
+  ._section_1xpz0_39._fullWidth_1xpz0_39::before {
+    transform: none;
+    width: calc(100% - 3px);
+  }
 }
 
-._header_gph7y_95 {
+._header_1xpz0_150 {
   color: var(--primary-text-color);
   padding-top: var(--space-2);
   margin-bottom: var(--space-5);
 }
 
 @media (min-width: 71.25em) {
-  body:not(.ios, .android) ._header_gph7y_95 {
+  body:not(.ios, .android) ._header_1xpz0_150 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -2022,13 +2077,13 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_gph7y_95 {
+  body:not(.ios, .android) ._header_1xpz0_150 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-body ._header_gph7y_95._fullWidth_gph7y_19 {
+body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   position: absolute;
   top: 0;
   left: 0;
@@ -2039,39 +2094,28 @@ body ._header_gph7y_95._fullWidth_gph7y_19 {
   max-width: 100%;
 }
 @media (min-width: 71.25em) {
-  body ._header_gph7y_95._fullWidth_gph7y_19 {
+  body ._header_1xpz0_150._fullWidth_1xpz0_39 {
     margin-bottom: 0;
   }
 }
 
-._content_gph7y_132 {
+._content_1xpz0_187 {
   position: relative;
   padding-top: 0;
   z-index: 0;
   color: var(--primary-text-color);
 }
 @media (min-width: 71.25em) {
-  ._content_gph7y_132 {
+  ._content_1xpz0_187 {
     padding-top: var(--space-2);
   }
-  ._content_gph7y_132::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-9px, 1px);
-    width: calc(100% + 29px);
-    height: calc(100% + var(--space-8));
-    background-color: var(--background-color);
-    z-index: -2;
-  }
 }
 
-._content_gph7y_132._fullWidth_gph7y_19 {
+._content_1xpz0_187._fullWidth_1xpz0_39 {
   padding-top: 0;
 }
 
-._content_gph7y_132._fullWidth_gph7y_19::before {
+._content_1xpz0_187._fullWidth_1xpz0_39::before {
   display: none;
 }._text_lo5h3_1 {
     font-family: var(--text-sans);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.41",
+  "version": "v0.1.0-alpha.42",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",