@skyscanner/backpack-web 31.1.2 → 31.3.0

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

@@ -24,6 +24,11 @@ const defaultProps = {
   show: true,
   icon: null
 };
+
+/**
+ * @deprecated use bpk-component-info-banner instead
+ * @returns {Component} a banner alert component
+ */
 const BpkBannerAlert = ({
   animateOnEnter = false,
   animateOnLeave = false,

package/bpk-component-calendar/src/BpkCalendarContainer.d.ts

@@ -41,6 +41,7 @@ export type Props = {
     initiallyFocusedDate?: Date | null;
     markToday?: boolean;
     markOutsideDays?: boolean;
+    customRowHeight?: number;
 };
 type InjectedProps = {
     onDateClick: ((date: Date) => void) | null;
@@ -105,6 +106,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
+        customRowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };
@@ -157,6 +159,7 @@ declare const _default: {
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
+        customRowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };

package/bpk-component-calendar/src/composeCalendar.d.ts

@@ -71,6 +71,7 @@ export type Props = {
     preventKeyboardFocus?: boolean;
     selectionConfiguration?: SelectionConfiguration;
     gridClassName?: string | null;
+    customRowHeight?: number;
     /**
      * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
      */

package/bpk-component-calendar/src/composeCalendar.js

@@ -26,6 +26,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
   const BpkCalendar = ({
     changeMonthLabel = null,
     className = null,
+    customRowHeight,
     dateModifiers = {},
     dateProps = {},
     daysOfWeek,
@@ -116,6 +117,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
         className: gridClasses.join(' '),
         dateProps: dateProps,
         selectionConfiguration: selectionConfiguration,
+        customRowHeight: customRowHeight,
         ...gridProps
       })]
     });

package/bpk-component-info-banner/index.d.ts

@@ -0,0 +1,32 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkInfoBanner from './src/BpkInfoBanner';
+import BpkInfoBannerDismissable from './src/BpkInfoBannerDismissable';
+import BpkInfoBannerExpandable from './src/BpkInfoBannerExpandable';
+import { ALERT_TYPES, STYLE_TYPES } from './src/common-types';
+import withBannerAlertState from './src/withBannerAlertState';
+
+export {
+  ALERT_TYPES,
+  STYLE_TYPES,
+  BpkInfoBannerDismissable,
+  BpkInfoBannerExpandable,
+  withBannerAlertState,
+};
+export default BpkInfoBanner;

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

@@ -0,0 +1,25 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkInfoBanner from "./src/BpkInfoBanner";
+import BpkInfoBannerDismissable from "./src/BpkInfoBannerDismissable";
+import BpkInfoBannerExpandable from "./src/BpkInfoBannerExpandable";
+import { ALERT_TYPES, STYLE_TYPES } from "./src/common-types";
+import withBannerAlertState from "./src/withBannerAlertState";
+export { ALERT_TYPES, STYLE_TYPES, BpkInfoBannerDismissable, BpkInfoBannerExpandable, withBannerAlertState };
+export default BpkInfoBanner;

package/bpk-component-info-banner/src/AnimateAndFade.d.ts

@@ -0,0 +1,61 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 type { ReactNode } from 'react';
+
+type Props = {
+  animateOnEnter: boolean;
+  animateOnLeave: boolean;
+  children: ReactNode | string;
+  show: boolean;
+  className?: string | null;
+};
+type State = {
+  isExpanded: boolean;
+  visible: boolean;
+  initiateShow: boolean;
+  hideAnimationInProgress: boolean;
+  inDom: boolean;
+};
+declare class AnimateAndFade extends Component<Props, State> {
+  toggleImmediately: boolean;
+
+  static defaultProps: {
+    animateOnEnter: boolean;
+    animateOnLeave: boolean;
+    className: null;
+  };
+
+  constructor(props: Props);
+
+  componentDidMount(): void;
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+
+  componentDidUpdate(): void;
+
+  onAnimateHeightComplete: () => void;
+
+  onFadeComplete: () => void;
+
+  toggle: () => void;
+
+  render(): JSX.Element | null;
+}
+export default AnimateAndFade;

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

