@skyscanner/backpack-web 38.0.1 → 38.1.1

package/bpk-component-card-list/src/BpkCardList.js

@@ -25,7 +25,8 @@ import { ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES, LAYOUTS } from "./comm
 import STYLES from "./BpkCardList.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const DEFAULT_ITEMS = 3;
+const DEFAULT_ITEMS_DESKTOP = 3;
+const DEFAULT_ITEMS_MOBILE = 2;
 const BpkCardList = props => {
   const {
     accessibilityLabels,
@@ -37,8 +38,8 @@ const BpkCardList = props => {
     chipGroup,
     description,
     expandText,
-    initiallyShownCardsDesktop = DEFAULT_ITEMS,
-    initiallyShownCardsMobile = DEFAULT_ITEMS,
+    initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
+    initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
     layoutDesktop,
     layoutMobile,
     onButtonClick,

package/bpk-component-card-list/src/BpkCardList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}.bpk-card-list--card-list{display:flex;flex-direction:column}
+.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}@media(max-width: 32rem){.bpk-card-list{gap:1rem}}.bpk-card-list--card-list{display:flex;flex-direction:column}

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -16,13 +16,15 @@
  * limitations under the License.
  */
 
-import { useRef, useState, useEffect, isValidElement, Children } from 'react';
+import { useRef, useState, useEffect, isValidElement, Children, useMemo } from 'react';
+import throttle from 'lodash/throttle';
 import { cssModules } from "../../../bpk-react-utils";
 import { RENDER_BUFFER_SIZE } from "./constants";
-import { lockScroll, setA11yTabIndex, useUpdateCurrentIndexByVisibility, useScrollToCard, useIntersectionObserver } from "./utils";
+import { lockScroll, setA11yTabIndex, useScrollToCard, useIntersectionObserver } from "./utils";
 import STYLES from "./BpkCardListCarousel.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const PAGINATION_INDICATOR_MAX_SHOWN_COUNT = 5;
 const BpkCardListCarousel = props => {
   const {
     carouselLabel = (initiallyShownCards, childrenLength) => `Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
@@ -39,7 +41,11 @@ const BpkCardListCarousel = props => {
   };
   const childrenLength = Children.count(children);
   const [root, setRoot] = useState(null);
+  const [, forceUpdate] = useState(0);
   const cardRefs = useRef([]);
+  const hasBeenVisibleRef = useRef(new Set());
+  const firstCardWidthRef = useRef(null);
+  const firstCardHeightRef = useRef(null);
   const [visibilityList, setVisibilityList] = useState(Array(childrenLength).fill(0));
   const stateScrollingLockRef = useRef(false);
   const openSetStateLockTimeoutRef = useRef(null);
@@ -47,6 +53,35 @@ const BpkCardListCarousel = props => {
     root,
     threshold: 0.5
   }, setVisibilityList);
+  useScrollToCard(currentIndex * initiallyShownCards, root, cardRefs, stateScrollingLockRef);
+
+  // Similar to Virtual Scrolling to improve performance
+  const firstVisibleIndex = Math.max(0, visibilityList.indexOf(1));
+  const lastVisibleIndex = firstVisibleIndex + initiallyShownCards - 1;
+  const dynamicRenderBufferSize = useMemo(() => {
+    if (childrenLength === 0 || initiallyShownCards === 0 || isMobile) return RENDER_BUFFER_SIZE;
+
+    // Calculate how many cards to render based on the number of initially shown cards and total children
+    const totalPages = Math.ceil(childrenLength / initiallyShownCards);
+    const shownIndicatorCount = Math.min(totalPages, PAGINATION_INDICATOR_MAX_SHOWN_COUNT);
+    return Math.max(RENDER_BUFFER_SIZE, (shownIndicatorCount - 1) * initiallyShownCards);
+  }, [childrenLength, initiallyShownCards, isMobile]);
+  const renderList = useMemo(() => visibilityList.map((_, index) => index >= firstVisibleIndex - dynamicRenderBufferSize && index <= lastVisibleIndex + dynamicRenderBufferSize ? 1 : 0), [visibilityList, firstVisibleIndex, lastVisibleIndex, dynamicRenderBufferSize]);
+  const cardRefFns = useMemo(() => Array(childrenLength).fill(null).map((_, i) => el => {
+    cardRefs.current[i] = el;
+    observerVisibility(el, i);
+    setA11yTabIndex(el, i, visibilityList);
+    // record the first card's width and height when it becomes visible
+    if (el && visibilityList[i] === 0) {
+      hasBeenVisibleRef.current.add(i);
+      if (firstCardWidthRef.current == null && el.offsetWidth) {
+        firstCardWidthRef.current = el.offsetWidth;
+      }
+      if (firstCardHeightRef.current == null && el.offsetHeight) {
+        firstCardHeightRef.current = el.offsetHeight;
+      }
+    }
+  }), [childrenLength, observerVisibility, visibilityList, hasBeenVisibleRef, firstCardWidthRef, firstCardHeightRef]);
   useEffect(() => {
     const container = root;
     if (isMobile || !container) return undefined;
@@ -63,13 +98,32 @@ const BpkCardListCarousel = props => {
       }
     };
   }, [root]);
-  useUpdateCurrentIndexByVisibility(isMobile, visibilityList, setCurrentIndex, stateScrollingLockRef, openSetStateLockTimeoutRef);
-  useScrollToCard(currentIndex, root, cardRefs, stateScrollingLockRef);
-
-  // Similar to Virtual Scrolling to improve performance
-  const firstVisibleIndex = Math.max(0, visibilityList.indexOf(1));
-  const lastVisibleIndex = firstVisibleIndex + initiallyShownCards - 1;
-  const renderList = visibilityList.map((_, index) => index >= firstVisibleIndex - RENDER_BUFFER_SIZE && index <= lastVisibleIndex + RENDER_BUFFER_SIZE ? 1 : 0);
+  useEffect(() => {
+    // update hasBeenVisibleRef to include the range of cards that should be visible
+    const start = currentIndex * initiallyShownCards;
+    const end = start + initiallyShownCards + dynamicRenderBufferSize;
+    for (let i = start; i < end && i < childrenLength; i += 1) {
+      hasBeenVisibleRef.current.add(i);
+    }
+  }, [currentIndex, initiallyShownCards, childrenLength, dynamicRenderBufferSize]);
+  useEffect(() => {
+    const firstVisible = visibilityList.indexOf(1);
+    if (firstVisible >= 0) {
+      const newIndex = Math.floor(firstVisible / initiallyShownCards);
+      if (newIndex !== currentIndex) {
+        setCurrentIndex(newIndex);
+      }
+    }
+  }, [initiallyShownCards]);
+  useEffect(() => {
+    const handleResize = throttle(() => {
+      firstCardWidthRef.current = null;
+      firstCardHeightRef.current = null;
+      forceUpdate(n => n + 1);
+    }, 200);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
   return /*#__PURE__*/_jsx("div", {
     className: getClassName(`bpk-card-list-row-rail__${layout}`),
     "data-testid": "bpk-card-list-row-rail__carousel",
@@ -82,23 +136,36 @@ const BpkCardListCarousel = props => {
     ref: setRoot,
     children: children.map((card, index) => {
       if (! /*#__PURE__*/isValidElement(card)) return null;
-      const cardRefCallback = el => {
-        cardRefs.current[index] = el;
-        observerVisibility(el, index);
-        setA11yTabIndex(el, index, visibilityList);
-      };
-      const cardStyle = isMobile ? {
-        ...shownNumberStyle,
-        visibility: renderList[index] === 1 ? 'visible' : 'hidden' // for mobile, {renderList[index] === 1 && card} will cause reflowing and bugs, implementing visibility improvement instead
-      } : shownNumberStyle;
+      const cardDimensionStyle = {};
+      if (firstCardWidthRef.current) {
+        cardDimensionStyle.width = `${firstCardWidthRef.current}px`;
+      }
+      if (firstCardHeightRef.current) {
+        cardDimensionStyle.height = `${firstCardHeightRef.current}px`;
+      }
+
+      // Only render cards that are within the renderList range or have been visible before
+      if (renderList[index] !== 1 && !hasBeenVisibleRef.current.has(index)) {
+        return /*#__PURE__*/_jsx("div", {
+          style: {
+            ...shownNumberStyle,
+            ...cardDimensionStyle,
+            flexShrink: 0,
+            visibility: 'hidden'
+          },
+          "aria-hidden": "true"
+        }, `placeholder-${index.toString()}`);
+      }
       return /*#__PURE__*/_jsx("div", {
         className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
-        ref: cardRefCallback,
-        style: cardStyle,
+        ref: cardRefFns[index],
+        style: {
+          ...shownNumberStyle,
+          ...cardDimensionStyle
+        },
         role: "group",
         "aria-label": slideLabel(index, childrenLength),
-        "aria-current": index === currentIndex ? 'true' : 'false',
-        children: isMobile ? card : renderList[index] === 1 && card
+        children: card
       }, `carousel-card-${index.toString()}`);
     })
   });

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;padding-top:.25rem;padding-bottom:.25rem;overflow-x:scroll;box-sizing:border-box;gap:.25rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:.5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;padding-top:.25rem;padding-bottom:1.5rem;overflow-x:hidden;box-sizing:border-box;gap:.25rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{padding-bottom:1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js

@@ -32,9 +32,10 @@ const BpkCardListRowRailContainer = props => {
     isMobile = false,
     layout
   } = props;
-  const totalIndicators = Children.count(children);
+  const childrenCount = Children.count(children);
+  const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
+  const showAccessory = childrenCount > initiallyShownCards;
   const [currentIndex, setCurrentIndex] = useState(0);
-  const showAccessory = totalIndicators > initiallyShownCards;
   const accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
     currentIndex: currentIndex,
     totalIndicators: totalIndicators,
@@ -50,8 +51,8 @@ const BpkCardListRowRailContainer = props => {
     children: [/*#__PURE__*/_jsx(BpkCardListCarousel, {
       initiallyShownCards: initiallyShownCards,
       layout: layout,
-      currentIndex: currentIndex,
       setCurrentIndex: setCurrentIndex,
+      currentIndex: currentIndex,
       isMobile: isMobile,
       carouselLabel: accessibilityLabels?.carouselLabel,
       slideLabel: accessibilityLabels?.slideLabel,

package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts

@@ -11,6 +11,5 @@ export declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<
  * @param index - Current container index
  */
 export declare const setA11yTabIndex: (el: HTMLDivElement | null, index: number, visibilityList: number[]) => void;
-export declare const useUpdateCurrentIndexByVisibility: (isMobile: boolean, visibilityList: number[], setCurrentIndex: (index: number) => void, stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
 export declare const useScrollToCard: (currentIndex: number, container: HTMLElement | null, cardRefs: React.MutableRefObject<Array<HTMLDivElement | null>>, stateScrollingLockRef: React.MutableRefObject<boolean>) => void;
 export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;

package/bpk-component-card-list/src/BpkCardListRowRail/utils.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef, useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { RELEASE_LOCK_DELAY } from "./constants";
 
 /**
@@ -53,17 +53,6 @@ export const setA11yTabIndex = (el, index, visibilityList) => {
     targetElement.tabIndex = visibilityList[index] === 1 ? 0 : -1;
   });
 };
-export const useUpdateCurrentIndexByVisibility = (isMobile, visibilityList, setCurrentIndex, stateScrollingLockRef, openSetStateLockTimeoutRef) => {
-  useEffect(() => {
-    if (isMobile) return; // No pagination on mobile, so no need to update the current index
-    if (!visibilityList || visibilityList.length === 0) return;
-    const firstVisibleIndex = visibilityList.findIndex(visibility => visibility === 1);
-    if (firstVisibleIndex !== -1) {
-      setCurrentIndex(firstVisibleIndex);
-      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef); // prevent scrollIntoView from being called immediately after the current index is set
-    }
-  }, [visibilityList]);
-};
 export const useScrollToCard = (currentIndex, container, cardRefs, stateScrollingLockRef) => {
   useEffect(() => {
     const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
@@ -84,13 +73,10 @@ export const useIntersectionObserver = ({
   root,
   threshold
 }, setVisibilityList) => {
-  const callbackRef = useRef(setVisibilityList);
+  const observerRef = useRef(null);
   useEffect(() => {
-    callbackRef.current = setVisibilityList;
-  });
-  const observeAll = useMemo(() => {
     if (!root) return () => {};
-    const observer = new IntersectionObserver(entries => {
+    observerRef.current = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         const {
           index
@@ -115,13 +101,18 @@ export const useIntersectionObserver = ({
       root,
       threshold
     });
-    const observeElement = (element, index) => {
-      if (element && observer) {
-        element.setAttribute('data-index', index.toString());
-        observer.observe(element);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
       }
     };
-    return observeElement;
-  }, [root, threshold]);
-  return observeAll;
+  }, [root, threshold, setVisibilityList]);
+  const observeElement = (element, index) => {
+    if (element && observerRef.current) {
+      element.setAttribute('data-index', index.toString());
+      observerRef.current.observe(element);
+    }
+  };
+  return observeElement;
 };

package/bpk-component-icon/lg/beach.js

@@ -8,9 +8,9 @@ const BeachIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "1.5rem",
   ...props,
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M12 2c-4.376 0-9.038 4-9.96 8.016A1.71 1.71 0 0 0 3.857 12h.381a.815.815 0 0 0 .793-.62C5.703 8.642 7.745 3.39 12 2m0 0c4.255 1.39 6.297 6.642 6.969 9.38a.815.815 0 0 0 .793.62h.381a1.71 1.71 0 0 0 1.817-1.984C21.038 6 16.376 2 12 2"
+    d: "M13.201 6.622c.669 1.382 1.824 5.697 1.322 8.082-.09.428-.552.64-.967.489l-2.239-.816-1.698 4.666q.195.145.396.312c1.007.84 2.225 1.451 3.536 1.517.976.048 2.034.11 2.777.144.405.02.692.421.571.808a.08.08 0 0 1-.072.052H3.507A.507.507 0 0 1 3 21.37c0-.374.1-.743.307-1.054.944-1.424 2.359-2.93 4.535-2.238l1.596-4.384-2.02-.735c-.414-.15-.631-.609-.425-.996 1.148-2.15 4.807-4.712 6.208-5.341"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M12 2c-1.377 1.349-4.578 5.963-5.008 9.004a.896.896 0 0 0 .926.996h8.164a.897.897 0 0 0 .926-.996C16.578 7.963 13.377 3.349 12 2m0 11a1 1 0 0 0-1 1v7a1 1 0 0 0 2 0v-7a1 1 0 0 0-1-1"
+    d: "M13.201 6.622c3.29 1.197 5.709 5.454 5.313 8.7-.107.87-1.057 1.29-1.905.982l-.287-.104a.65.65 0 0 1-.427-.679c.238-2.225.127-6.699-2.694-8.9M3.538 9.872c1.783-2.742 6.373-4.448 9.663-3.25-3.576-.128-6.536 3.228-7.784 5.086a.65.65 0 0 1-.765.245l-.286-.105c-.847-.308-1.306-1.24-.828-1.976M19.356 7.57l.604.162a.623.623 0 0 1 .446.759.62.62 0 0 1-.761.44l-.605-.16a.624.624 0 0 1-.446-.76.62.62 0 0 1 .761-.44m-5.8-1.831a2.495 2.495 0 0 1 2.65-.928A2.495 2.495 0 0 1 17.99 7.85c-.083.316-.226.6-.41.847a10 10 0 0 0-4.025-2.957m5.475-1.241a.63.63 0 0 1 .853.226.616.616 0 0 1-.223.848l-.538.31a.63.63 0 0 1-.855-.225.62.62 0 0 1 .223-.849zm-5.981-1.584a.63.63 0 0 1 .854.225l.315.537a.617.617 0 0 1-.223.849.63.63 0 0 1-.854-.227l-.316-.537a.617.617 0 0 1 .224-.847m3.787-.5a.624.624 0 0 1 .446.76l-.158.599a.62.62 0 0 1-.762.44.624.624 0 0 1-.445-.76l.156-.6a.623.623 0 0 1 .763-.44"
   })]
 });
 export default BeachIcon;

package/bpk-component-icon/lg/temperature.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TemperatureIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M10 7a1 1 0 0 1 1 1v4.82a.56.56 0 0 0 .325.492A3 3 0 0 1 13 16a3 3 0 1 1-4.325-2.688A.56.56 0 0 0 9 12.82V8a1 1 0 0 1 1-1"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10 0a5 5 0 0 1 5 5v5.696c0 .262.105.511.277.708a7 7 0 1 1-10.555 0c.173-.197.278-.446.278-.708V5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3v6.53a1 1 0 0 1-.333.743 5 5 0 1 0 6.666 0A1 1 0 0 1 13 11.53V5a3 3 0 0 0-3-3",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M20 8a1 1 0 1 1 0 2h-3V8zm0-3a1 1 0 1 1 0 2h-3V5zm0-3a1 1 0 1 1 0 2h-3V2z"
+  })]
+});
+export default TemperatureIcon;

package/bpk-component-icon/sm/beach.js

@@ -8,9 +8,9 @@ const BeachIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "1rem",
   ...props,
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M12 1.5c-4.595 0-9.49 4.2-10.458 8.416A1.796 1.796 0 0 0 3.45 12h.4a.856.856 0 0 0 .833-.651C5.388 8.474 7.533 2.959 12 1.5m0 0c4.468 1.46 6.612 6.974 7.317 9.849a.856.856 0 0 0 .833.651h.4a1.796 1.796 0 0 0 1.908-2.084C21.49 5.7 16.595 1.5 12 1.5"
+    d: "M12.237 7.688c.666 1.39 1.81 5.734 1.301 8.138-.091.433-.553.646-.968.495l-2.24-.816-1.677 4.612c1.098.787 2.35 1.355 3.7 1.355h2.071c.53 0 .958.429.958.958a.12.12 0 0 1-.12.12H2.007a.507.507 0 0 1-.507-.507c0-.374.1-.742.306-1.053 1.028-1.55 2.612-3.197 5.129-2.003l1.516-4.166-2.019-.733c-.415-.152-.63-.613-.423-1.002 1.155-2.17 4.824-4.761 6.228-5.398"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M12 1.5c-1.445 1.416-4.807 6.26-5.258 9.454A.94.94 0 0 0 7.714 12h8.572a.94.94 0 0 0 .972-1.046C16.808 7.761 13.445 2.916 12 1.5m0 12a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6a1.5 1.5 0 0 0-1.5-1.5"
+    d: "M12.237 7.688c3.29 1.197 5.7 5.48 5.294 8.75-.109.878-1.061 1.304-1.908.995l-.288-.104a.65.65 0 0 1-.426-.684c.245-2.242.146-6.748-2.672-8.957m-9.681 3.3c1.792-2.767 6.391-4.498 9.681-3.3-3.579-.12-6.55 3.27-7.804 5.144a.65.65 0 0 1-.766.25l-.288-.105c-.847-.308-1.304-1.247-.823-1.99m9.611-4.76A3.751 3.751 0 0 1 18.99 9.1a3.73 3.73 0 0 1-1.22 1.971c-1.044-2.111-2.928-3.875-5.396-4.774zm8.867 2.403.91.222a.937.937 0 0 1-.442 1.822l-.91-.22a.938.938 0 0 1 .442-1.823M20.46 4a.939.939 0 0 1 .976 1.601l-.8.488a.938.938 0 0 1-.976-1.6zm-9.02-2.186a.936.936 0 0 1 1.287.313l.49.8a.938.938 0 0 1-1.6.977l-.489-.8a.94.94 0 0 1 .312-1.29m5.67-.887c.504.122.812.63.69 1.133l-.219.91a.937.937 0 0 1-1.822-.44l.22-.913a.94.94 0 0 1 1.132-.69"
   })]
 });
 export default BeachIcon;

package/bpk-component-icon/sm/temperature.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TemperatureIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M9 7.5A1.5 1.5 0 0 1 10.5 9v4.904a3 3 0 1 1-3 0V9A1.5 1.5 0 0 1 9 7.5"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9 0a6 6 0 0 1 6 6v6c0 .75 1.5 2.812 1.5 4.5a7.5 7.5 0 0 1-15 0c0-1.688.75-3 1.5-4.5V6a6 6 0 0 1 6-6m0 3a3 3 0 0 0-3 3s.106 6.405 0 6.75-.037.3-.602 1.052A4.5 4.5 0 1 0 13.5 16.5c0-1.016-.49-1.946-1.055-2.698 0 0-.445-.661-.445-1.052V6a3 3 0 0 0-3-3",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M21 7.5a1.5 1.5 0 0 1 0 3h-3v-3zM21 3a1.5 1.5 0 0 1 0 3h-3V3z"
+  })]
+});
+export default TemperatureIcon;

package/bpk-component-popover/src/BpkPopover.js

@@ -131,9 +131,25 @@ const BpkPopover = ({
     children: target
   });
   const classNames = getClassName('bpk-popover', className);
-  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
+  const bodyClassNames = getClassName('bpk-popover__body', padded && 'bpk-popover__body--padded');
   const labelId = `bpk-popover-label-${id}`;
   const renderElement = typeof renderTarget === 'function' ? renderTarget() : renderTarget;
+  const closeButtonIconElement = /*#__PURE__*/_jsx(BpkCloseButton, {
+    label: closeButtonText || closeButtonLabel,
+    onClick: event => {
+      bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
+      setIsOpenState(false);
+    },
+    ...closeButtonProps
+  });
+  const closeButtonTextElement = /*#__PURE__*/_jsx(BpkButtonLink, {
+    onClick: event => {
+      bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+      setIsOpenState(false);
+    },
+    ...closeButtonProps,
+    children: closeButtonText
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingPortal, {
       root: renderElement,
@@ -173,28 +189,16 @@ const BpkPopover = ({
                   id: labelId,
                   textStyle: TEXT_STYLES.label1,
                   children: label
-                }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
-                  label: closeButtonText || closeButtonLabel,
-                  onClick: event => {
-                    bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
-                    setIsOpenState(false);
-                  },
-                  ...closeButtonProps
-                }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
-                  onClick: event => {
-                    bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
-                    setIsOpenState(false);
-                  },
-                  ...closeButtonProps,
-                  children: closeButtonText
-                })]
+                }), "\xA0", closeButtonIcon ? closeButtonIconElement : !!closeButtonText && closeButtonTextElement]
               }) : /*#__PURE__*/_jsx("span", {
                 id: labelId,
                 className: getClassName('bpk-popover__label'),
                 children: label
-              }), /*#__PURE__*/_jsx("div", {
+              }), /*#__PURE__*/_jsxs("div", {
                 className: bodyClassNames,
-                children: children
+                children: [/*#__PURE__*/_jsx("div", {
+                  children: children
+                }), !labelAsTitle && closeButtonIcon && closeButtonIconElement]
               }), actionText && onAction && /*#__PURE__*/_jsx("div", {
                 className: getClassName('bpk-popover__action'),
                 children: /*#__PURE__*/_jsx(BpkButtonLink, {
@@ -203,14 +207,7 @@ const BpkPopover = ({
                 })
               }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
                 className: getClassName('bpk-popover__footer'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
-                  onClick: event => {
-                    bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
-                    setIsOpenState(false);
-                  },
-                  ...closeButtonProps,
-                  children: closeButtonText
-                })
+                children: closeButtonTextElement
               })]
             })
           })

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}
+.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body{display:flex;column-gap:1rem;justify-content:space-between;align-items:flex-start}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "38.0.1",
+  "version": "38.1.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -27,8 +27,8 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.1.2",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^19.5.0",
-    "@skyscanner/bpk-svgs": "^20.6.0",
+    "@skyscanner/bpk-foundations-web": "^22.1.0",
+    "@skyscanner/bpk-svgs": "^20.8.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^3.1.0",