@skyscanner/backpack-web 42.6.0-dev-v24171492044.1 → 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/BpkProvider.js

@@ -18,21 +18,17 @@
 
 import { useEffect, useState } from 'react';
 import { LocaleProvider } from '@ark-ui/react';
-import { ChakraProvider, createSystem } from '@chakra-ui/react';
+import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
 import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Creates a Chakra UI system with only the Backpack config.
+ * Creates a Chakra UI system with Backpack token mappings.
  *
- * We intentionally omit `defaultBaseConfig` (~36KB of conditions & utility
- * shorthands) and `defaultConfig` (~141KB of component recipes). Backpack
- * layout components pre-resolve all tokens to raw CSS values before passing
- * them to Chakra, so the utility transform layer is unused. Standard CSS
- * properties still pass through via Chakra's `isCssProperty` check, and
- * responsive objects work because breakpoint conditions are derived from
- * `theme.breakpoints` in our config.
+ * Uses `defaultBaseConfig` (conditions + utilities only) instead of
+ * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
+ * See: https://chakra-ui.com/guides/component-bundle-optimization
  */
-const bpkSystem = createSystem(createBpkConfig());
+const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
 // Fallback locale mapping used when no explicit locale is available on the document.
 // Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
 // 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.

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/theme.d.ts

@@ -1,3 +1,17 @@
+/**
+ * Exports spacing map for use in tokenUtils
+ * This allows tokenUtils to look up actual spacing values
+ *
+ * @returns {Record<string, string>} A map of spacing token names to values.
+ */
+export declare function getSpacingMap(): Record<string, string>;
+/**
+ * Gets the actual spacing value for a Backpack spacing token
+ *
+ * @param {string} token - Backpack spacing token name.
+ * @returns {string | undefined} The actual spacing value.
+ */
+export declare function getSpacingValue(token: string): string | undefined;
 /**
  * Gets the actual border width value for a Backpack border size token
  *

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

@@ -18,33 +18,16 @@
 
 import { defineConfig } from '@chakra-ui/react';
 
-// Named imports from Backpack foundations — only the tokens actually used.
-// This enables tree-shaking of the full foundations module.
-import {
-// Border sizes
-borderSizeSm, borderSizeLg, borderSizeXl,
-// Border radii
-borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
-// Box shadows
-boxShadowSm, boxShadowLg, boxShadowXl,
-// Font sizes
-fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl,
-// Line heights
-lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl,
-// Font weights
-fontWeightBook, fontWeightBold, fontWeightBlack, fontWeightLight,
-// Letter spacing
-letterSpacingTight, letterSpacingHero,
-// Font family
-fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { spacingMap } from "./spacingMap";
+// Import tokens from Backpack foundations
+// Note: Some tokens may not be in TypeScript definitions but exist at runtime
+import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
 // are used primarily for max-width queries (e.g. `(max-width: 32rem)`).
 //
 // Backpack layout responsive values in this package are mobile-first and behave
-// like Chakra breakpoints (min-width thresholds). To align with Backpack's
+// like Chakra breakpoints (min-width thresholds). To align with Backpack’s
 // intended breakpoint ranges we define lower-bound (min-width) thresholds:
 //
 // - small-mobile: 320px+
@@ -53,14 +36,73 @@ import { spacingMap } from "./spacingMap";
 // - tablet: 769px+
 // - desktop: 1025px+
 
+// Note: Spacing tokens are defined as SCSS functions in Backpack foundations,
+// not as direct values. We need to use the actual rem values from the SCSS functions.
+// Based on @skyscanner/bpk-foundations-web/tokens/base.default.scss:
+// - bpk-spacing-sm() returns .25rem
+// - bpk-spacing-md() returns .5rem
+// - bpk-spacing-lg() returns 1.5rem
+// - bpk-spacing-xl() returns 2rem (needs verification)
+// - bpk-spacing-xxl() returns 2.5rem
+// - bpk-spacing-base() returns 1rem (standard base spacing)
+// TODO: CLOV-1021 - will add spacing tokens to Backpack Foundations package and use them here after we ship the PoC
+const spacingXs = '.125rem'; // 2px
+const spacingSm = '.25rem';
+const spacingBase = '1rem'; // Standard base spacing
+const spacingMd = '.5rem';
+const spacingLg = '1.5rem';
+const spacingXl = '2rem';
+const spacingXxl = '2.5rem';
+
+/**
+ * Backpack Theme Configuration for Chakra UI
+ *
+ * This theme maps Backpack design tokens from @skyscanner/bpk-foundations-web
+ * to Chakra UI's theme structure.
+ */
+
+/**
+ * Maps Backpack spacing tokens to actual rem values.
+ * These come directly from @skyscanner/bpk-foundations-web.
+ */
+// Spacing tokens - directly imported from foundations
+const spacingMap = {
+  'bpk-spacing-none': {
+    value: '0'
+  },
+  // Temporary: Foundations does not yet export a 2px spacing token. This will be
+  // replaced with a foundations value once available.
+  'bpk-spacing-xs': {
+    value: spacingXs
+  },
+  'bpk-spacing-sm': {
+    value: spacingSm
+  },
+  'bpk-spacing-base': {
+    value: spacingBase
+  },
+  'bpk-spacing-md': {
+    value: spacingMd
+  },
+  'bpk-spacing-lg': {
+    value: spacingLg
+  },
+  'bpk-spacing-xl': {
+    value: spacingXl
+  },
+  'bpk-spacing-xxl': {
+    value: spacingXxl
+  }
+};
+
 /**
  * Maps Backpack border size tokens to actual border width values
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const borderSizeMap = {
-  'bpk-border-size-sm': borderSizeSm,
-  'bpk-border-size-lg': borderSizeLg,
-  'bpk-border-size-xl': borderSizeXl
+  'bpk-border-size-sm': bpkTokens.borderSizeSm,
+  'bpk-border-size-lg': bpkTokens.borderSizeLg,
+  'bpk-border-size-xl': bpkTokens.borderSizeXl
 };
 
 /**
@@ -69,12 +111,12 @@ const borderSizeMap = {
  */
 const borderRadiusMap = {
   'bpk-border-radius-none': '0',
-  'bpk-border-radius-xs': borderRadiusXs,
-  'bpk-border-radius-sm': borderRadiusSm,
-  'bpk-border-radius-md': borderRadiusMd,
-  'bpk-border-radius-lg': borderRadiusLg,
-  'bpk-border-radius-xl': borderRadiusXl,
-  'bpk-border-radius-full': borderRadiusFull
+  'bpk-border-radius-xs': bpkTokens.borderRadiusXs,
+  'bpk-border-radius-sm': bpkTokens.borderRadiusSm,
+  'bpk-border-radius-md': bpkTokens.borderRadiusMd,
+  'bpk-border-radius-lg': bpkTokens.borderRadiusLg,
+  'bpk-border-radius-xl': bpkTokens.borderRadiusXl,
+  'bpk-border-radius-full': bpkTokens.borderRadiusFull
 };
 
 /**
@@ -82,9 +124,9 @@ const borderRadiusMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const shadowMap = {
-  'bpk-shadow-sm': boxShadowSm,
-  'bpk-shadow-lg': boxShadowLg,
-  'bpk-shadow-xl': boxShadowXl
+  'bpk-shadow-sm': bpkTokens.boxShadowSm,
+  'bpk-shadow-lg': bpkTokens.boxShadowLg,
+  'bpk-shadow-xl': bpkTokens.boxShadowXl
 };
 
 /**
@@ -113,6 +155,31 @@ const breakpointMap = {
   '2xl': '64.0625rem' // 1025px
 };
 
+/**
+ * Exports spacing map for use in tokenUtils
+ * This allows tokenUtils to look up actual spacing values
+ *
+ * @returns {Record<string, string>} A map of spacing token names to values.
+ */
+export function getSpacingMap() {
+  // Return simple string values for backward compatibility with utilities
+  const simpleMap = {};
+  Object.entries(spacingMap).forEach(([key, obj]) => {
+    simpleMap[key] = obj.value;
+  });
+  return simpleMap;
+}
+
+/**
+ * Gets the actual spacing value for a Backpack spacing token
+ *
+ * @param {string} token - Backpack spacing token name.
+ * @returns {string | undefined} The actual spacing value.
+ */
+export function getSpacingValue(token) {
+  return spacingMap[token]?.value;
+}
+
 /**
  * Gets the actual border width value for a Backpack border size token
  *
@@ -151,230 +218,230 @@ export function getShadowValue(token) {
 const textStylesMap = {
   xs: {
     value: {
-      fontSize: fontSizeXs,
-      lineHeight: lineHeightXs,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   sm: {
     value: {
-      fontSize: fontSizeSm,
-      lineHeight: lineHeightSm,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   base: {
     value: {
-      fontSize: fontSizeBase,
-      lineHeight: lineHeightBase,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   lg: {
     value: {
-      fontSize: fontSizeLg,
-      lineHeight: lineHeightLg,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   xl: {
     value: {
-      fontSize: fontSizeXl,
-      lineHeight: lineHeightXl,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   xxl: {
     value: {
-      fontSize: fontSizeXxl,
-      lineHeight: lineHeightXxl,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   xxxl: {
     value: {
-      fontSize: fontSizeXxxl,
-      lineHeight: lineHeightXxxl,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   xxxxl: {
     value: {
-      fontSize: fontSizeXxxxl,
-      lineHeight: lineHeightXxxxl,
-      fontWeight: fontWeightBold,
-      letterSpacing: letterSpacingTight
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
     }
   },
   xxxxxl: {
     value: {
-      fontSize: fontSizeXxxxxl,
-      lineHeight: lineHeightXxxxxl,
-      fontWeight: fontWeightBold,
-      letterSpacing: letterSpacingTight
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
     }
   },
   caption: {
     value: {
-      fontSize: fontSizeXs,
-      lineHeight: lineHeightXs,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   footnote: {
     value: {
-      fontSize: fontSizeSm,
-      lineHeight: lineHeightSm,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   'label-1': {
     value: {
-      fontSize: fontSizeBase,
-      lineHeight: lineHeightBase,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'label-2': {
     value: {
-      fontSize: fontSizeSm,
-      lineHeight: lineHeightSm,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'label-3': {
     value: {
-      fontSize: fontSizeXs,
-      lineHeight: lineHeightXs,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'body-default': {
     value: {
-      fontSize: fontSizeBase,
-      lineHeight: lineHeightBase,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   'body-longform': {
     value: {
-      fontSize: fontSizeLg,
-      lineHeight: lineHeightLg,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   subheading: {
     value: {
-      fontSize: fontSizeXl,
-      lineHeight: lineHeightXl,
-      fontWeight: fontWeightBook
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
     }
   },
   'heading-1': {
     value: {
-      fontSize: fontSizeXxxl,
-      lineHeight: lineHeightXxxl,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'heading-2': {
     value: {
-      fontSize: fontSizeXxl,
-      lineHeight: lineHeightXxl,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'heading-3': {
     value: {
-      fontSize: fontSizeXl,
-      lineHeight: lineHeightXlTight,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXlTight,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'heading-4': {
     value: {
-      fontSize: fontSizeLg,
-      lineHeight: lineHeightLgTight,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLgTight,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'heading-5': {
     value: {
-      fontSize: fontSizeBase,
-      lineHeight: lineHeightBaseTight,
-      fontWeight: fontWeightBold
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBaseTight,
+      fontWeight: bpkTokens.fontWeightBold
     }
   },
   'hero-1': {
     value: {
-      fontSize: fontSize8Xl,
-      lineHeight: lineHeight8Xl,
-      fontWeight: fontWeightBlack,
-      letterSpacing: letterSpacingHero
+      fontSize: bpkTokens.fontSize8Xl,
+      lineHeight: bpkTokens.lineHeight8Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
     }
   },
   'hero-2': {
     value: {
-      fontSize: fontSize7Xl,
-      lineHeight: lineHeight7Xl,
-      fontWeight: fontWeightBlack,
-      letterSpacing: letterSpacingHero
+      fontSize: bpkTokens.fontSize7Xl,
+      lineHeight: bpkTokens.lineHeight7Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
     }
   },
   'hero-3': {
     value: {
-      fontSize: fontSize6Xl,
-      lineHeight: lineHeight6Xl,
-      fontWeight: fontWeightBlack,
-      letterSpacing: letterSpacingHero
+      fontSize: bpkTokens.fontSize6Xl,
+      lineHeight: bpkTokens.lineHeight6Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
     }
   },
   'hero-4': {
     value: {
-      fontSize: fontSizeXxxxxl,
-      lineHeight: lineHeightXxxxxl,
-      fontWeight: fontWeightBlack,
-      letterSpacing: letterSpacingHero
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
     }
   },
   'hero-5': {
     value: {
-      fontSize: fontSizeXxxxl,
-      lineHeight: lineHeightXxxl,
-      fontWeight: fontWeightBlack,
-      letterSpacing: letterSpacingHero
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
     }
   },
   'hero-6': {
     value: {
-      fontSize: fontSizeXxxl,
-      lineHeight: lineHeightXxl,
-      fontWeight: fontWeightBlack,
-      letterSpacing: letterSpacingHero
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
     }
   },
   'editorial-1': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
-      fontSize: fontSizeXxxxl,
-      lineHeight: lineHeightXxxxl,
-      fontWeight: fontWeightLight
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightLight
     }
   },
   'editorial-2': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
-      fontSize: fontSizeXxl,
-      lineHeight: lineHeightXxl,
-      fontWeight: fontWeightLight
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightLight
     }
   },
   'editorial-3': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
-      fontSize: fontSizeLg,
-      lineHeight: lineHeightLg,
-      fontWeight: fontWeightBook
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
     }
   }
 };

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

@@ -17,7 +17,7 @@
  */
 
 import StackOptionKeys from "./BpkStack.constant";
