@skyscanner/backpack-web 42.5.2 → 42.6.0-dev-v24170567962.1

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Control.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Checkbox } from '@ark-ui/react';
+import { Checkbox } from '@ark-ui/react/checkbox';
 import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Checkbox } from '@ark-ui/react';
+import { Checkbox } from '@ark-ui/react/checkbox';
 
 // Renders Ark's visually hidden native <input type="checkbox">.
 // Include when the checkbox is inside a <form> for native form submission.

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Label.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Checkbox } from '@ark-ui/react';
+import { Checkbox } from '@ark-ui/react/checkbox';
 import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Checkbox } from '@ark-ui/react';
+import { Checkbox } from '@ark-ui/react/checkbox';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-checkbox-card/src/BpkCheckboxCard.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { CheckboxHiddenInput } from '@ark-ui/react';
+import { CheckboxHiddenInput } from '@ark-ui/react/checkbox';
 import { withButtonAlignment } from "../../bpk-component-icon";
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import { BpkSpinner, SPINNER_TYPES } from "../../bpk-component-spinner";

package/bpk-component-checkbox-card/src/BpkCheckboxCardRoot.js

@@ -17,7 +17,7 @@
  */
 
 import { useMemo } from 'react';
-import { CheckboxRoot } from '@ark-ui/react';
+import { CheckboxRoot } from '@ark-ui/react/checkbox';
 import { withButtonAlignment } from "../../bpk-component-icon";
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import { cssModules } from "../../bpk-react-utils";

package/bpk-component-drawer/src/BpkDrawer.d.ts

@@ -6,7 +6,7 @@ export type Props = {
     onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';
     }) => void;
-    title: string;
+    title: ReactNode;
     getApplicationElement: () => HTMLElement | null;
     width?: string;
     renderTarget?: null | HTMLElement | (() => null | HTMLElement);

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -5,7 +5,7 @@ type Props = {
     onCloseAnimationComplete: () => void;
     onClose: () => void;
     id: string;
-    title: string;
+    title: ReactNode;
     width?: string;
     className?: string | null;
     contentClassName?: string;

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

@@ -16,3 +16,5 @@ export type { BpkCommonLayoutProps, BpkBoxSpecificProps, BpkFlexSpecificProps, B
 export type { BpkStackSpecificProps } from './src/types';
 export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkBreakpointValue, } from './src/tokens';
 export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage, } from './src/tokens';
+export { BACKGROUND_COLORS } from './src/backgroundColors';
+export type { BpkLayoutBackgroundColor } from './src/backgroundColors';

package/bpk-component-layout/index.js

@@ -26,4 +26,7 @@ export { BpkStack, BpkHStack, BpkVStack } from "./src/BpkStack";
 
 // Export token types and utilities
 
-export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";
+export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";
+
+// Export color constants and types
+export { BACKGROUND_COLORS } from "./src/backgroundColors";

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

@@ -17,22 +17,32 @@
  */
 
 import { forwardRef } from 'react';
-import { Box } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { Box } from '@chakra-ui/react/box';
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkBox = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkBox'
   });
