@skyscanner/backpack-web 30.1.0 → 30.3.0

package/bpk-component-badge/index.d.ts

@@ -18,7 +18,7 @@
 
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
 import themeAttributes from './src/themeAttributes';
-
+import BpkBadgeV2 from './src/BpkBadgeV2/BpkBadge';
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };

package/bpk-component-badge/index.js

@@ -18,5 +18,7 @@
 
 import component, { BADGE_TYPES } from "./src/BpkBadge";
 import themeAttributes from "./src/themeAttributes";
+import BpkBadgeV2 from "./src/BpkBadgeV2/BpkBadge";
+;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };

package/bpk-component-badge/src/BpkBadgeV2/BpkBadge.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/// <reference types="react" />
+import type { Props } from '../BpkBadge';
+declare const BpkBadgeV2: ({ centered, className, docked, type, ...rest }: Props) => JSX.Element;
+export default BpkBadgeV2;

package/bpk-component-badge/src/BpkBadgeV2/BpkBadge.js

@@ -0,0 +1,47 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cssModules } from "../../../bpk-react-utils";
+import { BADGE_TYPES } from "../BpkBadge";
+import STYLES from "./BpkBadge.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const badgeTypeClassNames = {
+  [BADGE_TYPES.warning]: getClassName('bpk-badge--warning'),
+  [BADGE_TYPES.success]: getClassName('bpk-badge--success'),
+  [BADGE_TYPES.critical]: getClassName('bpk-badge--critical'),
+  [BADGE_TYPES.normal]: getClassName('bpk-badge--normal'),
+  [BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'),
+  [BADGE_TYPES.outline]: getClassName('bpk-badge--outline'),
+  [BADGE_TYPES.strong]: getClassName('bpk-badge--strong'),
+  [BADGE_TYPES.brand]: getClassName('bpk-badge--brand')
+};
+const BpkBadgeV2 = ({
+  centered = false,
+  className = null,
+  docked = null,
+  type = BADGE_TYPES.normal,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-badge', badgeTypeClassNames[type], docked === 'right' && 'bpk-badge--docked-right', docked === 'left' && 'bpk-badge--docked-left', centered && 'bpk-badge--centered', className);
+  return /*#__PURE__*/_jsx("span", {
+    className: classNames,
+    ...rest
+  });
+};
+export default BpkBadgeV2;

package/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+.bpk-badge{display:inline-flex;padding:0.25rem 0.5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff1f2;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff1f2;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff1f2;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff1f2;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff}

package/bpk-component-flare/src/corner-radius.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ styles, ...props }: {
+    [x: string]: any;
+    styles?: {} | undefined;
+}) => JSX.Element;
+export default _default;

package/bpk-component-flare/src/pointer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ styles, ...props }: {
+    [x: string]: any;
+    styles?: {} | undefined;
+}) => JSX.Element;
+export default _default;

package/bpk-component-section-header/index.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkSectionHeader, { SECTION_TYPES } from './src/BpkSectionHeader';
+
+export default BpkSectionHeader;
+export { SECTION_TYPES };

package/bpk-mixins/src/mixins/_badges-v2.scss

