@skyscanner/backpack-web 6.0.0-alpha.1 → 6.1.0

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.18",
+  "version": "4.1.19",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,23 +14,23 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.16",
-    "bpk-component-label": "^5.1.11",
+    "bpk-component-form-validation": "^4.2.17",
+    "bpk-component-label": "^5.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.16",
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-calendar": "^11.1.18",
-    "bpk-component-checkbox": "^4.1.13",
-    "bpk-component-datepicker": "^15.2.18",
-    "bpk-component-input": "^6.1.16",
-    "bpk-component-select": "^5.1.11",
-    "bpk-component-textarea": "^4.2.11"
+    "bpk-component-autosuggest": "^6.1.17",
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-calendar": "^11.1.19",
+    "bpk-component-checkbox": "^4.1.14",
+    "bpk-component-datepicker": "^16.0.0",
+    "bpk-component-input": "^6.1.17",
+    "bpk-component-select": "^5.1.12",
+    "bpk-component-textarea": "^4.2.12"
   }
 }

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { cloneElement, type Element } from 'react';
+
 import BpkLabel from '../../bpk-component-label';
 import BpkFormValidation from '../../bpk-component-form-validation';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.14",
+  "version": "2.1.15",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^5.1.11",
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-label": "^5.1.12",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-flare/src/BpkContentBubble.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkFlareBar from './BpkFlareBar';

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './bpk-flare-bar.module.scss';

package/bpk-component-flare/src/bpk-flare-bar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width: 32rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir='rtl'] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media (max-width: 32rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media (max-width: 32.25rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir='rtl'] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media (max-width: 32.25rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)}

package/bpk-component-floating-notification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-aria-live": "^2.1.19",
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -20,6 +20,8 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
+
+import BpkAriaLive from '../../bpk-component-aria-live';
 import BpkButton from '../../bpk-component-button';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import { cssModules } from '../../bpk-react-utils';
