@skyscanner/backpack-web 13.0.0 → 14.1.0

package/README.md

@@ -2,9 +2,9 @@
 
 > Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.
 
+[![npm version](https://badge.fury.io/js/@skyscanner%2Fbackpack-web.svg)](https://badge.fury.io/js/@skyscanner%2Fbackpack-web)
 [![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/)
@@ -12,10 +12,10 @@
 
 ## Usage
 
-### Installing packages
+### Installation
 
 ```sh
-npm install [package-name] --save-dev
+npm install --save @skyscanner/backpack-web
 ```
 
 ## Contributing
@@ -24,72 +24,74 @@ 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-graphic-promotion`](/packages/bpk-component-graphic-promotion)                     | [![npm version](https://badge.fury.io/js/bpk-component-graphic-promotion.svg)](http://badge.fury.io/js/bpk-component-graphic-promotion)                     |
-| [`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-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-switch`](/packages/bpk-component-switch)                                   | [![npm version](https://badge.fury.io/js/bpk-component-switch.svg)](http://badge.fury.io/js/bpk-component-switch)                         |
-| [`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)                                             |
+[`bpk-animate-height`](/packages/bpk-animate-height)
+[`bpk-component-accordion`](/packages/bpk-component-accordion)
+[`bpk-component-autosuggest`](/packages/bpk-component-autosuggest)
+[`bpk-component-badge`](/packages/bpk-component-badge)
+[`bpk-component-banner-alert`](/packages/bpk-component-banner-alert)
+[`bpk-component-barchart`](/packages/bpk-component-barchart)
+[`bpk-component-blockquote`](/packages/bpk-component-blockquote)
+[`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb)
+[`bpk-component-breakpoint`](/packages/bpk-component-breakpoint)
+[`bpk-component-button`](/packages/bpk-component-button)
+[`bpk-component-calendar`](/packages/bpk-component-calendar)
+[`bpk-component-card`](/packages/bpk-component-card)
+[`bpk-component-checkbox`](/packages/bpk-component-checkbox)
+[`bpk-component-chip`](/packages/bpk-component-chip)
+[`bpk-component-close-button`](/packages/bpk-component-close-button)
+[`bpk-component-code`](/packages/bpk-component-code)
+[`bpk-component-content-container`](/packages/bpk-component-content-container)
+[`bpk-component-datatable`](/packages/bpk-component-datatable)
+[`bpk-component-datepicker`](/packages/bpk-component-datepicker)
+[`bpk-component-description-list`](/packages/bpk-component-description-list)
+[`bpk-component-dialog`](/packages/bpk-component-dialog)
+[`bpk-component-drawer`](/packages/bpk-component-drawer)
+[`bpk-component-fieldset`](/packages/bpk-component-fieldset)
+[`bpk-component-form-validation`](/packages/bpk-component-form-validation)
+[`bpk-component-graphic-promotion`](/packages/bpk-component-graphic-promotion)
+[`bpk-component-grid`](/packages/bpk-component-grid)
+[`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle)
+[`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav)
+[`bpk-component-icon`](/packages/bpk-component-icon)
+[`bpk-component-image`](/packages/bpk-component-image)
+[`bpk-component-infinite-scroll`](/packages/bpk-component-infinite-scroll)
+[`bpk-component-input`](/packages/bpk-component-input)
+[`bpk-component-label`](/packages/bpk-component-label)
+[`bpk-component-link`](/packages/bpk-component-link)
+[`bpk-component-list`](/packages/bpk-component-list)
+[`bpk-component-loading-button`](/packages/bpk-component-loading-button)
+[`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container)
+[`bpk-component-modal`](/packages/bpk-component-modal)
+[`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar)
+[`bpk-component-nudger`](/packages/bpk-component-nudger)
+[`bpk-component-page-indicator`](/packages/bpk-component-page-indicator)
+[`bpk-component-pagination`](/packages/bpk-component-pagination)
+[`bpk-component-panel`](/packages/bpk-component-panel)
+[`bpk-component-phone-input`](/packages/bpk-component-phone-input)
+[`bpk-component-popover`](/packages/bpk-component-popover)
+[`bpk-component-progress`](/packages/bpk-component-progress)
+[`bpk-component-radio`](/packages/bpk-component-radio)
+[`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle)
+[`bpk-component-section-list`](/packages/bpk-component-section-list)
+[`bpk-component-select`](/packages/bpk-component-select)
+[`bpk-component-slider`](/packages/bpk-component-slider)
+[`bpk-component-spinner`](/packages/bpk-component-spinner)
+[`bpk-component-star-rating`](/packages/bpk-component-star-rating)
+[`bpk-component-switch`](/packages/bpk-component-switch)
+[`bpk-component-table`](/packages/bpk-component-table)
+[`bpk-component-text`](/packages/bpk-component-text)
+[`bpk-component-textarea`](/packages/bpk-component-textarea)
+[`bpk-theming`](/packages/bpk-theming)
+[`bpk-component-ticket`](/packages/bpk-component-ticket)
+[`bpk-component-tooltip`](/packages/bpk-component-tooltip)
+[`bpk-react-utils`](/packages/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.
 
+These are installed separately and installation information can be found in the [`Backpack Foundations repo`](https://github.com/Skyscanner/backpack-foundations)
+
 | 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)                                                    |
@@ -98,4 +100,5 @@ These components are part of Backpack and are utilised by the components but liv
 | [`@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/README.md

@@ -9,14 +9,12 @@ More information on the easing values can be found at [http://easings.net/](http
 
 ## Installation
 
-```sh
-npm install bpk-animate-height --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
-import AnimateHeight from 'bpk-animate-height';
+import AnimateHeight from '@skyscanner/backpack-web/bpk-animate-height';
 import React, { Component } from 'react';
 
 class AnimateHeightContainer extends Component {

package/bpk-component-accordion/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-accordion --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -16,7 +14,7 @@ The `withSingleItemAccordionState` higher-order component is used to limit one s
 
 ```js
 import React from 'react';
-import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from 'bpk-component-accordion';
+import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from '@skyscanner/backpack-web/bpk-component-accordion';
 
 const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
 
@@ -41,7 +39,7 @@ The `withAccordionItemState` higher-order component is used to allow multiple it
 
 ```js
 import React from 'react';
-import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from 'bpk-component-accordion';
+import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from '@skyscanner/backpack-web/bpk-component-accordion';
 
 const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
 
@@ -66,9 +64,9 @@ export default () => (
 
 ```js
 import React from 'react';
-import { BpkAccordion, BpkAccordionItem } from 'bpk-component-accordion';
-import { withAlignment } from 'bpk-component-icon';
-import StopsIcon from 'bpk-component-icon/sm/stops';
+import { BpkAccordion, BpkAccordionItem } from '@skyscanner/backpack-web/bpk-component-accordion';
+import { withAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
+import StopsIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/stops';
 import { lineHeightBase, iconSizeSm, colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);

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

@@ -80,7 +80,7 @@ const BpkAccordionItem = (props: Props) => {
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
     <div id={id} {...rest}>
-      <dt aria-labelledby={id} className={getClassName('bpk-accordion__title')}>
+      <dt className={getClassName('bpk-accordion__title')}>
         <button
           type="button"
           aria-expanded={expanded}
@@ -105,7 +105,6 @@ const BpkAccordionItem = (props: Props) => {
       </dt>
       <dd
         id={contentId}
-        aria-labelledby={contentId}
         className={getClassName('bpk-accordion__content-container')}
       >
         <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>

package/bpk-component-aria-live/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-aria-live --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```tsx
 import React from 'react';
-import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from '@skyscanner/backpack-web/bpk-component-aria-live';
 
 export default () => (
   <>

package/bpk-component-autosuggest/README.md

@@ -4,18 +4,16 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-autosuggest --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import { withRtlSupport } from 'bpk-component-icon';
-import FlightIcon from 'bpk-component-icon/lg/flight';
-import BpkAutosuggest, { BpkAutosuggestSuggestion } from 'bpk-component-autosuggest';
+import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
+import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';
+import BpkAutosuggest, { BpkAutosuggestSuggestion } from '@skyscanner/backpack-web/bpk-component-autosuggest';
 
 const BpkFlightIcon = withRtlSupport(FlightIcon);
 

package/bpk-component-badge/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-badge --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkBadge, { BADGE_TYPES } from 'bpk-component-badge';
+import BpkBadge, { BADGE_TYPES } from '@skyscanner/backpack-web/bpk-component-badge';
 
 export default () => (
   <BpkBadge

package/bpk-component-banner-alert/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-banner-alert --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -14,7 +12,7 @@ npm install bpk-component-banner-alert --save-dev
 
 ```js
 import React from 'react';
-import BpkBannerAlert, { ALERT_TYPES } from 'bpk-component-banner-alert';
+import BpkBannerAlert, { ALERT_TYPES } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 
 export default () => (
   <BpkBannerAlert
@@ -28,7 +26,7 @@ export default () => (
 
 ```js
 import React, { Component } from 'react';
-import { ALERT_TYPES, BpkBannerAlertDismissable } from 'bpk-component-banner-alert';
+import { ALERT_TYPES, BpkBannerAlertDismissable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 
 class DismissableBpkBannerAlert extends Component {
   constructor() {
@@ -68,7 +66,7 @@ export default () => (
 
 ```js
 import React, { Component } from 'react';
-import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from 'bpk-component-banner-alert';
+import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 
 const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);
 const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable);

package/bpk-component-barchart/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-barchart --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkBarchart from 'bpk-component-barchart';
+import BpkBarchart from '@skyscanner/backpack-web/bpk-component-barchart';
 
 const priceData = [
   {

package/bpk-component-barchart/src/BpkBarchartBar.module.scss

@@ -22,7 +22,7 @@
   @include bpk-themeable-property(
     fill,
     --bpk-barchart-bar-background-color,
-    $bpk-color-sky-blue-tint-01
+    $bpk-line-day
   );
 
   &--interactive:not(.bpk-barchart-bar--selected) {
@@ -32,7 +32,7 @@
       @include bpk-themeable-property(
         fill,
         --bpk-barchart-bar-hover-background-color,
-        $bpk-color-sky-blue
+        $bpk-core-primary-day
       );
     }
 
@@ -40,7 +40,7 @@
       @include bpk-themeable-property(
         fill,
         --bpk-barchart-bar-active-background-color,
-        $bpk-color-sky-blue-shade-01
+        $bpk-core-accent-day
       );
     }
   }
@@ -49,7 +49,7 @@
     @include bpk-themeable-property(
       fill,
       --bpk-barchart-bar-selected-background-color,
-      $bpk-color-sky-blue-shade-01
+      $bpk-core-accent-day
     );
   }
 

package/bpk-component-barchart/src/BpkChartAxis.module.scss

@@ -21,7 +21,7 @@
 .bpk-chart {
   &__axis-tick {
     &-text {
-      fill: $bpk-color-sky-gray-tint-02;
+      fill: $bpk-text-secondary-day;
 
       @include bpk-text;
       @include bpk-caption;
@@ -29,7 +29,7 @@
   }
 
   &__axis-label {
-    fill: $bpk-color-sky-gray-tint-02;
+    fill: $bpk-text-secondary-day;
 
     @include bpk-text;
     @include bpk-caption;

package/bpk-component-barchart/src/BpkChartGridLines.module.scss

@@ -21,6 +21,6 @@
 .bpk-chart {
   &__grid-line {
     shape-rendering: crispedges;
-    stroke: $bpk-color-sky-gray-tint-06;
+    stroke: $bpk-line-day;
   }
 }

package/bpk-component-blockquote/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-blockquote --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkBlockquote from 'bpk-component-blockquote';
+import BpkBlockquote from '@skyscanner/backpack-web/bpk-component-blockquote';
 
 export default () => (
   <BpkBlockquote extraSpace>

package/bpk-component-breadcrumb/README.md

@@ -4,14 +4,12 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-breadcrumb --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 ```js
 import React, { Component } from 'react';
-import BpkBreadcrumb, { BpkBreadcrumbItem } from 'bpk-component-breadcrumb';
+import BpkBreadcrumb, { BpkBreadcrumbItem } from '@skyscanner/backpack-web/bpk-component-breadcrumb';
 
 
 export default class App extends Component {

package/bpk-component-breakpoint/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-breakpoint --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkBreakpoint, { BREAKPOINTS } from 'bpk-component-breakpoint';
+import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
 
 export default () => (
   <BpkBreakpoint query={BREAKPOINTS.MOBILE}>

package/bpk-component-button/README.md

@@ -4,17 +4,15 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-button --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-right';
-import BpkButton from 'bpk-component-button';
+import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 
 const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));
 

package/bpk-component-calendar/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-calendar --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkCalendar from 'bpk-component-calendar';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
+import BpkCalendar from '@skyscanner/backpack-web/bpk-component-calendar';
+import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';
 import format from 'date-fns/format';
 
 const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');

package/bpk-component-card/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-card --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkCard from 'bpk-component-card';
+import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
 
 export default () => (
   <BpkCard>

package/bpk-component-checkbox/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-checkbox --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkCheckbox from 'bpk-component-checkbox';
+import BpkCheckbox from '@skyscanner/backpack-web/bpk-component-checkbox';
 
 export default () => (
   <BpkCheckbox

package/bpk-component-checkbox/src/BpkCheckbox.js

@@ -63,6 +63,7 @@ const BpkCheckbox = (props: Props) => {
     'bpk-checkbox',
     white && 'bpk-checkbox--white',
     disabled && 'bpk-checkbox--disabled',
+    white && disabled && 'bpk-checkbox--disabled--white',
     isInvalid && 'bpk-checkbox--invalid',
     className,
   );

package/bpk-component-checkbox/src/BpkCheckbox.module.scss

@@ -37,6 +37,10 @@ $bpk-spacing-v2: true;
 
   &--disabled {
     @include bpk-checkbox--disabled;
+
+    &--white {
+      color: $bpk-text-disabled-on-dark-day;
+    }
   }
 
   &--invalid {

package/bpk-component-chip/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-chip --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from 'bpk-component-chip';
-import BeachIconSm from 'bpk-component-icon/sm/beach';
+import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from '@skyscanner/backpack-web/bpk-component-chip';
+import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach';
 
 export default () => (