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

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

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

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

@@ -19,7 +19,6 @@
 
 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/src/BpkTable.js

@@ -20,7 +20,6 @@
 
 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,7 +20,6 @@
 
 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,7 +20,6 @@
 
 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/src/BpkText.js

@@ -20,7 +20,6 @@
 
 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--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}
+@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}

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

@@ -20,7 +20,6 @@
 
 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/src/BpkThemeToggle.js

@@ -17,7 +17,6 @@
  */
 
 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,7 +18,6 @@
 
 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/README.md

@@ -34,5 +34,4 @@ export default () => (
 | vertical      | bool     | false    | false         |
 | stubProps     | object   | false    | {}            |
 | stubClassName | string   | false    | null          |
-| withNotches   | bool     | false    | true          |
 

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.12",
+  "version": "5.0.0",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {

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

@@ -20,7 +20,6 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTicket.module.scss';
@@ -33,7 +32,6 @@ type Props = {
   stubProps: { [string]: any },
   padded: boolean,
   vertical: boolean,
-  withNotches: boolean,
   className: ?string,
   stubClassName: ?string,
   href: ?string,
@@ -49,7 +47,6 @@ const BpkTicket = (props: Props) => {
     stubClassName,
     stubProps,
     vertical,
-    withNotches,
     ...rest
   } = props;
 
@@ -57,7 +54,6 @@ const BpkTicket = (props: Props) => {
     'bpk-ticket',
     className,
     vertical && 'bpk-ticket--vertical',
-    withNotches && 'bpk-ticket--with-notches',
   );
 
   const mainClassNames = getClassName(
@@ -66,7 +62,6 @@ const BpkTicket = (props: Props) => {
     padded && 'bpk-ticket__main--padded',
     vertical && 'bpk-ticket__main--vertical',
     !vertical && 'bpk-ticket__main--horizontal',
-    withNotches && 'bpk-ticket__paper--with-notches',
   );
 
   const mainInnerClassNames = getClassName(
@@ -82,7 +77,6 @@ const BpkTicket = (props: Props) => {
     padded && 'bpk-ticket__stub--padded',
     vertical && 'bpk-ticket__stub--vertical',
     !vertical && 'bpk-ticket__stub--horizontal',
-    withNotches && 'bpk-ticket__paper--with-notches',
   );
 
   const stubInnerClassNames = getClassName(
@@ -91,30 +85,6 @@ const BpkTicket = (props: Props) => {
     !vertical && 'bpk-ticket__stub-inner--horizontal',
   );
 
-  const punchlineClassNames = getClassName(
-    'bpk-ticket__punchline',
-    vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--horizontal-with-notches'
-        : 'bpk-ticket__punchline--horizontal'),
-    !vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--vertical-with-notches'
-        : 'bpk-ticket__punchline--vertical'),
-  );
-
-  const startNotchClassNames = getClassName(
-    'bpk-ticket__notch',
-    vertical && 'bpk-ticket__notch--left',
-    !vertical && 'bpk-ticket__notch--top',
-  );
-
-  const endNotchClassNames = getClassName(
-    'bpk-ticket__notch',
-    vertical && 'bpk-ticket__notch--right',
-    !vertical && 'bpk-ticket__notch--bottom',
-  );
-
   const mainContent = padded ? (
     children
   ) : (
@@ -131,15 +101,6 @@ const BpkTicket = (props: Props) => {
     <div key="main" className={mainClassNames}>
       {mainContent}
     </div>,
-    <div
-      key="punchline"
-      className={punchlineClassNames}
-      role="presentation"
-      aria-hidden="true"
-    >
-      {withNotches && <div className={startNotchClassNames} />}
-      {withNotches && <div className={endNotchClassNames} />}
-    </div>,
     // $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
     <div key="stub" className={stubClassNames} {...stubProps}>
       {stubContent}
@@ -172,7 +133,6 @@ BpkTicket.propTypes = {
   vertical: PropTypes.bool,
   stubClassName: PropTypes.string,
   stubProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  withNotches: PropTypes.bool,
 };
 
 BpkTicket.defaultProps = {
@@ -182,7 +142,6 @@ BpkTicket.defaultProps = {
   vertical: false,
   stubClassName: null,
   stubProps: {},
-  withNotches: true,
 };
 
 export default BpkTicket;

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;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%}
+@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}

package/bpk-component-ticket/src/BpkTicket.module.scss

@@ -41,7 +41,6 @@ $bpk-spacing-v2: true;
 }
 
 .bpk-ticket {
-  $notch-size: bpk-spacing-md();
   $ticket-padding: bpk-spacing-base();
 
   position: relative;
@@ -49,12 +48,14 @@ $bpk-spacing-v2: true;
   display: flex;
   flex-direction: row;
   align-items: stretch;
+  flex: none;
   color: $bpk-card-color;
   text-decoration: none;
+  box-shadow: 0 5px 12px rgba($bpk-button-outline-background-color, 0.08),
+    0 3px 12px rgba($bpk-button-outline-background-color, 0.08);
   cursor: pointer;
 
-  @include bpk-box-shadow-sm;
-  @include bpk-border-radius-sm;
+  @include bpk-border-radius-md;
   @include hidden-box-shadow-after;
 
   @include bpk-hover {
@@ -71,35 +72,22 @@ $bpk-spacing-v2: true;
     flex-direction: column;
   }
 
-  &--with-notches {
-    box-shadow: none;
-
-    &::after {
-      content: none;
-    }
-  }
-
   &__paper {
     position: relative;
     background-color: $bpk-card-background-color;
-
-    &--with-notches {
-      @include bpk-box-shadow-sm;
-      @include hidden-box-shadow-after;
-    }
   }
 
   @mixin main-styles {
     &--horizontal {
-      border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
+      border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
 
       @include bpk-rtl {
-        border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
+        border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
       }
     }
 
     &--vertical {
-      border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0;
+      border-radius: $bpk-border-radius-md $bpk-border-radius-md 0 0;
     }
   }
 
@@ -123,15 +111,18 @@ $bpk-spacing-v2: true;
   @mixin stub-styles {
     &--horizontal {
       min-width: 30%;
-      border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
+      border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
+      box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-color-sky-gray-tint-05;
 
       @include bpk-rtl {
-        border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
+        border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
+        box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-color-sky-gray-tint-05;
       }
     }
 
     &--vertical {
-      border-radius: 0 0 $bpk-border-radius-sm $bpk-border-radius-sm;
+      border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
+      box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-color-sky-gray-tint-05;
     }
   }
 
@@ -151,147 +142,4 @@ $bpk-spacing-v2: true;
 
     @include stub-styles;
   }
-
-  &__punchline {
-    position: relative;
-    z-index: 1;
-    flex: 0 0 auto;
-    background-color: $bpk-card-background-color;
-
-    &--horizontal {
-      height: $bpk-one-pixel-rem * 2;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-x;
-      background-position: 0 50%;
-      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
-    }
-
-    &--horizontal-with-notches {
-      height: $notch-size * 2;
-      margin: auto $notch-size;
-      padding: 0 $notch-size;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-x;
-      background-position: 0 50%;
-      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
-    }
-
-    &--vertical {
-      width: $bpk-one-pixel-rem * 2;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-
-    &--vertical-with-notches {
-      width: $notch-size * 2;
-      margin: $notch-size auto;
-      padding: $notch-size 0;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-
-    &--fallback {
-      display: table-cell;
-      width: 2 * $bpk-one-pixel-rem;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-  }
-
-  &__notch {
-    position: absolute;
-    width: $notch-size * 2;
-    height: $notch-size;
-    overflow: hidden;
-
-    &::after {
-      position: relative;
-      content: '';
-      display: block;
-      width: $notch-size * 4;
-      height: $notch-size * 4;
-      transform: translate3d(
-        0,
-        0,
-        0
-      ); // BPK-1011 fix rendering bug in safari 11
-
-      border: $notch-size solid $bpk-color-white;
-      border-radius: $notch-size * 2;
-      box-shadow: $bpk-box-shadow-sm inset;
-    }
-
-    &--top {
-      top: -$notch-size;
-
-      &::after {
-        right: -50%;
-        bottom: 200%;
-        left: -50%;
-      }
-    }
-
-    &--right {
-      right: -$notch-size;
-      width: $notch-size;
-      height: $notch-size * 2;
-
-      &::after {
-        right: 100%;
-        bottom: 50%;
-
-        @include bpk-rtl {
-          right: auto;
-          left: 200%;
-        }
-      }
-    }
-
-    &--bottom {
-      bottom: -$notch-size;
-
-      &::after {
-        right: -50%;
-        bottom: 100%;
-        left: -50%;
-      }
-    }
-
-    &--left {
-      left: -$notch-size;
-      width: $notch-size;
-      height: $notch-size * 2;
-
-      &::after {
-        right: 200%;
-        bottom: 50%;
-
-        @include bpk-rtl {
-          right: auto;
-          left: 100%;
-        }
-      }
-    }
-  }
 }

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

@@ -26,7 +26,6 @@ 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-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)}
+@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)}

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

@@ -21,7 +21,6 @@
 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/src/Portal.js

@@ -155,7 +155,7 @@ class Portal extends Component {
   getTargetElement() {
     return typeof this.props.target === 'function'
       ? this.props.target()
-      : this.props.target;
+      : this.props.target?.ref.current;
   }
 
   getRenderTarget() {

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

@@ -18,7 +18,6 @@
 
 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: 32.25rem){.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: 32rem){.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,7 +20,6 @@ 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": "4.1.0",
+  "version": "6.0.0-alpha.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",