@skyscanner/backpack-web 9.2.0-beta.1 → 9.2.0-beta.2

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -19,10 +19,9 @@
 
 import PropTypes from 'prop-types';
 import React, { cloneElement, type Element } from 'react';
-
-import BpkLabel from '../../bpk-component-label';
-import BpkFormValidation from '../../bpk-component-form-validation';
-import { cssModules } from '../../bpk-react-utils';
+import BpkLabel from 'bpk-component-label';
+import BpkFormValidation from 'bpk-component-form-validation';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkFieldset.module.scss';
 

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

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

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

@@ -18,8 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './bpk-flare-bar.module.scss';
 import Pointer from './__generated__/js/pointer';

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

@@ -20,11 +20,10 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
-
-import BpkAriaLive from '../../bpk-component-aria-live';
-import BpkButton from '../../bpk-component-button';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import { cssModules } from '../../bpk-react-utils';
+import BpkAriaLive from 'bpk-component-aria-live';
+import BpkButton from 'bpk-component-button';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkFloatingNotification.module.scss';
 

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

@@ -18,16 +18,15 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import AnimateHeight from 'bpk-animate-height';
+import { cssModules } from 'bpk-react-utils';
+import BpkSmallExclamationIcon from 'bpk-component-icon/sm/exclamation-circle';
+import { withAlignment } from 'bpk-component-icon';
 import {
   lineHeightSm,
   iconSizeSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
-import AnimateHeight from '../../bpk-animate-height';
-import { cssModules } from '../../bpk-react-utils';
-import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
-import { withAlignment } from '../../bpk-component-icon';
-
 import STYLES from './BpkFormValidation.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+// @ts-expect-error Untyped import. Not added as a stub declaration so consumers still have the suppression in their node_modules when shipped untranspiled.
 import { cssModules } from 'bpk-react-utils';
 
 import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';

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

@@ -17,8 +17,11 @@
  */
 
 import React from 'react';
+// @ts-expect-error Untyped import. Not added as a stub declaration so consumers still have the suppression in their node_modules when shipped untranspiled.
 import { cssModules } from 'bpk-react-utils';
+// @ts-expect-error Untyped import. Not added as a stub declaration so consumers still have the suppression in their node_modules when shipped untranspiled.
 import BpkText from 'bpk-component-text';
+// @ts-expect-error Untyped import. Not added as a stub declaration so consumers still have the suppression in their node_modules when shipped untranspiled.
 import BpkButton from 'bpk-component-button';
 
 import STYLES from './BpkGraphicPromo.module.scss';
@@ -75,11 +78,11 @@ const constructAriaLabel = (
     addText(tagline);
   }
 
+  addText(headline);
+
   if (subheading) {
     addText(subheading);
   }
-
-  addText(headline);
   addText(buttonText);
 
   return text.join('. ');

package/bpk-component-grid/src/BpkGridColumn.js

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

package/bpk-component-grid/src/BpkGridContainer.js

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

package/bpk-component-grid/src/BpkGridRow.js

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

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

@@ -18,9 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import { BpkButtonLink } from '../../bpk-component-link';
+import { cssModules } from 'bpk-react-utils';
+import { BpkButtonLink } from 'bpk-component-link';
 
 import STYLES from './BpkGridToggle.module.scss';
 

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

@@ -18,10 +18,9 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
+import { cssModules } from 'bpk-react-utils';
 import React, { Component, type Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
+import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
 
 import STYLES from './BpkHorizontalNav.module.scss';
 

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

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

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

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

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

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

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

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

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkIcon.module.scss';
 import classNameModifierHOCFactory from './classNameModifierHOCFactory';

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

@@ -19,12 +19,11 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
+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 { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
-
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkBackgroundImage.module.scss';
 

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

@@ -19,12 +19,11 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
+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 { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
-
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkImage.module.scss';
 import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';

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

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

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

@@ -18,8 +18,7 @@
 /* @flow */
 
 import React, { type AbstractComponent } from 'react';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
+import { wrapDisplayName } from 'bpk-react-utils';
 
 type InjectedProps = {|
   onLoad: () => mixed,

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,10 +19,9 @@
 
 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';
+import ClearIcon from 'bpk-component-icon/sm/close-circle';
+import { withButtonAlignment } from 'bpk-component-icon';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkClearButton.module.scss';
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -20,17 +20,16 @@
 
 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 BpkButton from 'bpk-component-button';
+import { BpkSpinner, BpkLargeSpinner } from 'bpk-component-spinner';
 import {
   withButtonAlignment,
   withLargeButtonAlignment,
   withRtlSupport,
-} from '../../bpk-component-icon';
-import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
-import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right';
-import { cssModules } from '../../bpk-react-utils';
+} from 'bpk-component-icon';
+import ArrowIconSm from 'bpk-component-icon/sm/long-arrow-right';
+import ArrowIconLg from 'bpk-component-icon/lg/long-arrow-right';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkLoadingButton.module.scss';
 

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

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

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

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

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

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

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

@@ -20,9 +20,8 @@
 
 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';
+import { cssModules } from 'bpk-react-utils';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text/src/BpkText';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import BpkBasicMapMarker from './BpkBasicMapMarker';

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

@@ -18,9 +18,8 @@
 /* @flow strict */
 
 import React from 'react';
-
-import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
-import { cssModules } from '../../bpk-react-utils';
+import { BpkLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './DefaultLoadingElement.module.scss';
 

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

@@ -21,8 +21,7 @@
 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 { cssModules, isRTL } from 'bpk-react-utils';
 
 import STYLES from './BpkMobileScrollContainer.module.scss';
 

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

@@ -20,9 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { withScrim } from '../../bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
+import { withScrim } from 'bpk-scrim-utils';
+import { Portal, cssModules, isDeviceIphone } from 'bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {

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

@@ -18,13 +18,12 @@
 
 /* @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';
+import BpkCloseButton from 'bpk-component-close-button';
+import BpkNavigationBar from 'bpk-component-navigation-bar';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkModalInner.module.scss';
 import { titlePropType, onClosePropType } from './customPropTypes';

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
+import { themeAttributes as linkAttributes } from 'bpk-component-link';
 
 export default [...linkAttributes];

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

@@ -20,9 +20,8 @@
 
 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';
+import { cssModules } from 'bpk-react-utils';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 
 import STYLES from './BpkNavigationBar.module.scss';
 

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

@@ -20,10 +20,9 @@
 
 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';
+import { BpkButtonLink } from 'bpk-component-link';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkNavigationBarButtonLink.module.scss';
 

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

@@ -20,10 +20,9 @@
 
 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';
+import BpkIconButton from 'bpk-component-close-button';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkNavigationBarIconButton.module.scss';
 

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

@@ -21,13 +21,12 @@
 
 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';
-import MinusIcon from '../../bpk-component-icon/sm/minus';
-import PlusIcon from '../../bpk-component-icon/sm/plus';
-import { cssModules } from '../../bpk-react-utils';
+import BpkButtonSecondary from 'bpk-component-button/BpkButtonSecondary';
+import BpkButtonSecondaryOnDark from 'bpk-component-button/BpkButtonSecondaryOnDark';
+import { withButtonAlignment } from 'bpk-component-icon';
+import MinusIcon from 'bpk-component-icon/sm/minus';
+import PlusIcon from 'bpk-component-icon/sm/plus';
+import { cssModules } from 'bpk-react-utils';
 
 import {
   type CommonProps,

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

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

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
+import { secondaryThemeAttributes as themeAttributes } from 'bpk-component-button/themeAttributes';
 
 export default themeAttributes;

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

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

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

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