@skyscanner/backpack-web 0.0.1 → 0.0.4

package/README.md

@@ -0,0 +1,100 @@
+# Backpack Design System
+
+> Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.
+
+[![Build Status](https://github.com/Skyscanner/backpack/workflows/Backpack%20CI/badge.svg)](https://github.com/Skyscanner/backpack/actions)
+
+
+## Quick links
+
+- [Documentation](https://backpack.github.io/)
+- [Changelog](./CHANGELOG.md)
+
+## Usage
+
+### Installing packages
+
+```sh
+npm install [package-name] --save-dev
+```
+
+## Contributing
+
+To contribute please see [contributing.md](CONTRIBUTING.md).
+
+## List of packages
+
+| Component | Version |
+|--------|-------|
+| [`bpk-component-accordion`](/packages/bpk-component-accordion) | [![npm version](https://badge.fury.io/js/bpk-component-accordion.svg)](http://badge.fury.io/js/bpk-component-accordion) |
+| [`bpk-component-autosuggest`](/packages/bpk-component-autosuggest) | [![npm version](https://badge.fury.io/js/bpk-component-autosuggest.svg)](http://badge.fury.io/js/bpk-component-autosuggest) |
+| [`bpk-component-badge`](/packages/bpk-component-badge) | [![npm version](https://badge.fury.io/js/bpk-component-badge.svg)](http://badge.fury.io/js/bpk-component-badge) |
+| [`bpk-component-banner-alert`](/packages/bpk-component-banner-alert) | [![npm version](https://badge.fury.io/js/bpk-component-banner-alert.svg)](http://badge.fury.io/js/bpk-component-banner-alert) |
+| [`bpk-component-barchart`](/packages/bpk-component-barchart) | [![npm version](https://badge.fury.io/js/bpk-component-barchart.svg)](http://badge.fury.io/js/bpk-component-barchart) |
+| [`bpk-component-blockquote`](/packages/bpk-component-blockquote) | [![npm version](https://badge.fury.io/js/bpk-component-blockquote.svg)](http://badge.fury.io/js/bpk-component-blockquote) |
+| [`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb) | [![npm version](https://badge.fury.io/js/bpk-component-breadcrumb.svg)](http://badge.fury.io/js/bpk-component-breadcrumb) |
+| [`bpk-component-breakpoint`](/packages/bpk-component-breakpoint) | [![npm version](https://badge.fury.io/js/bpk-component-breakpoint.svg)](http://badge.fury.io/js/bpk-component-breakpoint) |
+| [`bpk-component-button`](/packages/bpk-component-button) | [![npm version](https://badge.fury.io/js/bpk-component-button.svg)](http://badge.fury.io/js/bpk-component-button) |
+| [`bpk-component-calendar`](/packages/bpk-component-calendar) | [![npm version](https://badge.fury.io/js/bpk-component-calendar.svg)](http://badge.fury.io/js/bpk-component-calendar) |
+| [`bpk-component-card`](/packages/bpk-component-card) | [![npm version](https://badge.fury.io/js/bpk-component-card.svg)](http://badge.fury.io/js/bpk-component-card) |
+| [`bpk-component-checkbox`](/packages/bpk-component-checkbox) | [![npm version](https://badge.fury.io/js/bpk-component-checkbox.svg)](http://badge.fury.io/js/bpk-component-checkbox) |
+| [`bpk-component-chip`](/packages/bpk-component-chip) | [![npm version](https://badge.fury.io/js/bpk-component-chip.svg)](http://badge.fury.io/js/bpk-component-chip) |
+| [`bpk-component-close-button`](/packages/bpk-component-close-button) | [![npm version](https://badge.fury.io/js/bpk-component-close-button.svg)](http://badge.fury.io/js/bpk-component-close-button) |
+| [`bpk-component-code`](/packages/bpk-component-code) | [![npm version](https://badge.fury.io/js/bpk-component-code.svg)](http://badge.fury.io/js/bpk-component-code) |
+| [`bpk-component-content-container`](/packages/bpk-component-content-container) | [![npm version](https://badge.fury.io/js/bpk-component-content-container.svg)](http://badge.fury.io/js/bpk-component-content-container) |
+| [`bpk-component-datatable`](/packages/bpk-component-datatable) | [![npm version](https://badge.fury.io/js/bpk-component-datatable.svg)](http://badge.fury.io/js/bpk-component-datatable) |
+| [`bpk-component-datepicker`](/packages/bpk-component-datepicker) | [![npm version](https://badge.fury.io/js/bpk-component-datepicker.svg)](http://badge.fury.io/js/bpk-component-datepicker) |
+| [`bpk-component-description-list`](/packages/bpk-component-description-list) | [![npm version](https://badge.fury.io/js/bpk-component-description-list.svg)](http://badge.fury.io/js/bpk-component-description-list) |
+| [`bpk-component-dialog`](/packages/bpk-component-dialog) | [![npm version](https://badge.fury.io/js/bpk-component-dialog.svg)](http://badge.fury.io/js/bpk-component-dialog) |
+| [`bpk-component-drawer`](/packages/bpk-component-drawer) | [![npm version](https://badge.fury.io/js/bpk-component-drawer.svg)](http://badge.fury.io/js/bpk-component-drawer) |
+| [`bpk-component-fieldset`](/packages/bpk-component-fieldset) | [![npm version](https://badge.fury.io/js/bpk-component-fieldset.svg)](http://badge.fury.io/js/bpk-component-fieldset) |
+| [`bpk-component-form-validation`](/packages/bpk-component-form-validation) | [![npm version](https://badge.fury.io/js/bpk-component-form-validation.svg)](http://badge.fury.io/js/bpk-component-form-validation) |
+| [`bpk-component-grid`](/packages/bpk-component-grid) | [![npm version](https://badge.fury.io/js/bpk-component-grid.svg)](http://badge.fury.io/js/bpk-component-grid) |
+| [`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle) | [![npm version](https://badge.fury.io/js/bpk-component-grid-toggle.svg)](http://badge.fury.io/js/bpk-component-grid-toggle) |
+| [`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav) | [![npm version](https://badge.fury.io/js/bpk-component-horizontal-nav.svg)](http://badge.fury.io/js/bpk-component-horizontal-nav) |
+| [`bpk-component-icon`](/packages/bpk-component-icon) | [![npm version](https://badge.fury.io/js/bpk-component-icon.svg)](http://badge.fury.io/js/bpk-component-icon) |
+| [`bpk-component-image`](/packages/bpk-component-image) | [![npm version](https://badge.fury.io/js/bpk-component-image.svg)](http://badge.fury.io/js/bpk-component-image) |
+| [`bpk-component-infinite-scroll`](/packages/bpk-component-infinite-scroll) | [![npm version](https://badge.fury.io/js/bpk-component-infinite-scroll.svg)](http://badge.fury.io/js/bpk-component-infinite-scroll) |
+| [`bpk-component-input`](/packages/bpk-component-input) | [![npm version](https://badge.fury.io/js/bpk-component-input.svg)](http://badge.fury.io/js/bpk-component-input) |
+| [`bpk-component-label`](/packages/bpk-component-label) | [![npm version](https://badge.fury.io/js/bpk-component-label.svg)](http://badge.fury.io/js/bpk-component-label) |
+| [`bpk-component-link`](/packages/bpk-component-link) | [![npm version](https://badge.fury.io/js/bpk-component-link.svg)](http://badge.fury.io/js/bpk-component-link) |
+| [`bpk-component-list`](/packages/bpk-component-list) | [![npm version](https://badge.fury.io/js/bpk-component-list.svg)](http://badge.fury.io/js/bpk-component-list) |
+| [`bpk-component-loading-button`](/packages/bpk-component-loading-button) | [![npm version](https://badge.fury.io/js/bpk-component-loading-button.svg)](http://badge.fury.io/js/bpk-component-loading-button) |
+| [`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container) | [![npm version](https://badge.fury.io/js/bpk-component-mobile-scroll-container.svg)](http://badge.fury.io/js/bpk-component-mobile-scroll-container) |
+| [`bpk-component-modal`](/packages/bpk-component-modal) | [![npm version](https://badge.fury.io/js/bpk-component-modal.svg)](http://badge.fury.io/js/bpk-component-modal) |
+| [`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar) | [![npm version](https://badge.fury.io/js/bpk-component-navigation-bar.svg)](http://badge.fury.io/js/bpk-component-navigation-bar) |
+| [`bpk-component-navigation-stack`](/packages/bpk-component-navigation-stack) | [![npm version](https://badge.fury.io/js/bpk-component-navigation-stack.svg)](http://badge.fury.io/js/bpk-component-navigation-stack) |
+| [`bpk-component-nudger`](/packages/bpk-component-nudger) | [![npm version](https://badge.fury.io/js/bpk-component-nudger.svg)](http://badge.fury.io/js/bpk-component-nudger) |
+| [`bpk-component-pagination`](/packages/bpk-component-pagination) | [![npm version](https://badge.fury.io/js/bpk-component-pagination.svg)](http://badge.fury.io/js/bpk-component-pagination) |
+| [`bpk-component-panel`](/packages/bpk-component-panel) | [![npm version](https://badge.fury.io/js/bpk-component-panel.svg)](http://badge.fury.io/js/bpk-component-panel) |
+| [`bpk-component-phone-input`](/packages/bpk-component-phone-input) | [![npm version](https://badge.fury.io/js/bpk-component-phone-input.svg)](http://badge.fury.io/js/bpk-component-phone-input) |
+| [`bpk-component-popover`](/packages/bpk-component-popover) | [![npm version](https://badge.fury.io/js/bpk-component-popover.svg)](http://badge.fury.io/js/bpk-component-popover) |
+| [`bpk-component-progress`](/packages/bpk-component-progress) | [![npm version](https://badge.fury.io/js/bpk-component-progress.svg)](http://badge.fury.io/js/bpk-component-progress) |
+| [`bpk-component-radio`](/packages/bpk-component-radio) | [![npm version](https://badge.fury.io/js/bpk-component-radio.svg)](http://badge.fury.io/js/bpk-component-radio) |
+| [`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle) | [![npm version](https://badge.fury.io/js/bpk-component-rtl-toggle.svg)](http://badge.fury.io/js/bpk-component-rtl-toggle) |
+| [`bpk-component-section-list`](/packages/bpk-component-section-list) | [![npm version](https://badge.fury.io/js/bpk-component-section-list.svg)](http://badge.fury.io/js/bpk-component-section-list) |
+| [`bpk-component-select`](/packages/bpk-component-select) | [![npm version](https://badge.fury.io/js/bpk-component-select.svg)](http://badge.fury.io/js/bpk-component-select) |
+| [`bpk-component-slider`](/packages/bpk-component-slider) | [![npm version](https://badge.fury.io/js/bpk-component-slider.svg)](http://badge.fury.io/js/bpk-component-slider) |
+| [`bpk-component-spinner`](/packages/bpk-component-spinner) | [![npm version](https://badge.fury.io/js/bpk-component-spinner.svg)](http://badge.fury.io/js/bpk-component-spinner) |
+| [`bpk-component-star-rating`](/packages/bpk-component-star-rating) | [![npm version](https://badge.fury.io/js/bpk-component-star-rating.svg)](http://badge.fury.io/js/bpk-component-star-rating) |
+| [`bpk-component-table`](/packages/bpk-component-table) | [![npm version](https://badge.fury.io/js/bpk-component-table.svg)](http://badge.fury.io/js/bpk-component-table) |
+| [`bpk-component-text`](/packages/bpk-component-text) | [![npm version](https://badge.fury.io/js/bpk-component-text.svg)](http://badge.fury.io/js/bpk-component-text) |
+| [`bpk-component-textarea`](/packages/bpk-component-textarea) | [![npm version](https://badge.fury.io/js/bpk-component-textarea.svg)](http://badge.fury.io/js/bpk-component-textarea) |
+| [`bpk-theming`](/packages/bpk-theming) | [![npm version](https://badge.fury.io/js/bpk-theming.svg)](http://badge.fury.io/js/bpk-theming) |
+| [`bpk-component-ticket`](/packages/bpk-component-ticket) | [![npm version](https://badge.fury.io/js/bpk-component-ticket.svg)](http://badge.fury.io/js/bpk-component-ticket) |
+| [`bpk-component-tooltip`](/packages/bpk-component-tooltip) | [![npm version](https://badge.fury.io/js/bpk-component-tooltip.svg)](http://badge.fury.io/js/bpk-component-tooltip) |
+| [`bpk-react-utils`](/packages/bpk-react-utils) | [![npm version](https://badge.fury.io/js/bpk-react-utils.svg)](http://badge.fury.io/js/bpk-react-utils) |
+
+## List of external packages
+
+These components are part of Backpack and are utilised by the components but live in the Foundations repository.
+
+| Component | Version |
+|--------|-------|
+| [`bpk-mixins`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-mixins) | [![npm version](https://badge.fury.io/js/bpk-mixins.svg)](http://badge.fury.io/js/bpk-mixins) |
+| [`bpk-stylesheets`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-stylesheets) | [![npm version](https://badge.fury.io/js/bpk-stylesheets.svg)](http://badge.fury.io/js/bpk-stylesheets) |
+| [`@skyscanner/bpk-svgs`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-svgs) | [![npm version](https://badge.fury.io/js/%40skyscanner%2Fbpk-svgs.svg)](https://badge.fury.io/js/%40skyscanner%2Fbpk-svgs) |
+| [`@skyscanner/bpk-foundations-web`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-foundations-web) | [![npm version](https://badge.fury.io/js/%40skyscanner%2Fbpk-foundations-web.svg)](https://badge.fury.io/js/%40skyscanner%2Fbpk-foundations-web) |
+
+## Contact
+- backpack@skyscanner.net

package/bpk-animate-height/examples.js

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import BpkButton from 'bpk-component-button';
+import BpkButton from '../../bpk-component-button';
 import React, { Component, type Node } from 'react';
 
 import AnimateHeight from './index';

package/bpk-component-accordion/examples.js

@@ -19,10 +19,10 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkCheckbox from 'bpk-component-checkbox';
-import { withAlignment } from 'bpk-component-icon';
-import StopsIcon from 'bpk-component-icon/sm/stops';
-import TimeIcon from 'bpk-component-icon/sm/time';
+import BpkCheckbox from '../../bpk-component-checkbox';
+import { withAlignment } from '../../bpk-component-icon';
+import StopsIcon from '../../bpk-component-icon/sm/stops';
+import TimeIcon from '../../bpk-component-icon/sm/time';
 import {
   colorMonteverde,
   colorPanjin,

package/bpk-component-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-animate-height": "^4.1.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-text": "^6.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"
@@ -26,6 +26,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-checkbox": "^4.1.0"
+    "bpk-component-checkbox": "^4.1.1"
   }
 }

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

@@ -20,7 +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 './BpkAccordion.module.scss';
 

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

@@ -20,14 +20,14 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import AnimateHeight from 'bpk-animate-height';
-import { withButtonAlignment } from 'bpk-component-icon';
-import ChevronDownIcon from 'bpk-component-icon/sm/chevron-down';
+import AnimateHeight from '../../bpk-animate-height';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down';
 import BpkText, {
   TEXT_STYLES,
   WEIGHT_STYLES as weights,
-} from 'bpk-component-text';
-import { cssModules, deprecated } from 'bpk-react-utils';
+} from '../../bpk-component-text';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkAccordionItem.module.scss';
 
@@ -79,8 +79,8 @@ const BpkAccordionItem = (props: Props) => {
   const contentId = `${id}_content`;
   const clonedIcon = icon
     ? React.cloneElement(icon, {
-        className: getClassName('bpk-accordion__leading-icon'),
-      })
+      className: getClassName('bpk-accordion__leading-icon'),
+    })
     : null;
 
   return (
@@ -144,7 +144,7 @@ BpkAccordionItem.defaultProps = {
   icon: null,
   onClick: () => null,
   tagName: 'span',
-  textStyle: TEXT_STYLES.base,
+  textStyle: TEXT_STYLES.bodyDefault,
 };
 
 export default BpkAccordionItem;

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

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 type Props = {
   initiallyExpanded: boolean,
@@ -59,7 +59,7 @@ const withAccordionItemState = (ComposedComponent: ComponentType<any>) => {
         (prevState) => ({
           expanded: !prevState.expanded,
         }),
-        this.props.onClick || (() => {}),
+        this.props.onClick || (() => { }),
       );
     };
 

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

@@ -27,7 +27,7 @@ import React, {
   type Element,
   type ComponentType,
 } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 const getInitiallyExpanded = (children) => {
   const accordionItems = Children.toArray(children);

package/bpk-component-aria-live/examples.js

@@ -18,12 +18,12 @@
 /* @flow strict */
 
 import React, { type Node } from 'react';
-import BpkChip from 'bpk-component-chip';
-import BpkFieldset from 'bpk-component-fieldset';
-import BpkSelect from 'bpk-component-select';
-import BpkSwitch from 'bpk-component-switch';
-import { cssModules } from 'bpk-react-utils';
-import { BpkCode } from 'bpk-component-code';
+import BpkChip from '../../bpk-component-chip';
+import BpkFieldset from '../../bpk-component-fieldset';
+import BpkSelect from '../../bpk-component-select';
+import BpkSwitch from '../../bpk-component-switch';
+import { cssModules } from '../bpk-react-utils';
+import { BpkCode } from '../../bpk-component-code';
 
 import STYLES from './examples.module.scss';
 
@@ -187,8 +187,7 @@ class ChipsExample extends React.Component<
       const nextState = prevState;
       nextState.categories[category] = !prevState.categories[category];
       nextState.updates.push(
-        `${category} became ${
-          nextState.categories[category] ? 'enabled' : 'disabled'
+        `${category} became ${nextState.categories[category] ? 'enabled' : 'disabled'
         }.`,
       );
       return nextState;

package/bpk-component-aria-live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -18,9 +18,9 @@
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "bpk-component-chip": "^5.2.0",
+    "bpk-component-chip": "^5.2.1",
     "bpk-component-code": "^3.1.0",
-    "bpk-component-fieldset": "^4.1.0",
+    "bpk-component-fieldset": "^4.1.1",
     "bpk-component-select": "^5.1.0",
     "bpk-component-switch": "^2.1.0"
   },

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -19,7 +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 './BpkAriaLive.module.scss';
 

package/bpk-component-autosuggest/examples.js

@@ -19,8 +19,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { withRtlSupport } from 'bpk-component-icon';
-import FlightIcon from 'bpk-component-icon/lg/flight';
+import { withRtlSupport } from '../../bpk-component-icon';
+import FlightIcon from '../../bpk-component-icon/lg/flight';
 
 import BpkAutosuggest, { BpkAutosuggestSuggestion } from './index';
 
@@ -108,8 +108,8 @@ const getSuggestions = (value, hanzi) => {
   return inputLength === 0
     ? []
     : data.filter(
-        (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
-      );
+      (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
+    );
 };
 
 const getSuggestionValue = (suggestion) =>

package/bpk-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^6.1.0",
+    "bpk-component-input": "^6.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2",
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.0"
+    "bpk-component-icon": "^9.2.1"
   }
 }

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

@@ -19,9 +19,9 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkInput from 'bpk-component-input';
+import BpkInput from '../../bpk-component-input';
 import Autosuggest from 'react-autosuggest';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkAutosuggest.module.scss';
 

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

@@ -20,7 +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 './BpkAutosuggest.module.scss';
 

package/bpk-component-badge/BadgeLayout.js

@@ -20,7 +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 './BpkBadgeLayout.module.scss';
 

package/bpk-component-badge/examples.js

@@ -19,11 +19,11 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkSmallBeerIcon from 'bpk-component-icon/sm/beer';
-import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
-import BpkSmallWeatherIcon from 'bpk-component-icon/sm/weather';
-import BpkSmallTickIcon from 'bpk-component-icon/sm/tick-circle';
-import BpkSmallCloseIcon from 'bpk-component-icon/sm/close-circle';
+import BpkSmallBeerIcon from '../../bpk-component-icon/sm/beer';
+import BpkSmallFlightIcon from '../../bpk-component-icon/sm/flight';
+import BpkSmallWeatherIcon from '../../bpk-component-icon/sm/weather';
+import BpkSmallTickIcon from '../../bpk-component-icon/sm/tick-circle';
+import BpkSmallCloseIcon from '../../bpk-component-icon/sm/close-circle';
 import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
 
 import BadgeLayout from './BadgeLayout';

package/bpk-component-badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-badge",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack badge component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-storybook-utils": "^1.1.0"
   }
 }

package/bpk-component-badge/src/BpkBadge.js

@@ -20,7 +20,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 './BpkBadge.module.scss';
 

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

@@ -20,10 +20,10 @@
 import React, { Component } from 'react';
 import { action } from 'bpk-storybook-utils';
 import { fontWeightBold } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import CurrencyIcon from 'bpk-component-icon/sm/currency';
-import { AriaLiveDemo } from 'bpk-component-aria-live/examples';
-import { BpkButtonPrimary } from 'bpk-component-button';
-import { cssModules } from 'bpk-react-utils';
+import CurrencyIcon from '../../bpk-component-icon/sm/currency';
+import { AriaLiveDemo } from '../../bpk-component-aria-live/examples';
+import { BpkButtonPrimary } from '../../bpk-component-button';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 

package/bpk-component-banner-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,15 +16,15 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
     "bpk-animate-height": "^4.1.0",
-    "bpk-component-close-button": "^3.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-close-button": "^3.1.1",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.0",
+    "bpk-component-aria-live": "^2.1.1",
     "bpk-component-button": "^5.1.0",
     "bpk-storybook-utils": "^1.1.0"
   },

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

@@ -19,8 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, Component } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkAnimateHeight from 'bpk-animate-height';
+import { cssModules } from '../../bpk-react-utils';
+import BpkAnimateHeight from '../../bpk-animate-height';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 

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

@@ -23,14 +23,14 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type StatelessFunctionalComponent } from 'react';
-import { withButtonAlignment } from 'bpk-component-icon';
-import BpkAnimateHeight from 'bpk-animate-height';
-import BpkCloseButton from 'bpk-component-close-button';
-import TickCircleIcon from 'bpk-component-icon/sm/tick-circle';
-import ChevronDownIcon from 'bpk-component-icon/lg/chevron-down';
-import InfoCircleIcon from 'bpk-component-icon/sm/information-circle';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import BpkAnimateHeight from '../../bpk-animate-height';
+import BpkCloseButton from '../../bpk-component-close-button';
+import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle';
+import ChevronDownIcon from '../../bpk-component-icon/lg/chevron-down';
+import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import AnimateAndFade from './AnimateAndFade';
 import {

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

@@ -19,7 +19,7 @@
 
 import React, { type Node, type ComponentType, Component } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 import {
   type OnDismissHandler,

package/bpk-component-barchart/examples.js

@@ -20,9 +20,9 @@
 
 import React from 'react';
 import { number } from 'prop-types';
-import { cssModules, withDefaultProps } from 'bpk-react-utils';
-import BpkText from 'bpk-component-text';
-import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
+import { cssModules, withDefaultProps } from '../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { updateOnDirectionChange } from '../../bpk-component-rtl-toggle';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { scaleLinear, scaleBand } from 'd3-scale';
 
@@ -40,7 +40,7 @@ import BpkBarchart, {
 const getClassName = cssModules(STYLES);
 
 const Heading = withDefaultProps(BpkText, {
-  textStyle: 'xl',
+  textStyle: TEXT_STYLES.subheading,
   tagName: 'h1',
   className: getClassName('bpk-heading'),
 });

package/bpk-component-barchart/hocs.js

@@ -20,7 +20,7 @@
 
 import isEqual from 'lodash/isEqual';
 import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../bpk-react-utils';
 
 // eslint-disable-next-line import/prefer-default-export
 export const withSelectedState = (ComposedComponent: ComponentType<any>) => {

package/bpk-component-barchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,6 +30,6 @@
     "bpk-component-breakpoint": "^3.1.0",
     "bpk-component-content-container": "^4.1.0",
     "bpk-component-rtl-toggle": "^3.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

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

@@ -26,8 +26,8 @@ import {
   spacingXs,
   lineHeightSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from 'bpk-react-utils';
-import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+import { cssModules } from '../../bpk-react-utils';
+import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 
 import BpkBarchartDefs from './BpkBarchartDefs';
 import BpkBarchartBars from './BpkBarchartBars';

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

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import { remToPx } from './utils';

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

@@ -20,7 +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 {
   spacingXs,
   lineHeightSm,

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

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import dataProp from './customPropTypes';
 import STYLES from './BpkChartDataTable.module.scss';