-  return /*#__PURE__*/_jsx(Box, {
-    ref: ref,
-    ...getDataComponentAttribute('Box'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Box, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('Box'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkBox.displayName = 'BpkBox';

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

@@ -17,14 +17,18 @@
  */
 
 import { forwardRef } from 'react';
-import { Flex } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { Flex } from '@chakra-ui/react/flex';
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkFlex = /*#__PURE__*/forwardRef(({
   align,
+  backgroundColor,
   basis,
   children,
+  color,
   direction,
   grow,
   inline,
@@ -47,8 +51,12 @@ export const BpkFlex = /*#__PURE__*/forwardRef(({
       flexBasis: basis
     }
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
   return /*#__PURE__*/_jsx(Flex, {
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('Flex'),
     ...processedProps,
     display: inline ? 'inline-flex' : undefined,

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

@@ -17,16 +17,20 @@
  */
 
 import { forwardRef } from 'react';
-import { Grid } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { Grid } from '@chakra-ui/react/grid';
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkGrid = /*#__PURE__*/forwardRef(({
   align,
   autoColumns,
   autoFlow,
   autoRows,
+  backgroundColor,
   children,
+  color,
   column,
   inline,
   justify,
@@ -53,8 +57,12 @@ export const BpkGrid = /*#__PURE__*/forwardRef(({
       gridRow: row
     }
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
   return /*#__PURE__*/_jsx(Grid, {
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('Grid'),
     ...processedProps,
     display: inline ? 'inline-grid' : undefined,

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

@@ -17,16 +17,20 @@
  */
 
 import { forwardRef } from 'react';
-import { GridItem } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { GridItem } from '@chakra-ui/react/grid';
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkGridItem = /*#__PURE__*/forwardRef(({
   area,
+  backgroundColor,
   children,
   colEnd,
   colSpan,
   colStart,
+  color,
   rowEnd,
   rowSpan,
   rowStart,
@@ -39,8 +43,12 @@ export const BpkGridItem = /*#__PURE__*/forwardRef(({
   }, {
     component: 'BpkGridItem'
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
   return /*#__PURE__*/_jsx(GridItem, {
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('GridItem'),
     ...processedProps,
     area: area,

package/bpk-component-layout/src/BpkLayout.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-layout.bpk-layout--text-disabled{color:rgba(0,0,0,.2)}.bpk-layout.bpk-layout--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-layout.bpk-layout--text-error{color:#e70866}.bpk-layout.bpk-layout--text-hero{color:#0062e3}.bpk-layout.bpk-layout--text-link{color:#0062e3}.bpk-layout.bpk-layout--text-on-dark{color:#fff}.bpk-layout.bpk-layout--text-on-light{color:#161616}.bpk-layout.bpk-layout--text-primary{color:#161616}.bpk-layout.bpk-layout--text-primary-inverse{color:#fff}.bpk-layout.bpk-layout--text-secondary{color:#626971}.bpk-layout.bpk-layout--text-success{color:#0c838a}.bpk-layout.bpk-layout--surface-default{background-color:#fff}.bpk-layout.bpk-layout--surface-elevated{background-color:#fff}.bpk-layout.bpk-layout--surface-hero{background-color:#0062e3}.bpk-layout.bpk-layout--surface-contrast{background-color:#05203c}.bpk-layout.bpk-layout--surface-highlight{background-color:#e0e4e9}.bpk-layout.bpk-layout--surface-subtle{background-color:#e3f0ff}.bpk-layout.bpk-layout--surface-low-contrast{background-color:#f5f7fa}.bpk-layout.bpk-layout--surface-tint{background-color:hsla(0,0%,100%,.1)}.bpk-layout.bpk-layout--canvas{background-color:#fff}.bpk-layout.bpk-layout--canvas-contrast{background-color:#eff3f8}.bpk-layout.bpk-layout--status-success-fill{background-color:#d4fff2}.bpk-layout.bpk-layout--status-danger-fill{background-color:#ffe9f9}.bpk-layout.bpk-layout--status-warning-fill{background-color:#fff7cf}

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

@@ -17,18 +17,22 @@
  */
 
 import { useEffect, useState } from 'react';
-import { LocaleProvider } from '@ark-ui/react';
-import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
+import { LocaleProvider } from '@ark-ui/react/locale';
+import { ChakraProvider, createSystem } from '@chakra-ui/react/styled-system';
 import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Creates a Chakra UI system with Backpack token mappings.
+ * Creates a Chakra UI system with only the Backpack 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
+ * 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.
  */
-const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
+const bpkSystem = createSystem(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/BpkStack.js

@@ -17,52 +17,78 @@
  */
 
 import { forwardRef } from 'react';
-import { Stack, VStack, HStack } from '@chakra-ui/react';
-import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { Stack, VStack, HStack } from '@chakra-ui/react/stack';
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
+import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const BpkStack = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
-  return /*#__PURE__*/_jsx(Stack, {
-    ref: ref,
-    ...getDataComponentAttribute('Stack'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Stack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('Stack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkStack.displayName = 'BpkStack';
 export const BpkHStack = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
-  return /*#__PURE__*/_jsx(HStack, {
-    ref: ref,
-    ...getDataComponentAttribute('HStack'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(HStack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('HStack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkHStack.displayName = 'BpkHStack';
 export const BpkVStack = /*#__PURE__*/forwardRef(({
+  backgroundColor,
   children,
+  color,
   ...props
 }, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
-  return /*#__PURE__*/_jsx(VStack, {
-    ref: ref,
-    ...getDataComponentAttribute('VStack'),
-    ...processedProps,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(VStack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('VStack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkVStack.displayName = 'BpkVStack';

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

@@ -0,0 +1,16 @@
+export declare const BACKGROUND_COLORS: {
+    readonly statusSuccessFill: "status-success-fill";
+    readonly statusDangerFill: "status-danger-fill";
+    readonly statusWarningFill: "status-warning-fill";
+    readonly canvas: "canvas";
+    readonly canvasContrast: "canvas-contrast";
+    readonly surfaceDefault: "surface-default";
+    readonly surfaceElevated: "surface-elevated";
+    readonly surfaceHero: "surface-hero";
+    readonly surfaceContrast: "surface-contrast";
+    readonly surfaceHighlight: "surface-highlight";
+    readonly surfaceSubtle: "surface-subtle";
+    readonly surfaceLowContrast: "surface-low-contrast";
+    readonly surfaceTint: "surface-tint";
+};
+export type BpkLayoutBackgroundColor = (typeof BACKGROUND_COLORS)[keyof typeof BACKGROUND_COLORS];

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { SURFACE_COLORS } from "../../bpk-react-utils";
+
+// Canvas colors (day mode only)
+const CANVAS_COLORS = {
+  canvas: 'canvas',
+  canvasContrast: 'canvas-contrast'
+};
+
+// Status fill colors (day mode only — only fill, not spot or on-dark)
+const STATUS_FILL_COLORS = {
+  statusSuccessFill: 'status-success-fill',
+  statusDangerFill: 'status-danger-fill',
+  statusWarningFill: 'status-warning-fill'
+};
+export const BACKGROUND_COLORS = {
+  ...SURFACE_COLORS,
+  ...CANVAS_COLORS,
+  ...STATUS_FILL_COLORS
+};

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

@@ -1,6 +1,7 @@
 import type { AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { BpkLayoutBackgroundColor } from './backgroundColors';
 import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
-import type { TextStyle } from '../../bpk-component-text/src/BpkText';
+import type { TextColor, TextStyle } from '../../bpk-component-text';
 /**
  * Common spacing-related props shared by all Backpack layout components
  * All spacing props must use Backpack spacing tokens or percentages
@@ -55,9 +56,9 @@ export interface BpkCommonLayoutProps extends BpkSpacingProps {
     textStyle?: BpkResponsiveValue<TextStyle>;
     'data-testid'?: string;
     'data-cy'?: string;
-    color?: never;
+    color?: TextColor;
+    backgroundColor?: BpkLayoutBackgroundColor;
     background?: never;
-    backgroundColor?: never;
     borderColor?: never;
     borderTopColor?: never;
     borderRightColor?: never;

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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,92 @@
+/*
+ * 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;
+}

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

@@ -1,17 +1,3 @@
-/**
- * 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
  *