@@ -0,0 +1,147 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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';
+// @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 BpkAnimateHeight from "../../bpk-animate-height";
+import STYLES from "./BpkAnimateAndFade.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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
+  };
+  constructor(props) {
+    super(props);
+    this.toggleImmediately = this.props.show && this.props.animateOnEnter;
+    const initiallyShown = this.toggleImmediately ? false : this.props.show;
+    this.state = {
+      isExpanded: initiallyShown,
+      visible: initiallyShown,
+      initiateShow: false,
+      hideAnimationInProgress: false,
+      inDom: initiallyShown
+    };
+  }
+  componentDidMount() {
+    if (this.toggleImmediately) {
+      this.toggle();
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.show === this.props.show) {
+      return;
+    }
+    this.toggle();
+  }
+  componentDidUpdate() {
+    if (this.state.initiateShow) {
+      // React doesn't like us calling setState from componentDidUpdate as it can lead to an infinite re-renders.
+      // I think it is ok here, however, as this will only happen conditionally (ie once)
+
+      this.setState({
+        initiateShow: false,
+        isExpanded: true,
+        visible: true
+      });
+    }
+  }
+  onAnimateHeightComplete = () => {
+    if (this.state.isExpanded) {
+      return;
+    }
+    this.setState({
+      inDom: false,
+      hideAnimationInProgress: false
+    });
+  };
+  onFadeComplete = () => {
+    if (!this.state.visible && this.state.hideAnimationInProgress) {
+      this.setState({
+        isExpanded: false
+      });
+    }
+  };
+  toggle = () => {
+    if (this.state.visible && this.state.isExpanded) {
+      this.setState({
+        hideAnimationInProgress: true,
+        visible: false
+      });
+    } else if (!this.state.visible && !this.state.isExpanded) {
+      this.setState({
+        inDom: true,
+        initiateShow: true
+      });
+    }
+  };
+  render() {
+    const {
+      animateOnEnter,
+      animateOnLeave,
+      children,
+      className
+    } = this.props;
+    const showPlaceholder = !this.state.visible && !this.state.hideAnimationInProgress;
+    // 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, {
+      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: children
+        })
+      })]
+    }) : null;
+  }
+}
+export default AnimateAndFade;

