@skyscanner/backpack-web 31.2.0 → 31.3.1

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-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,50 @@
+/*
+ * 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 SUCCESS: 'success',
+  readonly WARNING: 'warning',
+  readonly ERROR: 'error',
+  readonly INFO: 'info',
+};
+export declare const STYLE_TYPES: {
+  readonly DEFAULT: 'default',
+  readonly ON_CONTRAST: 'onContrast',
+};
+export type AlertTypeValue = (typeof ALERT_TYPES)[keyof typeof ALERT_TYPES];
+export type StyleTypeValue = (typeof STYLE_TYPES)[keyof typeof STYLE_TYPES];
+export type CommonProps = {
+  type?: AlertTypeValue;
+  message: ReactNode | string;
+  animateOnEnter?: boolean;
+  animateOnLeave?: boolean;
+  show?: boolean;
+  bannerClassName?: string | null;
+  icon?: FunctionComponent<any> | null;
+  style?: StyleTypeValue;
+  [rest: string]: any;
+};
+export type OnExpandToggleHandler =
+  | ((expanded: boolean) => void)
+  | null
+  | undefined;
+export type ExpandableBannerAction = { title: string, callback: () => 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-modal/src/BpkModalV2/BpKModal.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)}}@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}

package/bpk-stylesheets/base.css

@@ -16,5 +16,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "31.2.0",
+  "version": "31.3.1",
   "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",