-import { getSpacingValue } from "./spacingMap";
+import { getSpacingValue } from "./theme";
 import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
 
 /**
@@ -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-dev-v24171492044.1",
+  "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",

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

@@ -1,21 +0,0 @@
-/**
- * Maps Backpack spacing tokens to actual rem values.
- * These come directly from @skyscanner/bpk-foundations-web.
- */
-export declare const spacingMap: Record<string, {
-    value: string;
-}>;
-/**
- * Exports spacing map for use in tokenUtils
- * This allows tokenUtils to look up actual spacing values
- *
- * @returns {Record<string, string>} A map of spacing token names to values.
- */
-export declare function getSpacingMap(): Record<string, string>;
-/**
- * Gets the actual spacing value for a Backpack spacing token
- *
- * @param {string} token - Backpack spacing token name.
- * @returns {string | undefined} The actual spacing value.
- */
-export declare function getSpacingValue(token: string): string | undefined;

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

@@ -1,92 +0,0 @@
-/*
- * 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.
- */
-
-// Note: Spacing tokens are defined as SCSS functions in Backpack foundations,
-// not as direct values. We need to use the actual rem values from the SCSS functions.
-// Based on @skyscanner/bpk-foundations-web/tokens/base.default.scss:
-// - bpk-spacing-sm() returns .25rem
-// - bpk-spacing-md() returns .5rem
-// - bpk-spacing-lg() returns 1.5rem
-// - bpk-spacing-xl() returns 2rem (needs verification)
-// - bpk-spacing-xxl() returns 2.5rem
-// - bpk-spacing-base() returns 1rem (standard base spacing)
-// TODO: CLOV-1021 - will add spacing tokens to Backpack Foundations package and use them here after we ship the PoC
-const spacingXs = '.125rem'; // 2px
-const spacingSm = '.25rem';
-const spacingBase = '1rem'; // Standard base spacing
-const spacingMd = '.5rem';
-const spacingLg = '1.5rem';
-const spacingXl = '2rem';
-const spacingXxl = '2.5rem';
-
-/**
- * Maps Backpack spacing tokens to actual rem values.
- * These come directly from @skyscanner/bpk-foundations-web.
- */
-export const spacingMap = {
-  'bpk-spacing-none': {
-    value: '0'
-  },
-  // Temporary: Foundations does not yet export a 2px spacing token. This will be
-  // replaced with a foundations value once available.
-  'bpk-spacing-xs': {
-    value: spacingXs
-  },
-  'bpk-spacing-sm': {
-    value: spacingSm
-  },
-  'bpk-spacing-base': {
-    value: spacingBase
-  },
-  'bpk-spacing-md': {
-    value: spacingMd
-  },
-  'bpk-spacing-lg': {
-    value: spacingLg
-  },
-  'bpk-spacing-xl': {
-    value: spacingXl
-  },
-  'bpk-spacing-xxl': {
-    value: spacingXxl
-  }
-};
-
-/**
- * Exports spacing map for use in tokenUtils
- * This allows tokenUtils to look up actual spacing values
- *
- * @returns {Record<string, string>} A map of spacing token names to values.
- */
-export function getSpacingMap() {
-  const simpleMap = {};
-  Object.entries(spacingMap).forEach(([key, obj]) => {
-    simpleMap[key] = obj.value;
-  });
-  return simpleMap;
-}
-
-/**
- * Gets the actual spacing value for a Backpack spacing token
- *
- * @param {string} token - Backpack spacing token name.
- * @returns {string | undefined} The actual spacing value.
- */
-export function getSpacingValue(token) {
-  return spacingMap[token]?.value;
-}