@skyscanner/backpack-web 15.1.0 → 16.1.0

package/bpk-component-icon/sm/weather--rain.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M14.25 3.745a.262.262 0 00.236-.397A5.622 5.622 0 004.29 5.003a1.476 1.476 0 01-1.092 1.04 4.166 4.166 0 00-.52 7.944.294.294 0 00.386-.247 5.665 5.665 0 013.851-4.534.874.874 0 00.562-.551 7.153 7.153 0 016.773-4.91z" /><path d="M17.073 18.745h-1.146l-1.835 3.67a1.5 1.5 0 01-2.684-1.34l1.165-2.33h-1.146l-1.835 3.67a1.5 1.5 0 01-2.694-1.32l.01-.02 1.181-2.362a4.16 4.16 0 01-.391-8.168 1.473 1.473 0 001.092-1.04 5.626 5.626 0 0110.654-.79 1.373 1.373 0 00.96.799 4.687 4.687 0 01.091 9.094l-1.903 3.808a1.5 1.5 0 11-2.684-1.342z" /></svg>);

package/bpk-component-icon/sm/weather--snow.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 0a1.5 1.5 0 00-1.5 1.5v2.379l-1.94-1.94a1.5 1.5 0 10-2.157 2.085l.037.037 4.06 4.06V10.5H8.121l-4.06-4.06a1.5 1.5 0 00-2.159 2.083l.037.037 1.94 1.94H1.5a1.5 1.5 0 000 3h2.379l-1.94 1.94a1.5 1.5 0 002.122 2.12l4.06-4.06H10.5v2.379l-4.06 4.06a1.5 1.5 0 002.12 2.122l1.94-1.94V22.5a1.5 1.5 0 003 0v-2.379l1.94 1.94a1.5 1.5 0 002.12-2.122l-4.06-4.06V13.5h2.379l4.06 4.06a1.5 1.5 0 002.122-2.12l-1.94-1.94H22.5a1.5 1.5 0 000-3h-2.379l1.94-1.94a1.5 1.5 0 00-2.122-2.12l-4.06 4.06H13.5V8.121l4.06-4.06a1.5 1.5 0 00-2.12-2.122L13.5 3.88V1.5A1.5 1.5 0 0012 0z" /></svg>);

package/bpk-component-icon/sm/weather--thunderstorm.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M14.486 2.601a.262.262 0 01-.236.397 7.153 7.153 0 00-6.773 4.91.874.874 0 01-.562.551 5.665 5.665 0 00-3.851 4.534.294.294 0 01-.386.247 4.165 4.165 0 01.52-7.942 1.473 1.473 0 001.092-1.04 5.621 5.621 0 0110.196-1.657z" /><path d="M22.087 16.672c-.054.157.139.34.265.232a4.695 4.695 0 00-1.948-8.137 1.376 1.376 0 01-.96-.798 5.626 5.626 0 00-10.654.787 1.476 1.476 0 01-1.092 1.041 4.167 4.167 0 00-.564 7.927.326.326 0 00.409-.358 2.212 2.212 0 01.48-1.508l5.958-7.582A2.25 2.25 0 0118 9.666v3.382a.45.45 0 00.45.45h1.36a2.405 2.405 0 012.277 3.174z" /><path d="M15.175 9.27l-6 7.5A.75.75 0 009.751 18h3a.75.75 0 01.75.75v4.5a.75.75 0 001.327.48l6-7.5a.75.75 0 00-.577-1.23h-3a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-1.326-.48z" /></svg>);

package/bpk-component-icon/sm/weather--tornado.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M1.5 1.5a1.5 1.5 0 000 3h21a1.5 1.5 0 000-3zm3 4.5a1.5 1.5 0 000 3h15a1.5 1.5 0 000-3zM6 12a1.5 1.5 0 011.5-1.5H21a1.5 1.5 0 010 3H7.5A1.5 1.5 0 016 12zm4.5 3a1.5 1.5 0 000 3h9a1.5 1.5 0 000-3zM9 21a1.5 1.5 0 011.5-1.5H15a1.5 1.5 0 010 3h-4.5A1.5 1.5 0 019 21z" /></svg>);

