@skyscanner/backpack-web 42.3.0 → 42.4.0

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--critical{background-color:#e70866}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}
+.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--critical{background-color:#e70866;color:#fff}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:currentcolor}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}

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

@@ -1,3 +1,3 @@
 import type { BpkBoxProps } from './types';
-export declare const BpkBox: ({ children, ...props }: BpkBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkBox: import("react").ForwardRefExoticComponent<BpkBoxProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkBoxProps };

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

@@ -16,20 +16,23 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Box } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkBox = ({
+export const BpkBox = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkBox'
   });
   return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
     ...getDataComponentAttribute('Box'),
     ...processedProps,
     children: children
   });
-};
+});
+BpkBox.displayName = 'BpkBox';

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

@@ -1,3 +1,3 @@
 import type { BpkFlexProps } from './types';
-export declare const BpkFlex: ({ align, basis, children, direction, grow, inline, justify, shrink, wrap, ...props }: BpkFlexProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkFlex: import("react").ForwardRefExoticComponent<BpkFlexProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkFlexProps };

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

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkFlex = ({
+export const BpkFlex = /*#__PURE__*/forwardRef(({
   align,
   basis,
   children,
@@ -29,12 +30,14 @@ export const BpkFlex = ({
   inline,
   justify,
   shrink,
+  textStyle,
   wrap,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkFlex',
     responsiveProps: {
+      textStyle,
       flexDirection: direction,
       justifyContent: justify,
       alignItems: align,
@@ -45,9 +48,11 @@ export const BpkFlex = ({
     }
   });
   return /*#__PURE__*/_jsx(Flex, {
+    ref: ref,
     ...getDataComponentAttribute('Flex'),
     ...processedProps,
     display: inline ? 'inline-flex' : undefined,
     children: children
   });
-};
+});
+BpkFlex.displayName = 'BpkFlex';

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

@@ -1,3 +1,3 @@
 import type { BpkGridProps } from './types';
-export declare const BpkGrid: ({ align, autoColumns, autoFlow, autoRows, children, column, inline, justify, row, templateAreas, templateColumns, templateRows, ...props }: BpkGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkGrid: import("react").ForwardRefExoticComponent<BpkGridProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkGridProps };

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

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Grid } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkGrid = ({
+export const BpkGrid = /*#__PURE__*/forwardRef(({
   align,
   autoColumns,
   autoFlow,
@@ -33,11 +34,13 @@ export const BpkGrid = ({
   templateAreas,
   templateColumns,
   templateRows,
+  textStyle,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkGrid',
     responsiveProps: {
+      textStyle,
       justifyContent: justify,
       alignItems: align,
       gridTemplateColumns: templateColumns,
@@ -51,9 +54,11 @@ export const BpkGrid = ({
     }
   });
   return /*#__PURE__*/_jsx(Grid, {
+    ref: ref,
     ...getDataComponentAttribute('Grid'),
     ...processedProps,
     display: inline ? 'inline-grid' : undefined,
     children: children
   });
-};
+});
+BpkGrid.displayName = 'BpkGrid';

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

@@ -1,3 +1,3 @@
 import type { BpkGridItemProps } from './types';
-export declare const BpkGridItem: ({ area, children, colEnd, colSpan, colStart, rowEnd, rowSpan, rowStart, ...props }: BpkGridItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkGridItem: import("react").ForwardRefExoticComponent<BpkGridItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkGridItemProps };

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

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { GridItem } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
-import { processBpkProps } from "./tokenUtils";
+import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkGridItem = ({
+export const BpkGridItem = /*#__PURE__*/forwardRef(({
   area,
   children,
   colEnd,
@@ -29,10 +30,17 @@ export const BpkGridItem = ({
   rowEnd,
   rowSpan,
   rowStart,
+  textStyle,
   ...props
-}) => {
-  const processedProps = processBpkProps(props);
+}, ref) => {
+  const processedProps = processBpkComponentProps({
+    textStyle,
+    ...props
+  }, {
+    component: 'BpkGridItem'
+  });
   return /*#__PURE__*/_jsx(GridItem, {
+    ref: ref,
     ...getDataComponentAttribute('GridItem'),
     ...processedProps,
     area: area,
@@ -44,4 +52,5 @@ export const BpkGridItem = ({
     rowSpan: rowSpan,
     children: children
   });
-};
+});
+BpkGridItem.displayName = 'BpkGridItem';

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

@@ -1,5 +1,5 @@
 import type { BpkStackProps } from './types';
-export declare const BpkStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BpkHStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BpkVStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkStack: import("react").ForwardRefExoticComponent<BpkStackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BpkHStack: import("react").ForwardRefExoticComponent<BpkStackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BpkVStack: import("react").ForwardRefExoticComponent<BpkStackProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkStackProps };

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

@@ -16,46 +16,53 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Stack, VStack, HStack } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkStack = ({
+export const BpkStack = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
   return /*#__PURE__*/_jsx(Stack, {
+    ref: ref,
     ...getDataComponentAttribute('Stack'),
     ...processedProps,
     children: children
   });
-};
-export const BpkHStack = ({
+});
+BpkStack.displayName = 'BpkStack';
+export const BpkHStack = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
   return /*#__PURE__*/_jsx(HStack, {
+    ref: ref,
     ...getDataComponentAttribute('HStack'),
     ...processedProps,
     children: children
   });
-};
-export const BpkVStack = ({
+});
+BpkHStack.displayName = 'BpkHStack';
+export const BpkVStack = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkStack'
   });
   return /*#__PURE__*/_jsx(VStack, {
+    ref: ref,
     ...getDataComponentAttribute('VStack'),
     ...processedProps,
     children: children
   });
-};
+});
+BpkVStack.displayName = 'BpkVStack';

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

@@ -1,4 +1,6 @@
+import type { AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
 import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkResponsiveValue } from './tokens';
+import type { TextStyle } from '../../bpk-component-text/src/BpkText';
 /**
  * Common spacing-related props shared by all Backpack layout components
  * All spacing props must use Backpack spacing tokens or percentages
@@ -39,13 +41,18 @@ export interface BpkSpacingProps {
  * layout components purely structural.
  *
  * NOTE:
- * - Layout components other than BpkBox do not expose event handlers.
- * - BpkBox reintroduces a minimal set of events (onClick, onFocus, onBlur)
- *   on its own props type.
+ * - Layout components expose onClick, tabIndex and role to support interactive
+ *   container patterns (e.g. clickable cards, landmark regions).
+ * - BpkBox additionally exposes onFocus and onBlur on its own props type.
  */
 export interface BpkCommonLayoutProps extends BpkSpacingProps {
     className?: never;
     style?: never;
+    tabIndex?: number;
+    role?: AriaRole;
+    onClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    textStyle?: BpkResponsiveValue<TextStyle>;
     'data-testid'?: string;
     'data-cy'?: string;
     color?: never;

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

@@ -17,11 +17,10 @@
  */
 
 import { defineConfig } from '@chakra-ui/react';
+
 // Import tokens from Backpack foundations
 // Note: Some tokens may not be in TypeScript definitions but exist at runtime
-
-const bpkTokens = require('@skyscanner/bpk-foundations-web/tokens/base.es6');
-
+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
@@ -210,6 +209,242 @@ export function getBorderRadiusValue(token) {
 export function getShadowValue(token) {
   return shadowMap[token];
 }
+
+/**
+ * Maps Backpack text style tokens to Chakra UI textStyles.
+ * CSS property values are sourced from @skyscanner/bpk-foundations-web/tokens/base.es6.
+ * Each entry mirrors the corresponding SCSS mixin in bpk-mixins/_typography.scss.
+ */
+const textStylesMap = {
+  xs: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  sm: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  base: {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  lg: {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  xxxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  caption: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  footnote: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'label-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'body-default': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'body-longform': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  subheading: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'heading-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXlTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLgTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBaseTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'hero-1': {
+    value: {
+      fontSize: bpkTokens.fontSize8Xl,
+      lineHeight: bpkTokens.lineHeight8Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-2': {
+    value: {
+      fontSize: bpkTokens.fontSize7Xl,
+      lineHeight: bpkTokens.lineHeight7Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-3': {
+    value: {
+      fontSize: bpkTokens.fontSize6Xl,
+      lineHeight: bpkTokens.lineHeight6Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-6': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'editorial-1': {
+    value: {
+      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, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-3': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  }
+};
 export function createBpkConfig() {
   // Convert breakpoint map to Chakra UI format
   // Breakpoints in Chakra v3 are typically simple strings in the breakpoints object
@@ -227,6 +462,7 @@ export function createBpkConfig() {
       tokens: {
         spacing: spacingMap
       },
+      textStyles: textStylesMap,
       breakpoints: chakraBreakpoints
     }
   });

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

@@ -1,4 +1,4 @@
-export type BpkLayoutComponentName = 'BpkBox' | 'BpkFlex' | 'BpkGrid' | 'BpkStack';
+export type BpkLayoutComponentName = 'BpkBox' | 'BpkFlex' | 'BpkGrid' | 'BpkGridItem' | 'BpkStack';
 /**
  * Allowlisted, component-scoped prop groups that are eligible for Backpack responsive value
  * processing (Backpack breakpoint keys -> Chakra breakpoint keys).

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

@@ -34,6 +34,8 @@ import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isVali
 export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   BpkBox: {
     container: [
+    // Typography
+    'textStyle',
     // Display
     'display',
     // Flex container props
@@ -48,25 +50,29 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['flexDirection', 'justifyContent', 'alignItems', 'flexWrap'],
+    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
+    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns'],
     item: [
     // Used when placing the grid itself within a parent grid.
     'gridColumn', 'gridRow']
   },
+  BpkGridItem: {
+    container: ['textStyle']
+  },
   // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: StackOptionKeys
+    container: ['textStyle', ...StackOptionKeys]
   }
 };
 export const BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT = {
   BpkBox: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkBox.container, ...(BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkBox.item ?? [])],
   BpkFlex: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkFlex.container, ...(BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkFlex.item ?? [])],
   BpkGrid: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkGrid.container, ...(BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkGrid.item ?? [])],
+  BpkGridItem: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkGridItem.container],
   BpkStack: [...BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT.BpkStack.container]
 };
 function filterToAllowlist(props, allowlist) {

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

@@ -4,11 +4,11 @@ import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
 import type { BoxProps, FlexProps, GridProps, GridItemProps, StackProps } from '@chakra-ui/react';
 /**
- * Layout-level event props that should not be exposed on layout components
- * by default. BpkBox will reintroduce a minimal subset (onClick, onFocus,
- * onBlur) explicitly on its own props type.
+ * Layout-level event props that should not be exposed on layout components.
+ * onClick is handled via BpkCommonLayoutProps; onFocus/onBlur are reintroduced
+ * on BpkBoxProps only.
  */
-type LayoutEventProps = 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOver' | 'onMouseOut' | 'onMouseDown' | 'onMouseUp' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress';
+type LayoutEventProps = 'onMouseEnter' | 'onMouseLeave' | 'onMouseOver' | 'onMouseOut' | 'onMouseDown' | 'onMouseUp' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress';
 /**
  * Shorthand props from the underlying layout system that we do NOT expose on
  * Backpack layout components. These mostly mirror longer-form spacing,
@@ -93,13 +93,14 @@ export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, B
 }
 /**
  * Props for BpkBox component
- * Combines Box-specific props with Backpack common layout props
- * and reintroduces a minimal set of interaction props.
+ * Combines Box-specific props with Backpack common layout props.
+ * onClick is inherited from BpkCommonLayoutProps.
+ * onFocus and onBlur are reintroduced here as BpkBox-only interaction props.
+ * textStyle maps to Chakra's `textStyle` theme prop for Backpack typography and supports responsive values.
  */
-type BoxEventProps = Pick<BoxProps, 'onClick' | 'onFocus' | 'onBlur'>;
+type BoxEventProps = Pick<BoxProps, 'onFocus' | 'onBlur'>;
 export interface BpkBoxProps extends BpkCommonLayoutProps, BpkBoxSpecificProps {
     children?: ReactNode;
-    onClick?: BoxEventProps['onClick'];
     onFocus?: BoxEventProps['onFocus'];
     onBlur?: BoxEventProps['onBlur'];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.3.0",
+  "version": "42.4.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",