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

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.11"
+    "bpk-component-rtl-toggle": "^3.1.12"
   }
 }

package/bpk-component-slider/src/BpkSlider.js

@@ -19,6 +19,7 @@
 import React from 'react';
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
+
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkSlider.module.scss';

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@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"
   },
   "peerDependencies": {

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
 import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
 import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
 import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkSpinner.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-spinner{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0770e3;fill:var(--bpk-spinner-primary-color, #0770e3)}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#444560}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0770e3;fill:var(--bpk-spinner-primary-color, #0770e3)}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#444560}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:.1875rem;vertical-align:top}

package/bpk-component-split-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-split-input",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Backpack split-input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,9 +13,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-input": "^6.1.16",
+    "bpk-component-input": "^6.1.17",
     "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-split-input/src/BpkInputField.js

@@ -18,9 +18,10 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
 import BpkInput from '../../bpk-component-input';
 import { cssModules } from '../../bpk-react-utils';
-import PropTypes from 'prop-types';
 
 import STYLES from './BpkInputField.module.scss';
 

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -18,8 +18,9 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { cssModules } from '../../bpk-react-utils';
 import PropTypes from 'prop-types';
+
+import { cssModules } from '../../bpk-react-utils';
 import { INPUT_TYPES } from '../../bpk-component-input';
 
 import InputField from './BpkInputField';

package/bpk-component-split-input/src/BpkSplitInput.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-split-input{font-size:1rem;line-height:1.5rem;font-weight:400;display:flex;width:100%;padding-top:0.25rem;flex-direction:row;align-items:center;direction:ltr}.bpk-split-input__textbox{display:flex;align-items:center}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{display:flex}

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.12",
+    "bpk-component-icon": "^9.2.13",
     "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-table": "^3.1.11",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-table": "^3.1.12",
+    "bpk-storybook-utils": "^1.1.11"
   }
 }

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

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

package/bpk-component-star-rating/src/BpkStar.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import SmallIcon from '../../bpk-component-icon/sm/star';
 import LargeIcon from '../../bpk-component-icon/lg/star';
 import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline';

package/bpk-component-star-rating/src/BpkStarRating.js

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

package/bpk-component-star-rating/src/withInteractiveStarRatingState.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type ComponentType } from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 const withInteractiveStarRatingState = (

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "Backpack switch component.",
   "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.5.8"
   },
   "peerDependencies": {

package/bpk-component-switch/src/BpkSwitch.js

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

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack table component.",
   "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-table/src/BpkTable.js

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

package/bpk-component-table/src/BpkTableCell.js

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

package/bpk-component-table/src/BpkTableHeadCell.js

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

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "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-text/src/BpkText.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkText.module.scss';

package/bpk-component-text/src/BpkText.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-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--bold{font-weight:700}.bpk-text--black{font-weight:900}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}@media (max-width: 32.25rem){.bpk-text--heading-1{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32.25rem){.bpk-text--heading-2{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}@media (max-width: 32.25rem){.bpk-text--heading-3{font-size:1.25rem;line-height:1.5rem;font-weight:700}}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}@media (max-width: 32.25rem){.bpk-text--heading-4{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--bold{font-weight:700}.bpk-text--black{font-weight:900}

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "4.2.11",
+  "version": "4.2.12",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "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"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.11",
-    "bpk-storybook-utils": "^1.1.10"
+    "bpk-component-label": "^5.1.12",
+    "bpk-storybook-utils": "^1.1.11"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-textarea/src/BpkTextarea.js

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

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-label": "^5.1.11",
-    "bpk-component-select": "^5.1.11",
+    "bpk-component-label": "^5.1.12",
+    "bpk-component-select": "^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": {

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+
 import BpkLabel from '../../bpk-component-label';
 import BpkSelect from '../../bpk-component-select';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -18,6 +18,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "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-button": "^6.2.6",
-    "bpk-component-icon": "^9.2.12"
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-icon": "^9.2.13"
   }
 }

package/bpk-component-ticket/src/BpkTicket.js

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

package/bpk-component-ticket/src/BpkTicket.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-ticket{position:relative;display:block;display:flex;flex-direction:row;align-items:stretch;flex:none;color:#111236;text-decoration:none;box-shadow:0 5px 12px rgba(0,0,0,0.08),0 3px 12px rgba(0,0,0,0.08);cursor:pointer;border-radius:.75rem;z-index:0}.bpk-ticket::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:-1;transition:opacity 200ms ease-in-out;border-radius:inherit;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:0;pointer-events:none}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}.bpk-ticket--vertical{flex-direction:column}.bpk-ticket__paper{position:relative;background-color:#fff}.bpk-ticket__main{flex:2 1 auto}.bpk-ticket__main--horizontal{border-radius:.75rem 0 0 .75rem}html[dir='rtl'] .bpk-ticket__main--horizontal{border-radius:0 .75rem .75rem 0}.bpk-ticket__main--vertical{border-radius:.75rem .75rem 0 0}.bpk-ticket__main--padded{padding:1rem}.bpk-ticket__main-inner{height:100%;overflow:hidden}.bpk-ticket__main-inner--horizontal{border-radius:.75rem 0 0 .75rem}html[dir='rtl'] .bpk-ticket__main-inner--horizontal{border-radius:0 .75rem .75rem 0}.bpk-ticket__main-inner--vertical{border-radius:.75rem .75rem 0 0}.bpk-ticket__stub{flex:1 1 auto}.bpk-ticket__stub--horizontal{min-width:30%;border-radius:0 .75rem .75rem 0;box-shadow:inset .0625rem 0 0 #cdcdd7}html[dir='rtl'] .bpk-ticket__stub--horizontal{border-radius:.75rem 0 0 .75rem;box-shadow:inset -.0625rem 0 0 #cdcdd7}.bpk-ticket__stub--vertical{border-radius:0 0 .75rem .75rem;box-shadow:inset 0 .0625rem 0 #cdcdd7}.bpk-ticket__stub--padded{padding:1rem}.bpk-ticket__stub-inner{height:100%;overflow:hidden}.bpk-ticket__stub-inner--horizontal{min-width:30%;border-radius:0 .75rem .75rem 0;box-shadow:inset .0625rem 0 0 #cdcdd7}html[dir='rtl'] .bpk-ticket__stub-inner--horizontal{border-radius:.75rem 0 0 .75rem;box-shadow:inset -.0625rem 0 0 #cdcdd7}.bpk-ticket__stub-inner--vertical{border-radius:0 0 .75rem .75rem;box-shadow:inset 0 .0625rem 0 #cdcdd7}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-ticket{position:relative;display:block;display:flex;flex-direction:row;align-items:stretch;color:#111236;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.375rem;z-index:0}.bpk-ticket::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:-1;transition:opacity 200ms ease-in-out;border-radius:inherit;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:0;pointer-events:none}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}.bpk-ticket--vertical{flex-direction:column}.bpk-ticket--with-notches{box-shadow:none}.bpk-ticket--with-notches::after{content:none}.bpk-ticket__paper{position:relative;background-color:#fff}.bpk-ticket__paper--with-notches{box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);z-index:0}.bpk-ticket__paper--with-notches::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:-1;transition:opacity 200ms ease-in-out;border-radius:inherit;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:0;pointer-events:none}.bpk-ticket__main{flex:2 1 auto}.bpk-ticket__main--horizontal{border-radius:.375rem 0 0 .375rem}html[dir='rtl'] .bpk-ticket__main--horizontal{border-radius:0 .375rem .375rem 0}.bpk-ticket__main--vertical{border-radius:.375rem .375rem 0 0}.bpk-ticket__main--padded{padding:1rem}.bpk-ticket__main-inner{height:100%;overflow:hidden}.bpk-ticket__main-inner--horizontal{border-radius:.375rem 0 0 .375rem}html[dir='rtl'] .bpk-ticket__main-inner--horizontal{border-radius:0 .375rem .375rem 0}.bpk-ticket__main-inner--vertical{border-radius:.375rem .375rem 0 0}.bpk-ticket__stub{flex:1 1 auto}.bpk-ticket__stub--horizontal{min-width:30%;border-radius:0 .375rem .375rem 0}html[dir='rtl'] .bpk-ticket__stub--horizontal{border-radius:.375rem 0 0 .375rem}.bpk-ticket__stub--vertical{border-radius:0 0 .375rem .375rem}.bpk-ticket__stub--padded{padding:1rem}.bpk-ticket__stub-inner{height:100%;overflow:hidden}.bpk-ticket__stub-inner--horizontal{min-width:30%;border-radius:0 .375rem .375rem 0}html[dir='rtl'] .bpk-ticket__stub-inner--horizontal{border-radius:.375rem 0 0 .375rem}.bpk-ticket__stub-inner--vertical{border-radius:0 0 .375rem .375rem}.bpk-ticket__punchline{position:relative;z-index:1;flex:0 0 auto;background-color:#fff}.bpk-ticket__punchline--horizontal{height:.125rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-x;background-position:0 50%;background-size:.5rem .125rem}.bpk-ticket__punchline--horizontal-with-notches{height:1rem;margin:auto .5rem;padding:0 .5rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-x;background-position:0 50%;background-size:.5rem .125rem}.bpk-ticket__punchline--vertical{width:.125rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-y;background-position:50% 0;background-size:.125rem .5rem}.bpk-ticket__punchline--vertical-with-notches{width:1rem;margin:.5rem auto;padding:.5rem 0;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-y;background-position:50% 0;background-size:.125rem .5rem}.bpk-ticket__punchline--fallback{display:table-cell;width:.125rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-y;background-position:50% 0;background-size:.125rem .5rem}.bpk-ticket__notch{position:absolute;width:1rem;height:.5rem;overflow:hidden}.bpk-ticket__notch::after{position:relative;content:'';display:block;width:2rem;height:2rem;transform:translate3d(0, 0, 0);border:.5rem solid #fff;border-radius:1rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3) inset}.bpk-ticket__notch--top{top:-.5rem}.bpk-ticket__notch--top::after{right:-50%;bottom:200%;left:-50%}.bpk-ticket__notch--right{right:-.5rem;width:.5rem;height:1rem}.bpk-ticket__notch--right::after{right:100%;bottom:50%}html[dir='rtl'] .bpk-ticket__notch--right::after{right:auto;left:200%}.bpk-ticket__notch--bottom{bottom:-.5rem}.bpk-ticket__notch--bottom::after{right:-50%;bottom:100%;left:-50%}.bpk-ticket__notch--left{left:-.5rem;width:.5rem;height:1rem}.bpk-ticket__notch--left::after{right:200%;bottom:50%}html[dir='rtl'] .bpk-ticket__notch--left::after{right:auto;left:100%}

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
+    "bpk-react-utils": "^6.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.5"
+    "bpk-component-text": "^7.0.6"
   }
 }

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -26,6 +26,7 @@ The actual component that developers create (i.e. the default export from this p
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTooltip.module.scss';

package/bpk-component-tooltip/src/BpkTooltip.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-tooltip-portal{z-index:900}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:aboslute;width:.5rem;height:.5rem;transform:rotate(45deg);border:.0625rem solid transparent;background:inherit;background-color:#fff}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip__arrow{bottom:-.1875rem;border-right-color:#dddde5;border-bottom-color:#dddde5}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip__arrow{left:-.1875rem;border-bottom-color:#dddde5;border-left-color:#dddde5}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip__arrow{top:-.1875rem;border-top-color:#dddde5;border-left-color:#dddde5}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip__arrow{right:-.1875rem;border-top-color:#dddde5;border-right-color:#dddde5}.bpk-tooltip__arrow--dark{background-color:#111236}.bpk-tooltip-portal[data-popper-placement='top'] .bpk-tooltip__arrow--dark{border-right-color:#111236;border-bottom-color:#111236}.bpk-tooltip-portal[data-popper-placement='right'] .bpk-tooltip__arrow--dark{border-bottom-color:#111236;border-left-color:#111236}.bpk-tooltip-portal[data-popper-placement='bottom'] .bpk-tooltip__arrow--dark{border-top-color:#111236;border-left-color:#111236}.bpk-tooltip-portal[data-popper-placement='left'] .bpk-tooltip__arrow--dark{border-top-color:#111236;border-right-color:#111236}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #dddde5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}.bpk-tooltip__inner--padded{padding:0.25rem .5rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #111236;background-color:#111236;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-tooltip-portal{z-index:900}.bpk-tooltip-portal[x-placement='top']{margin-bottom:.25rem}.bpk-tooltip-portal[x-placement='right']{margin-left:.25rem}.bpk-tooltip-portal[x-placement='bottom']{margin-top:.25rem}.bpk-tooltip-portal[x-placement='left']{margin-right:.25rem}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:absolute;pointer-events:none}.bpk-tooltip__arrow::before,.bpk-tooltip__arrow::after{position:absolute;content:' ';display:block}.bpk-tooltip__arrow::before{border:.3125rem solid transparent}.bpk-tooltip__arrow::after{border:.25rem solid transparent}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow{top:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::before{bottom:-.3125rem;margin-left:-.0625rem;border-top-color:#dddde5}html[dir='rtl'] .bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow::after{bottom:-.1875rem;border-top-color:#fff}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow{right:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow::before{left:-.3125rem;margin-top:-.0625rem;border-right-color:#dddde5}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow::after{left:-.1875rem;border-right-color:#fff}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow{bottom:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::before{top:-.3125rem;margin-left:-.0625rem;border-bottom-color:#dddde5}html[dir='rtl'] .bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow::after{top:-.1875rem;border-bottom-color:#fff}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow{left:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow::before{right:-.3125rem;margin-top:-.0625rem;border-left-color:#dddde5}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow::after{right:-.1875rem;border-left-color:#fff}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark{top:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::before{bottom:-.3125rem;margin-left:-.0625rem;border-top-color:#111236}html[dir='rtl'] .bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='top'] .bpk-tooltip__arrow--dark::after{bottom:-.1875rem;border-top-color:#111236}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark{right:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark::before{left:-.3125rem;margin-top:-.0625rem;border-right-color:#111236}.bpk-tooltip-portal[x-placement='right'] .bpk-tooltip__arrow--dark::after{left:-.1875rem;border-right-color:#111236}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark{bottom:100%;width:.5rem;height:.25rem}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::before{top:-.3125rem;margin-left:-.0625rem;border-bottom-color:#111236}html[dir='rtl'] .bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::before{margin-right:-.0625rem;margin-left:0}.bpk-tooltip-portal[x-placement='bottom'] .bpk-tooltip__arrow--dark::after{top:-.1875rem;border-bottom-color:#111236}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark{left:100%;width:.25rem;height:.5rem}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark::before{right:-.3125rem;margin-top:-.0625rem;border-left-color:#111236}.bpk-tooltip-portal[x-placement='left'] .bpk-tooltip__arrow--dark::after{right:-.1875rem;border-left-color:#111236}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #dddde5;background-color:#fff;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}.bpk-tooltip__inner--padded{padding:.25rem 0.5rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #111236;background-color:#111236;border-radius:.375rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25)}

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -21,6 +21,7 @@
 import { createPopper, basePlacements } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node, type Element } from 'react';
+
 import { PortalV1, cssModules } from '../../bpk-react-utils';
 
 import BpkTooltip, {

package/bpk-react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,7 +17,7 @@
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0"
+    "bpk-react-utils": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-scrim-utils/src/BpkScrim.js

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

package/bpk-scrim-utils/src/bpk-scrim.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-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;transition:opacity 200ms ease-in-out;background-color:#b2b2bf;opacity:.7;overflow:hidden}.bpk-scrim--dark{background-color:#111236;opacity:.95}@media (max-width: 32rem){.bpk-scrim--full-screen{opacity:1}}.bpk-scrim--appear{opacity:0}.bpk-scrim--appear-active{opacity:.7}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;transition:opacity 200ms ease-in-out;background-color:#b2b2bf;opacity:.7;overflow:hidden}.bpk-scrim--dark{background-color:#111236;opacity:.95}@media (max-width: 32.25rem){.bpk-scrim--full-screen{opacity:1}}.bpk-scrim--appear{opacity:0}.bpk-scrim--appear-active{opacity:.7}

package/bpk-scrim-utils/src/withScrim.js

@@ -20,6 +20,7 @@ import focusScope from 'a11y-focus-scope';
 import focusStore from 'a11y-focus-store';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+
 import {
   cssModules,
   isDeviceIpad,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "6.0.0-alpha.1",
+  "version": "6.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",