@skyscanner/backpack-web 15.0.0 → 16.0.0

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"
-}} {...props}><path d="M12 6.688A17.987 17.987 0 0 0 2.465 9.38a.658.658 0 0 1-.845-.12L.556 8.044a.727.727 0 0 1 .152-1.098l.019-.012A21.283 21.283 0 0 1 12 3.75a21.291 21.291 0 0 1 11.274 3.183l.02.012a.727.727 0 0 1 .15 1.098l-1.062 1.218a.658.658 0 0 1-.844.12A18.002 18.002 0 0 0 12 6.687zm-6.444 7.083a.787.787 0 0 0 .968.161 11.637 11.637 0 0 1 10.954.001.787.787 0 0 0 .968-.162l1.007-1.153a.717.717 0 0 0-.171-1.1 14.949 14.949 0 0 0-14.562 0 .716.716 0 0 0-.171 1.1l1.006 1.153zm3.82 4.386l1.52 1.62a1.526 1.526 0 0 0 2.209 0l1.52-1.62a1.139 1.139 0 0 0-.183-1.835 5.497 5.497 0 0 0-4.883 0 1.139 1.139 0 0 0-.183 1.835z" /></svg>);
+}) => <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"
-}} {...props}><path d="M4.5 7.5a3 3 0 0 1 3-3H12a1.5 1.5 0 0 0 0-3H7.5a6 6 0 0 0-6 6v9a6 6 0 0 0 6 6h9a6 6 0 0 0 6-6V12a1.5 1.5 0 0 0-3 0v4.5a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3z" /><path d="M17.56 8.56l-4.939 4.94H15a1.5 1.5 0 0 1 0 3H8.996a1.495 1.495 0 0 1-1.053-.436l-.007-.006A1.496 1.496 0 0 1 7.5 15V9a1.5 1.5 0 0 1 3 0v2.379l4.94-4.94a1.5 1.5 0 0 1 2.12 2.122z" /></svg>);
+}) => <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"
-}} {...props}><path d="M19.5 1.5h-15a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-15a3 3 0 0 0-3-3zm0 16.5a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V9A1.5 1.5 0 0 1 6 7.5h12A1.5 1.5 0 0 1 19.5 9z" /></svg>);
+}) => <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"
-}} {...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 0 0 7.225 10.723c.082-.359.098-.712-.086-1.018a1.44 1.44 0 0 0-.42-.417l-.168-.114c-.198-.134-.397-.268-.538-.456a1.872 1.872 0 0 1-.142-1.496l.082-.208a3.559 3.559 0 0 0 .343-1.721 5.358 5.358 0 0 1-1.85-.496 4.327 4.327 0 0 1-.76-.56l-.236-.211c-.4-.362-.798-.722-1.298-.906a2.203 2.203 0 0 1-.794-.35 1.438 1.438 0 0 1-.215-.299l-1.04-2.26-.103-.21zm8.36-4.094l.163.173c.341.382.64.804.886 1.258a5.28 5.28 0 0 0-2.954 2.472 1.223 1.223 0 0 1-.208.416l-.069.065c-.051.046-.103.092-.129.155a.446.446 0 0 0-.01.192l.025.093c.099.354.208.704.328 1.051-.425.248-1.051.46-1.334.057a.885.885 0 0 1-.12-.29l-.037-.161c-.052-.244-.102-.475-.325-.533a.62.62 0 0 0-.202 0l-1.248.307a4.169 4.169 0 0 0-.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 0 1 3.285.283c.277.258.627.424 1.002.478l.077-.004c.113-.007.23-.014.308.063a.5.5 0 0 1 .085.3c.07.521.646.814 1.166.893l.228.028.435.04.135.02.002-.005.056.008A7.503 7.503 0 0 0 13.591 4.67z" /></svg>);
+}) => <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"
-}} {...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 0 0-.714-.017zm.446-14.137l.02.098.059.125.07.12c.043.074.087.147.12.226a.925.925 0 0 1-.412 1.135l-1.149-1.343a1.57 1.57 0 0 0-.429.878c.003.112.018.222.045.33l.597 1.954c-.904.388-1.757.888-2.537 1.488a.151.151 0 0 0-.044.25l.66 1.023c.062.078.1.171.11.27a.414.414 0 0 1-.099.25c-.349.381-.9.503-1.376.303a3.165 3.165 0 0 1-.984-.683l-.2-.226a17.683 17.683 0 0 1-1.391-1.722 1.06 1.06 0 0 0-.86.536c-.17.309-.287.645-.345.993l-.672 2.96c-.172-.076-.315-.246-.45-.435l-.102-.143a2.662 2.662 0 0 0-.363-.452 7.498 7.498 0 0 0 6.488 6.651l.003-.368a5.285 5.285 0 0 0-.06-.674c-.068-.452.05-.912.325-1.276.35-.28.757-.478 1.194-.578a3.245 3.245 0 0 0 1.645-1.425l.889.049a22.8 22.8 0 0 1 1.599-.044l.8.02c.08-.005.16.015.229.055a.441.441 0 0 1 .133.279c.069.31.17.614.3.903a7.503 7.503 0 0 0-3.812-11.527z" /></svg>);
+}) => <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"
-}} {...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 0 0 .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 0 1-.345-.075l-.072-.032-.113-.06c-.102-.052-.202-.067-.493.046a2.09 2.09 0 0 1-2.269-.742 4.497 4.497 0 0 1-.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 0 0-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 0 0-.41-.002c-.54.263-1.057.57-1.547.916a1.78 1.78 0 0 1-1.521.242l-.19-.068.056-1.017.08-.079a.786.786 0 0 1 .325-.13l.125-.022.287-.036c.254-.034.473-.092.522-.325a1.742 1.742 0 0 0-.022-.378c-.003-.273.175-.458.413-.614l.124-.075.529-.287.123-.075c.239-.156.418-.34.417-.613a2.06 2.06 0 0 0-.199-.612 1.6 1.6 0 0 1-.038-.291v-.145l.026-.214zm6.338 7.207l-1.327.54a.451.451 0 0 0-.28.217.428.428 0 0 0 .023.28 5.174 5.174 0 0 0 2.513 2.574 7.17 7.17 0 0 0 .4-.968.643.643 0 0 1-.175-.043.72.72 0 0 1-.26-.31 9.735 9.735 0 0 1-.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>);
+}) => <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-rating/src/BpkRating.js

