@skyscanner/backpack-web 33.3.1 → 33.5.0

package/bpk-component-flare/src/BpkContentBubble.js

@@ -20,8 +20,7 @@ import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkFlareBar from "./BpkFlareBar";
 import STYLES from "./bpk-content-bubble.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentBubble = props => {
   const {
@@ -59,7 +58,10 @@ const BpkContentBubble = props => {
         className: contentClassNames.join(' '),
         children: content && content
       }), showPointer && /*#__PURE__*/_jsx(BpkFlareBar, {
-        rounded: rounded,
+        rounded: rounded
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-content-bubble__pointer'),
         ...flareProps
       })]

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,11 +18,10 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./bpk-flare-bar.module.css";
-import Pointer from "./__generated__/js/pointer";
 import CornerRadius from "./__generated__/js/corner-radius";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import Pointer from "./__generated__/js/pointer";
+import STYLES from "./bpk-flare-bar.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFlareBar = props => {
   const {
@@ -46,11 +45,20 @@ const BpkFlareBar = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: classNames.join(' '),
     ...rest,
-    children: [/*#__PURE__*/_jsx(Pointer, {
+    children: [/*#__PURE__*/_jsx(Pointer
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: curveClassNames.join(' ')
-    }), rounded && /*#__PURE__*/_jsx(CornerRadius, {
+    }), rounded && /*#__PURE__*/_jsx(CornerRadius
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: leftCornerRadiusClassNames.join(' ')
-    }), rounded && /*#__PURE__*/_jsx(CornerRadius, {
+    }), rounded && /*#__PURE__*/_jsx(CornerRadius
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: rightCornerRadiusClassNames.join(' ')
     })]
   });

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useEffect, useState } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
@@ -22,8 +23,7 @@ import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);
@@ -70,7 +70,10 @@ const BpkFloatingNotification = props => {
         })
       }), /*#__PURE__*/_jsx(BpkText, {
         tagName: "p",
-        textStyle: TEXT_STYLES.bodyDefault,
+        textStyle: TEXT_STYLES.bodyDefault
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-floating-notification__text'),
         children: text
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
@@ -78,7 +81,10 @@ const BpkFloatingNotification = props => {
         children: text
       }), ctaText && /*#__PURE__*/_jsx(BpkButtonV2, {
         type: BUTTON_TYPES.linkOnDark,
-        onClick: onClick,
+        onClick: onClick
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-floating-notification__button'),
         children: ctaText
       })]

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -19,12 +19,11 @@
 import PropTypes from 'prop-types';
 import { lineHeightSm, iconSizeSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import AnimateHeight from "../../bpk-animate-height";
-import { cssModules } from "../../bpk-react-utils";
-import BpkSmallExclamationIcon from "../../bpk-component-icon/sm/exclamation-circle";
 import { withAlignment } from "../../bpk-component-icon";
+import BpkSmallExclamationIcon from "../../bpk-component-icon/sm/exclamation-circle";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFormValidation.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedExclamationIcon = withAlignment(BpkSmallExclamationIcon, lineHeightSm, iconSizeSm);
 const BpkFormValidation = props => {
@@ -47,8 +46,9 @@ const BpkFormValidation = props => {
       children: /*#__PURE__*/_jsxs("div", {
         className: classNames,
         ...rest,
-        children: [/*#__PURE__*/_jsx(AlignedExclamationIcon, {
-          className: getClassName('bpk-form-validation__icon')
+        children: [/*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-form-validation__icon'),
+          children: /*#__PURE__*/_jsx(AlignedExclamationIcon, {})
         }), children]
       })
     })

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -16,13 +16,10 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText from "../../bpk-component-text";
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkGraphicPromo.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ACCESSIBILITY_KEYS = {
   Enter: 13 /* Enter */,
@@ -103,8 +100,7 @@ const BpkGraphicPromo = ({
         children: [/*#__PURE__*/_jsx("div", {
           className: getTextClasses('bpk-graphic-promo__sponsor-content'),
           children: sponsor && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(BpkText, {
-              tagName: "span",
+            children: [/*#__PURE__*/_jsx("span", {
               className: getClassName('bpk-graphic-promo__sponsor-label'),
               children: sponsor.label
             }), /*#__PURE__*/_jsx("img", {
@@ -115,20 +111,20 @@ const BpkGraphicPromo = ({
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: getTextClasses('bpk-graphic-promo__promo-content'),
-          children: [!sponsor && tagline && /*#__PURE__*/_jsx(BpkText, {
-            tagName: "span",
+          children: [!sponsor && tagline && /*#__PURE__*/_jsx("span", {
             className: getClassName('bpk-graphic-promo__tagline'),
             children: tagline
-          }), /*#__PURE__*/_jsx(BpkText, {
-            tagName: "h2",
+          }), /*#__PURE__*/_jsx("h2", {
             className: getClassName('bpk-graphic-promo__headline'),
             children: headline
-          }), subheading && /*#__PURE__*/_jsx(BpkText, {
-            tagName: "p",
+          }), subheading && /*#__PURE__*/_jsx("p", {
             className: getClassName('bpk-graphic-promo__subheading'),
             children: subheading
           }), /*#__PURE__*/_jsx(BpkButtonV2, {
-            type: BUTTON_TYPES.primaryOnDark,
+            type: BUTTON_TYPES.primaryOnDark
+            // TODO: className to be removed
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            ,
             className: getClassName('bpk-graphic-promo__cta'),
             onClick: onClickWrapper,
             tabIndex: -1 /* button is not focusable for accessibility */,

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}
+.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__headline{margin:0}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -18,10 +18,10 @@
 
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import { BpkButtonLink } from "../../bpk-component-link";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkGridToggle.module.css";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
 class BpkGridToggle extends Component {
@@ -58,11 +58,13 @@ class BpkGridToggle extends Component {
       gridEnabled
     } = this.state;
     const onOrOff = gridEnabled ? 'off' : 'on';
-    return /*#__PURE__*/_jsxs(BpkButtonLink, {
-      title: "Keyboard Shortcut: ctrl + cmd + g",
-      onClick: this.toggleGrid,
+    return /*#__PURE__*/_jsx("span", {
       className: className,
-      children: ["Baseline grid ", onOrOff]
+      children: /*#__PURE__*/_jsxs(BpkButtonLink, {
+        title: "Keyboard Shortcut: ctrl + cmd + g",
+        onClick: this.toggleGrid,
+        children: ["Baseline grid ", onOrOff]
+      })
     });
   }
 }

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Component, Children, cloneElement } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkHorizontalNav.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -113,20 +113,22 @@ class BpkHorizontalNav extends Component {
     return (
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkMobileScrollContainer, {
-        ariaLabel: ariaLabel,
-        innerContainerTagName: "nav",
+      _jsx("div", {
         className: classNames,
-        leadingIndicatorClassName: leadingScrollIndicatorClassName,
-        trailingIndicatorClassName: trailingScrollIndicatorClassName,
-        scrollerRef: ref => {
-          this.scrollRef = ref;
-        },
-        ...rest,
-        children: /*#__PURE__*/_jsx("div", {
-          className: getClassName('bpk-horizontal-nav__list'),
-          role: "tablist",
-          children: children
+        children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
+          ariaLabel: ariaLabel,
+          innerContainerTagName: "nav",
+          leadingIndicatorClassName: leadingScrollIndicatorClassName,
+          trailingIndicatorClassName: trailingScrollIndicatorClassName,
+          scrollerRef: ref => {
+            this.scrollRef = ref;
+          },
+          ...rest,
+          children: /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-horizontal-nav__list'),
+            role: "tablist",
+            children: children
+          })
         })
       })
     );

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-horizontal-nav--show-default-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav--show-light-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav__list{display:flex;margin:0;padding:0;align-items:stretch;list-style-type:none}
+.bpk-horizontal-nav{position:relative}.bpk-horizontal-nav--show-default-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav--show-light-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav__list{display:flex;margin:0;padding:0;align-items:stretch;list-style-type:none}

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -14,8 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { Component } from 'react';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { HORIZONTAL_NAV_TYPES } from "./BpkHorizontalNav";
 import STYLES from "./BpkHorizontalNavItem.module.css";

package/bpk-component-icon/index.js

@@ -20,8 +20,8 @@ import { iconSizeSm, iconSizeLg, privateButtonLineHeight
 // @ts-expect-error Untyped import. We will need to review how these files are handled
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import withAlignment from "./src/withAlignment";
-import withRtlSupport from "./src/withRtlSupport";
 import withDescription from "./src/withDescription";
+import withRtlSupport from "./src/withRtlSupport";
 
 // Wrapper functions to provide backwards compatibility
 function withButtonAlignment(WrappedComponent) {

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

@@ -13,7 +13,6 @@ export default (({
   },
   ...props,
   children: /*#__PURE__*/_jsx("path", {
-    d: "M4.9 1.061c.025-.096.162-.096.187 0 .215.824.735 2.775.897 2.938.163.162 2.114.682 2.938.897.096.024.096.162 0 .187-.824.214-2.775.734-2.938.897-.162.162-.682 2.113-.897 2.937-.025.096-.162.096-.187 0-.214-.824-.734-2.775-.897-2.937-.162-.163-2.113-.683-2.938-.897-.095-.025-.095-.163 0-.187.825-.215 2.776-.735 2.938-.897.163-.163.683-2.114.897-2.938zm6.668 1.267c.116-.437.748-.437.863 0 .638 2.42 1.797 6.668 2.185 7.056.388.388 4.635 1.547 7.056 2.185.437.115.437.747 0 .862-2.42.638-6.668 1.797-7.056 2.185-.388.388-1.547 4.635-2.185 7.056-.115.437-.747.437-.862 0-.638-2.42-1.797-6.668-2.185-7.056-.388-.388-4.635-1.547-7.056-2.185-.437-.115-.437-.747 0-.862 2.42-.638 6.668-1.797 7.056-2.185.388-.388 1.547-4.635 2.184-7.056zm-6.516 14.19c-.015-.06-.101-.06-.117 0-.134.516-.459 1.735-.56 1.836-.102.102-1.321.427-1.836.561-.06.015-.06.102 0 .117.515.134 1.734.459 1.836.56.101.102.426 1.321.56 1.837.016.06.102.06.117 0 .134-.516.46-1.735.56-1.836.102-.102 1.322-.427 1.837-.561.06-.015.06-.102 0-.117-.515-.134-1.735-.459-1.836-.56-.102-.102-.427-1.321-.56-1.837zM18.935 2.425c.016-.06.102-.06.117 0 .134.515.46 1.734.56 1.836.102.101 1.322.426 1.837.56.06.016.06.102 0 .117-.515.134-1.735.46-1.836.56-.102.102-.427 1.322-.56 1.837-.016.06-.102.06-.118 0-.134-.515-.459-1.735-.56-1.836-.102-.102-1.321-.427-1.836-.56-.06-.016-.06-.102 0-.118.515-.134 1.734-.459 1.836-.56.101-.102.426-1.321.56-1.836zm.152 12.657c-.025-.096-.162-.096-.187 0-.214.824-.734 2.775-.897 2.938-.162.162-2.113.682-2.938.896-.095.025-.095.163 0 .188.825.214 2.776.734 2.938.896.163.163.683 2.114.897 2.938.025.096.162.096.187 0 .215-.824.735-2.775.897-2.938.163-.162 2.113-.682 2.938-.896.096-.025.096-.163 0-.188-.825-.214-2.775-.734-2.938-.896-.163-.163-.682-2.114-.897-2.938z",
-    clipRule: "evenodd"
+    d: "M4.094 1.072c-.025-.096-.163-.096-.188 0-.214.824-.734 2.775-.896 2.938-.163.162-2.114.682-2.938.896-.096.025-.096.163 0 .188.824.214 2.775.734 2.938.896.162.163.682 2.114.896 2.938.025.096.163.096.188 0 .214-.824.734-2.775.896-2.938.163-.162 2.114-.682 2.938-.896.096-.025.096-.163 0-.188-.824-.214-2.775-.734-2.938-.896-.162-.163-.682-2.114-.896-2.938zm9.475 2.256c.115-.437.747-.437.862 0 .638 2.42 1.797 6.668 2.185 7.056.388.388 4.635 1.547 7.056 2.185.437.115.437.747 0 .862-2.42.638-6.668 1.797-7.056 2.185-.388.388-1.547 4.635-2.185 7.056-.115.437-.747.437-.862 0-.638-2.42-1.797-6.668-2.185-7.056-.388-.388-4.635-1.547-7.056-2.185-.437-.115-.437-.747 0-.862 2.42-.638 6.668-1.797 7.056-2.185.388-.388 1.547-4.635 2.185-7.056zM6.953 18.036c.013-.048.081-.048.094 0 .107.412.367 1.387.448 1.469.082.081 1.057.341 1.47.448.047.013.047.081 0 .094-.413.107-1.388.367-1.47.448-.081.081-.341 1.057-.448 1.47-.013.047-.081.047-.094 0-.107-.413-.367-1.389-.448-1.47-.082-.081-1.057-.341-1.47-.448-.047-.013-.047-.081 0-.094.413-.107 1.388-.367 1.47-.448.081-.081.341-1.057.448-1.47z"
   })
 }));

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/call-back.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/camper-van.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/car-wash.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/content--copy.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  style: {
+    width: "1.5rem",
+    height: "1.5rem"
+  },
+  ...props,
+  children: /*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "8"
+  })
+}));

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/fast-track.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/fast-train.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/flight-landing.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/flight-takeoff.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/legroom--extra.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/legroom--normal.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/legroom--reduced.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

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

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/new-window.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props

package/bpk-component-icon/lg/plane-seat.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props