@skyscanner/backpack-web 42.6.0 → 42.7.0

package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+type AriaLiveDemoProps = {
+    preamble?: ReactElement | null;
+    children: ReactElement;
+    className?: string | null;
+    style?: {};
+    visible?: Boolean;
+    [rest: string]: any;
+};
+declare const AriaLiveDemo: ({ children, className, preamble, style, visible, ...rest }: AriaLiveDemoProps) => import("react/jsx-runtime").JSX.Element;
+export default AriaLiveDemo;

package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.js

@@ -0,0 +1,48 @@
+/*
+ * 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 { ARIA_LIVE_POLITENESS_SETTINGS } from '..';
+import { cssModules } from "../../bpk-react-utils";
+import BpkAriaLive from "./BpkAriaLive";
+import STYLES from "./BpkAriaLive.stories.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const AriaLiveDemo = ({
+  children,
+  className = null,
+  preamble = null,
+  style = undefined,
+  visible = false,
+  ...rest
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-storybook-aria-live-demo', className),
+  style: style,
+  children: [/*#__PURE__*/_jsx("p", {
+    children: /*#__PURE__*/_jsx("strong", {
+      children: "ARIA live region:"
+    })
+  }), /*#__PURE__*/_jsx("p", {
+    children: visible ? 'This content is relevant to everyone, not just assistive technologies, so it is permanently visible.' : 'This would usually be visually hidden, and only visible to assistive technologies. It is visible here for demo purposes.'
+  }), preamble, /*#__PURE__*/_jsx(BpkAriaLive, {
+    ...rest,
+    visible: true,
+    politenessSetting: ARIA_LIVE_POLITENESS_SETTINGS.assertive,
+    children: children
+  })]
+});
+export default AriaLiveDemo;

package/bpk-component-bubble/src/BpkBubble.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}
+.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Noto Serif SC", sans-serif);text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}

package/bpk-component-layout/src/commonProps.d.ts

