@skyscanner/backpack-web 4.1.0 → 6.0.0-alpha.1

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

@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
 

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

@@ -19,9 +19,8 @@
 
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import React, { Component, type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
+import React, { Component, type Node } from 'react';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 
 import STYLES from './BpkHorizontalNav.module.scss';

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

@@ -19,7 +19,6 @@
 
 import React, { Component, type Node } from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';

package/bpk-component-icon/src/BpkIcon.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-icon--align-to-button{vertical-align:text-bottom}.bpk-icon--align-to-large-button{margin-top:.1875rem;vertical-align:top}html[dir='rtl'] .bpk-icon--rtl-support{transform:scaleX(-1)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon--align-to-button{vertical-align:text-bottom}.bpk-icon--align-to-large-button{margin-top:0rem;vertical-align:top}html[dir='rtl'] .bpk-icon--rtl-support{transform:scaleX(-1)}

package/bpk-component-icon/src/classNameModifierHOCFactory.js

@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default (displayName, classNamesToAdd = []) =>

package/bpk-component-icon/src/withAlignment.js

@@ -17,7 +17,6 @@
  */
 
 import React from 'react';
-
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default function withAlignment(Component, objectHeight, subjectHeight) {

package/bpk-component-icon/src/withDescription.js

@@ -18,7 +18,6 @@
 /* @flow strict */
 
 import React, { type AbstractComponent } from 'react';
-
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './withDescription.module.scss';

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -19,11 +19,10 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import CSSTransition from 'react-transition-group/CSSTransition';
-import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
 import { cssModules, deprecated } from '../../bpk-react-utils';
 import { BpkSpinner } from '../../bpk-component-spinner';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkBackgroundImage.module.scss';

package/bpk-component-image/src/BpkImage.js

@@ -19,11 +19,10 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import CSSTransition from 'react-transition-group/CSSTransition';
-import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
 import { cssModules, deprecated } from '../../bpk-react-utils';
 import { BpkSpinner } from '../../bpk-component-spinner';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkImage.module.scss';

package/bpk-component-image/src/withLazyLoading.js

@@ -19,9 +19,8 @@
 
 import React, { type Node, type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
-
 import { wrapDisplayName } from '../../bpk-react-utils';
+import throttle from 'lodash/throttle';
 
 type WithLazyLoadingProps = {
   className: ?string,

package/bpk-component-image/src/withLoadingBehavior.js

@@ -18,7 +18,6 @@
 /* @flow */
 
 import React, { type AbstractComponent } from 'react';
-
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 type InjectedProps = {|

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js

@@ -25,11 +25,10 @@ import React, {
   type AbstractComponent,
 } from 'react';
 import PropTypes from 'prop-types';
+import { cssModules } from '../../bpk-react-utils';
 import omit from 'lodash/omit';
 import extend from 'lodash/extend';
 
-import { cssModules } from '../../bpk-react-utils';
-
 import './intersection-observer';
 import DataSource from './DataSource';
 import STYLES from './withInfiniteScroll.module.scss';

package/bpk-component-input/src/BpkClearButton.js

@@ -19,7 +19,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import ClearIcon from '../../bpk-component-icon/sm/close-circle';
 import { withButtonAlignment } from '../../bpk-component-icon';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-input/src/BpkInput.js

@@ -19,7 +19,6 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkClearButton from './BpkClearButton';

package/bpk-component-input/src/withOpenEvents.js

@@ -18,7 +18,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './BpkInput.module.scss';

package/bpk-component-label/src/BpkLabel.js

@@ -19,7 +19,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkLabel.module.scss';

package/bpk-component-link/src/BpkButtonLink.js

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import themeAttributes from './themeAttributes';

package/bpk-component-link/src/BpkLink.js

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import themeAttributes, {

package/bpk-component-list/src/BpkList.js

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkList.module.scss';

package/bpk-component-list/src/BpkList.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-list{margin-top:0;margin-bottom:.75rem;padding-left:1.5rem}.bpk-list__item{margin-top:0;margin-bottom:0}.bpk-list .bpk-list{margin-top:0;margin-bottom:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-list{margin-top:1rem;margin-bottom:1rem;padding-left:1.5rem}.bpk-list__item{margin-top:0;margin-bottom:.25rem}.bpk-list .bpk-list{margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-bottom:0.25rem}.bpk-list .bpk-list>li{margin-bottom:0}

package/bpk-component-list/src/BpkListItem.js

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkList.module.scss';

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-
 import BpkButton from '../../bpk-component-button';
 import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';
 import {

package/bpk-component-loading-button/src/BpkLoadingButton.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-loading-button{position:relative;overflow:hidden}.bpk-loading-button--link{visibility:hidden}.bpk-loading-button__icon{position:absolute;display:inline-flex;visibility:visible;z-index:1;width:calc(100% - 2rem);height:calc(100% - .75rem);justify-content:center;align-items:center;background-color:inherit}.bpk-loading-button__icon--large{height:calc(100% - 1.5rem)}.bpk-loading-button__icon--icon-only{width:calc(100% - 1.125rem)}.bpk-loading-button__icon--large-icon-only{width:calc(100% - 1.5rem)}.bpk-loading-button__icon--link{width:100%;background:unset}

package/bpk-component-map/src/BpkIconMarker.js

@@ -20,7 +20,6 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkIconMarkerBackground from './BpkIconMarkerBackground';

package/bpk-component-map/src/BpkIconMarkerBackground.js

@@ -19,7 +19,6 @@
 /* @flow strict */
 
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkIconMarkerBackground.module.scss';

package/bpk-component-map/src/BpkMap.js

@@ -20,9 +20,8 @@
 
 import React, { type Node, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { GoogleMap } from '@react-google-maps/api';
-
 import { cssModules } from '../../bpk-react-utils';
+import { GoogleMap } from '@react-google-maps/api';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import STYLES from './BpkMap.module.scss';

package/bpk-component-map/src/BpkMap.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.
+*/
+.bpk-map{height:100%}

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

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
 

package/bpk-component-map/src/DefaultLoadingElement.js

@@ -18,7 +18,6 @@
 /* @flow strict */
 
 import React from 'react';
-
 import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
 import { cssModules } from '../../bpk-react-utils';
 

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -21,7 +21,6 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import React, { Component, type Node } from 'react';
-
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkMobileScrollContainer.module.scss';

package/bpk-component-modal/src/BpkModal.js

@@ -19,10 +19,9 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { type Element } from 'react';
-
+import React from 'react';
 import { withScrim } from '../../bpk-scrim-utils';
-import { PortalV1, cssModules, isDeviceIphone } from '../../bpk-react-utils';
+import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {
@@ -50,7 +49,6 @@ export type Props = {
   closeOnScrimClick: boolean,
   closeOnEscPressed: boolean,
   renderTarget: ?() => ?HTMLElement,
-  target: ?((() => ?HTMLElement) | Element<any>),
   onClose: (event: SyntheticEvent<>) => void | null,
 };
 
@@ -64,7 +62,6 @@ const BpkModal = (props: Props) => {
     isOpen,
     onClose,
     renderTarget,
-    target,
     ...rest
   } = props;
 
@@ -79,10 +76,9 @@ const BpkModal = (props: Props) => {
   }
 
   return (
-    <PortalV1
+    <Portal
       isOpen={isOpen}
       onClose={onClose}
-      target={target}
       renderTarget={renderTarget}
       closeOnEscPressed={closeOnEscPressed}
     >
@@ -96,7 +92,7 @@ const BpkModal = (props: Props) => {
         isIphone={isIphone}
         {...rest}
       />
-    </PortalV1>
+    </Portal>
   );
 };
 
@@ -108,7 +104,6 @@ export const propTypes = {
   isIphone: PropTypes.bool,
   isOpen: PropTypes.bool.isRequired,
   renderTarget: PropTypes.func,
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   closeOnScrimClick: PropTypes.bool,
   closeOnEscPressed: PropTypes.bool,
 };
@@ -117,7 +112,6 @@ export const defaultProps = {
   ...modalDialogDefaultProps,
   onClose: () => null,
   renderTarget: null,
-  target: null,
   isIphone: isDeviceIphone(),
   closeOnScrimClick: true,
   closeOnEscPressed: true,

package/bpk-component-modal/src/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)}}.bpk-modal__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-modal__container{display:block}}@media (max-width: 32.25rem){.bpk-modal__container--full-screen-mobile{display:flex;padding:0}}.bpk-modal__container--full-screen{display:flex;padding:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-modal__container{display:block}}@media (max-width: 32rem){.bpk-modal__container--full-screen-mobile{display:flex;padding:0}}.bpk-modal__container--full-screen{display:flex;padding:0}

package/bpk-component-modal/src/BpkModalInner.js

@@ -18,10 +18,9 @@
 
 /* @flow strict */
 
+import { BpkButtonLink } from '../../bpk-component-link';
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-
-import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';
 import BpkNavigationBar from '../../bpk-component-navigation-bar';
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';

package/bpk-component-modal/src/BpkModalInner.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-modal{z-index:1100;width:100%;max-width:32.25rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}@media (max-width: 32.25rem){.bpk-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media (min-width: 32.3125rem){.bpk-modal--wide{max-width:50.25rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__header{box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-modal__navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto;margin-left:1rem;margin-right:0}html[dir='rtl'] .bpk-modal__close-button{margin-left:0;margin-right:1rem}html[dir='rtl'] .bpk-modal__close-button{left:auto}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir='rtl'] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}@media (max-width: 32rem){.bpk-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media (min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__header{box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-modal__navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto;margin-left:1rem;margin-right:0}html[dir='rtl'] .bpk-modal__close-button{margin-left:0;margin-right:1rem}html[dir='rtl'] .bpk-modal__close-button{left:auto}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir='rtl'] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -20,7 +20,6 @@
 
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 

package/bpk-component-navigation-bar/src/BpkNavigationBar.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-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#0770e3;background-color:var(--bpk-navigation-bar-background-color, #0770e3);box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-navigation-bar__title{color:#fff;color:var(--bpk-navigation-bar-title-color, #fff)}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#0770e3;background-color:var(--bpk-navigation-bar-background-color, #0770e3);box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-navigation-bar__title{color:#fff;color:var(--bpk-navigation-bar-title-color, #fff)}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899}

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -20,7 +20,6 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
-
 // TODO: close button is not really only a close button, we should rename and update the import here
 import { BpkButtonLink } from '../../bpk-component-link';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -20,7 +20,6 @@
 
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-
 // TODO: close button is not really only a close button, we should rename and update the import here
 import BpkIconButton from '../../bpk-component-close-button';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-navigation-stack/README.md

@@ -1,3 +1,4 @@
+# This component is deprecated and should be considered as not supported.
 # bpk-component-navigation-stack
 
 > Backpack navigation stack component.

package/bpk-component-navigation-stack/package.json

@@ -3,6 +3,7 @@
   "version": "3.1.13",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
+  "private": true,
   "repository": {
     "type": "git",
     "url": "git@github.com:Skyscanner/backpack.git"

package/bpk-component-navigation-stack/src/BpkNavigationStack.js

@@ -18,14 +18,13 @@
 
 /* @flow strict */
 
+import { cssModules, isRTL } from '../../bpk-react-utils';
 import React, { Children, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, Transition } from 'react-transition-group';
 import debounce from 'lodash/debounce';
 
-import { cssModules, isRTL } from '../../bpk-react-utils';
-
 import STYLES from './BpkNavigationStack.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -21,7 +21,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
 import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';
 import { withButtonAlignment } from '../../bpk-component-icon';

package/bpk-component-nudger/src/BpkNudger.js

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkConfigurableNudger from './BpkConfigurableNudger';

package/bpk-component-nudger/src/BpkNudger.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-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;text-align:center;vertical-align:middle;margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-nudger__input--outline{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;text-align:center;vertical-align:middle;margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-nudger__input--secondary-on-dark{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}

package/bpk-component-overlay/src/BpkOverlay.js

@@ -19,7 +19,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkOverlay.module.scss';

package/bpk-component-pagination/src/BpkPagination.js

@@ -18,7 +18,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationList from './BpkPaginationList';

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationPage from './BpkPaginationPage';

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
 import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
+import BpkButton from '../../bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import BpkButton from '../../bpk-component-button';
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPaginationPage.module.scss';

package/bpk-component-pagination/src/BpkPaginationPage.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-pagination-page{min-width:2.25rem;height:2.25rem;padding:0;border-radius:50%}.bpk-pagination-page--selected{background-image:none;color:#fff;box-shadow:none;cursor:auto;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:active{background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:disabled{box-shadow:none}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-pagination-page{min-width:2.25rem;height:2.25rem;padding:0;border-radius:50%;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-pagination-page--selected{background-image:none;color:#fff;box-shadow:none;cursor:auto;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:active{background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:disabled{box-shadow:none}

package/bpk-component-panel/src/BpkPanel.js

@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPanel.module.scss';

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -20,7 +20,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { cssModules } from '../../bpk-react-utils';
 import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
 import BpkLabel from '../../bpk-component-label';

package/bpk-component-phone-input/src/BpkPhoneInput.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-phone-input{display:flex;column-gap:0.5rem}@media (max-width: 32.25rem){.bpk-phone-input{flex-wrap:wrap}.bpk-phone-input__phone-number{width:100%;margin-top:1rem}}.bpk-phone-input__phone-number{flex:auto}.bpk-phone-input__label{margin-bottom:0.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-phone-input{display:flex;column-gap:0.5rem}@media (max-width: 32rem){.bpk-phone-input{flex-wrap:wrap}.bpk-phone-input__phone-number{width:100%;margin-top:1rem}}.bpk-phone-input__phone-number{flex:auto}.bpk-phone-input__label{margin-bottom:0.5rem}

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

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';