package/bpk-component-icon/sm/weather--wind.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M10.5 3a3 3 0 00-3 3 1.5 1.5 0 01-3 0 6 6 0 116 6h-9a1.5 1.5 0 010-3h9a3 3 0 000-6z" /><path d="M13.5 21a1.5 1.5 0 01-1.397-.95 1.5 1.5 0 00-2.79 1.099A4.501 4.501 0 0017.743 18H19.5a4.5 4.5 0 10-4.188-6.148 1.5 1.5 0 002.791 1.099A1.5 1.5 0 1119.5 15h-18a1.5 1.5 0 100 3h12a1.5 1.5 0 010 3z" /></svg>);

package/bpk-component-icon/sm/weather.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 0a1.5 1.5 0 00-1.5 1.5V3a1.5 1.5 0 003 0V1.5A1.5 1.5 0 0012 0zm0 19.5a1.5 1.5 0 00-1.5 1.5v1.5a1.5 1.5 0 003 0V21a1.5 1.5 0 00-1.5-1.5zM0 12a1.5 1.5 0 001.5 1.5H3a1.5 1.5 0 000-3H1.5A1.5 1.5 0 000 12zm19.5 0a1.5 1.5 0 001.5 1.5h1.5a1.5 1.5 0 000-3H21a1.5 1.5 0 00-1.5 1.5zM3.515 5.636a1.5 1.5 0 112.084-2.158l.037.037 1.06 1.06a1.5 1.5 0 11-2.083 2.159l-.037-.037-1.062-1.061zm13.788 13.789a1.5 1.5 0 112.121-2.122l1.061 1.061a1.5 1.5 0 11-2.084 2.158l-.037-.037-1.06-1.06zm-13.788 1.06a1.5 1.5 0 002.12 0l1.062-1.06a1.5 1.5 0 00-2.122-2.122l-1.06 1.061a1.5 1.5 0 000 2.121zM17.303 6.697a1.5 1.5 0 002.121 0l1.061-1.06a1.5 1.5 0 10-2.121-2.122l-1.06 1.06a1.5 1.5 0 000 2.121v.001zM12 18a6 6 0 10-6-6 6 6 0 006 6z" /></svg>);

package/bpk-component-icon/sm/wifi.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 6.688A17.987 17.987 0 002.465 9.38a.658.658 0 01-.845-.12L.556 8.044a.727.727 0 01.152-1.098l.019-.012A21.283 21.283 0 0112 3.75a21.291 21.291 0 0111.274 3.183l.02.012a.727.727 0 01.15 1.098l-1.062 1.218a.658.658 0 01-.844.12A18.002 18.002 0 0012 6.687zm-6.444 7.083a.787.787 0 00.968.161 11.637 11.637 0 0110.954.001.787.787 0 00.968-.162l1.007-1.153a.717.717 0 00-.171-1.1 14.949 14.949 0 00-14.562 0 .716.716 0 00-.171 1.1l1.006 1.153zm3.82 4.386l1.52 1.62a1.526 1.526 0 002.209 0l1.52-1.62a1.139 1.139 0 00-.183-1.835 5.497 5.497 0 00-4.883 0 1.139 1.139 0 00-.183 1.835z" /></svg>);

package/bpk-component-icon/sm/window--reduce.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M4.5 7.5a3 3 0 013-3H12a1.5 1.5 0 000-3H7.5a6 6 0 00-6 6v9a6 6 0 006 6h9a6 6 0 006-6V12a1.5 1.5 0 00-3 0v4.5a3 3 0 01-3 3h-9a3 3 0 01-3-3z" /><path d="M17.56 8.56l-4.939 4.94H15a1.5 1.5 0 010 3H8.996a1.495 1.495 0 01-1.053-.436l-.007-.006A1.496 1.496 0 017.5 15V9a1.5 1.5 0 013 0v2.379l4.94-4.94a1.5 1.5 0 012.12 2.122z" /></svg>);

package/bpk-component-icon/sm/window.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M19.5 1.5h-15a3 3 0 00-3 3v15a3 3 0 003 3h15a3 3 0 003-3v-15a3 3 0 00-3-3zm0 16.5a1.5 1.5 0 01-1.5 1.5H6A1.5 1.5 0 014.5 18V9A1.5 1.5 0 016 7.5h12A1.5 1.5 0 0119.5 9z" /></svg>);

