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

package/dist/interactive-component-library.js

@@ -111,12 +111,12 @@ function LargeChevron({
 const container$7 = "_container_jzalm_1";
 const dot = "_dot_jzalm_6";
 const circle$2 = "_circle_jzalm_13";
-const text$3 = "_text_jzalm_17";
+const text$2 = "_text_jzalm_17";
 const defaultStyles$v = {
   container: container$7,
   dot,
   circle: circle$2,
-  text: text$3
+  text: text$2
 };
 const DOT_TYPE = {
   round: "round",
@@ -508,9 +508,9 @@ const CircleIcon = ({
     })
   });
 };
-const text$2 = "_text_1okyv_1";
+const dateStampText = "_dateStampText_wczs5_1";
 const defaultStyles$p = {
-  text: text$2
+  dateStampText
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -889,7 +889,7 @@ const RelativeTimeSentence = ({
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
-    className: styles2.text,
+    className: styles2.dateStampText,
     children: timeSince
   });
 };
@@ -1877,11 +1877,11 @@ const ToplineResult = forwardRef(({
     })]
   });
 });
-const borderTop = "_borderTop_gph7y_9";
-const section = "_section_gph7y_13";
-const fullWidth = "_fullWidth_gph7y_19";
-const header = "_header_gph7y_95";
-const content = "_content_gph7y_132";
+const borderTop = "_borderTop_1xpz0_9";
+const section = "_section_1xpz0_39";
+const fullWidth = "_fullWidth_1xpz0_39";
+const header = "_header_1xpz0_150";
+const content = "_content_1xpz0_187";
 const defaultStyles$9 = {
   borderTop,
   section,
@@ -1894,6 +1894,7 @@ const SectionLayout = {
   fullWidth: "fullWidth"
 };
 const PageSection = forwardRef(({
+  id: id2,
   children,
   layout = SectionLayout.default,
   styles: styles2,
@@ -1910,13 +1911,16 @@ const PageSection = forwardRef(({
     setMinHeight(headerElement.offsetHeight);
   }, [children]);
   return jsxs("section", {
+    id: id2,
     ref,
-    className: [styles2.section, styles2[layout], borderTop2 && styles2.borderTop].join(" "),
+    className: [styles2.section, styles2[layout]].join(" "),
     style: {
       "--background-color": backgroundColor,
       minHeight
     },
-    children: [jsx("div", {
+    children: [borderTop2 && jsx("div", {
+      className: styles2.borderTop
+    }), jsx("div", {
       className: [styles2.header, styles2[layout]].join(" "),
       ref: headerRef,
       children: children.header
@@ -7635,7 +7639,7 @@ function Ticker({
   const offsetWidth = useMemo(() => {
     return -pageIndex * (pageWidth || 0);
   }, [pageIndex, pageWidth]);
-  const windowSize = useWindowSize();
+  useWindowSize();
   const tickerRef = useRef();
   const tickerItemsRef = useRef();
   const tickerScrollRef = useRef();
@@ -7651,10 +7655,9 @@ function Ticker({
     setNumberOfPages(numberOfPages2);
   }, []);
   useLayoutEffect(() => {
-    const tickerItemsContainer = tickerItemsRef.current;
-    const hideButtons2 = windowSize.width >= 480 ? tickerScrollRef.current.scrollWidth <= tickerItemsContainer.clientWidth : childArray.length < 3;
+    const hideButtons2 = childArray.length < 4;
     setHideButtons(hideButtons2);
-  }, [windowSize, setHideButtons]);
+  }, [childArray]);
   function toggleExpandedState() {
     setExpanded((expanded2) => {
       const newState = !expanded2;