@skyscanner/backpack-web 33.3.1 → 33.5.0

package/bpk-component-accordion/index.js

@@ -16,6 +16,6 @@
  * limitations under the License.
  */import BpkAccordion from "./src/BpkAccordion";
 import BpkAccordionItem from "./src/BpkAccordionItem";
-import withSingleItemAccordionState from "./src/withSingleItemAccordionState";
 import withAccordionItemState from "./src/withAccordionItemState";
+import withSingleItemAccordionState from "./src/withSingleItemAccordionState";
 export { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState, withAccordionItemState };

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -23,8 +23,7 @@ import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);
 const BpkAccordionItem = props => {
@@ -95,18 +94,18 @@ const BpkAccordionItem = props => {
           "aria-controls": contentId,
           onClick: onClick,
           className: getClassName('bpk-accordion__toggle-button'),
-          children: /*#__PURE__*/_jsxs("span", {
-            className: getClassName('bpk-accordion__flex-container'),
-            children: [/*#__PURE__*/_jsxs(BpkText, {
-              textStyle: textStyle,
-              tagName: tagName,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: `${getClassName('bpk-accordion__flex-container')}`,
+            children: [/*#__PURE__*/_jsx("div", {
               className: titleTextClassNames.join(' '),
-              children: [clonedIcon, title]
-            }), /*#__PURE__*/_jsx("span", {
-              className: getClassName('bpk-accordion__icon-wrapper'),
-              children: /*#__PURE__*/_jsx(ExpandIcon, {
-                className: iconClassNames.join(' ')
+              children: /*#__PURE__*/_jsxs(BpkText, {
+                textStyle: textStyle,
+                tagName: tagName,
+                children: [clonedIcon, title]
               })
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${getClassName('bpk-accordion__icon-wrapper')} ${iconClassNames.join(' ')}`,
+              children: /*#__PURE__*/_jsx(ExpandIcon, {})
             })]
           })
         })
@@ -136,7 +135,7 @@ BpkAccordionItem.defaultProps = {
   expanded: false,
   icon: null,
   onClick: () => null,
-  tagName: 'span',
+  tagName: 'h3',
   textStyle: TEXT_STYLES.bodyDefault
 };
 export default BpkAccordionItem;

package/bpk-component-accordion/src/BpkAccordionItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-accordion__title{height:auto}.bpk-accordion__title--collapsed{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__title--collapsed-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{display:inline-block;flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-container--expanded{padding-bottom:1rem;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__content-container--expanded-on-dark{padding-bottom:1rem;box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}
+.bpk-accordion__title{height:auto}.bpk-accordion__title--collapsed{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__title--collapsed-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-container--expanded{padding-bottom:1rem;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__content-container--expanded-on-dark{padding-bottom:1rem;box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -17,8 +17,7 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.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 BpkAutosuggestSuggestion = props => {
   const classNames = [getClassName('bpk-autosuggest__suggestion')];
@@ -44,7 +43,10 @@ const BpkAutosuggestSuggestion = props => {
     _jsxs("section", {
       className: classNames.join(' '),
       ...rest,
-      children: [icon ? /*#__PURE__*/_jsx(Icon, {
+      children: [icon ? /*#__PURE__*/_jsx(Icon
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: getClassName('bpk-autosuggest__suggestion-icon')
       }) : null, /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-autosuggest__suggestion-content'),

package/bpk-component-banner-alert/index.js

@@ -20,7 +20,7 @@ import BpkBannerAlert from "./src/BpkBannerAlert";
 import BpkBannerAlertDismissable from "./src/BpkBannerAlertDismissable";
 import BpkBannerAlertExpandable from "./src/BpkBannerAlertExpandable";
 import { ALERT_TYPES } from "./src/common-types";
-import withBannerAlertState from "./src/withBannerAlertState";
 import themeAttributes from "./src/themeAttributes";
+import withBannerAlertState from "./src/withBannerAlertState";
 export { ALERT_TYPES, BpkBannerAlertDismissable, BpkBannerAlertExpandable, withBannerAlertState, themeAttributes };
 export default BpkBannerAlert;

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -18,22 +18,22 @@
 
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import { cssModules } from "../../bpk-react-utils";
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAnimateAndFade.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 ANIMATION_DURATION = parseInt(durationSm, 10);
 class AnimateAndFade extends Component {
   static defaultProps = {
     animateOnEnter: false,
-    animateOnLeave: false,
-    className: null
+    animateOnLeave: false
   };
   constructor(props) {
     super(props);
@@ -110,37 +110,39 @@ class AnimateAndFade extends Component {
     // While the expanding animation takes place, we render the child element
     // close to invisible. If we don't do this, the animate-height container
     // will take on height 0, and will never expand to allow the children to fade in
-    return this.state.inDom ? /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+    return this.state.inDom ? /*#__PURE__*/_jsx("div", {
       className: className,
-      onAnimationComplete: this.onAnimateHeightComplete,
-      duration: ANIMATION_DURATION,
-      height: this.state.isExpanded ? 'auto' : 0,
-      children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
-        style: {
-          opacity: 0.35
-        },
-        children: children
-      }), /*#__PURE__*/_jsx(TransitionGroup, {
-        exit: animateOnLeave,
-        enter: animateOnEnter,
-        appear: animateOnEnter,
-        onTransitionEnd: this.onFadeComplete,
-        children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
-          classNames: {
-            exit: getClassName('bpk-animate-and-fade--leave'),
-            exitActive: getClassName('bpk-animate-and-fade--leave-active'),
-            enter: getClassName('bpk-animate-and-fade--enter'),
-            enterActive: getClassName('bpk-animate-and-fade--enter-active'),
-            appear: getClassName('bpk-animate-and-fade--appear'),
-            appearActive: getClassName('bpk-animate-and-fade--appear-active')
-          },
-          timeout: {
-            enter: ANIMATION_DURATION * 2,
-            exit: ANIMATION_DURATION * 2
+      children: /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+        onAnimationComplete: this.onAnimateHeightComplete,
+        duration: ANIMATION_DURATION,
+        height: this.state.isExpanded ? 'auto' : 0,
+        children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+          style: {
+            opacity: 0.35
           },
           children: children
-        })
-      })]
+        }), /*#__PURE__*/_jsx(TransitionGroup, {
+          exit: animateOnLeave,
+          enter: animateOnEnter,
+          appear: animateOnEnter,
+          onTransitionEnd: this.onFadeComplete,
+          children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
+            classNames: {
+              exit: getClassName('bpk-animate-and-fade--leave'),
+              exitActive: getClassName('bpk-animate-and-fade--leave-active'),
+              enter: getClassName('bpk-animate-and-fade--enter'),
+              enterActive: getClassName('bpk-animate-and-fade--enter-active'),
+              appear: getClassName('bpk-animate-and-fade--appear'),
+              appearActive: getClassName('bpk-animate-and-fade--appear-active')
+            },
+            timeout: {
+              enter: ANIMATION_DURATION * 2,
+              exit: ANIMATION_DURATION * 2
+            },
+            children: children
+          })
+        })]
+      })
     }) : null;
   }
 }

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -22,23 +22,23 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { withButtonAlignment } from "../../bpk-component-icon";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
+import { withButtonAlignment } from "../../bpk-component-icon";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import ChevronDownIcon from "../../bpk-component-icon/lg/chevron-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES } from "./common-types";
 import STYLES from "./BpkBannerAlert.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 ExpandIcon = withButtonAlignment(ChevronDownIcon);
 export const CONFIGURATION = {
@@ -64,6 +64,9 @@ const getIconForType = (type, CustomIcon) => {
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
+
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
   return /*#__PURE__*/_jsx(AlignedIcon, {
     className: className
   });
@@ -79,7 +82,10 @@ const ToggleButton = props => {
     "aria-label": props.label,
     "aria-expanded": props.expanded,
     title: props.label,
-    children: /*#__PURE__*/_jsx(ExpandIcon, {
+    children: /*#__PURE__*/_jsx(ExpandIcon
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: classNames.join(' ')
     })
   });

package/bpk-component-barchart/src/BpkBarchart.js

@@ -15,26 +15,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { Component } from 'react';
 import { scaleLinear, scaleBand } from 'd3-scale';
+import debounce from 'lodash.debounce';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
-import BpkBarchartDefs from "./BpkBarchartDefs";
+import { cssModules } from "../../bpk-react-utils";
+import BpkBarchartBar from "./BpkBarchartBar";
 import BpkBarchartBars from "./BpkBarchartBars";
-import BpkChartDataTable from "./BpkChartDataTable";
-import BpkChartMargin from "./BpkChartMargin";
+import BpkBarchartDefs from "./BpkBarchartDefs";
 import BpkChartAxis from "./BpkChartAxis";
+import BpkChartDataTable from "./BpkChartDataTable";
 import BpkChartGridLines from "./BpkChartGridLines";
-import BpkBarchartBar from "./BpkBarchartBar";
-import dataProp from "./customPropTypes";
-import { identity, remToPx } from "./utils";
+import BpkChartMargin from "./BpkChartMargin";
 import { applyArrayRTLTransform, applyMarginRTLTransform } from "./RTLtransforms";
+import dataProp from "./customPropTypes";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
+import { identity, remToPx } from "./utils";
 import STYLES from "./BpkBarchart.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 spacing = remToPx('.375rem');
 const lineHeight = remToPx(lineHeightSm);

package/bpk-component-barchart/src/BpkBarchartBar.js

@@ -19,8 +19,7 @@ import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6'
 import { cssModules } from "../../bpk-react-utils";
 import { remToPx } from "./utils";
 import STYLES from "./BpkBarchartBar.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 KEYCODES = {
   ENTER: 13,

package/bpk-component-barchart/src/BpkBarchartBars.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 { scaleBand, scaleLinear } from 'd3-scale';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { scaleBand, scaleLinear } from 'd3-scale';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkBarchartBar from "./BpkBarchartBar";
 import { remToPx } from "./utils";

package/bpk-component-barchart/src/BpkBarchartDefs.js

@@ -1,5 +1,4 @@
-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";
 /*
  * Backpack - Skyscanner's Design System
  *

package/bpk-component-barchart/src/BpkChartAxis.js

@@ -21,8 +21,7 @@ import { rtlConditionalValue } from "./RTLtransforms";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
 import { identity, center, remToPx } from "./utils";
 import STYLES from "./BpkChartAxis.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 spacing = remToPx('.375rem');
 const lineHeight = remToPx(lineHeightSm);

package/bpk-component-barchart/src/BpkChartDataTable.js

@@ -18,8 +18,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import dataProp from "./customPropTypes";
 import STYLES from "./BpkChartDataTable.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 BpkChartDataTable = props => {
   const {

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -19,16 +19,14 @@
 import { useState } from "react";
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkButtonLink } from "../../bpk-component-link";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkBottomSheet.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 BpkBottomSheet = ({
   actionText = '',

package/bpk-component-breadcrumb/src/BpkBreadcrumb.js

@@ -18,8 +18,7 @@
 import { Component, Fragment } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkBreadcrumb.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);
 /*
   The google structured data reference for the stringified output of

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -15,14 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
+import { withRtlSupport } from "../../bpk-component-icon";
+import ArrowRight from "../../bpk-component-icon/sm/arrow-right";
 import BpkLink from "../../bpk-component-link";
 import BpkText from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import { withRtlSupport } from "../../bpk-component-icon";
-import ArrowRight from "../../bpk-component-icon/sm/arrow-right";
 import STYLES from "./BpkBreadcrumbItem.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 RtlSupportedArrowRight = withRtlSupport(ArrowRight);
 const BpkBreadcrumbItem = props => {
@@ -43,21 +42,26 @@ const BpkBreadcrumbItem = props => {
       children: [active ?
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkText, {
+      _jsx("div", {
         className: getClassName('bpk-breadcrumb-item__active-item'),
-        "aria-current": "page",
-        ...linkProps,
-        children: children
+        children: /*#__PURE__*/_jsx(BpkText, {
+          "aria-current": "page",
+          ...linkProps,
+          children: children
+        })
       }) :
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkLink, {
-        href: href,
+      _jsx("div", {
         className: getClassName('bpk-breadcrumb-item__link'),
-        ...linkProps,
-        children: children
-      }), !active && /*#__PURE__*/_jsx(RtlSupportedArrowRight, {
-        className: getClassName('bpk-breadcrumb-item__arrow')
+        children: /*#__PURE__*/_jsx(BpkLink, {
+          href: href,
+          ...linkProps,
+          children: children
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-breadcrumb-item__arrow'),
+        children: !active && /*#__PURE__*/_jsx(RtlSupportedArrowRight, {})
       })]
     })
   );

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#626971}.bpk-breadcrumb-item__arrow{margin:0 .25rem;fill:rgba(0,0,0,.2)}
+.bpk-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#626971}.bpk-breadcrumb-item__arrow{margin:0 .25rem;line-height:.5rem;fill:rgba(0,0,0,.2)}

package/bpk-component-breakpoint/index.d.ts

@@ -17,5 +17,6 @@
  */
 
 import BpkBreakpoint, { BREAKPOINTS } from './src/BpkBreakpoint';
-export { BREAKPOINTS };
+import useMediaQuery from './src/useMediaQuery';
+export { BREAKPOINTS, useMediaQuery };
 export default BpkBreakpoint;

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import useMediaQuery from "./useMediaQuery";
@@ -38,11 +38,16 @@ const BpkBreakpoint = ({
   matchSSR = false,
   query
 }) => {
+  /**
+   * The useEffect and useState combination forces BpkBreakpoint to re-render.
+   * Consumers of BpkBreakpoint have become reliant on this behaviour particularly when using BpkBreakpoint within a SSR'd application.
+   * This shouldn't be removed without a breaking change & understanding how to migrate consumers away from this reliance.
+   */
   const [isClient, setIsClient] = useState(false);
-  const matches = useMediaQuery(query);
   useEffect(() => {
     setIsClient(true);
   }, []);
+  const matches = useMediaQuery(query, matchSSR);
   if (isClient) {
     if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
       console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
@@ -52,9 +57,6 @@ const BpkBreakpoint = ({
     }
     return matches ? children : null;
   }
-
-  // Below code is executed when running in SSR mode
-
   if (typeof children === 'function') {
     return children(matchSSR);
   }

package/bpk-component-breakpoint/src/useMediaQuery.js

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
-const useMediaQuery = query => {
-  const [matches, setMatches] = useState(window.matchMedia ? window.matchMedia(query).matches : false);
+import { useEffect, useState } from 'react';
+const useMediaQuery = (query, matchSSR = false) => {
+  const isClient = typeof window !== 'undefined' && !!window.matchMedia;
+  const [matches, setMatches] = useState(isClient ? window.matchMedia(query).matches : matchSSR);
   useEffect(() => {
-    if (window.matchMedia) {
+    if (isClient) {
       const media = window.matchMedia(query);
       setMatches(media.matches);
       const listener = () => {
@@ -29,8 +30,8 @@ const useMediaQuery = query => {
       media.addEventListener('change', listener);
       return () => media.removeEventListener('change', listener);
     }
-    return undefined;
-  }, [query]);
+    return () => {};
+  }, [query, isClient]);
   return matches;
 };
 export default useMediaQuery;

package/bpk-component-button/index.js

@@ -15,16 +15,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkButton from "./src/BpkButton"; // eslint-disable-line import/no-cycle
-import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
+import BpkButtonDestructive from "./src/BpkButtonDestructive";
+import BpkButtonFeatured from "./src/BpkButtonFeatured";
+import BpkButtonLink from "./src/BpkButtonLink";
+import BpkButtonLinkOnDark from "./src/BpkButtonLinkOnDark";
 import BpkButtonPrimary from "./src/BpkButtonPrimary";
 import BpkButtonPrimaryOnDark from "./src/BpkButtonPrimaryOnDark";
 import BpkButtonPrimaryOnLight from "./src/BpkButtonPrimaryOnLight";
 import BpkButtonSecondary from "./src/BpkButtonSecondary";
 import BpkButtonSecondaryOnDark from "./src/BpkButtonSecondaryOnDark";
-import BpkButtonDestructive from "./src/BpkButtonDestructive";
-import BpkButtonLink from "./src/BpkButtonLink";
-import BpkButtonLinkOnDark from "./src/BpkButtonLinkOnDark";
-import BpkButtonFeatured from "./src/BpkButtonFeatured";
+import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
 export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButtonV2/common-types";
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./themeAttributes";
 export default BpkButton;

package/bpk-component-button/src/BpkButtonDestructive.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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonDestructive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonDestructive = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonDestructive.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonFeatured.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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonFeatured.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonFeatured = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonFeatured.propTypes = {
   ...propTypes