@@ -1,6 +1,6 @@
-import type { AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { AriaAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
 import type { BpkLayoutBackgroundColor } from './backgroundColors';
-import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
+import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkPositionKeyword, BpkOverflowValue, BpkZIndexValue, BpkResponsiveValue } from './tokens';
 import type { TextColor, TextStyle } from '../../bpk-component-text';
 /**
  * Common spacing-related props shared by all Backpack layout components
@@ -46,14 +46,20 @@ export interface BpkSpacingProps {
  *   container patterns (e.g. clickable cards, landmark regions).
  * - BpkBox additionally exposes onFocus and onBlur on its own props type.
  */
-export interface BpkCommonLayoutProps extends BpkSpacingProps {
+export interface BpkCommonLayoutProps extends BpkSpacingProps, AriaAttributes {
     className?: never;
     style?: never;
+    id?: string;
     tabIndex?: number;
     role?: AriaRole;
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     textStyle?: BpkResponsiveValue<TextStyle>;
+    position?: BpkResponsiveValue<BpkPositionKeyword>;
+    overflow?: BpkResponsiveValue<BpkOverflowValue>;
+    overflowX?: BpkResponsiveValue<BpkOverflowValue>;
+    overflowY?: BpkResponsiveValue<BpkOverflowValue>;
+    zIndex?: BpkZIndexValue;
     'data-testid'?: string;
     'data-cy'?: string;
     color?: TextColor;

package/bpk-component-layout/src/tokenUtils.js

@@ -41,7 +41,9 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
     // Flex container props
     'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignContent',
     // Grid container props
-    'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
+    'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
     // Flex item props
     'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'order', 'alignSelf', 'justifySelf',
@@ -50,22 +52,28 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap'],
+    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
+    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
     // Used when placing the grid itself within a parent grid.
     'gridColumn', 'gridRow']
   },
   BpkGridItem: {
-    container: ['textStyle']
+    container: ['textStyle', 'position', 'overflow', 'overflowX', 'overflowY']
   },
   // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: ['textStyle', ...StackOptionKeys]
+    container: ['textStyle', ...StackOptionKeys,
+    // Position keyword and overflow (from BpkCommonLayoutProps)
+    'position', 'overflow', 'overflowX', 'overflowY']
   }
 };
 export const BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT = {
@@ -101,7 +109,15 @@ function filterToAllowlist(props, allowlist) {
 export function processBpkComponentProps(props, options) {
   const processed = processBpkProps(props);
   const allowlist = BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT[options.component];
-  const responsiveSource = options.responsiveProps ? filterToAllowlist(options.responsiveProps, allowlist) : filterToAllowlist(processed, allowlist);
+  // When responsiveProps is provided (e.g. BpkFlex maps direction→flexDirection),
+  // merge it with any allowlisted props already in `processed` (e.g. position/overflow
+  // that come in via ...props and are NOT included in responsiveProps).
+  // responsiveProps takes precedence so that explicit prop-name mappings always win.
+  const processedAllowlisted = filterToAllowlist(processed, allowlist);
+  const responsiveSource = options.responsiveProps ? {
+    ...processedAllowlisted,
+    ...filterToAllowlist(options.responsiveProps, allowlist)
+  } : processedAllowlisted;
   if (Object.keys(responsiveSource).length === 0) {
     return processed;
   }

package/bpk-component-layout/src/tokens.d.ts

@@ -47,10 +47,24 @@ export type BpkBreakpointValue = BpkBreakpointToken;
  */
 export type BpkSizeValue = `${number}rem` | `${number}%` | 'auto' | 'full' | 'fit-content';
 /**
- * Helper type for position props that can use rem or percentages.
- * We intentionally do not allow semantic values like 'auto' here.
+ * Helper type for position props that can use rem, percentages, or bare zero.
+ * CSS allows `0` without a unit; `'0'` is therefore an explicit allowed value.
+ * We intentionally do not allow other semantic values like 'auto' here.
  */
-export type BpkPositionValue = `${number}rem` | `${number}%`;
+export type BpkPositionValue = `${number}rem` | `${number}%` | '0';
+/**
+ * CSS `position` property keyword values.
+ */
+export type BpkPositionKeyword = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+/**
+ * CSS `overflow` property keyword values.
+ */
+export type BpkOverflowValue = 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+/**
+ * CSS `z-index` values. Numeric values only; 'auto' is also permitted.
+ * Avoid magic numbers — prefer a shared z-index scale in your app.
+ */
+export type BpkZIndexValue = number | 'auto';
 /**
  * Helper type for flex-basis prop that can use rem, percentages or semantic values.
  * Excludes 'px' values to enforce design system constraints.

package/bpk-component-layout/src/tokens.js

@@ -71,8 +71,22 @@ export const BpkBreakpointToChakraKey = {
  */
 
 /**
- * Helper type for position props that can use rem or percentages.
- * We intentionally do not allow semantic values like 'auto' here.
+ * Helper type for position props that can use rem, percentages, or bare zero.
+ * CSS allows `0` without a unit; `'0'` is therefore an explicit allowed value.
+ * We intentionally do not allow other semantic values like 'auto' here.
+ */
+
+/**
+ * CSS `position` property keyword values.
+ */
+
+/**
+ * CSS `overflow` property keyword values.
+ */
+
+/**
+ * CSS `z-index` values. Numeric values only; 'auto' is also permitted.
+ * Avoid magic numbers — prefer a shared z-index scale in your app.
  */
 
 /**
@@ -131,7 +145,9 @@ export function isValidSizeValue(value) {
  * @returns {boolean} True if the value is a valid rem or percentage
  */
 export function isValidPositionValue(value) {
-  return /^-?\d+(\.\d+)?rem$/.test(value) ||
+  return value === '0' ||
+  // bare zero — valid CSS without a unit
+  /^-?\d+(\.\d+)?rem$/.test(value) ||
   // rem values
   isPercentage(value) // percentage values
   ;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.d.ts

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import type { ReactElement } from 'react';
+type Props = {
+    children: Array<ReactElement<any, any>> | ReactElement<any, any>;
+};
+declare const SpinnerLayout: {
+    (props: Props): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default SpinnerLayout;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.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 PropTypes from 'prop-types';
+import { Children } from 'react';
+import { cssModules } from "../../bpk-react-utils";
+import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./SpinnerLayout.story-helpers.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const SpinnerLayout = props => {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-spinner-layout'),
+    children: Children.map(children, child => {
+      const classNames = [getClassName('bpk-spinner-layout__spinner')];
+      if (child.props.type === SPINNER_TYPES.light) {
+        classNames.push(getClassName('bpk-spinner-layout__spinner--light'));
+      }
+      return /*#__PURE__*/_jsx("div", {
+        className: classNames.join(' '),
+        children: child
+      });
+    })
+  });
+};
+SpinnerLayout.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default SpinnerLayout;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.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-spinner-layout{display:flex;flex-direction:column}.bpk-spinner-layout__spinner{display:flex;padding:1.5rem;justify-content:center}.bpk-spinner-layout__spinner--light{background-color:#05203c;border-radius:.25rem}

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.
  */
-.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:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.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:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}
+.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:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.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:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Noto Serif SC", sans-serif);font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Noto Serif SC", sans-serif);font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Noto Serif SC", sans-serif);font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}

package/bpk-stylesheets/base.css

@@ -16,4 +16,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack, "Skyscanner Relative", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Thai", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack, "Skyscanner Relative", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Thai", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.6.0",
+  "version": "42.7.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^24.1.0",
+    "@skyscanner/bpk-foundations-web": "^24.4.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",