@@ -0,0 +1,238 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../bonds.scss';
+@import 'typography.scss';
+@import 'radii.scss';
+@import 'utils.scss';
+
+////
+/// @group badges
+////
+
+/// Standard badge.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///   }
+
+@mixin bpk-badge {
+  display: inline-flex;
+  padding: bpk-spacing-sm() bpk-spacing-md();
+  align-items: center;
+
+  @include bpk-border-radius-xs;
+  @include bpk-text;
+  @include bpk-footnote;
+}
+
+/// Centered badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--centered();
+///   }
+
+@mixin bpk-badge--centered {
+  vertical-align: text-bottom;
+}
+
+/// Right-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-right();
+///   }
+
+@mixin bpk-badge--docked-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  @include bpk-rtl {
+    right: inherit;
+    left: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: $bpk-border-radius-xs;
+  }
+}
+
+/// Left-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-left();
+///   }
+
+@mixin bpk-badge--docked-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+
+  @include bpk-rtl {
+    right: 0;
+    left: inherit;
+    border-bottom-left-radius: $bpk-border-radius-xs;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/// Normal badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--normal();
+///   }
+
+@mixin bpk-badge--normal {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Warning badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--warning();
+///   }
+
+@mixin bpk-badge--warning {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-status-warning-spot-day;
+}
+
+/// Success badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--success();
+///   }
+
+@mixin bpk-badge--success {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-status-success-spot-day;
+}
+
+/// Critical badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--critical();
+///   }
+
+@mixin bpk-badge--critical {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-status-danger-spot-day;
+}
+
+/// Inverse badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--inverse();
+///   }
+
+@mixin bpk-badge--inverse {
+  background-color: $bpk-surface-default-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Outline badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--outline();
+///   }
+
+@mixin bpk-badge--outline {
+  background-color: transparent;
+  color: $bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Strong badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--strong();
+///   }
+
+@mixin bpk-badge--strong {
+  background-color: $bpk-core-primary-day;
+  color: $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Brand badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--brand();
+///   }
+
+@mixin bpk-badge--brand {
+  background-color: $bpk-core-accent-day;
+  color: $bpk-text-primary-inverse-day;
+  fill: $bpk-text-primary-inverse-day;
+}

package/bpk-mixins/src/mixins/_forms.scss

@@ -87,8 +87,8 @@
 @mixin bpk-input--valid {
   padding-right: bpk-spacing-xl();
   background: $bpk-input-background
-    url(map-get($bpk-icons-sm, tick-circle-green-spot)) no-repeat right
-    bpk-spacing-md() center;
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=')
+    no-repeat right bpk-spacing-md() center;
   background-size: $bpk-icon-size-sm $bpk-icon-size-sm;
 
   @include bpk-rtl {
@@ -111,8 +111,8 @@
 @mixin bpk-input--invalid {
   padding-right: bpk-spacing-xl();
   background: $bpk-input-background
-    url(map-get($bpk-icons-sm, exclamation-circle-berry)) no-repeat right
-    bpk-spacing-md() center;
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==')
+    no-repeat right bpk-spacing-md() center;
   background-size: $bpk-icon-size-sm $bpk-icon-size-sm;
 
   @include bpk-themeable-property(
@@ -337,8 +337,8 @@
   border: solid $bpk-one-pixel-rem $bpk-line-day;
   border-radius: $bpk-select-border-radius;
   background: $bpk-surface-default-day
-    url(map-get($bpk-icons-sm, arrow-down-charcoal)) no-repeat right
-    bpk-spacing-md() center;
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+    no-repeat right bpk-spacing-md() center;
   background-size: $bpk-input-height / 2;
   color: $bpk-text-primary-day;
   line-height: ($bpk-line-height-base - (2 * $bpk-select-border-width));
@@ -360,8 +360,8 @@
   &:disabled {
     border-color: $bpk-surface-highlight-day;
     background: $bpk-surface-default-day
-      url(map-get($bpk-icons-sm, arrow-down-black-alpha-20)) no-repeat right
-      bpk-spacing-md() center;
+      url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDAwMDAwICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+      no-repeat right bpk-spacing-md() center;
     background-size: $bpk-input-height / 2;
     color: $bpk-text-disabled-day;
     cursor: not-allowed;
@@ -383,8 +383,8 @@
   padding: bpk-spacing-md() bpk-spacing-base();
   padding-right: bpk-spacing-xxl();
   background: $bpk-surface-default-day
-    url(map-get($bpk-icons-sm, arrow-down-charcoal)) no-repeat right
-    bpk-spacing-base() center;
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+    no-repeat right bpk-spacing-base() center;
 
   @include bpk-rtl {
     padding-right: bpk-spacing-base();
@@ -489,8 +489,8 @@
 @mixin bpk-select--invalid {
   padding-right: bpk-spacing-xl();
   background: $bpk-surface-default-day
-    url(map-get($bpk-icons-sm, arrow-down-charcoal)) no-repeat right
-    bpk-spacing-md() center;
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMTYxNjE2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTE2LjUzNyA4LjI1SDcuNDYzYTEuMzU4IDEuMzU4IDAgMCAwLTEuMTEgMi4yNTFsNC4zNTQgNC43N2ExLjUzIDEuNTMgMCAwIDAgMi4xODQuMDRsNC43MTgtNC43N2ExLjM1NyAxLjM1NyAwIDAgMC0xLjA3Mi0yLjI5MXoiLz48L3N2Zz4=')
+    no-repeat right bpk-spacing-md() center;
   background-size: $bpk-input-height / 2;
 
   @include bpk-themeable-property(
@@ -1003,8 +1003,8 @@
 @mixin bpk-textarea--invalid {
   padding-right: bpk-spacing-xl();
   background: $bpk-input-background
-    url(map-get($bpk-icons-sm, exclamation-circle-berry)) no-repeat right
-    bpk-spacing-md() center;
+    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==')
+    no-repeat right bpk-spacing-md() center;
 
   @include bpk-themeable-property(
     border-color,

package/bpk-mixins/src/mixins/_svgs.scss

@@ -193,17 +193,10 @@
 ///     @include bpk-spinner(spinner-sky-gray-tint-02);
 ///   }
 
-@mixin bpk-spinner($spinner: '') {
+@mixin bpk-spinner() {
   width: bpk-spacing-base();
   height: bpk-spacing-base();
   animation: bpk-keyframe-spin 600ms linear infinite;
-
-  @if $spinner != '' {
-    content: '';
-    display: inline-block;
-    background: url(map-get($bpk-spinners, $spinner)) no-repeat;
-    background-size: cover;
-  }
 }
 
 /// Large spinner. Modifies the bpk-spinner mixin.

package/bpk-scrim-utils/index.d.ts

@@ -18,230 +18,63 @@
 
 /// <reference types="react" />
 import withScrim from './src/withScrim';
-export { withScrim };
+import withScrimmedPortal from './src/withScrimmedPortal';
+export { withScrim, withScrimmedPortal };
 declare const _default: {
     withScrim: <P extends object>(WrappedComponent: string | import("react").ComponentType<P>) => {
-        new (props: ({
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<P, "dialogRef">) | Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<P, "dialogRef">>): {
+        new (props: (import("./src/withScrim").Props & Omit<P, "dialogRef">) | Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>): {
             dialogElement?: HTMLElement | null | undefined;
             componentDidMount(): void;
             componentWillUnmount(): void;
             dialogRef: (ref: HTMLElement | null | undefined) => void;
             render(): JSX.Element;
             context: any;
-            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">> & Readonly<{
+            readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">> & Readonly<{
                 children?: import("react").ReactNode;
             }>;
             state: Readonly<{}>;
             refs: {
                 [key: string]: import("react").ReactInstance;
             };
-            shouldComponentUpdate?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
+            shouldComponentUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
-            componentDidUpdate?(prevProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
-            componentWillReceiveProps?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextContext: any): void;
-            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextContext: any): void;
-            componentWillUpdate?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
-            UNSAFE_componentWillUpdate?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+            componentWillReceiveProps?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
         };
-        new (props: {
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<P, "dialogRef">, context: any): {
+        new (props: import("./src/withScrim").Props & Omit<P, "dialogRef">, context: any): {
             dialogElement?: HTMLElement | null | undefined;
             componentDidMount(): void;
             componentWillUnmount(): void;
             dialogRef: (ref: HTMLElement | null | undefined) => void;
             render(): JSX.Element;
             context: any;
-            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">> & Readonly<{
+            readonly props: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">> & Readonly<{
                 children?: import("react").ReactNode;
             }>;
             state: Readonly<{}>;
             refs: {
                 [key: string]: import("react").ReactInstance;
             };
-            shouldComponentUpdate?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
+            shouldComponentUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
             componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-            getSnapshotBeforeUpdate?(prevProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
-            componentDidUpdate?(prevProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
             componentWillMount?(): void;
             UNSAFE_componentWillMount?(): void;
-            componentWillReceiveProps?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextContext: any): void;
-            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextContext: any): void;
-            componentWillUpdate?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
-            UNSAFE_componentWillUpdate?(nextProps: Readonly<{
-                [rest: string]: any;
-                getApplicationElement: () => HTMLElement | null;
-                onClose?: (() => void | null) | undefined;
-                isIphone?: boolean | undefined;
-                isIpad?: boolean | undefined;
-                containerClassName?: string | undefined;
-                closeOnScrimClick?: boolean | undefined;
-            } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+            componentWillReceiveProps?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
         };
         displayName: string;
         defaultProps: {

package/bpk-scrim-utils/index.js

@@ -17,7 +17,8 @@
  */
 
 import withScrim from "./src/withScrim";
-export { withScrim };
+import withScrimmedPortal from "./src/withScrimmedPortal";
+export { withScrim, withScrimmedPortal };
 export default {
   withScrim
 };

package/bpk-scrim-utils/src/withScrim.d.ts

@@ -17,7 +17,7 @@
  */
 
 import type { ComponentType } from 'react';
-type Props = {
+export type Props = {
     getApplicationElement: () => HTMLElement | null;
     onClose?: () => void | null;
     isIphone?: boolean;

package/bpk-scrim-utils/src/withScrimmedPortal.d.ts

@@ -0,0 +1,25 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ComponentType } from 'react';
+import type { Props as ScrimProps } from './withScrim';
+type Props = ScrimProps & {
+    renderTarget?: (() => HTMLElement | null) | null;
+};
+declare const withScrimmedPortal: (WrappedComponent: ComponentType<ScrimProps>) => ({ renderTarget, ...rest }: Props) => import("react").ReactPortal;
+export default withScrimmedPortal;

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

@@ -0,0 +1,60 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import withScrim from "./withScrim";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getPortalElement = target => {
+  const portalElement = target && typeof target === 'function' ? target() : null;
+  if (portalElement) {
+    return portalElement;
+  }
+  if (document.body) {
+    return document.body;
+  }
+  throw new Error('Render target and fallback unavailable');
+};
+const withScrimmedPortal = WrappedComponent => {
+  const Scrimmed = withScrim(WrappedComponent);
+  const ScrimmedComponent = ({
+    renderTarget,
+    ...rest
+  }) => {
+    const node = useRef(null);
+    if (!node.current) {
+      node.current = document.createElement('div');
+    }
+    useEffect(() => {
+      const portalElement = getPortalElement(renderTarget);
+      if (node.current) {
+        portalElement.appendChild(node.current);
+      }
+      return () => {
+        if (node.current) {
+          portalElement.removeChild(node.current);
+        }
+      };
+    }, []);
+    return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(Scrimmed, {
+      ...rest
+    }), node.current);
+  };
+  return ScrimmedComponent;
+};
+export default withScrimmedPortal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "30.1.0",
+  "version": "30.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.2.0",
+    "@skyscanner/bpk-foundations-web": "^17.4.0",
     "@skyscanner/bpk-svgs": "^18.1.2",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",