@skyscanner/backpack-web 14.0.0 → 15.0.0

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">

package/bpk-component-input/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-input --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from 'bpk-component-input';
+import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from '@skyscanner/backpack-web/bpk-component-input';
 
 export default () => (
   <BpkInput
@@ -75,8 +73,8 @@ You can still attach custom handlers for these events as they will still be call
 
 ```js
 import React from 'react';
-import BpkInput, { withOpenEvents } from 'bpk-component-input';
-import BpkPopover from 'bpk-component-popover';
+import BpkInput, { withOpenEvents } from '@skyscanner/backpack-web/bpk-component-input';
+import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
 
 const EnhancedInput = withOpenEvents(BpkInput);
 

package/bpk-component-label/README.md

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

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

@@ -38,25 +38,20 @@ export type Props = {
 const BpkLabel = (props: Props) => {
   const { children, className, disabled, required, valid, white, ...rest } =
     props;
-  const classNames = [getClassName('bpk-label')];
   const invalid = valid === false;
 
-  if (white) {
-    classNames.push(getClassName('bpk-label--white'));
-  }
-  if (invalid) {
-    classNames.push(getClassName('bpk-label--invalid'));
-  }
-  if (disabled) {
-    classNames.push(getClassName('bpk-label--disabled'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
+  const classNames = getClassName(
+    'bpk-label',
+    white && 'bpk-label--white',
+    invalid && 'bpk-label--invalid',
+    disabled && 'bpk-label--disabled',
+    white && disabled && 'bpk-label--disabled--white',
+    className,
+  );
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <label className={classNames.join(' ')} {...rest}>
+    <label className={classNames} {...rest}>
       {children}
       {!disabled && required && (
         <span className={getClassName('bpk-label__asterisk')}>*</span>

package/bpk-component-label/src/BpkLabel.module.scss

@@ -31,6 +31,10 @@
 
   &--disabled {
     @include bpk-label--disabled;
+
+    &--white {
+      color: $bpk-text-disabled-on-dark-day;
+    }
   }
 
   &__asterisk {

package/bpk-component-link/README.md

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

package/bpk-component-list/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-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 { BpkList, BpkListItem } from 'bpk-component-list';
+import { BpkList, BpkListItem } from '@skyscanner/backpack-web/bpk-component-list';
 
 export default () => (
   <BpkList>

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

@@ -4,17 +4,15 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-loading-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 BpkLoadingButton from 'bpk-component-loading-button';
-import BaggageIcon from 'bpk-component-icon/sm/baggage';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
+import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
+import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
+import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 
 const AlignedBaggageIcon = withButtonAlignment(withRtlSupport(BaggageIcon));
 const icon = <AlignedBaggageIcon />;

package/bpk-component-map/README.md

@@ -6,21 +6,19 @@ Requires **React 16.8+**
 
 ## Installation
 
-```sh
-npm install bpk-component-map --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkText from 'bpk-component-text';
-import { withRtlSupport } from 'bpk-component-icon';
-import LandmarkIconSm from 'bpk-component-icon/sm/landmark';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
+import LandmarkIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/landmark';
 import BpkMap, {
   BpkIconMarker,
   BpkOverlayView,
-} from 'bpk-component-map';
+} from '@skyscanner/backpack-web/bpk-component-map';
 
 const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
 
@@ -64,7 +62,7 @@ Price markers are used to display clickable prices on a map.
 
 ```js
 import React from 'react';
-import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from 'bpk-component-map';
+import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from '@skyscanner/backpack-web/bpk-component-map';
 
 export default () => (
   <BpkMap
@@ -106,7 +104,7 @@ If you intend to include multiple maps on one page, it's better to load the Goog
 
 ```js
 import React from 'react';
-import BpkMap, { withGoogleMapsScript } from 'bpk-component-map';
+import BpkMap, { withGoogleMapsScript } from '@skyscanner/backpack-web/bpk-component-map';
 
 const BpkMapWithScript = withGoogleMapsScript(BpkMap);
 

package/bpk-component-mobile-scroll-container/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-mobile-scroll-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 { cssModules } from 'bpk-react-utils';
-import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
+import BpkMobileScrollContainer from '@skyscanner/backpack-web/bpk-component-mobile-scroll-container';
 
 import STYLES from './MyComponent.scss';
 

package/bpk-component-modal/README.md

@@ -4,17 +4,15 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-modal --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 BpkModal from 'bpk-component-modal';
-import BpkButton from 'bpk-component-button';
-import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
+import BpkModal from '@skyscanner/backpack-web/bpk-component-modal';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 class App extends Component {
   constructor() {

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

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-navigation-bar --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -14,10 +12,10 @@ npm install bpk-component-navigation-bar --save-dev
 
 ```js
 import React from 'react';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import { withRtlSupport } from 'bpk-component-icon';
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 
-import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
+import BpkNavigationBar, { BpkNavigationBarIconButton, BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
 
@@ -58,8 +56,8 @@ export default () => (
 
 ```js
 import React from 'react';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import { BpkNavigationBarIconButton } from 'bpk-component-navigation-bar';
+import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
+import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 export default () => (
   <BpkNavigationBarIconButton
@@ -89,7 +87,7 @@ export default () => (
 
 ```js
 import React from 'react';
-import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
+import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 
 export default () => (
   <BpkNavigationBarButtonLink onClick={() => {}}>

package/bpk-component-nudger/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-nudger --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -14,8 +12,8 @@ npm install bpk-component-nudger --save-dev
 
 ```js
 import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import BpkNudger from 'bpk-component-nudger';
+import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
+import BpkNudger from '@skyscanner/backpack-web/bpk-component-nudger';
 
 class App extends Component {
   constructor() {
@@ -53,8 +51,8 @@ class App extends Component {
 
 ```js
 import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import { BpkConfigurableNudger } from 'bpk-component-nudger';
+import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
+import { BpkConfigurableNudger } from '@skyscanner/backpack-web/bpk-component-nudger';
 
 const options = ['economy', 'premium', 'business', 'first'];
 

package/bpk-component-nudger/src/BpkNudger.module.scss

@@ -29,6 +29,7 @@ $bpk-spacing-v2: true;
     display: inline-block;
     padding: bpk-spacing-md() 0;
     border: none;
+    color: $bpk-text-primary-day;
     text-align: center;
     vertical-align: middle;
 
@@ -37,7 +38,7 @@ $bpk-spacing-v2: true;
 
     &--secondary-on-dark {
       background-color: transparent;
-      color: $bpk-text-primary-night;
+      color: $bpk-text-on-dark-day;
     }
 
     &--numeric {

package/bpk-component-overlay/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-overlay --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkText from 'bpk-component-text';
-import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from 'bpk-component-overlay';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
 
 export default () => (
   <div>