package/bpk-component-info-banner/src/BpkAnimateAndFade.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-animate-and-fade--enter{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--enter-active{opacity:1}.bpk-animate-and-fade--leave{transition:opacity 200ms ease-in-out;opacity:1}.bpk-animate-and-fade--leave-active{transition:opacity 200ms ease-in-out;opacity:.01}.bpk-animate-and-fade--appear{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--appear-active{opacity:1}

package/bpk-component-info-banner/src/BpkInfoBanner.d.ts

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+/// <reference types="react" />
+import type { CommonProps } from './common-types';
+
+declare const BpkInfoBanner: ({
+  animateOnEnter,
+  animateOnLeave,
+  icon,
+  show,
+  ...rest
+}: CommonProps) => JSX.Element;
+export default BpkInfoBanner;

package/bpk-component-info-banner/src/BpkInfoBanner.js

@@ -0,0 +1,40 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkInfoBannerInner from "./BpkInfoBannerInner";
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultProps = {
+  animateOnEnter: false,
+  animateOnLeave: false,
+  show: true,
+  icon: null
+};
+const BpkInfoBanner = ({
+  animateOnEnter = false,
+  animateOnLeave = false,
+  icon = null,
+  show = true,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkInfoBannerInner, {
+  animateOnEnter: animateOnEnter,
+  animateOnLeave: animateOnLeave,
+  show: show,
+  icon: icon,
+  ...rest
+});
+export default BpkInfoBanner;

package/bpk-component-info-banner/src/BpkInfoBanner.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-info-banner{padding:0.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff1f2}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:0.125rem 0}.bpk-info-banner__message{padding:0.25rem 0.5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#545860}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:transparent;cursor:pointer;appearance:none}.bpk-info-banner__expand-icon{fill:#545860}.bpk-info-banner__expand-icon--flipped{transform:scaleY(-1)}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:0.25rem 0 0.25rem}.bpk-info-banner__children-container--no-action{padding:0.25rem 0 0.5rem}.bpk-info-banner__expandable-action{padding-bottom:0.25rem}

package/bpk-component-info-banner/src/BpkInfoBannerDismissable.d.ts

@@ -0,0 +1,30 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+/// <reference types="react" />
+import type { CommonProps, OnDismissHandler } from './common-types';
+
+export type Props = CommonProps & {
+  dismissButtonLabel: string;
+  onDismiss?: OnDismissHandler;
+};
+declare const BpkInfoBannerDismissable: ({
+  onDismiss,
+  ...rest
+}: Props) => JSX.Element;
+export default BpkInfoBannerDismissable;

package/bpk-component-info-banner/src/BpkInfoBannerDismissable.js

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkInfoBannerInner, { CONFIGURATION } from "./BpkInfoBannerInner";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkInfoBannerDismissable = ({
+  onDismiss = null,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkInfoBannerInner, {
+  configuration: CONFIGURATION.DISMISSABLE,
+  onDismiss: onDismiss,
+  ...rest
+});
+export default BpkInfoBannerDismissable;

package/bpk-component-info-banner/src/BpkInfoBannerExpandable.d.ts

@@ -0,0 +1,37 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 type { ReactNode } from 'react';
+
+import type { CommonProps, OnExpandToggleHandler } from './common-types';
+
+export type Props = CommonProps & {
+  children: ReactNode;
+  expanded?: boolean;
+  toggleButtonLabel: string;
+  onExpandToggle?: OnExpandToggleHandler;
+  action?: ExpandableBannerAction;
+};
+declare const BpkInfoBannerExpandable: ({
+  action,
+  children,
+  expanded,
+  onExpandToggle,
+  ...rest
+}: Props) => JSX.Element;
+export default BpkInfoBannerExpandable;

package/bpk-component-info-banner/src/BpkInfoBannerExpandable.js

@@ -0,0 +1,35 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkInfoBannerInner, { CONFIGURATION } from "./BpkInfoBannerInner";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkInfoBannerExpandable = ({
+  action = null,
+  children,
+  expanded = false,
+  onExpandToggle = null,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkInfoBannerInner, {
+  action: action,
+  configuration: CONFIGURATION.EXPANDABLE,
+  expanded: expanded,
+  onExpandToggle: onExpandToggle,
+  ...rest,
+  children: children
+});
+export default BpkInfoBannerExpandable;

package/bpk-component-info-banner/src/BpkInfoBannerInner.d.ts

@@ -0,0 +1,58 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 type { ReactNode } from 'react';
+
+import type {
+  CommonProps,
+  OnDismissHandler,
+  OnExpandToggleHandler,
+} from './common-types';
+
+export declare const CONFIGURATION: {
+  readonly NONE: 'none';
+  readonly DISMISSABLE: 'dismissable';
+  readonly EXPANDABLE: 'expandable';
+};
+type Props = CommonProps & {
+  configuration?: (typeof CONFIGURATION)[keyof typeof CONFIGURATION];
+  children?: ReactNode | string;
+  expanded?: boolean;
+  toggleButtonLabel?: string;
+  onExpandToggle?: OnExpandToggleHandler;
+  dismissButtonLabel?: string;
+  onDismiss?: OnDismissHandler;
+};
+declare const BpkInfoBannerInner: ({
+  animateOnEnter,
+  animateOnLeave,
+  bannerClassName,
+  children,
+  configuration,
+  dismissButtonLabel,
+  expanded,
+  icon,
+  message,
+  onDismiss,
+  onExpandToggle,
+  show,
+  toggleButtonLabel,
+  type,
+  ...rest
+}: Props) => JSX.Element;
+export default BpkInfoBannerInner;

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -0,0 +1,176 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+/* This is an internal component to Backpack that powers `BpkInfoBanner`,
+ * `BpkInfoBannerDismissable` and `BpkInfoBannerExpandable`.
+ */
+
+// @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 BpkLink from "../../bpk-component-link";
+// @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";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
+import { cssModules } from "../../bpk-react-utils";
+import AnimateAndFade from "./AnimateAndFade";
+import { ALERT_TYPES, STYLE_TYPES } from "./common-types";
+import STYLES from "./BpkInfoBanner.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const ExpandIcon = withButtonAlignment(ChevronDownIcon);
+export const CONFIGURATION = {
+  NONE: 'none',
+  DISMISSABLE: 'dismissable',
+  EXPANDABLE: 'expandable'
+};
+const getIconForType = (type, CustomIcon) => {
+  const classMap = {
+    [ALERT_TYPES.SUCCESS]: getClassName('bpk-info-banner__success-icon'),
+    [ALERT_TYPES.WARNING]: getClassName('bpk-info-banner__warning-icon'),
+    [ALERT_TYPES.ERROR]: getClassName('bpk-info-banner__error-icon'),
+    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon')
+  };
+  const className = classMap[type];
+  const componentMap = {
+    [ALERT_TYPES.SUCCESS]: TickCircleIcon,
+    [ALERT_TYPES.WARNING]: InfoCircleIcon,
+    [ALERT_TYPES.ERROR]: InfoCircleIcon,
+    [ALERT_TYPES.INFO]: InfoCircleIcon
+  };
+  const Icon = CustomIcon || componentMap[type];
+  const AlignedIcon = withButtonAlignment(Icon);
+  return /*#__PURE__*/_jsx(AlignedIcon, {
+    className: className
+  });
+};
+const ToggleButton = props => {
+  const classNames = getClassName('bpk-info-banner__expand-icon', props.expanded && 'bpk-info-banner__expand-icon--flipped');
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: getClassName('bpk-info-banner__toggle-button'),
+    "aria-label": props.label,
+    "aria-expanded": props.expanded,
+    title: props.label,
+    children: /*#__PURE__*/_jsx(ExpandIcon, {
+      className: classNames
+    })
+  });
+};
+const BpkInfoBannerInner = ({
+  action = null,
+  animateOnEnter = false,
+  animateOnLeave = false,
+  bannerClassName,
+  children = null,
+  configuration,
+  dismissButtonLabel = '',
+  expanded = false,
+  icon = null,
+  message,
+  onDismiss = null,
+  onExpandToggle = null,
+  show = true,
+  style = STYLE_TYPES.DEFAULT,
+  toggleButtonLabel = '',
+  type = ALERT_TYPES.INFO,
+  ...rest
+}) => {
+  const onBannerExpandToggle = () => {
+    if (onExpandToggle) {
+      onExpandToggle(!expanded);
+    }
+  };
+  const onBannerDismiss = () => {
+    if (onDismiss) {
+      onDismiss();
+    }
+  };
+  const isExpandable = configuration === CONFIGURATION.EXPANDABLE;
+  const dismissable = configuration === CONFIGURATION.DISMISSABLE;
+  const showChildren = isExpandable && expanded;
+  const sectionClassNames = getClassName('bpk-info-banner', `bpk-info-banner--${type}`, `bpk-info-banner--style-${style}`, bannerClassName && bannerClassName);
+  const headerClassNames = getClassName('bpk-info-banner__header', isExpandable && 'bpk-info-banner__header--expandable');
+  const childrenContainerClassName = action && isExpandable ? getClassName('bpk-info-banner__children-container--with-action') : getClassName('bpk-info-banner__children-container--no-action');
+
+  /* eslint-disable
+    jsx-a11y/no-static-element-interactions,
+    jsx-a11y/click-events-have-key-events,
+    */
+  // Disabling 'click-events-have-key-events and interactive-supports-focus' because header element is not focusable.
+  // ToggleButton is focusable and works for this.
+  return /*#__PURE__*/_jsx(AnimateAndFade, {
+    animateOnEnter: animateOnEnter,
+    animateOnLeave: dismissable || animateOnLeave,
+    show: show,
+    ...rest,
+    children: /*#__PURE__*/_jsxs("section", {
+      className: sectionClassNames,
+      role: "alert",
+      children: [/*#__PURE__*/_jsxs("div", {
+        role: isExpandable ? 'button' : undefined,
+        className: headerClassNames,
+        onClick: onBannerExpandToggle,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-info-banner__icon'),
+          children: getIconForType(type, icon)
+        }), /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-info-banner__message'),
+          children: message
+        }), isExpandable && /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-info-banner__toggle'),
+          children: /*#__PURE__*/_jsx(ToggleButton, {
+            expanded: expanded,
+            label: toggleButtonLabel
+          })
+        }), dismissable && /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-info-banner__toggle'),
+          children: /*#__PURE__*/_jsx(BpkCloseButton, {
+            className: getClassName('bpk-info-banner__toggle-button'),
+            onClick: onBannerDismiss,
+            "aria-label": dismissButtonLabel,
+            label: dismissButtonLabel
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+        duration: parseInt(durationSm, 10),
+        height: showChildren ? 'auto' : 0,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: childrenContainerClassName,
+          children: children
+        }), isExpandable && action && /*#__PURE__*/_jsx(BpkLink, {
+          className: getClassName('bpk-info-banner__expandable-action'),
+          onClick: action.callback,
+          children: action.title
+        })]
+      })]
+    })
+  });
+  /* eslint-enable */
+};
+
+export default BpkInfoBannerInner;