package/bpk-component-icon/sm/world--amer.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 1.5c5.799 0 10.5 4.702 10.5 10.5 0 5.8-4.701 10.5-10.5 10.5S1.5 17.8 1.5 12C1.5 6.203 6.201 1.5 12 1.5zM5.232 8.764a7.5 7.5 0 007.225 10.723c.082-.359.098-.712-.086-1.018a1.44 1.44 0 00-.42-.417l-.168-.114c-.198-.134-.397-.268-.538-.456a1.872 1.872 0 01-.142-1.496l.082-.208a3.559 3.559 0 00.343-1.721 5.358 5.358 0 01-1.85-.496 4.327 4.327 0 01-.76-.56l-.236-.211c-.4-.362-.798-.722-1.298-.906a2.203 2.203 0 01-.794-.35 1.438 1.438 0 01-.215-.299l-1.04-2.26-.103-.21zm8.36-4.094l.163.173c.341.382.64.804.886 1.258a5.28 5.28 0 00-2.954 2.472 1.223 1.223 0 01-.208.416l-.069.065c-.051.046-.103.092-.129.155a.446.446 0 00-.01.192l.025.093c.099.354.208.704.328 1.051-.425.248-1.051.46-1.334.057a.885.885 0 01-.12-.29l-.037-.161c-.052-.244-.102-.475-.325-.533a.62.62 0 00-.202 0l-1.248.307a4.169 4.169 0 00-.072 1.944c.765-.115 1.698-.164 2.15.464.063.089.118.19.17.296l.074.16c.16.343.315.679.665.707.19-.006.375-.06.54-.156a3.46 3.46 0 013.285.283c.277.258.627.424 1.002.478l.077-.004c.113-.007.23-.014.308.063a.5.5 0 01.085.3c.07.521.646.814 1.166.893l.228.028.435.04.135.02.002-.005.056.008A7.503 7.503 0 0013.591 4.67z" /></svg>);

package/bpk-component-icon/sm/world--apac.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5zm1.83 17.489l-1.902.51.072.001c.908 0 1.777-.161 2.583-.457l-.038-.037a.871.871 0 00-.714-.017zm.446-14.137l.02.098.059.125.07.12c.043.074.087.147.12.226a.925.925 0 01-.412 1.135l-1.149-1.343a1.57 1.57 0 00-.429.878c.003.112.018.222.045.33l.597 1.954c-.904.388-1.757.888-2.537 1.488a.151.151 0 00-.044.25l.66 1.023c.062.078.1.171.11.27a.414.414 0 01-.099.25c-.349.381-.9.503-1.376.303a3.165 3.165 0 01-.984-.683l-.2-.226a17.683 17.683 0 01-1.391-1.722 1.06 1.06 0 00-.86.536c-.17.309-.287.645-.345.993l-.672 2.96c-.172-.076-.315-.246-.45-.435l-.102-.143a2.662 2.662 0 00-.363-.452 7.498 7.498 0 006.488 6.651l.003-.368a5.285 5.285 0 00-.06-.674c-.068-.452.05-.912.325-1.276.35-.28.757-.478 1.194-.578a3.245 3.245 0 001.645-1.425l.889.049a22.8 22.8 0 011.599-.044l.8.02c.08-.005.16.015.229.055a.441.441 0 01.133.279c.069.31.17.614.3.903a7.503 7.503 0 00-3.812-11.527z" /></svg>);

package/bpk-component-icon/sm/world--emea.js

@@ -2,7 +2,7 @@ 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"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5zm-.55 3.02l-.097.008-.327.035a7.501 7.501 0 00.649 14.93L12 19.5l.184-.002-.034-.476-.015-.475c0-.172-.074-.233-.175-.262l-.064-.015-.145-.024c-.104-.02-.206-.055-.275-.16l-.044-.093-.096-.285c-.098-.285-.203-.471-.56-.502a1.17 1.17 0 01-.345-.075l-.072-.032-.113-.06c-.102-.052-.202-.067-.493.046a2.09 2.09 0 01-2.269-.742 4.497 4.497 0 01-.844-2.37c.006-.275.09-.542.242-.77.044-.088.143-.17.26-.248l.121-.075.24-.14.104-.065.084-.063.305-.258c.377-.326.663-.613.803-1.097l.051-.22 2.1-.087.32.113c.86.26 1.81.201 2.75.062l.352-.055 1.358-.24.083-.081c.277-.352-.055-.982-.52-1.128a4.627 4.627 0 00-1.57.033c-.479.02-1.049-.177-1.2-.606l-.032-.136-.007-.08-.008-.176c-.007-.124-.03-.24-.126-.31a.444.444 0 00-.41-.002c-.54.263-1.057.57-1.547.916a1.78 1.78 0 01-1.521.242l-.19-.068.056-1.017.08-.079a.786.786 0 01.325-.13l.125-.022.287-.036c.254-.034.473-.092.522-.325a1.742 1.742 0 00-.022-.378c-.003-.273.175-.458.413-.614l.124-.075.529-.287.123-.075c.239-.156.418-.34.417-.613a2.06 2.06 0 00-.199-.612 1.6 1.6 0 01-.038-.291v-.145l.026-.214zm6.338 7.207l-1.327.54a.451.451 0 00-.28.217.428.428 0 00.023.28 5.174 5.174 0 002.513 2.574 7.17 7.17 0 00.4-.968.643.643 0 01-.175-.043.72.72 0 01-.26-.31 9.735 9.735 0 01-.894-2.29zM9.658 5.05c.175-.026.331.207.46.482l.053.12.108.273.113.304.026.062.028.045c.004.004.008.005.01.004-.334.104-.664.22-.99.35l-.484.204-.316-.367-.02-.042-.008-.047.027-.058.11-.118.07-.096.072-.114.321-.555.086-.135c.114-.17.227-.297.334-.312z" /></svg>);