@@ -68,12 +68,24 @@ const BpkRating = (props: Props) => {
     ...rest
   } = props;
 
-  const classNames = [getClassName('bpk-rating', className)];
-  const valueStyles = [getClassName('bpk-rating__value')];
-  const scaleStyles = [getClassName('bpk-rating__scale')];
-  const textWrapperStyles = [getClassName('bpk-rating__text-wrapper')];
-  const titleStyles = [];
-  const subtitleStyles = [getClassName('bpk-rating__subtitle')];
+  const classNames = getClassName(
+    'bpk-rating',
+    className,
+    size === RATING_SIZES.large && subtitle && 'bpk-rating--large',
+  );
+  const valueStyles = getClassName('bpk-rating__value');
+  const scaleStyles = getClassName('bpk-rating__scale');
+  const textWrapperStyles = getClassName(
+    'bpk-rating__text-wrapper',
+    size === RATING_SIZES.large && 'bpk-rating__text-wrapper--large',
+  );
+  const titleStyles = getClassName(
+    size === RATING_SIZES.large && 'bpk-rating__title--large',
+  );
+  const subtitleStyles = getClassName(
+    'bpk-rating__subtitle',
+    size === RATING_SIZES.large && 'bpk-rating__subtitle--large',
+  );
 
   let valueTextSize = TEXT_STYLES.label1;
   let scaleTextSize = TEXT_STYLES.caption;
@@ -81,11 +93,6 @@ const BpkRating = (props: Props) => {
   let subtitleTextSize = TEXT_STYLES.caption;
 
   if (size === RATING_SIZES.large) {
-    classNames.push(getClassName('bpk-rating--large'));
-    textWrapperStyles.push(getClassName('bpk-rating__text-wrapper--large'));
-    titleStyles.push(getClassName('bpk-rating__title--large'));
-    subtitleStyles.push(getClassName('bpk-rating__subtitle--large'));
-
     valueTextSize = TEXT_STYLES.hero5;
     scaleTextSize = TEXT_STYLES.bodyDefault;
     titleTextSize = TEXT_STYLES.heading5;
@@ -103,16 +110,11 @@ const BpkRating = (props: Props) => {
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div
-      className={classNames.join(' ')}
-      aria-label={ariaLabel}
-      role="figure"
-      {...rest}
-    >
+    <div className={classNames} aria-label={ariaLabel} role="figure" {...rest}>
       <BpkText
         textStyle={valueTextSize}
         tagName="span"
-        className={valueStyles.join(' ')}
+        className={valueStyles}
         aria-hidden="true"
       >
         {adjustedValue}
@@ -120,7 +122,7 @@ const BpkRating = (props: Props) => {
         {showScale && (
           <BpkText
             textStyle={scaleTextSize}
-            className={scaleStyles.join(' ')}
+            className={scaleStyles}
             tagName="span"
             aria-hidden="true"
           >
@@ -129,10 +131,10 @@ const BpkRating = (props: Props) => {
         )}
       </BpkText>
 
-      <div className={textWrapperStyles.join(' ')}>
+      <div className={textWrapperStyles}>
         <BpkText
           textStyle={titleTextSize}
-          className={titleStyles.join(' ')}
+          className={titleStyles}
           tagName="span"
           aria-hidden="true"
         >
@@ -141,7 +143,7 @@ const BpkRating = (props: Props) => {
 
         {subtitle && (
           <BpkText
-            className={subtitleStyles.join(' ')}
+            className={subtitleStyles}
             textStyle={subtitleTextSize}
             tagName="span"
             aria-hidden="true"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "15.0.0",
+  "version": "16.0.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.2",
-    "@skyscanner/bpk-svgs": "^15.1.6",
+    "@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.0.0",
+    "bpk-mixins": "^36.1.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",