package/bpk-component-info-banner/src/common-types.d.ts

@@ -0,0 +1,44 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 type { FunctionComponent, ReactNode } from 'react';
+
+export declare const ALERT_TYPES: {
+  readonly PRIMARY: 'primary';
+  readonly SUCCESS: 'success';
+  readonly WARN: 'warn';
+  readonly ERROR: 'error';
+  readonly NEUTRAL: 'neutral';
+};
+export type AlertTypeValue = (typeof ALERT_TYPES)[keyof typeof ALERT_TYPES];
+export type CommonProps = {
+  type: AlertTypeValue;
+  message: ReactNode | string;
+  animateOnEnter?: boolean;
+  animateOnLeave?: boolean;
+  show?: boolean;
+  bannerClassName?: string | null;
+  icon?: FunctionComponent<any> | null;
+  [rest: string]: any;
+};
+export type OnExpandToggleHandler =
+  | ((expanded: boolean) => void)
+  | null
+  | undefined;
+export type OnDismissHandler = (() => void) | null | undefined;
+export type OnHideHandler = (() => void) | null | undefined;

package/bpk-component-info-banner/src/common-types.js

@@ -0,0 +1,28 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+export const ALERT_TYPES = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  INFO: 'info'
+};
+export const STYLE_TYPES = {
+  DEFAULT: 'default',
+  ON_CONTRAST: 'onContrast'
+};

