@skyscanner/backpack-web 13.0.0 → 14.1.0

package/bpk-component-close-button/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-close-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 BpkCloseButton from 'bpk-component-close-button';
+import BpkCloseButton from '@skyscanner/backpack-web/bpk-component-close-button';
 
 export default () => (
   <BpkCloseButton label="Close" onClick={() => console.log('click')} />

package/bpk-component-code/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-code --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkCode, BpkCodeBlock } from 'bpk-component-code';
-import BpkText from 'bpk-component-text';
+import { BpkCode, BpkCodeBlock } from '@skyscanner/backpack-web/bpk-component-code';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 
 const codeBlock = `import React from 'react';
 import ReactDOM from 'react-dom';

package/bpk-component-content-cards/README.md

@@ -7,9 +7,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-content-cards --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 

package/bpk-component-content-container/README.md

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

package/bpk-component-datatable/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-datatable --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
+import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 
 const rows = [
   { name: 'Jose', description: 'Software Engineer' },
@@ -42,7 +40,7 @@ By default `BpkDataTable` sorts the column using the value of `dataKey`. For use
 
 ```js
 import React from 'react';
-import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
+import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 
 const complexRows = [
     {

package/bpk-component-datepicker/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-datepicker --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 BpkDatepicker, { CALENDAR_SELECTION_TYPE } from 'bpk-component-datepicker';
+import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-datepicker';
 import format from 'date-fns/format';
 
 const formatDate = date => format(date, 'dd/MM/yyyy');
@@ -74,7 +72,7 @@ By default `BpkCalendar` is used but the calendar component is fully configurabl
 
 ```js
 import React, { Component } from 'react';
-import BpkDatepicker from 'bpk-component-datepicker';
+import BpkDatepicker from '@skyscanner/backpack-web/bpk-component-datepicker';
 import {
   BpkCalendarNav,
   BpkCalendarGridHeader,
@@ -82,7 +80,7 @@ import {
   BpkCalendarDate,
   withCalendarState,
   composeCalendar,
-} from 'bpk-component-calendar';
+} from '@skyscanner/backpack-web/bpk-component-calendar';
 import { colorSagano } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const ColoredCalendarDate = props =>

package/bpk-component-description-list/README.md

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

package/bpk-component-dialog/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-dialog --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 BpkDialog from 'bpk-component-dialog';
-import BpkButton from 'bpk-component-button';
+import BpkDialog from '@skyscanner/backpack-web/bpk-component-dialog';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 
 class App extends Component {
   constructor() {

package/bpk-component-drawer/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-drawer --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 BpkDrawer from 'bpk-component-drawer';
-import BpkButton from 'bpk-component-button';
+import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 
 class App extends Component {
   constructor() {

package/bpk-component-fieldset/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-fieldset --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 BpkFieldset from 'bpk-component-fieldset';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
+import BpkFieldset from '@skyscanner/backpack-web/bpk-component-fieldset';
+import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';
 
 class FieldsetContainer extends Component {
   constructor(props) {

package/bpk-component-flare/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-flare --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -16,7 +14,7 @@ Note that the default background color is white. You will need to apply a custom
 
 ```js
 import React from 'react';
-import { BpkContentBubble } from 'bpk-component-flare';
+import { BpkContentBubble } from '@skyscanner/backpack-web/bpk-component-flare';
 
 export default MyComponent = () => (
   <div>

package/bpk-component-floating-notification/README.md

@@ -2,15 +2,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-floating-notification --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkFloatingNotification from 'bpk-component-floating-notification';
+import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
 import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';
 
 export default () => (

package/bpk-component-form-validation/README.md

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

package/bpk-component-graphic-promotion/README.md

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

package/bpk-component-grid/README.md

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

package/bpk-component-grid-toggle/README.md

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

package/bpk-component-grid-toggle/src/BpkGridToggle.module.scss

@@ -35,7 +35,7 @@
       height: auto;
       background: linear-gradient(
           to bottom,
-          rgba($bpk-color-panjin, 0.3) 0,
+          rgba($bpk-status-danger-spot-day, 0.3) 0,
           transparent $bpk-one-pixel-rem
         )
         repeat left 0;

package/bpk-component-horizontal-nav/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-horizontal-nav --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 BpkHorizontalNav, { BpkHorizontalNavItem } from 'bpk-component-horizontal-nav';
+import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
 
 export default class App extends Component {
   constructor() {

package/bpk-component-icon/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-icon --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Basic usage
 
 ```js
 import React from 'react';
-import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
-import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility';
+import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
+import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';
 
 import './icons.scss';
 
@@ -42,10 +40,10 @@ export default () => (
 
 ```js
 import React from 'react';
-import BpkButton from 'bpk-component-button';
-import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
-import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility';
-import { withButtonAlignment, withLargeButtonAlignment } from 'bpk-component-icon';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
+import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';
+import { withButtonAlignment, withLargeButtonAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
 
 const AlignedBpkSmallFlightIcon = withButtonAlignment(BpkSmallFlightIcon);
 const AlignedBpkLargeAccessibilityIcon = withLargeButtonAlignment(BpkLargeAccessibilityIcon);
@@ -66,8 +64,8 @@ export default () => (
 
 ```js
 import React from 'react';
-import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
-import { withRtlSupport } from 'bpk-component-icon';
+import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 
 import './icons.scss';
 

package/bpk-component-icon/lg/baggage-cabin-add.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M6 2.333C6 1.597 6.597 1 7.333 1h3.334C11.403 1 12 1.597 12 2.333V10.5a.5.5 0 0 1-1 0V3H7v7.5a.5.5 0 0 1-1 0V2.333zM5 12h5.594c.506 0 .747.752.393 1.114A6.977 6.977 0 0 0 9 18c0 .794.132 1.556.375 2.268.12.347-.125.732-.492.732H7v1a1 1 0 1 1-2 0v-1a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2zm16.001 6.001A5 5 0 1 1 11 18a5 5 0 0 1 10.001.001zm-2 0a1 1 0 0 0-1-1h-1v-1a1 1 0 1 0-2 0v1h-1A1 1 0 0 0 14 19h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 0 0 1-1z" /></svg>);

package/bpk-component-icon/lg/baggage-cabin-not-included.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M9 2.333C9 1.597 9.597 1 10.333 1h3.334C14.403 1 15 1.597 15 2.333V7.55l6.254-6.254a1 1 0 0 1 1.414 0l.036.035a1 1 0 0 1 0 1.414L15 10.45l-.548.549L13.449 12l-7.407 7.408L2.748 22.7a1 1 0 0 1-1.414 0l-.036-.035a1 1 0 0 1 0-1.415L6 16.55V14a2 2 0 0 1 2-2h2.55L14 8.55V3h-4v7.5a.5.5 0 0 1-1 0V2.333zm7.503 9.73A2 2 0 0 1 18 14v5a2 2 0 0 1-2 2v1a1 1 0 1 1-2 0v-1h-4v1a1 1 0 1 1-2 0v-1.515a.5.5 0 0 1 .146-.354l7.94-7.94a.438.438 0 0 1 .417-.127z" /></svg>);

package/bpk-component-icon/lg/baggage-cabin.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M9 2.333C9 1.597 9.597 1 10.333 1h3.334C14.403 1 15 1.597 15 2.333V10.5a.5.5 0 0 1-1 0V3h-4v7.5a.5.5 0 0 1-1 0V2.333zM8 12h8a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2v1a1 1 0 1 1-2 0v-1h-4v1a1 1 0 1 1-2 0v-1a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2z" /></svg>);

package/bpk-component-icon/lg/baggage-checked-add.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M7.333 1C6.597 1 6 1.597 6 2.333c0 .03.002.06.006.09A.504.504 0 0 0 6 2.5v1a.5.5 0 0 0 1 0V3h4v.5a.5.5 0 0 0 1 0v-1a.505.505 0 0 0-.006-.077.675.675 0 0 0 .006-.09C12 1.597 11.403 1 10.667 1H7.333zM3 7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3.637a.527.527 0 0 1-.427.509 7.003 7.003 0 0 0-5.198 9.122c.12.347-.125.732-.492.732H7v1a1 1 0 1 1-2 0v-1a2 2 0 0 1-2-2V7zm18.001 11.001A5 5 0 1 1 11 18a5 5 0 0 1 10.001.001zm-2 0a1 1 0 0 0-1-1h-1v-1a1 1 0 1 0-2 0v1h-1A1 1 0 0 0 14 19h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 0 0 1-1z" /></svg>);

package/bpk-component-icon/lg/baggage-checked-not-included.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M10.333 1h3.334C14.403 1 15 1.597 15 2.333V3.5a.5.5 0 0 1-1 0V3h-4v.5a.5.5 0 0 1-1 0V2.333C9 1.597 9.597 1 10.333 1zM6 7a2 2 0 0 1 2-2h8c.437 0 .842.14 1.171.379l4.083-4.083a1 1 0 0 1 1.414 0l.036.035a1 1 0 0 1 0 1.414L18 7.45 6.042 19.408 2.748 22.7a1 1 0 0 1-1.414 0l-.036-.035a1 1 0 0 1 0-1.415L6 16.55V7zm2 13.485a.5.5 0 0 1 .146-.354l9-9a.5.5 0 0 1 .854.354V19a2 2 0 0 1-2 2v1a1 1 0 1 1-2 0v-1h-4v1a1 1 0 1 1-2 0v-1.515z" /></svg>);

package/bpk-component-icon/lg/baggage-checked.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M10.333 1h3.334C14.403 1 15 1.597 15 2.333V3.5a.5.5 0 0 1-1 0V3h-4v.5a.5.5 0 0 1-1 0V2.333C9 1.597 9.597 1 10.333 1zM6 7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2v1a1 1 0 1 1-2 0v-1h-4v1a1 1 0 1 1-2 0v-1a2 2 0 0 1-2-2V7z" /></svg>);

package/bpk-component-icon/lg/baggage-generic.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M6.333 1h3.334C10.403 1 11 1.597 11 2.333V10.5a.5.5 0 0 1-1 0V3H6v7.5a.5.5 0 0 1-1 0V2.333C5 1.597 5.597 1 6.333 1zM2 14a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2v1a1 1 0 1 1-2 0v-1H6v1a1 1 0 1 1-2 0v-1a2 2 0 0 1-2-2v-5zM13 3.5V2.333C13 1.597 13.597 1 14.333 1h3.334C18.403 1 19 1.597 19 2.333V3.5a.5.5 0 0 1-1 0V3h-4v.5a.5.5 0 0 1-1 0zm3 17V14c0-1.728-1.095-3.2-2.63-3.76a.545.545 0 0 1-.37-.502V5.5a.5.5 0 0 1 .5-.5H20a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2v1a1 1 0 1 1-2 0v-1h-1.5a.5.5 0 0 1-.5-.5z" /></svg>);

package/bpk-component-icon/sm/baggage-cabin-add.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M7.8 0h2.4A1.8 1.8 0 0 1 12 1.746v9.504a.75.75 0 0 1-1.5 0V3h-3v8.25a.75.75 0 0 1-1.5 0V1.8A1.8 1.8 0 0 1 7.8 0zM5.25 13.5h5.172c.362 0 .541.477.3.747A6.725 6.725 0 0 0 9 18.75c0 1.137.28 2.207.777 3.147.14.265-.043.603-.343.603H7.5v.375a1.125 1.125 0 0 1-2.25 0V22.5A2.25 2.25 0 0 1 3 20.25v-4.5a2.25 2.25 0 0 1 2.25-2.25zM21 18.75a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0zm-6-3V18h-2.25a.75.75 0 0 0 0 1.5H15v2.25a.75.75 0 0 0 1.5 0V19.5h2.25a.75.75 0 0 0 0-1.5H16.5v-2.25a.75.75 0 0 0-1.5 0z" /></svg>);

package/bpk-component-icon/sm/baggage-cabin-not-included.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><g clipPath="url(#clip0_8306_178)"><path d="M10.8 0h2.4A1.8 1.8 0 0 1 15 1.746V6.9L21.443.457a1.5 1.5 0 1 1 2.121 2.121L2.582 23.561a1.5 1.5 0 0 1-2.121-2.122L9 12.9V1.8A1.8 1.8 0 0 1 10.8 0zm2.7 8.4V3h-3v8.25c-.02.17-.007.115-.02.17L13.5 8.4zM8.25 22.875v-.636a.25.25 0 0 1 .073-.177l8.237-8.237a.234.234 0 0 1 .278-.045A2.25 2.25 0 0 1 18 15.75v4.5a2.25 2.25 0 0 1-2.25 2.25v.375a1.125 1.125 0 0 1-2.25 0V22.5h-3v.375a1.125 1.125 0 0 1-2.25 0z" /></g></svg>);

package/bpk-component-icon/sm/baggage-cabin.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M10.8 0h2.4A1.8 1.8 0 0 1 15 1.746v9.504a.75.75 0 0 1-1.5 0V3h-3v8.25a.75.75 0 0 1-1.5 0V1.8A1.8 1.8 0 0 1 10.8 0zM8.25 13.5h7.5A2.25 2.25 0 0 1 18 15.75v4.5a2.25 2.25 0 0 1-2.25 2.25v.375a1.125 1.125 0 0 1-2.25 0V22.5h-3v.375a1.125 1.125 0 0 1-2.25 0V22.5A2.25 2.25 0 0 1 6 20.25v-4.5a2.25 2.25 0 0 1 2.25-2.25z" /></svg>);

package/bpk-component-icon/sm/baggage-checked-add.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M6 1.8A1.8 1.8 0 0 1 7.8 0h2.4A1.8 1.8 0 0 1 12 1.8v1.95a.75.75 0 0 1-1.5 0V3h-3v.75a.75.75 0 0 1-1.5 0V1.8zM5.25 6h7.5A2.25 2.25 0 0 1 15 8.25v3.455a.39.39 0 0 1-.333.381 6.752 6.752 0 0 0-4.89 9.811c.14.265-.043.603-.343.603H7.5v.375a1.125 1.125 0 0 1-2.25 0V22.5A2.25 2.25 0 0 1 3 20.25v-12A2.25 2.25 0 0 1 5.25 6zM21 18.75a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0zm-6-3V18h-2.25a.75.75 0 0 0 0 1.5H15v2.25a.75.75 0 0 0 1.5 0V19.5h2.25a.75.75 0 0 0 0-1.5H16.5v-2.25a.75.75 0 0 0-1.5 0z" /></svg>);

package/bpk-component-icon/sm/baggage-checked-not-included.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><g clipPath="url(#clip0_8306_180)"><path d="M9 1.8A1.8 1.8 0 0 1 10.8 0h2.4A1.8 1.8 0 0 1 15 1.8v1.95a.75.75 0 0 1-1.5 0V3h-3v.75a.75.75 0 0 1-1.5 0V1.8zM8.25 6h7.5c.049 0 .097.002.146.005L21.453.446a1.485 1.485 0 0 1 2.1 2.1l-5.559 5.56L6 20.1l-3.45 3.45a1.485 1.485 0 1 1-2.1-2.1L6 15.9V8.25A2.25 2.25 0 0 1 8.25 6zm0 16.249c0-.1.04-.195.11-.266l9-9a.375.375 0 0 1 .64.266v7.001a2.25 2.25 0 0 1-2.25 2.25v.375a1.125 1.125 0 0 1-2.25 0V22.5h-3v.375a1.125 1.125 0 0 1-2.25 0v-.626z" /></g></svg>);

package/bpk-component-icon/sm/baggage-checked.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M9 1.8A1.8 1.8 0 0 1 10.8 0h2.4A1.8 1.8 0 0 1 15 1.8v1.95a.75.75 0 0 1-1.5 0V3h-3v.75a.75.75 0 0 1-1.5 0V1.8zM8.25 6h7.5A2.25 2.25 0 0 1 18 8.25v12a2.25 2.25 0 0 1-2.25 2.25v.375a1.125 1.125 0 0 1-2.25 0V22.5h-3v.375a1.125 1.125 0 0 1-2.25 0V22.5A2.25 2.25 0 0 1 6 20.25v-12A2.25 2.25 0 0 1 8.25 6z" /></svg>);

package/bpk-component-icon/sm/baggage-generic.js

@@ -0,0 +1,8 @@
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
+  width: "1.125rem",
+  height: "1.125rem"
+}} {...props}><path d="M4.5 1.8A1.8 1.8 0 0 1 6.3 0h2.4a1.8 1.8 0 0 1 1.8 1.746v9.504a.75.75 0 0 1-1.5 0V3H6v8.25a.75.75 0 0 1-1.5 0V1.8zm-3 13.95a2.25 2.25 0 0 1 2.25-2.25h7.5a2.25 2.25 0 0 1 2.25 2.25v4.5a2.25 2.25 0 0 1-2.25 2.25v.375a1.125 1.125 0 0 1-2.25 0V22.5H6v.375a1.125 1.125 0 0 1-2.25 0V22.5a2.25 2.25 0 0 1-2.25-2.25v-4.5zm13.875 6.75a.375.375 0 0 1-.375-.375V15.75a3.752 3.752 0 0 0-2.703-3.602.403.403 0 0 1-.298-.38L12 6.393c0-.159.1-.303.255-.338.16-.036.325-.055.495-.055h7.5a2.25 2.25 0 0 1 2.25 2.25v12a2.25 2.25 0 0 1-2.25 2.25v.375a1.125 1.125 0 0 1-2.25 0V22.5h-2.625zM13.5 1.8A1.8 1.8 0 0 1 15.3 0h2.4a1.8 1.8 0 0 1 1.8 1.8v1.95a.75.75 0 0 1-1.5 0V3h-3v.75a.75.75 0 0 1-1.5 0V1.8z" /></svg>);

package/bpk-component-image/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-image --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkImage from 'bpk-component-image';
+import BpkImage from '@skyscanner/backpack-web/bpk-component-image';
 import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 export default () => (
@@ -34,7 +32,7 @@ The `BpkImage` component will only load images if `inView` is true.
 Using this HOC can make pages load faster and prevent data being used to display images which are never seen by the user.
 
 ```js
-import BpkImage, { withLazyLoading, withLoadingBehavior } from 'bpk-component-image';
+import BpkImage, { withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
 import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // Support for SSR
@@ -58,7 +56,7 @@ export default () => (
 When the `loading` prop is set true, a spinner will be displayed. When this changes to false, the spinner will fade away and the loaded image and content will fade into view.
 
 ```js
-import BpkImage, { BpkBackgroundImage, withLazyLoading, withLoadingBehavior } from 'bpk-component-image';
+import BpkImage, { BpkBackgroundImage, withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
 import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const FadingImage = withLoadingBehavior(BpkImage);
@@ -90,7 +88,7 @@ export default () => (
 Combining `withLazyLoading` and `withLoadingBehavior` gives us a lazily loaded image that will show a spinner while the image loads.
 
 ```js
-import BpkImage, { withLazyLoading, withLoadingBehavior } from 'bpk-component-image';
+import BpkImage, { withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
 import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const documentIfExists = typeof window !== 'undefined' ? document : null;

package/bpk-component-infinite-scroll/README.md

@@ -4,20 +4,18 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-infinite-scroll --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
 import PropTypes from 'prop-types';
-import BpkButton from 'bpk-component-button';
-import BpkSpinner, { SPINNER_TYPES } from 'bpk-component-spinner';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import BpkSpinner, { SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
 import withInfiniteScroll, {
   ArrayDataSource,
-} from 'bpk-component-infinite-scroll';
+} from '@skyscanner/backpack-web/bpk-component-infinite-scroll';
 
 const SomeList = ({ elements }) => (
   <div id="list">
@@ -108,7 +106,7 @@ its data.
 ```js
 import React from 'react';
 import PropTypes from 'prop-types';
-import withInfiniteScroll, { DataSource } from 'bpk-component-infinite-scroll';
+import withInfiniteScroll, { DataSource } from '@skyscanner/backpack-web/bpk-component-infinite-scroll';
 
 const SomeList = ({ elements }) => (
   <div id="list">