@@ -106,7 +108,7 @@ const BpkFloatingNotification = (props: Props) => {
       <div className={classNames} {...rest}>
         {Icon && (
           <div className={iconClassNames}>
-            <Icon />
+            <Icon aria-hidden />
           </div>
         )}
         <BpkText
@@ -116,6 +118,7 @@ const BpkFloatingNotification = (props: Props) => {
         >
           {text}
         </BpkText>
+        <BpkAriaLive aria-hidden>{text}</BpkAriaLive>
         {ctaText && (
           <BpkButton link onClick={onClick} className={buttonClassNames}>
             {ctaText}

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#02122c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;margin:0 0 auto auto;padding:0;color:#6d9feb}.bpk-floating-notification__button--dark{color:#0770e3}.bpk-floating-notification__icon{margin:0.25rem 0.5rem 0 0.25rem;flex-shrink:0;text-align:bottom;fill:#fff}.bpk-floating-notification__icon--dark{fill:#111236}.bpk-floating-notification__text{margin-right:0.5rem}.bpk-floating-notification--dark{background:#fff;color:#111236}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{display:flex}

package/bpk-component-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.16",
+  "version": "4.2.17",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.11",
+    "bpk-animate-height": "^4.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,11 +24,11 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-checkbox": "^4.1.13",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-input": "^6.1.16",
-    "bpk-component-select": "^5.1.11",
-    "bpk-component-textarea": "^4.2.11"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-checkbox": "^4.1.14",
+    "bpk-component-icon": "^9.2.13",
+    "bpk-component-input": "^6.1.17",
+    "bpk-component-select": "^5.1.12",
+    "bpk-component-textarea": "^4.2.12"
   }
 }

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -18,15 +18,16 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AnimateHeight from '../../bpk-animate-height';
-import { cssModules } from '../../bpk-react-utils';
-import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
-import { withAlignment } from '../../bpk-component-icon';
 import {
   lineHeightSm,
   iconSizeSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+import AnimateHeight from '../../bpk-animate-height';
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
+import { withAlignment } from '../../bpk-component-icon';
+
 import STYLES from './BpkFormValidation.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-graphic-promotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-text": "^7.0.5",
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkText from '../../bpk-component-text';
 import BpkButton from '../../bpk-component-button';

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid/src/BpkGridColumn.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkGridColumn.module.scss';

package/bpk-component-grid/src/BpkGridColumn.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__column{float:left;padding-right:.75rem;padding-left:.75rem}html[dir='rtl'] .bpk-grid__column{float:right}.bpk-grid__column--padded{padding-top:.75rem;padding-bottom:.75rem}.bpk-grid__column--debug{padding:.75rem}.bpk-grid__column-debugger{background-color:#fff}.bpk-grid__column--0{display:none}.bpk-grid__column--1{display:block;width:8.33333%}.bpk-grid__column--2{display:block;width:16.66667%}.bpk-grid__column--3{display:block;width:25%}.bpk-grid__column--4{display:block;width:33.33333%}.bpk-grid__column--5{display:block;width:41.66667%}.bpk-grid__column--6{display:block;width:50%}.bpk-grid__column--7{display:block;width:58.33333%}.bpk-grid__column--8{display:block;width:66.66667%}.bpk-grid__column--9{display:block;width:75%}.bpk-grid__column--10{display:block;width:83.33333%}.bpk-grid__column--11{display:block;width:91.66667%}.bpk-grid__column--12{display:block;width:100%}.bpk-grid__column--offset-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-0{margin-right:0}.bpk-grid__column--offset-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-1{margin-right:8.33333%;margin-left:0}.bpk-grid__column--offset-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-2{margin-right:16.66667%;margin-left:0}.bpk-grid__column--offset-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-3{margin-right:25%;margin-left:0}.bpk-grid__column--offset-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-4{margin-right:33.33333%;margin-left:0}.bpk-grid__column--offset-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-5{margin-right:41.66667%;margin-left:0}.bpk-grid__column--offset-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-6{margin-right:50%;margin-left:0}.bpk-grid__column--offset-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-7{margin-right:58.33333%;margin-left:0}.bpk-grid__column--offset-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-8{margin-right:66.66667%;margin-left:0}.bpk-grid__column--offset-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-9{margin-right:75%;margin-left:0}.bpk-grid__column--offset-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-10{margin-right:83.33333%;margin-left:0}.bpk-grid__column--offset-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-11{margin-right:91.66667%;margin-left:0}.bpk-grid__column--offset-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-12{margin-right:100%;margin-left:0}@media (max-width: 64rem){.bpk-grid__column--tablet-0{display:none}}@media (max-width: 64rem){.bpk-grid__column--tablet-1{display:block;width:8.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-2{display:block;width:16.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-3{display:block;width:25%}}@media (max-width: 64rem){.bpk-grid__column--tablet-4{display:block;width:33.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-5{display:block;width:41.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-6{display:block;width:50%}}@media (max-width: 64rem){.bpk-grid__column--tablet-7{display:block;width:58.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-8{display:block;width:66.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-9{display:block;width:75%}}@media (max-width: 64rem){.bpk-grid__column--tablet-10{display:block;width:83.33333%}}@media (max-width: 64rem){.bpk-grid__column--tablet-11{display:block;width:91.66667%}}@media (max-width: 64rem){.bpk-grid__column--tablet-12{display:block;width:100%}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-tablet-0{margin-right:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-1{margin-right:8.33333%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-2{margin-right:16.66667%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-tablet-3{margin-right:25%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-4{margin-right:33.33333%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-5{margin-right:41.66667%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-tablet-6{margin-right:50%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-7{margin-right:58.33333%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-8{margin-right:66.66667%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-tablet-9{margin-right:75%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-10{margin-right:83.33333%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-11{margin-right:91.66667%;margin-left:0}}@media (max-width: 64rem){.bpk-grid__column--offset-tablet-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-tablet-12{margin-right:100%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--mobile-0{display:none}}@media (max-width: 32rem){.bpk-grid__column--mobile-1{display:block;width:8.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-2{display:block;width:16.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-3{display:block;width:25%}}@media (max-width: 32rem){.bpk-grid__column--mobile-4{display:block;width:33.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-5{display:block;width:41.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-6{display:block;width:50%}}@media (max-width: 32rem){.bpk-grid__column--mobile-7{display:block;width:58.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-8{display:block;width:66.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-9{display:block;width:75%}}@media (max-width: 32rem){.bpk-grid__column--mobile-10{display:block;width:83.33333%}}@media (max-width: 32rem){.bpk-grid__column--mobile-11{display:block;width:91.66667%}}@media (max-width: 32rem){.bpk-grid__column--mobile-12{display:block;width:100%}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-mobile-0{margin-right:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-1{margin-right:8.33333%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-2{margin-right:16.66667%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-mobile-3{margin-right:25%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-4{margin-right:33.33333%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-5{margin-right:41.66667%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-mobile-6{margin-right:50%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-7{margin-right:58.33333%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-8{margin-right:66.66667%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-mobile-9{margin-right:75%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-10{margin-right:83.33333%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-11{margin-right:91.66667%;margin-left:0}}@media (max-width: 32rem){.bpk-grid__column--offset-mobile-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-mobile-12{margin-right:100%;margin-left:0}}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__column{float:left;padding-right:.75rem;padding-left:.75rem}html[dir='rtl'] .bpk-grid__column{float:right}.bpk-grid__column--padded{padding-top:.75rem;padding-bottom:.75rem}.bpk-grid__column--debug{padding:.75rem}.bpk-grid__column-debugger{background-color:#fff}.bpk-grid__column--0{display:none}.bpk-grid__column--1{display:block;width:8.33333%}.bpk-grid__column--2{display:block;width:16.66667%}.bpk-grid__column--3{display:block;width:25%}.bpk-grid__column--4{display:block;width:33.33333%}.bpk-grid__column--5{display:block;width:41.66667%}.bpk-grid__column--6{display:block;width:50%}.bpk-grid__column--7{display:block;width:58.33333%}.bpk-grid__column--8{display:block;width:66.66667%}.bpk-grid__column--9{display:block;width:75%}.bpk-grid__column--10{display:block;width:83.33333%}.bpk-grid__column--11{display:block;width:91.66667%}.bpk-grid__column--12{display:block;width:100%}.bpk-grid__column--offset-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-0{margin-right:0}.bpk-grid__column--offset-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-1{margin-right:8.33333%;margin-left:0}.bpk-grid__column--offset-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-2{margin-right:16.66667%;margin-left:0}.bpk-grid__column--offset-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-3{margin-right:25%;margin-left:0}.bpk-grid__column--offset-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-4{margin-right:33.33333%;margin-left:0}.bpk-grid__column--offset-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-5{margin-right:41.66667%;margin-left:0}.bpk-grid__column--offset-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-6{margin-right:50%;margin-left:0}.bpk-grid__column--offset-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-7{margin-right:58.33333%;margin-left:0}.bpk-grid__column--offset-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-8{margin-right:66.66667%;margin-left:0}.bpk-grid__column--offset-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-9{margin-right:75%;margin-left:0}.bpk-grid__column--offset-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-10{margin-right:83.33333%;margin-left:0}.bpk-grid__column--offset-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-11{margin-right:91.66667%;margin-left:0}.bpk-grid__column--offset-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-12{margin-right:100%;margin-left:0}@media (max-width: 50.25rem){.bpk-grid__column--tablet-0{display:none}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-1{display:block;width:8.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-2{display:block;width:16.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-3{display:block;width:25%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-4{display:block;width:33.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-5{display:block;width:41.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-6{display:block;width:50%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-7{display:block;width:58.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-8{display:block;width:66.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-9{display:block;width:75%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-10{display:block;width:83.33333%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-11{display:block;width:91.66667%}}@media (max-width: 50.25rem){.bpk-grid__column--tablet-12{display:block;width:100%}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-tablet-0{margin-right:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-1{margin-right:8.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-2{margin-right:16.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-tablet-3{margin-right:25%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-4{margin-right:33.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-5{margin-right:41.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-tablet-6{margin-right:50%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-7{margin-right:58.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-8{margin-right:66.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-tablet-9{margin-right:75%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-tablet-10{margin-right:83.33333%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-tablet-11{margin-right:91.66667%;margin-left:0}}@media (max-width: 50.25rem){.bpk-grid__column--offset-tablet-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-tablet-12{margin-right:100%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-0{display:none}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-1{display:block;width:8.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-2{display:block;width:16.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-3{display:block;width:25%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-4{display:block;width:33.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-5{display:block;width:41.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-6{display:block;width:50%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-7{display:block;width:58.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-8{display:block;width:66.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-9{display:block;width:75%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-10{display:block;width:83.33333%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-11{display:block;width:91.66667%}}@media (max-width: 32.25rem){.bpk-grid__column--mobile-12{display:block;width:100%}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-0{margin-left:0}html[dir='rtl'] .bpk-grid__column--offset-mobile-0{margin-right:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-1{margin-left:8.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-1{margin-right:8.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-2{margin-left:16.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-2{margin-right:16.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-3{margin-left:25%}html[dir='rtl'] .bpk-grid__column--offset-mobile-3{margin-right:25%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-4{margin-left:33.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-4{margin-right:33.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-5{margin-left:41.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-5{margin-right:41.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-6{margin-left:50%}html[dir='rtl'] .bpk-grid__column--offset-mobile-6{margin-right:50%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-7{margin-left:58.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-7{margin-right:58.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-8{margin-left:66.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-8{margin-right:66.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-9{margin-left:75%}html[dir='rtl'] .bpk-grid__column--offset-mobile-9{margin-right:75%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-10{margin-left:83.33333%}html[dir='rtl'] .bpk-grid__column--offset-mobile-10{margin-right:83.33333%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-11{margin-left:91.66667%}html[dir='rtl'] .bpk-grid__column--offset-mobile-11{margin-right:91.66667%;margin-left:0}}@media (max-width: 32.25rem){.bpk-grid__column--offset-mobile-12{margin-left:100%}html[dir='rtl'] .bpk-grid__column--offset-mobile-12{margin-right:100%;margin-left:0}}

package/bpk-component-grid/src/BpkGridContainer.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkGridContainer.module.scss';

package/bpk-component-grid/src/BpkGridContainer.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__container{max-width:80rem;margin:0 auto;padding-right:.75rem;padding-left:.75rem}@media (min-width: 64.0625rem){.bpk-grid__container{padding-right:1.5rem;padding-left:1.5rem}}.bpk-grid__container--debug{background-color:#f1f2f8}.bpk-grid__container--full-width{max-width:100%}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__container{max-width:71.25rem;margin:0 auto;padding-right:.75rem;padding-left:.75rem}@media (min-width: 50.3125rem){.bpk-grid__container{padding-right:1.5rem;padding-left:1.5rem}}.bpk-grid__container--debug{background-color:#f1f2f8}.bpk-grid__container--full-width{max-width:100%}

package/bpk-component-grid/src/BpkGridRow.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkGridRow.module.scss';

package/bpk-component-grid/src/BpkGridRow.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__row{margin-right:-.75rem;margin-left:-.75rem}.bpk-grid__row::before,.bpk-grid__row::after{content:'';display:table}.bpk-grid__row::after{clear:both}@media (min-width: 64.0625rem){.bpk-grid__row--padded:first-child{padding-top:.75rem}.bpk-grid__row--padded:last-child{padding-bottom:.75rem}}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-grid__row{margin-right:-.75rem;margin-left:-.75rem}.bpk-grid__row::before,.bpk-grid__row::after{content:'';display:table}.bpk-grid__row::after{clear:both}@media (min-width: 50.3125rem){.bpk-grid__row--padded:first-child{padding-top:.75rem}.bpk-grid__row--padded:last-child{padding-bottom:.75rem}}

package/bpk-component-grid-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.11",
+    "bpk-component-link": "^3.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
 

package/bpk-component-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.12",
+  "version": "5.1.14",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.11",
+    "bpk-component-mobile-scroll-container": "^3.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.5",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-text": "^7.0.6",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -18,9 +18,9 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import { cssModules } from '../../bpk-react-utils';
 import React, { Component, type Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 
 import STYLES from './BpkHorizontalNav.module.scss';
@@ -98,17 +98,11 @@ class BpkHorizontalNav extends Component<Props> {
       return;
     }
 
-    // Using find dom node is preferable here over changing the underlying mechanism of BpkHorizontalNavItem to accomodate dom-node refs
-    // eslint-disable-next-line react/no-find-dom-node
-    const selectedItemRef = ((ReactDOM.findDOMNode(
-      this.selectedItemRef,
-    ): any): Element);
-
     if (!this.scrollRef) {
       return;
     }
 
-    const selectedItemPos = getPos(selectedItemRef);
+    const selectedItemPos = getPos(this.selectedItemRef);
     if (!selectedItemPos) {
       return;
     }
@@ -167,10 +161,10 @@ class BpkHorizontalNav extends Component<Props> {
     if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
       children = React.Children.map(rawChildren, (child) => {
         const childProps = {};
-
+        let childRef;
         if (autoScrollToSelected) {
           if (child && child.props && child.props.selected) {
-            childProps.ref = (ref) => {
+            childRef = (ref) => {
               this.selectedItemRef = ref;
             };
           }
@@ -180,7 +174,9 @@ class BpkHorizontalNav extends Component<Props> {
           childProps.type = HORIZONTAL_NAV_TYPES.light;
         }
 
-        return child ? React.cloneElement(child, childProps) : null;
+        return child ? (
+          <div ref={childRef}>{React.cloneElement(child, childProps)}</div>
+        ) : null;
       });
     }
 

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -19,6 +19,7 @@
 
 import React, { Component, type Node } from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.12",
+  "version": "9.2.13",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,13 +20,13 @@
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "@skyscanner/bpk-svgs": "^14.1.9",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-list": "^4.0.4",
-    "bpk-component-text": "^7.0.5"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-list": "^4.0.5",
+    "bpk-component-text": "^7.0.6"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-icon/src/BpkIcon.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon--align-to-button{vertical-align:text-bottom}.bpk-icon--align-to-large-button{margin-top:0rem;vertical-align:top}html[dir='rtl'] .bpk-icon--rtl-support{transform:scaleX(-1)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon--align-to-button{vertical-align:text-bottom}.bpk-icon--align-to-large-button{margin-top:.1875rem;vertical-align:top}html[dir='rtl'] .bpk-icon--rtl-support{transform:scaleX(-1)}

package/bpk-component-icon/src/classNameModifierHOCFactory.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default (displayName, classNamesToAdd = []) =>

package/bpk-component-icon/src/withAlignment.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default function withAlignment(Component, objectHeight, subjectHeight) {

package/bpk-component-icon/src/withDescription.js

@@ -18,6 +18,7 @@
 /* @flow strict */
 
 import React, { type AbstractComponent } from 'react';
+
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './withDescription.module.scss';

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.13",
+  "version": "5.1.14",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,9 +15,9 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-spinner": "^5.1.11",
+    "bpk-component-spinner": "^5.1.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -25,7 +25,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.11",
-    "bpk-component-text": "^7.0.5"
+    "bpk-component-mobile-scroll-container": "^3.1.12",
+    "bpk-component-text": "^7.0.6"
   }
 }

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -19,11 +19,12 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import { BpkSpinner } from '../../bpk-component-spinner';
+
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkBackgroundImage.module.scss';
 

package/bpk-component-image/src/BpkImage.js

@@ -19,11 +19,12 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import { BpkSpinner } from '../../bpk-component-spinner';
+
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkImage.module.scss';
 import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';

package/bpk-component-image/src/withLazyLoading.js

@@ -19,9 +19,10 @@
 
 import React, { type Node, type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from '../../bpk-react-utils';
 import throttle from 'lodash/throttle';
 
+import { wrapDisplayName } from '../../bpk-react-utils';
+
 type WithLazyLoadingProps = {
   className: ?string,
   style: ?{},

package/bpk-component-image/src/withLoadingBehavior.js

@@ -18,6 +18,7 @@
 /* @flow */
 
 import React, { type AbstractComponent } from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 type InjectedProps = {|