package/bpk-component-loading-button/src/BpkLoadingButton.module.scss

@@ -23,9 +23,11 @@ $bpk-spacing-v2: true;
 .bpk-loading-button {
   $button-padding-x: bpk-spacing-base() * 2;
   $button-padding-y: bpk-spacing-lg() / 2;
-  $button-icon-only-padding-x: $bpk-one-pixel-rem * 9 * 2;
-  $button-large-icon-only-padding-x: $bpk-one-pixel-rem * 12 * 2;
   $button-large-padding-y: bpk-spacing-lg();
+  $button-icon-only-padding-x: $bpk-button-height - $bpk-icon-size-sm; // this is in order to ensure icons are centred in icon-only buttons
+  /* stylelint-disable-next-line scss/operator-no-newline-after */
+  $button-large-icon-only-padding-x: $bpk-button-large-height -
+    $bpk-icon-size-lg; // this is in order to ensure icons are centred in icon-only buttons
 
   position: relative;
   overflow: hidden;

package/bpk-component-map/src/BpkIconMarker.module.scss

@@ -35,12 +35,14 @@ $bpk-spacing-v2: true;
   }
 
   &__icon {
+    $marker-width: $bpk-one-pixel-rem * 26;
+
     position: absolute;
 
     // This ensures that the icon is positioned exactly in the
     // centre of the marker.
     top: 0.3rem;
-    left: bpk-spacing-sm();
+    left: ($marker-width - $bpk-icon-size-sm) / 2;
     color: $bpk-surface-default-day;
 
     > svg {
@@ -60,10 +62,12 @@ $bpk-spacing-v2: true;
     }
 
     &--selected {
+      $selected-marker-width: $bpk-one-pixel-rem * 32;
+
       // This ensures that the icon is positioned exactly in the
       // centre of the marker.
       top: bpk-spacing-md();
-      left: 0.4rem;
+      left: ($selected-marker-width - $bpk-icon-size-sm) / 2;
 
       @include bpk-themeable-property(
         color,

package/bpk-component-overlay/README.md

@@ -15,24 +15,25 @@ import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/bac
 
 export default () => (
   <div>
-    { /* Basic example */}
-    <BpkOverlay>
+    { /* Basic example with tint */}
+    <BpkOverlay 
+      overlayType={OVERLAY_TYPES.solid} 
+      overlayLevel={OVERLAY_LEVELS.high}
+    >
       <BpkText>Hotels in Canada</BpkText>
     </BpkOverlay>
 
     { /* With the tint invisible */}
-    <BpkOverlay overlayType={OVERLAY_TYPES.none}>
-      <BpkText>Hotels in Canada</BpkText>
-    </BpkOverlay>
-
-    { /* With a border radius style */}
-    <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
+    <BpkOverlay>
       <BpkText>Hotels in Canada</BpkText>
     </BpkOverlay>
 
     { /* With foreground content */}
     <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
-      <BpkText>Hotels in Canada</BpkText>
+      <BpkImage
+        altText="altText here"
+        aspectRatio={16}
+        src="" />
     </BpkOverlay>
   </div>
 );
@@ -43,7 +44,8 @@ export default () => (
 | Property  | PropType | Required | Default Value |
 | --------- | -------- | -------- | ------------- |
 | children | Node | true | - |
-| borderRadiusStyle | oneOf(BORDER_RADIUS_STYLES.none, BORDER_RADIUS_STYLES.sm) | false | BORDER_RADIUS_STYLES.none |
+| borderRadiusStyle (deprecated) | BORDER_RADIUS_STYLES | false | BORDER_RADIUS_STYLES.none |
 | className | string | false | null |
 | foregroundContent | Node | false | null |
-| overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.tint |
+| overlayType | oneOf(OVERLAY_TYPES) | false | null |
+| overlayLevel | oneOf(OVERLAY_LEVELS) | false | null |

package/bpk-component-overlay/index.js

@@ -19,10 +19,11 @@
 
 import BpkOverlay, {
   OVERLAY_TYPES,
+  OVERLAY_LEVELS,
   BORDER_RADIUS_STYLES,
   type Props as BpkOverlayProps,
 } from './src/BpkOverlay';
 
 export type { BpkOverlayProps };
 export default BpkOverlay;
-export { OVERLAY_TYPES, BORDER_RADIUS_STYLES };
+export { OVERLAY_TYPES, OVERLAY_LEVELS, BORDER_RADIUS_STYLES };

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

@@ -20,26 +20,39 @@
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
 
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkOverlay.module.scss';
 
 const getClassName = cssModules(STYLES);
 
 export const OVERLAY_TYPES = {
-  none: 'none',
-  tint: 'tint',
+  solid: 'solid',
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  vignette: 'vignette',
+};
+
+export const OVERLAY_LEVELS = {
+  low: 'low',
+  medium: 'medium',
+  high: 'high',
+  off: 'off',
 };
 
+// DEPRECATED
 export const BORDER_RADIUS_STYLES = {
   none: 'none',
   sm: 'sm',
 };
 
 export type Props = {
-  borderRadiusStyle: $Keys<typeof BORDER_RADIUS_STYLES>,
+  borderRadiusStyle: ?$Keys<typeof BORDER_RADIUS_STYLES>,
   children: Node,
-  overlayType: $Keys<typeof OVERLAY_TYPES>,
+  overlayType: ?$Keys<typeof OVERLAY_TYPES>,
+  overlayLevel: ?$Keys<typeof OVERLAY_LEVELS>,
   className: ?string,
   foregroundContent: ?Node,
 };
@@ -50,6 +63,7 @@ const BpkOverlay = (props: Props) => {
     children,
     className,
     foregroundContent,
+    overlayLevel,
     overlayType,
     ...rest
   } = props;
@@ -57,9 +71,10 @@ const BpkOverlay = (props: Props) => {
   const wrapperClassNames = getClassName('bpk-overlay__wrapper', className);
   const overlayClassNames = getClassName(
     'bpk-overlay__overlay',
-    borderRadiusStyle === BORDER_RADIUS_STYLES.sm &&
-      'bpk-overlay__overlay--border-radius-sm',
-    overlayType === OVERLAY_TYPES.tint && 'bpk-overlay__overlay--tint',
+    overlayType !== null &&
+      (overlayType !== OVERLAY_TYPES.vignette
+        ? `bpk-overlay__overlay--${overlayType}-${overlayLevel}`
+        : `bpk-overlay__overlay--${overlayType}`),
   );
 
   return (
@@ -73,17 +88,22 @@ const BpkOverlay = (props: Props) => {
 
 BpkOverlay.propTypes = {
   children: PropTypes.node.isRequired,
-  borderRadiusStyle: PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
+  borderRadiusStyle: deprecated(
+    PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
+    'This property is deprecated and radius will now be set based on the content. Please remove usage of this property.',
+  ),
   className: PropTypes.string,
   foregroundContent: PropTypes.node,
   overlayType: PropTypes.oneOf(Object.keys(OVERLAY_TYPES)),
+  overlayLevel: PropTypes.oneOf(Object.keys(OVERLAY_LEVELS)),
 };
 
 BpkOverlay.defaultProps = {
-  borderRadiusStyle: BORDER_RADIUS_STYLES.none,
+  borderRadiusStyle: null,
   className: null,
   foregroundContent: null,
-  overlayType: OVERLAY_TYPES.tint,
+  overlayType: null,
+  overlayLevel: null,
 };
 
 export default BpkOverlay;

package/bpk-component-overlay/src/BpkOverlay.module.scss

@@ -21,6 +21,9 @@
 .bpk-overlay {
   &__wrapper {
     position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
   }
 
   &__overlay {
@@ -29,13 +32,132 @@
     left: 0;
     width: 100%;
     height: 100%;
+    border-radius: inherit;
 
     &--tint {
       background: rgba($bpk-color-sky-blue-shade-03, 0.56);
     }
 
-    &--border-radius-sm {
-      @include bpk-border-radius-sm;
+    &--solid {
+      &-low {
+        background: rgba($bpk-text-primary-day, 0.15);
+      }
+
+      &-medium {
+        background: rgba($bpk-text-primary-day, 0.3);
+      }
+
+      &-high {
+        background: rgba($bpk-text-primary-day, 0.4);
+      }
+    }
+
+    &--top {
+      &-low {
+        background: linear-gradient(
+          180deg,
+          rgba($bpk-text-primary-day, 0.15) 0%,
+          rgba($bpk-text-primary-day, 0) 100%
+        );
+      }
+
+      &-medium {
+        background: linear-gradient(
+          180deg,
+          rgba($bpk-text-primary-day, 0.3) 0%,
+          rgba($bpk-text-primary-day, 0) 100%
+        );
+      }
+
+      &-high {
+        background: linear-gradient(
+          180deg,
+          rgba($bpk-text-primary-day, 0.4) 0%,
+          rgba($bpk-text-primary-day, 0) 100%
+        );
+      }
+    }
+
+    &--bottom {
+      &-low {
+        background: linear-gradient(
+          180deg,
+          rgba($bpk-text-primary-day, 0) 0%,
+          rgba($bpk-text-primary-day, 0.15) 100%
+        );
+      }
+
+      &-medium {
+        background: linear-gradient(
+          180deg,
+          rgba($bpk-text-primary-day, 0) 0%,
+          rgba($bpk-text-primary-day, 0.3) 100%
+        );
+      }
+
+      &-high {
+        background: linear-gradient(
+          180deg,
+          rgba($bpk-text-primary-day, 0) 0%,
+          rgba($bpk-text-primary-day, 0.4) 100%
+        );
+      }
+    }
+
+    &--left {
+      &-low {
+        background: linear-gradient(
+          90deg,
+          rgba($bpk-text-primary-day, 0.15) 0%,
+          rgba($bpk-text-primary-day, 0) 98.5%
+        );
+      }
+
+      &-medium {
+        background: linear-gradient(
+          90deg,
+          rgba($bpk-text-primary-day, 0.3) 0%,
+          rgba($bpk-text-primary-day, 0) 98.5%
+        );
+      }
+
+      &-high {
+        background: linear-gradient(
+          90deg,
+          rgba($bpk-text-primary-day, 0.4) 0%,
+          rgba($bpk-text-primary-day, 0) 98.5%
+        );
+      }
+    }
+
+    &--right {
+      &-low {
+        background: linear-gradient(
+          90deg,
+          rgba($bpk-text-primary-day, 0) 0%,
+          rgba($bpk-text-primary-day, 0.15) 98.5%
+        );
+      }
+
+      &-medium {
+        background: linear-gradient(
+          90deg,
+          rgba($bpk-text-primary-day, 0) 0%,
+          rgba($bpk-text-primary-day, 0.3) 98.5%
+        );
+      }
+
+      &-high {
+        background: linear-gradient(
+          90deg,
+          rgba($bpk-text-primary-day, 0) 0%,
+          rgba($bpk-text-primary-day, 0.4) 98.5%
+        );
+      }
+    }
+
+    &--vignette {
+      box-shadow: inset 0 0 50px rgba($bpk-text-primary-day, 0.12);
     }
   }
 }

package/bpk-component-popover/README.md

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React, { Component } from 'react';
+import React, { createRef } from 'react';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
@@ -18,7 +18,7 @@ class App extends Component {
   constructor() {
     super();
 
-    this.ref = React.createRef();
+    this.ref = createRef();
     this.state = {
       isOpen: false,
     };

package/bpk-component-switch/src/BpkSwitch.module.scss

@@ -67,7 +67,7 @@ $border-width: $bpk-one-pixel-rem * 2;
     height: $height;
     transition: background $bpk-duration-sm linear;
     border-radius: $height / 2;
-    background: $bpk-surface-highlight-day;
+    background: $bpk-text-disabled-day;
     cursor: pointer;
 
     // The 'handle'.

package/bpk-component-tooltip/README.md

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 
 ```js
-import React, { Component } from 'react';
+import React, { useRef } from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "15.1.0",
+  "version": "16.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^12.1.4",
-    "@skyscanner/bpk-svgs": "^15.2.1",
+    "@skyscanner/bpk-foundations-web": "^13.0.0",
+    "@skyscanner/bpk-svgs": "^16.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^36.1.0",
+    "bpk-mixins": "^36.1.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",