@guardian/interactive-component-library 0.4.3 → 0.4.5

package/dist/components/molecules/canvas-map/lib/renderers/MapRenderer.js

@@ -36,14 +36,13 @@ class MapRenderer {
       }
       viewState.projection = projection;
     };
-    const baseLayers = visibleLayers.filter((layer) => !layer.declutter);
-    for (const layer of baseLayers) {
-      renderLayer(layer);
-    }
     const declutterTree = new RBush();
-    const layersToDeclutter = [...visibleLayers].filter((layer) => !!layer.declutter).reverse();
-    for (const layer of layersToDeclutter) {
-      renderLayer(layer, declutterTree);
+    for (const layer of visibleLayers) {
+      if (layer.declutter) {
+        renderLayer(layer, declutterTree);
+      } else {
+        renderLayer(layer);
+      }
     }
     replaceChildren(this._element, mapElements);
   }

package/dist/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.js

@@ -43,10 +43,12 @@ class TextLayerRenderer {
         x: relativeX * viewPortSize[0],
         y: relativeY * viewPortSize[1]
       });
-      if (declutterTree.collides(bbox)) {
-        continue;
+      if (declutterTree) {
+        if (declutterTree.collides(bbox)) {
+          continue;
+        }
+        declutterTree.insert(bbox);
       }
-      declutterTree.insert(bbox);
       if (this.layer.drawCollisionBoxes) {
         const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
         textElements.push(collisionBoxDebugElement);

package/dist/components/molecules/option-picker/style.module.css.js

@@ -1,13 +1,13 @@
-const optionPicker = "_optionPicker_1b561_1";
-const title = "_title_1b561_13";
-const options = "_options_1b561_20";
-const option = "_option_1b561_1";
-const selected = "_selected_1b561_46";
-const optionIconContainer = "_optionIconContainer_1b561_55";
-const optionIcon = "_optionIcon_1b561_55";
-const optionTitle = "_optionTitle_1b561_67";
-const checkmark = "_checkmark_1b561_78";
-const checkmarkPath = "_checkmarkPath_1b561_82";
+const optionPicker = "_optionPicker_1c1rh_1";
+const title = "_title_1c1rh_13";
+const options = "_options_1c1rh_20";
+const option = "_option_1c1rh_1";
+const selected = "_selected_1c1rh_47";
+const optionIconContainer = "_optionIconContainer_1c1rh_56";
+const optionIcon = "_optionIcon_1c1rh_56";
+const optionTitle = "_optionTitle_1c1rh_68";
+const checkmark = "_checkmark_1c1rh_79";
+const checkmarkPath = "_checkmarkPath_1c1rh_83";
 const defaultStyles = {
   optionPicker,
   title,

package/dist/components/organisms/ticker/index.d.ts

@@ -1,5 +1,6 @@
-export function Ticker({ maxItems, onStateChange, children }: {
+export function Ticker({ maxItems, onStateChange, verticalAtMobile, children, }: {
     maxItems?: number;
     onStateChange: any;
+    verticalAtMobile?: boolean;
     children: any;
 }): import("preact").JSX.Element;

package/dist/components/organisms/ticker/index.js

@@ -1,19 +1,20 @@
 import { jsxs, jsx } from "preact/jsx-runtime";
 import { toChildArray } from "preact";
-import { useState, useMemo, useRef, useLayoutEffect } from "preact/hooks";
-import { Gradient } from "./gradient/index.js";
-import "../../particles/info-button/index.js";
-import "../../particles/relative-time-sentence/index.js";
-import { ArrowButton } from "../../particles/arrow-button/index.js";
-import { Button } from "../../particles/button/index.js";
+import { useState, useRef, useLayoutEffect, useMemo, useEffect, useCallback } from "preact/hooks";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import { TickerControlsDesktop } from "./lib/TickerControlsDesktop.js";
+import { TickerControlsMobileVertical } from "./lib/TickerControlsMobileVertical.js";
+import { getOffsetDistance } from "./lib/helpers/tickerHelper.js";
 import styles from "./style.module.scss.js";
-function Ticker({ maxItems = 20, onStateChange, children }) {
+function Ticker({
+  maxItems = 20,
+  onStateChange,
+  verticalAtMobile = false,
+  children
+}) {
   const [pageIndex, setPageIndex] = useState(0);
-  const [pageWidth, setPageWidth] = useState(0);
+  const [scrollElWidth, setScrollElWidth] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
-  const offsetWidth = useMemo(() => {
-    return -pageIndex * (pageWidth || 0);
-  }, [pageIndex, pageWidth]);
   const tickerRef = useRef();
   const tickerItemsRef = useRef();
   const tickerScrollRef = useRef();
@@ -21,20 +22,33 @@ function Ticker({ maxItems = 20, onStateChange, children }) {
   const [hideButtons, setHideButtons] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const childArray = toChildArray(children);
+  const containerSize = useContainerSize(tickerRef);
+  const mobLandscapeW = 480;
+  const containerWidth = containerSize ? containerSize.width : 600;
+  const isMobile = containerWidth < mobLandscapeW;
+  const pageWidthModifier = 0.75;
   useLayoutEffect(() => {
     const tickerItemsContainer = tickerItemsRef.current;
-    const pageWidth2 = tickerItemsContainer.clientWidth * 0.75;
-    setPageWidth(pageWidth2);
-    const numberOfPages2 = Math.ceil(
-      tickerScrollRef.current.scrollWidth / pageWidth2
-    );
+    const containerWidth2 = tickerItemsContainer.clientWidth * pageWidthModifier;
+    const tickerScrollEl = tickerScrollRef.current;
+    setScrollElWidth(tickerScrollEl.scrollWidth);
+    const numberOfPages2 = tickerScrollEl.scrollWidth / containerWidth2;
     setNumberOfPages(numberOfPages2);
   }, [childArray]);
-  useLayoutEffect(() => {
+  const offsetWidth = useMemo(() => {
+    let res = getOffsetDistance(
+      pageIndex,
+      numberOfPages,
+      scrollElWidth,
+      pageWidthModifier
+    );
+    return res;
+  }, [pageIndex, numberOfPages, scrollElWidth]);
+  useEffect(() => {
     const hideButtons2 = childArray.length < 4;
     setHideButtons(hideButtons2);
   }, [childArray]);
-  function toggleExpandedState() {
+  const toggleExpandedState = useCallback(() => {
     if (expanded) {
       tickerRef.current.scrollIntoView({ behavior: "smooth", alignToTop: true });
     }
@@ -43,54 +57,44 @@ function Ticker({ maxItems = 20, onStateChange, children }) {
       if (onStateChange) onStateChange({ expanded: newState });
       return newState;
     });
-  }
+  }, [expanded, onStateChange]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: tickerRef,
-      className: styles.ticker,
+      className: verticalAtMobile ? styles.tickerVertical : styles.ticker,
       style: `--ticker-offset: ${offsetWidth}px;`,
       "data-expanded": expanded,
       children: [
-        /* @__PURE__ */ jsx("div", { ref: tickerItemsRef, className: styles.tickerItems, children: /* @__PURE__ */ jsx("div", { ref: tickerScrollRef, className: styles.tickerScroll, children: childArray.map((child, index) => {
-          var _a;
-          return /* @__PURE__ */ jsx("div", { className: styles.tickerItem, children: child }, ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.id) ?? index);
-        }) }) }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { ref: tickerItemsRef, className: styles.tickerItems, children: /* @__PURE__ */ jsx(
           "div",
           {
-            ref: controlsRef,
-            className: styles.controls,
-            style: hideButtons && { display: "none" },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
-              /* @__PURE__ */ jsxs("div", { className: styles.buttons, children: [
-                /* @__PURE__ */ jsx(
-                  ArrowButton,
-                  {
-                    onClick: () => setPageIndex((d) => d + 1),
-                    disabled: pageIndex >= numberOfPages - 2
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ArrowButton,
-                  {
-                    direction: "left",
-                    onClick: () => setPageIndex((d) => d - 1),
-                    disabled: pageIndex <= 0
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.button, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "regular",
-                  styles: { buttonInner: styles.buttonInner },
-                  onClick: toggleExpandedState,
-                  children: expanded ? "Show fewer" : `Show ${maxItems} most recent`
-                }
-              ) })
-            ]
+            ref: tickerScrollRef,
+            className: verticalAtMobile ? styles.tickerScrollVertical : styles.tickerScroll,
+            children: childArray.map((child, index) => {
+              var _a;
+              return /* @__PURE__ */ jsx("div", { className: styles.tickerItem, children: child }, ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.id) ?? index);
+            })
+          }
+        ) }),
+        isMobile && !verticalAtMobile && /* @__PURE__ */ jsx("div", { className: styles.gradientHorizontal }),
+        isMobile && verticalAtMobile && /* @__PURE__ */ jsx(
+          TickerControlsMobileVertical,
+          {
+            hideButtons,
+            controlsRef,
+            toggleExpandedState,
+            buttonText: expanded ? "Show fewer" : `Show ${maxItems} most recent`
+          }
+        ),
+        !isMobile && /* @__PURE__ */ jsx(
+          TickerControlsDesktop,
+          {
+            hideButtons,
+            controlsRef,
+            setPageIndex,
+            pageIndex,
+            numberOfPages
           }
         )
       ]

package/dist/components/organisms/ticker/lib/TickerControlsDesktop.d.ts

@@ -0,0 +1,7 @@
+export function TickerControlsDesktop({ hideButtons, controlsRef, setPageIndex, pageIndex, numberOfPages, }: {
+    hideButtons: any;
+    controlsRef: any;
+    setPageIndex: any;
+    pageIndex: any;
+    numberOfPages: any;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker/lib/TickerControlsDesktop.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { Gradient } from "../gradient/index.js";
+import "preact/hooks";
+import "../../../particles/info-button/index.js";
+import "../../../particles/relative-time-sentence/index.js";
+import { ArrowButton } from "../../../particles/arrow-button/index.js";
+import styles from "../style.module.scss.js";
+const TickerControlsDesktop = ({
+  hideButtons,
+  controlsRef,
+  setPageIndex,
+  pageIndex,
+  numberOfPages
+}) => {
+  const getDisabled = (indx, numPages) => {
+    if (indx === 0 && numPages > 1) {
+      return false;
+    }
+    return indx >= Math.floor(numPages) - 1;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: controlsRef,
+      className: styles.controls,
+      style: hideButtons && { display: "none" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.buttons, children: [
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              onClick: () => setPageIndex((d) => d + 1),
+              disabled: getDisabled(pageIndex, numberOfPages)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              direction: "left",
+              onClick: () => setPageIndex((d) => d - 1),
+              disabled: pageIndex <= 0
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  TickerControlsDesktop
+};

package/dist/components/organisms/ticker/lib/TickerControlsMobileVertical.d.ts

@@ -0,0 +1,6 @@
+export function TickerControlsMobileVertical({ hideButtons, controlsRef, toggleExpandedState, buttonText, }: {
+    hideButtons: any;
+    controlsRef: any;
+    toggleExpandedState: any;
+    buttonText: any;
+}): import("preact").JSX.Element;

package/dist/components/organisms/ticker/lib/TickerControlsMobileVertical.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { Gradient } from "../gradient/index.js";
+import "preact/hooks";
+import "../../../particles/info-button/index.js";
+import "../../../particles/relative-time-sentence/index.js";
+import { Button } from "../../../particles/button/index.js";
+import styles from "../style.module.scss.js";
+const TickerControlsMobileVertical = ({
+  hideButtons,
+  controlsRef,
+  toggleExpandedState,
+  buttonText
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: controlsRef,
+      className: styles.controls,
+      style: hideButtons && { display: "none" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+        /* @__PURE__ */ jsx("div", { className: styles.button, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "regular",
+            styles: { buttonInner: styles.buttonInner },
+            onClick: toggleExpandedState,
+            children: buttonText
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  TickerControlsMobileVertical
+};

package/dist/components/organisms/ticker/lib/helpers/tickerHelper.d.ts

@@ -0,0 +1 @@
+export function getOffsetDistance(pageIndex: any, numberOfPages: any, scrollElWidth: any, pageWidthModifier: any): number;

package/dist/components/organisms/ticker/lib/helpers/tickerHelper.js

@@ -0,0 +1,17 @@
+const getOffsetDistance = (pageIndex, numberOfPages, scrollElWidth, pageWidthModifier) => {
+  const onlyOnePush = numberOfPages > 1 && numberOfPages <= 2;
+  const defaultPushDistance = onlyOnePush ? scrollElWidth / numberOfPages * pageWidthModifier : scrollElWidth / Math.floor(numberOfPages);
+  const finalPushDistance = defaultPushDistance * (numberOfPages % 1);
+  if (pageIndex === 0) {
+    return 0;
+  } else if (pageIndex === 1 && onlyOnePush) {
+    return -finalPushDistance;
+  } else if (pageIndex === Math.floor(numberOfPages) - 1) {
+    return -pageIndex * defaultPushDistance + finalPushDistance;
+  } else if (pageIndex < Math.floor(numberOfPages)) {
+    return -pageIndex * defaultPushDistance;
+  }
+};
+export {
+  getOffsetDistance
+};

package/dist/components/organisms/ticker/style.module.scss.js

@@ -1,19 +1,25 @@
-const ticker = "_ticker_15ezr_9";
-const tickerItems = "_tickerItems_15ezr_21";
-const tickerScroll = "_tickerScroll_15ezr_26";
-const tickerItem = "_tickerItem_15ezr_21";
-const controls = "_controls_15ezr_48";
-const gradient = "_gradient_15ezr_63";
-const buttons = "_buttons_15ezr_75";
-const button = "_button_15ezr_75";
-const buttonInner = "_buttonInner_15ezr_101";
+const tickerVertical = "_tickerVertical_ozku7_9";
+const ticker = "_ticker_ozku7_9";
+const tickerItems = "_tickerItems_ozku7_27";
+const tickerScrollVertical = "_tickerScrollVertical_ozku7_32";
+const tickerScroll = "_tickerScroll_ozku7_32";
+const tickerItem = "_tickerItem_ozku7_27";
+const controls = "_controls_ozku7_75";
+const gradient = "_gradient_ozku7_90";
+const gradientHorizontal = "_gradientHorizontal_ozku7_102";
+const buttons = "_buttons_ozku7_116";
+const button = "_button_ozku7_116";
+const buttonInner = "_buttonInner_ozku7_142";
 const styles = {
+  tickerVertical,
   ticker,
   tickerItems,
+  tickerScrollVertical,
   tickerScroll,
   tickerItem,
   controls,
   gradient,
+  gradientHorizontal,
   buttons,
   button,
   buttonInner
@@ -25,8 +31,11 @@ export {
   controls,
   styles as default,
   gradient,
+  gradientHorizontal,
   ticker,
   tickerItem,
   tickerItems,
-  tickerScroll
+  tickerScroll,
+  tickerScrollVertical,
+  tickerVertical
 };

package/dist/style.css

@@ -3009,7 +3009,7 @@ body.android {
   cursor: auto;
   background-color: var(--tertiary-bg-color);
 }
-._optionPicker_1b561_1 {
+._optionPicker_1c1rh_1 {
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -3021,31 +3021,32 @@ body.android {
   row-gap: 4px;
 }
 
-._title_1b561_13 {
+._title_1c1rh_13 {
   color: var(--secondary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   line-height: var(--sans-line-height);
 }
 
-._options_1b561_20 {
+._options_1c1rh_20 {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
   gap: var(--space-2);
 }
 
-._options_1b561_20.vertical {
+._options_1c1rh_20.vertical {
   flex-direction: column;
 }
 
-._option_1b561_1 {
+._option_1c1rh_1 {
+  flex: 1;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-2);
   min-height: 70px;
-  max-width: 124px;
 
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -3054,16 +3055,16 @@ body.android {
   background-color: var(--primary-bg-color);
 }
 
-._option_1b561_1._selected_1b561_46 {
+._option_1c1rh_1._selected_1c1rh_47 {
   border: 1px solid var(--primary-text-color);
 }
 
-._option_1b561_1:hover:enabled {
+._option_1c1rh_1:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._optionIconContainer_1b561_55 {
+._optionIconContainer_1c1rh_56 {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -3071,26 +3072,26 @@ body.android {
   gap: var(--space-1);
 }
 
-._optionIcon_1b561_55 {
+._optionIcon_1c1rh_56 {
   width: 100%;
 }
 
-._optionTitle_1b561_67 {
+._optionTitle_1c1rh_68 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   line-height: var(--sans-line-height);
 }
 
-._option_1b561_1._selected_1b561_46 ._optionTitle_1b561_67 {
+._option_1c1rh_1._selected_1c1rh_47 ._optionTitle_1c1rh_68 {
   font-weight: 700;
 }
 
-._checkmark_1b561_78 {
+._checkmark_1c1rh_79 {
   width: 11px;
 }
 
-._checkmarkPath_1b561_82 {
+._checkmarkPath_1c1rh_83 {
   fill: var(--primary-text-color);
 }
 body {
@@ -3199,24 +3200,30 @@ body.android {
   --top-inset: 58px;
 }
 
-._ticker_15ezr_9 {
+._tickerVertical_ozku7_9 {
   position: relative;
   padding-bottom: 44px;
   --ticker-item-width: 100%;
 }
 @media (min-width: 30em) {
-  ._ticker_15ezr_9 {
-    --ticker-item-width: 200px;
+  ._tickerVertical_ozku7_9 {
+    --ticker-item-width: auto;
     padding: 0;
   }
 }
 
-._tickerItems_15ezr_21 {
+._ticker_ozku7_9 {
+  position: relative;
+  --ticker-item-width: 200px;
+  padding: 0;
+}
+
+._tickerItems_ozku7_27 {
   width: 100%;
   overflow: clip;
 }
 
-._tickerScroll_15ezr_26 {
+._tickerScrollVertical_ozku7_32 {
   display: flex;
   flex-direction: column;
   row-gap: var(--space-2);
@@ -3225,7 +3232,7 @@ body.android {
   overflow: visible;
 }
 @media (min-width: 30em) {
-  ._tickerScroll_15ezr_26 {
+  ._tickerScrollVertical_ozku7_32 {
     flex-direction: row;
     column-gap: var(--space-2);
     transform: translateX(var(--ticker-offset));
@@ -3233,19 +3240,40 @@ body.android {
   }
 }
 
-._tickerItem_15ezr_21 {
+._tickerScroll_ozku7_32 {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  scrollbar-width: none;
+  overflow-x: scroll;
+  column-gap: var(--space-2);
+  transform: translateX(var(--ticker-offset));
+  transition: transform 0.5s ease-in-out;
+  width: auto;
+  padding-right: 50px;
+}
+._tickerScroll_ozku7_32:-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+@media (min-width: 30em) {
+  ._tickerScroll_ozku7_32 {
+    width: fit-content;
+  }
+}
+
+._tickerItem_ozku7_27 {
   width: var(--ticker-item-width);
   flex-shrink: 0;
 }
 
-._controls_15ezr_48 {
+._controls_ozku7_75 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 130px;
 }
 @media (min-width: 30em) {
-  ._controls_15ezr_48 {
+  ._controls_ozku7_75 {
     top: 0;
     right: 0;
     width: 86px;
@@ -3253,23 +3281,37 @@ body.android {
   }
 }
 
-._gradient_15ezr_63 {
+._gradient_ozku7_90 {
   width: 100%;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._gradient_15ezr_63 {
+  ._gradient_ozku7_90 {
     width: auto;
     height: 100%;
     right: 0;
   }
 }
 
-._buttons_15ezr_75 {
+._gradientHorizontal_ozku7_102 {
+  width: 60px;
+  height: 100%;
+  right: 0;
+  top: 0;
+  position: absolute;
+  background: linear-gradient(to right, transparent 0%, var(--tertiary-bg-color) 80%, var(--tertiary-bg-color));
+}
+@media (min-width: 30em) {
+  ._gradientHorizontal_ozku7_102 {
+    width: auto;
+  }
+}
+
+._buttons_ozku7_116 {
   display: none;
 }
 @media (min-width: 30em) {
-  ._buttons_15ezr_75 {
+  ._buttons_ozku7_116 {
     position: absolute;
     top: 0;
     right: var(--space-5);
@@ -3280,36 +3322,36 @@ body.android {
   }
 }
 
-._button_15ezr_75 {
+._button_ozku7_116 {
   min-height: 40px;
   background-color: var(--tertiary-bg-color);
   padding-bottom: 20px;
 }
 @media (min-width: 30em) {
-  ._button_15ezr_75 {
+  ._button_ozku7_116 {
     display: none;
   }
 }
 
-._buttonInner_15ezr_101 {
+._buttonInner_ozku7_142 {
   background-color: var(--tertiary-bg-color);
 }
 
-._ticker_15ezr_9[data-expanded=true] {
+._tickerVertical_ozku7_9[data-expanded=true] {
   padding-bottom: 0;
 }
 
-._ticker_15ezr_9[data-expanded=true] ._tickerScroll_15ezr_26 {
+._tickerVertical_ozku7_9[data-expanded=true] ._tickerScrollVertical_ozku7_32 {
   max-height: fit-content;
   margin-bottom: -40px;
 }
 
-._ticker_15ezr_9[data-expanded=true] ._controls_15ezr_48 {
+._tickerVertical_ozku7_9[data-expanded=true] ._controls_ozku7_75 {
   position: sticky;
   margin-top: -40px;
 }
 
-._ticker_15ezr_9[data-expanded=true] ._button_15ezr_75 {
+._tickerVertical_ozku7_9[data-expanded=true] ._button_ozku7_116 {
   position: absolute;
   width: 100%;
   left: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.4.3",
+  "version": "0.4.5",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",