package/bpk-component-info-banner/src/withBannerAlertState.d.ts

@@ -0,0 +1,168 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+/// <reference types="node" />
+import type { ComponentType } from 'react';
+export type WithBannerAlertStateProps = {
+  onHide?: () => void;
+  hideAfter?: number;
+};
+declare const withBannerAlertState: <
+  P extends Partial<
+    import('./common-types').CommonProps & {
+      dismissButtonLabel: string;
+      onDismiss?: import('./common-types').OnDismissHandler;
+    } & {
+      children: import('react').ReactNode;
+      expanded?: boolean | undefined;
+      toggleButtonLabel: string;
+      onExpandToggle?: import('./common-types').OnExpandToggleHandler;
+    }
+  >,
+>(
+  WrappedComponent: ComponentType<P>,
+) => {
+  new (props: P & WithBannerAlertStateProps): {
+    hideIntervalId?: NodeJS.Timeout | null | undefined;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onExpandToggle: () => void;
+    onDismiss: () => void;
+    onHide: () => void;
+    render(): JSX.Element;
+    context: any;
+    setState<
+      K extends keyof {
+        expanded?: boolean | undefined;
+        show?: boolean | undefined;
+      },
+    >(
+      state:
+        | {
+            expanded?: boolean | undefined;
+            show?: boolean | undefined;
+          }
+        | ((
+            prevState: Readonly<{
+              expanded?: boolean | undefined;
+              show?: boolean | undefined;
+            }>,
+            props: Readonly<P & WithBannerAlertStateProps>,
+          ) =>
+            | {
+                expanded?: boolean | undefined;
+                show?: boolean | undefined;
+              }
+            | Pick<
+                {
+                  expanded?: boolean | undefined;
+                  show?: boolean | undefined;
+                },
+                K
+              >
+            | null)
+        | Pick<
+            {
+              expanded?: boolean | undefined;
+              show?: boolean | undefined;
+            },
+            K
+          >
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<P & WithBannerAlertStateProps> &
+      Readonly<{
+        children?: import('react').ReactNode;
+      }>;
+    state: Readonly<{
+      expanded?: boolean | undefined;
+      show?: boolean | undefined;
+    }>;
+    refs: {
+      [key: string]: import('react').ReactInstance;
+    };
+    shouldComponentUpdate?(
+      nextProps: Readonly<P & WithBannerAlertStateProps>,
+      nextState: Readonly<{
+        expanded?: boolean | undefined;
+        show?: boolean | undefined;
+      }>,
+      nextContext: any,
+    ): boolean;
+    componentDidCatch?(
+      error: Error,
+      errorInfo: import('react').ErrorInfo,
+    ): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<P & WithBannerAlertStateProps>,
+      prevState: Readonly<{
+        expanded?: boolean | undefined;
+        show?: boolean | undefined;
+      }>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<P & WithBannerAlertStateProps>,
+      prevState: Readonly<{
+        expanded?: boolean | undefined;
+        show?: boolean | undefined;
+      }>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<P & WithBannerAlertStateProps>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillReceiveProps?(
+      nextProps: Readonly<P & WithBannerAlertStateProps>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<P & WithBannerAlertStateProps>,
+      nextState: Readonly<{
+        expanded?: boolean | undefined;
+        show?: boolean | undefined;
+      }>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<P & WithBannerAlertStateProps>,
+      nextState: Readonly<{
+        expanded?: boolean | undefined;
+        show?: boolean | undefined;
+      }>,
+      nextContext: any,
+    ): void;
+  };
+  displayName: string;
+  defaultProps: {
+    onDismiss: null;
+    onExpandToggle: null;
+    onHide: null;
+    expanded: boolean;
+    show: boolean;
+    hideAfter: null;
+    animateOnLeave: boolean;
+    children: null;
+  };
+  contextType?: import('react').Context<any> | undefined;
+};
+export default withBannerAlertState;

package/bpk-component-info-banner/src/withBannerAlertState.js

@@ -0,0 +1,111 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 { wrapDisplayName } from "../../bpk-react-utils";
+import BpkInfoBannerExpandable from "./BpkInfoBannerExpandable";
+import { jsx as _jsx } from "react/jsx-runtime";
+const withBannerAlertState = WrappedComponent => {
+  class component extends Component {
+    static defaultProps = {
+      onDismiss: null,
+      onExpandToggle: null,
+      onHide: null,
+      expanded: false,
+      show: true,
+      hideAfter: null,
+      animateOnLeave: false,
+      children: null
+    };
+    constructor(props) {
+      super(props);
+      this.state = {
+        expanded: props.expanded,
+        show: true
+      };
+      this.hideIntervalId = null;
+    }
+    componentDidMount() {
+      const {
+        hideAfter
+      } = this.props;
+      if (WrappedComponent !== BpkInfoBannerExpandable && hideAfter && hideAfter > 0) {
+        this.hideIntervalId = setTimeout(() => {
+          this.onHide();
+        }, hideAfter * 1000);
+      }
+    }
+    componentWillUnmount() {
+      if (this.hideIntervalId) {
+        clearTimeout(this.hideIntervalId);
+      }
+    }
+    onExpandToggle = () => {
+      this.setState(prevState => {
+        const expanded = !prevState.expanded;
+        if (this.props.onExpandToggle) {
+          this.props.onExpandToggle(expanded);
+        }
+        return {
+          expanded
+        };
+      });
+    };
+    onDismiss = () => {
+      this.setState({
+        show: false
+      });
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
+    };
+    onHide = () => {
+      this.setState({
+        show: false
+      });
+      if (this.props.onHide) {
+        this.props.onHide();
+      }
+    };
+    render() {
+      const {
+        animateOnLeave,
+        children,
+        expanded,
+        hideAfter,
+        onDismiss,
+        onExpandToggle,
+        onHide,
+        show,
+        ...rest
+      } = this.props;
+      return /*#__PURE__*/_jsx(WrappedComponent, {
+        expanded: this.state.expanded,
+        onExpandToggle: this.onExpandToggle,
+        onDismiss: this.onDismiss,
+        show: this.state.show,
+        animateOnLeave: hideAfter && hideAfter > 0 || animateOnLeave,
+        ...rest,
+        children: children
+      });
+    }
+  }
+  component.displayName = wrapDisplayName(WrappedComponent, 'withBannerAlertState');
+  return component;
+};
+export default withBannerAlertState;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js

@@ -54,7 +54,7 @@ export const BpkPriceMarkerV2 = props => {
       children: /*#__PURE__*/_jsxs("div", {
         className: classNames,
         children: [icon, /*#__PURE__*/_jsx(BpkText, {
-          textStyle: TEXT_STYLES.label2,
+          textStyle: TEXT_STYLES.label3,
           children: label
         })]
       })

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts

@@ -29,6 +29,7 @@ type Props = Partial<BpkCalendarGridProps> & {
     focusedDate?: Date | null;
     selectionConfiguration?: SelectionConfiguration;
     className?: string | null;
+    customRowHeight?: number;
 };
 declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;
 export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -29,20 +29,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
 // These constants are here to facilitate calculating the height
-// Row and month item heights are defined in rem to support text scaling
-const ROW_HEIGHT = 2.75;
 // This is the additional height of each grid without any rows.
 const BASE_MONTH_ITEM_HEIGHT = 8.125;
 const COLUMN_COUNT = 7;
 // Most browsers have by default 16px root font size
 const DEFAULT_ROOT_FONT_SIZE = 16;
-// Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
-const ESTIMATED_MONTH_ITEM_HEIGHT = (BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT) * DEFAULT_ROOT_FONT_SIZE;
 // Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting)
 const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE;
 const BpkScrollableCalendarGridList = props => {
   const {
     className = null,
+    customRowHeight = 2.75,
     focusedDate = null,
     minDate,
     selectionConfiguration,
@@ -52,13 +49,18 @@ const BpkScrollableCalendarGridList = props => {
   const startDate = startOfDay(startOfMonth(minDate));
   const endDate = startOfDay(startOfMonth(rest.maxDate));
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
+
+  // Row and month item heights are defined in rem to support text scaling
+  const rowHeight = customRowHeight;
+  // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
+  const estimatedMonthItemHeight = (BASE_MONTH_ITEM_HEIGHT + 5 * rowHeight) * DEFAULT_ROOT_FONT_SIZE;
   const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
 
   // The `react-window` API requires the height in pixels to be specified
   // To be able to scale text size, we use rem and then we get the root font size so that we can calculate the final value in px
   const [rootFontSize, setRootFontSize] = useState(getInitialRootFontSize);
   const months = useMemo(() => getMonthsArray(startDate, monthsCount), [minDate, monthsCount]);
-  const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, ROW_HEIGHT * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
+  const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, rowHeight * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
   useEffect(() => {
     // this is required by the react-window library in order to re-render the list whenever an item's size changes
     if (listRef.current) {
@@ -66,7 +68,7 @@ const BpkScrollableCalendarGridList = props => {
     }
   }, [monthItemHeights]);
   const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
-  const getItemSize = index => monthItemHeights[index] || ESTIMATED_MONTH_ITEM_HEIGHT;
+  const getItemSize = index => monthItemHeights[index] || estimatedMonthItemHeight;
   const rowRenderer = ({
     index,
     style
@@ -103,7 +105,7 @@ const BpkScrollableCalendarGridList = props => {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
     children: /*#__PURE__*/_jsx(AutoSizer, {
       onResize: onResize,
-      defaultHeight: ESTIMATED_MONTH_ITEM_HEIGHT,
+      defaultHeight: estimatedMonthItemHeight,
       defaultWidth: ESTIMATED_MONTH_ITEM_WIDTH,
       children: ({
         height,
@@ -114,7 +116,7 @@ const BpkScrollableCalendarGridList = props => {
         } : {},
         width: width,
         height: height,
-        estimatedItemSize: ESTIMATED_MONTH_ITEM_HEIGHT,
+        estimatedItemSize: estimatedMonthItemHeight,
         itemSize: getItemSize,
         itemCount: months.length,
         overscanCount: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "31.1.2",
+  "version": "31.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.4.0",
+    "@skyscanner/bpk-foundations-web": "^17.5.3",
     "@skyscanner/bpk-svgs": "^19.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",