@skyscanner/backpack-web 42.10.0-dev-v24496611676.1 → 42.11.0

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

@@ -1,75 +1,108 @@
-import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type StackOptionKeys from './BpkStack.constant';
 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.
+ * onClick is handled via BpkCommonLayoutProps; onFocus/onBlur are reintroduced
+ * on BpkBoxProps only.
+ */
+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,
+ * sizing and visual props that we already model explicitly via
+ * BpkCommonLayoutProps and BpkFlexGridProps.
+ */
+type DisallowedShorthandProps = 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'w' | 'h' | 'minW' | 'maxW' | 'minH' | 'maxH' | 'bg' | 'rounded' | 'shadow';
 /**
  * Flexbox & grid layout props that we explicitly support on Backpack layout
- * components. These are a curated subset of CSS flex/grid properties
- * useful for structural layout.
+ * components. These are a curated subset of the underlying Box flex/grid API
+ * that are useful for structural layout.
  */
 export interface BpkFlexGridProps {
-    display?: BpkResponsiveValue<CSSProperties['display']>;
-    flexDirection?: BpkResponsiveValue<CSSProperties['flexDirection']>;
-    flexWrap?: BpkResponsiveValue<CSSProperties['flexWrap']>;
-    justifyContent?: BpkResponsiveValue<CSSProperties['justifyContent']>;
-    alignItems?: BpkResponsiveValue<CSSProperties['alignItems']>;
-    alignContent?: BpkResponsiveValue<CSSProperties['alignContent']>;
-    flex?: BpkResponsiveValue<CSSProperties['flex']>;
-    flexGrow?: BpkResponsiveValue<CSSProperties['flexGrow']>;
-    flexShrink?: BpkResponsiveValue<CSSProperties['flexShrink']>;
-    flexBasis?: BpkResponsiveValue<CSSProperties['flexBasis']>;
-    order?: BpkResponsiveValue<CSSProperties['order']>;
-    alignSelf?: BpkResponsiveValue<CSSProperties['alignSelf']>;
-    justifySelf?: BpkResponsiveValue<CSSProperties['justifySelf']>;
-    gridTemplateColumns?: BpkResponsiveValue<CSSProperties['gridTemplateColumns']>;
-    gridTemplateRows?: BpkResponsiveValue<CSSProperties['gridTemplateRows']>;
-    gridTemplateAreas?: BpkResponsiveValue<CSSProperties['gridTemplateAreas']>;
-    gridAutoFlow?: BpkResponsiveValue<CSSProperties['gridAutoFlow']>;
-    gridAutoRows?: BpkResponsiveValue<CSSProperties['gridAutoRows']>;
-    gridAutoColumns?: BpkResponsiveValue<CSSProperties['gridAutoColumns']>;
-    rowGap?: BpkResponsiveValue<BpkSpacingValue>;
-    columnGap?: BpkResponsiveValue<BpkSpacingValue>;
+    display?: BoxProps['display'];
+    flexDirection?: BoxProps['flexDirection'];
+    flexWrap?: BoxProps['flexWrap'];
+    justifyContent?: BoxProps['justifyContent'];
+    alignItems?: BoxProps['alignItems'];
+    alignContent?: BoxProps['alignContent'];
+    flex?: BoxProps['flex'];
+    flexGrow?: BoxProps['flexGrow'];
+    flexShrink?: BoxProps['flexShrink'];
+    flexBasis?: BoxProps['flexBasis'];
+    order?: BoxProps['order'];
+    alignSelf?: BoxProps['alignSelf'];
+    justifySelf?: BoxProps['justifySelf'];
+    gridTemplateColumns?: BoxProps['gridTemplateColumns'];
+    gridTemplateRows?: BoxProps['gridTemplateRows'];
+    gridTemplateAreas?: BoxProps['gridTemplateAreas'];
+    gridAutoFlow?: BoxProps['gridAutoFlow'];
+    gridAutoRows?: BoxProps['gridAutoRows'];
+    gridAutoColumns?: BoxProps['gridAutoColumns'];
+    rowGap?: BoxProps['rowGap'];
+    columnGap?: BoxProps['columnGap'];
 }
 export type FlexGridPropKeys = keyof BpkFlexGridProps;
 /**
- * Curated subset of layout props that support Backpack responsive values.
- * These are structural layout props (flex/grid/display) allowed on `BpkBox`.
+ * Curated subset of Box layout props that support Backpack responsive values.
+ *
+ * NOTE:
+ * - These are structural layout props (flex/grid/display) that we want to allow
+ *   on `BpkBox`, but using Backpack breakpoint keys rather than Chakra's
+ *   array syntax or Chakra breakpoint keys.
+ * - Spacing/size/position props are handled separately via `BpkCommonLayoutProps`.
  */
 type BpkBoxResponsiveLayoutProps = {
-    display?: BpkResponsiveValue<CSSProperties['display']>;
-    flexDirection?: BpkResponsiveValue<CSSProperties['flexDirection']>;
-    flexWrap?: BpkResponsiveValue<CSSProperties['flexWrap']>;
-    justifyContent?: BpkResponsiveValue<CSSProperties['justifyContent']>;
-    alignItems?: BpkResponsiveValue<CSSProperties['alignItems']>;
-    alignContent?: BpkResponsiveValue<CSSProperties['alignContent']>;
-    flex?: BpkResponsiveValue<CSSProperties['flex']>;
-    flexGrow?: BpkResponsiveValue<CSSProperties['flexGrow']>;
-    flexShrink?: BpkResponsiveValue<CSSProperties['flexShrink']>;
-    flexBasis?: BpkResponsiveValue<CSSProperties['flexBasis']>;
-    order?: BpkResponsiveValue<CSSProperties['order']>;
-    alignSelf?: BpkResponsiveValue<CSSProperties['alignSelf']>;
-    justifySelf?: BpkResponsiveValue<CSSProperties['justifySelf']>;
-    gridTemplateColumns?: BpkResponsiveValue<CSSProperties['gridTemplateColumns']>;
-    gridTemplateRows?: BpkResponsiveValue<CSSProperties['gridTemplateRows']>;
-    gridTemplateAreas?: BpkResponsiveValue<CSSProperties['gridTemplateAreas']>;
-    gridAutoFlow?: BpkResponsiveValue<CSSProperties['gridAutoFlow']>;
-    gridAutoRows?: BpkResponsiveValue<CSSProperties['gridAutoRows']>;
-    gridAutoColumns?: BpkResponsiveValue<CSSProperties['gridAutoColumns']>;
-    gridColumn?: BpkResponsiveValue<CSSProperties['gridColumn']>;
-    gridRow?: BpkResponsiveValue<CSSProperties['gridRow']>;
+    display?: BpkResponsiveValue<BoxProps['display']>;
+    flexDirection?: BpkResponsiveValue<BoxProps['flexDirection']>;
+    flexWrap?: BpkResponsiveValue<BoxProps['flexWrap']>;
+    justifyContent?: BpkResponsiveValue<BoxProps['justifyContent']>;
+    alignItems?: BpkResponsiveValue<BoxProps['alignItems']>;
+    alignContent?: BpkResponsiveValue<BoxProps['alignContent']>;
+    flex?: BpkResponsiveValue<BoxProps['flex']>;
+    flexGrow?: BpkResponsiveValue<BoxProps['flexGrow']>;
+    flexShrink?: BpkResponsiveValue<BoxProps['flexShrink']>;
+    flexBasis?: BpkResponsiveValue<BoxProps['flexBasis']>;
+    order?: BpkResponsiveValue<BoxProps['order']>;
+    alignSelf?: BpkResponsiveValue<BoxProps['alignSelf']>;
+    justifySelf?: BpkResponsiveValue<BoxProps['justifySelf']>;
+    gridTemplateColumns?: BpkResponsiveValue<BoxProps['gridTemplateColumns']>;
+    gridTemplateRows?: BpkResponsiveValue<BoxProps['gridTemplateRows']>;
+    gridTemplateAreas?: BpkResponsiveValue<BoxProps['gridTemplateAreas']>;
+    gridAutoFlow?: BpkResponsiveValue<BoxProps['gridAutoFlow']>;
+    gridAutoRows?: BpkResponsiveValue<BoxProps['gridAutoRows']>;
+    gridAutoColumns?: BpkResponsiveValue<BoxProps['gridAutoColumns']>;
+    gridColumn?: BpkResponsiveValue<BoxProps['gridColumn']>;
+    gridRow?: BpkResponsiveValue<BoxProps['gridRow']>;
 };
+type BpkBoxResponsiveLayoutPropKeys = keyof BpkBoxResponsiveLayoutProps;
+/**
+ * Base type that removes common layout props, reserved props (className,
+ * children) and all layout-level event props from Chakra UI props.
+ *
+ * These will be replaced with Backpack-specific types.
+ */
+export type RemoveCommonProps<T> = Omit<T, keyof BpkCommonLayoutProps | 'className' | 'children' | LayoutEventProps | FlexGridPropKeys | DisallowedShorthandProps>;
 /**
  * Component-specific props for BpkBox
+ * Includes all Box props except those in BpkCommonLayoutProps
  */
-export interface BpkBoxSpecificProps extends BpkBoxResponsiveLayoutProps, BpkFlexGridProps {
+export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, BpkBoxResponsiveLayoutPropKeys>, BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
 }
 /**
  * Props for BpkBox component
  * 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, 'onFocus' | 'onBlur'>;
 export interface BpkBoxProps extends BpkCommonLayoutProps, BpkBoxSpecificProps {
     children?: ReactNode;
-    onFocus?: HTMLAttributes<HTMLDivElement>['onFocus'];
-    onBlur?: HTMLAttributes<HTMLDivElement>['onBlur'];
+    onFocus?: BoxEventProps['onFocus'];
+    onBlur?: BoxEventProps['onBlur'];
 }
 /**
  * Valid HTML elements that can be used with BpkVessel
@@ -80,20 +113,50 @@ export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'ma
  *
  * BpkVessel is a "migration hatch" that renders an HTML element
  * and accepts all standard HTML attributes for maximum migration flexibility.
+ *
+ * Accepts all React.HTMLAttributes including:
+ * - Styling: className, style
+ * - Testing: data-testid, data-cy, data-*
+ * - Accessibility: aria-*, role, tabIndex
+ * - Basic HTML: id, title, dir, lang, hidden, etc.
+ * - All standard DOM events: onClick, onChange, onFocus, etc.
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-wrapper"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
  */
 export type BpkVesselProps = {
     as?: VesselElement;
 } & HTMLAttributes<HTMLElement>;
 /**
  * Component-specific props for BpkFlex
+ * Includes all Flex props except those in BpkCommonLayoutProps
  */
-export interface BpkFlexSpecificProps {
-    direction?: BpkResponsiveValue<CSSProperties['flexDirection']>;
-    justify?: BpkResponsiveValue<CSSProperties['justifyContent']>;
-    align?: BpkResponsiveValue<CSSProperties['alignItems']>;
-    wrap?: BpkResponsiveValue<CSSProperties['flexWrap']>;
-    grow?: BpkResponsiveValue<CSSProperties['flexGrow']>;
-    shrink?: BpkResponsiveValue<CSSProperties['flexShrink']>;
+export interface BpkFlexSpecificProps extends RemoveCommonProps<FlexProps> {
+    direction?: BpkResponsiveValue<FlexProps['flexDirection']>;
+    justify?: BpkResponsiveValue<FlexProps['justifyContent']>;
+    align?: BpkResponsiveValue<FlexProps['alignItems']>;
+    wrap?: BpkResponsiveValue<FlexProps['flexWrap']>;
+    grow?: BpkResponsiveValue<FlexProps['flexGrow']>;
+    shrink?: BpkResponsiveValue<FlexProps['flexShrink']>;
     basis?: BpkResponsiveValue<BpkBasisValue>;
     inline?: boolean;
 }
@@ -106,20 +169,21 @@ export interface BpkFlexProps extends BpkCommonLayoutProps, BpkFlexSpecificProps
 }
 /**
  * Component-specific props for BpkGrid
+ * Includes all Grid props except those in BpkCommonLayoutProps
  */
-export interface BpkGridSpecificProps {
-    justify?: BpkResponsiveValue<CSSProperties['justifyContent']>;
-    align?: BpkResponsiveValue<CSSProperties['alignItems']>;
-    templateColumns?: BpkResponsiveValue<CSSProperties['gridTemplateColumns']>;
-    templateRows?: BpkResponsiveValue<CSSProperties['gridTemplateRows']>;
-    templateAreas?: BpkResponsiveValue<CSSProperties['gridTemplateAreas']>;
-    autoFlow?: BpkResponsiveValue<CSSProperties['gridAutoFlow']>;
-    autoRows?: BpkResponsiveValue<CSSProperties['gridAutoRows']>;
-    autoColumns?: BpkResponsiveValue<CSSProperties['gridAutoColumns']>;
+export interface BpkGridSpecificProps extends RemoveCommonProps<GridProps> {
+    justify?: BpkResponsiveValue<GridProps['justifyContent']>;
+    align?: BpkResponsiveValue<GridProps['alignItems']>;
+    templateColumns?: BpkResponsiveValue<GridProps['gridTemplateColumns']>;
+    templateRows?: BpkResponsiveValue<GridProps['gridTemplateRows']>;
+    templateAreas?: BpkResponsiveValue<GridProps['gridTemplateAreas']>;
+    autoFlow?: BpkResponsiveValue<GridProps['gridAutoFlow']>;
+    autoRows?: BpkResponsiveValue<GridProps['gridAutoRows']>;
+    autoColumns?: BpkResponsiveValue<GridProps['gridAutoColumns']>;
     rowGap?: BpkResponsiveValue<BpkSpacingValue>;
     columnGap?: BpkResponsiveValue<BpkSpacingValue>;
-    column?: BpkResponsiveValue<CSSProperties['gridColumn']>;
-    row?: BpkResponsiveValue<CSSProperties['gridRow']>;
+    column?: BpkResponsiveValue<GridProps['gridColumn']>;
+    row?: BpkResponsiveValue<GridProps['gridRow']>;
     inline?: boolean;
 }
 /**
@@ -131,15 +195,16 @@ export interface BpkGridProps extends BpkCommonLayoutProps, BpkGridSpecificProps
 }
 /**
  * Component-specific props for BpkGridItem
+ * Includes all GridItem props except those in BpkCommonLayoutProps
  */
-export interface BpkGridItemSpecificProps {
-    area?: CSSProperties['gridArea'];
-    colEnd?: number;
-    colStart?: number;
-    colSpan?: number;
-    rowEnd?: number;
-    rowStart?: number;
-    rowSpan?: number;
+export interface BpkGridItemSpecificProps extends RemoveCommonProps<GridItemProps> {
+    area?: GridItemProps['area'];
+    colEnd?: GridItemProps['colEnd'];
+    colStart?: GridItemProps['colStart'];
+    colSpan?: GridItemProps['colSpan'];
+    rowEnd?: GridItemProps['rowEnd'];
+    rowStart?: GridItemProps['rowStart'];
+    rowSpan?: GridItemProps['rowSpan'];
 }
 /**
  * Props for BpkGridItem component
@@ -148,21 +213,19 @@ export interface BpkGridItemSpecificProps {
 export interface BpkGridItemProps extends BpkCommonLayoutProps, BpkGridItemSpecificProps {
     children?: ReactNode;
 }
+type StackOptionKeysType = typeof StackOptionKeys[number];
 /**
- * Stack-specific option props using the public API names.
- * These map to CSS-standard names internally:
- *   align → alignItems, justify → justifyContent, wrap → flexWrap, direction → flexDirection
+ * Overrides StackOptions to support BpkResponsiveValue
  */
 type BpkStackOptions = {
-    align?: BpkResponsiveValue<CSSProperties['alignItems']> | CSSProperties['alignItems'];
-    justify?: BpkResponsiveValue<CSSProperties['justifyContent']> | CSSProperties['justifyContent'];
-    wrap?: BpkResponsiveValue<CSSProperties['flexWrap']> | CSSProperties['flexWrap'];
-    direction?: BpkResponsiveValue<CSSProperties['flexDirection']> | CSSProperties['flexDirection'];
+    [K in StackOptionKeysType]?: K extends keyof StackProps ? BpkResponsiveValue<StackProps[K]> | StackProps[K] : never;
 };
 /**
  * Component-specific props for BpkStack
+ * Includes all Stack props except those in BpkCommonLayoutProps
+ * Overrides StackOptions to support BpkResponsiveValue
  */
-export interface BpkStackSpecificProps extends BpkStackOptions, BpkFlexGridProps {
+export interface BpkStackSpecificProps extends Omit<RemoveCommonProps<StackProps>, StackOptionKeysType>, BpkStackOptions, BpkFlexGridProps {
 }
 /**
  * Props for BpkStack component

package/bpk-component-navigation-bar/src/BpkNavigationBar.d.ts

@@ -10,6 +10,9 @@ export type Props = {
     title: ReactNode;
     titleTextStyle?: TextStyle;
     titleTagName?: Tag;
+    /** When true, prevents the title from being truncated with an ellipsis and allows it to wrap onto multiple lines.
+     * Note: this prop only applies when `title` is a string; ReactNode titles are not truncated and wrap naturally. */
+    wrapTitle?: boolean;
     className?: string;
     leadingButton?: ReactElement | null;
     trailingButton?: ReactElement | null;

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -36,6 +36,7 @@ const BpkNavigationBar = props => {
     titleTagName = "span",
     titleTextStyle = TEXT_STYLES.heading5,
     trailingButton,
+    wrapTitle = false,
     ...rest
   } = props;
 
@@ -51,7 +52,7 @@ const BpkNavigationBar = props => {
       className: getClassNames('bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`),
       children: leadingButton
     }), typeof title === 'string' ? /*#__PURE__*/_jsx("span", {
-      className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
+      className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`, wrapTitle && 'bpk-navigation-bar__title--wrap'),
       children: /*#__PURE__*/_jsx(BpkText, {
         id: titleId,
         textStyle: titleTextStyle,

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-navigation-bar{position:relative;display:grid;min-height:3.5rem;padding:1rem;grid-template-rows:auto;grid-template-columns:minmax(1.5rem, auto) minmax(1rem, 1fr) minmax(1.5rem, auto);justify-content:space-between;align-items:center;gap:1rem;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{grid-column:2;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title :first-child{display:inline}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__title-container{justify-self:center}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{grid-column:1;justify-self:start}.bpk-navigation-bar__trailing-item{grid-column:3;justify-self:end}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}
+.bpk-navigation-bar{position:relative;display:grid;min-height:3.5rem;padding:1rem;grid-template-rows:auto;grid-template-columns:minmax(1.5rem, auto) minmax(1rem, 1fr) minmax(1.5rem, auto);justify-content:space-between;align-items:center;gap:1rem;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{grid-column:2;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title :first-child{display:inline}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__title--wrap{text-overflow:unset;white-space:normal;overflow:visible}.bpk-navigation-bar__title-container{justify-self:center}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{grid-column:1;justify-self:start}.bpk-navigation-bar__trailing-item{grid-column:3;justify-self:end}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}

package/bpk-component-page-indicator/src/NavButton.js

@@ -17,7 +17,7 @@
  */
 
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
-import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
+import { withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,8 +26,8 @@ export const DIRECTIONS = {
   INDICATORS: 'INDICATORS',
   NEXT: 'NEXT'
 };
-const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
-const AlignedRightArrowIcon = withButtonAlignment(withRtlSupport(RightArrowIcon));
+const AlignedLeftArrowIcon = withLargeButtonAlignment(withRtlSupport(LeftArrowIcon));
+const AlignedRightArrowIcon = withLargeButtonAlignment(withRtlSupport(RightArrowIcon));
 const NavButton = ({
   ariaLabel,
   currentIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.10.0-dev-v24496611676.1",
+  "version": "42.11.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@ark-ui/react": "^5.34.1",
+    "@chakra-ui/react": "^3.33.0",
     "@floating-ui/react": "^0.26.12",
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
@@ -34,7 +35,7 @@
     "d3-scale": "^4.0.2",
     "downshift": "^9.0.10",
     "intersection-observer": "^0.12.2",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "normalize.css": "4.2.0",

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

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-export interface BpkArkProviderProps {
-    children: ReactNode;
-}
-/**
- * BpkArkProvider - Provides locale context for Ark-based Backpack components.
- *
- * Wraps children with Ark UI's LocaleProvider, reactively tracking
- * document direction (html[dir]) and language (html[lang]) via MutationObserver.
- * This enables correct RTL rendering for Ark-based components such as
- * BpkCheckboxV2, BpkSegmentedControlV2, etc.
- *
- * Use BpkProvider (which composes BpkLayoutProvider + BpkArkProvider) if you
- * need both layout primitives and Ark-based components. Use BpkArkProvider
- * directly only if you need Ark locale context without the Chakra layout system.
- *
- * @param {BpkArkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Ark locale context.
- */
-export declare const BpkArkProvider: ({ children, }: BpkArkProviderProps) => JSX.Element;

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

@@ -1,112 +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.
- */
-
-import { useEffect, useState } from 'react';
-import { LocaleProvider } from '@ark-ui/react';
-import { jsx as _jsx } from "react/jsx-runtime";
-// 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'.
-const FALLBACK_LOCALE_BY_DIRECTION = {
-  ltr: 'en-US',
-  rtl: 'ar-SA'
-};
-
-// Known RTL language subtags (ISO 639 codes). Used as fallback when
-// Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
-const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
-
-// Returns the text direction implied by a BCP 47 locale string.
-// Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
-// falls back to a known-RTL-subtag lookup.
-const getLangDir = locale => {
-  try {
-    const dir = new Intl.Locale(locale).textInfo?.direction;
-    if (dir) return dir === 'rtl' ? 'rtl' : 'ltr';
-  } catch {
-    // Ignore invalid locale strings
-  }
-  return RTL_LANGUAGE_SUBTAGS.has(locale.split('-')[0].toLowerCase()) ? 'rtl' : 'ltr';
-};
-
-// Resolves the locale to pass to Ark's LocaleProvider.
-//
-// Priority rules:
-//   1. If html[dir] is explicitly set:
-//      - Use html[lang] only when its direction is consistent with html[dir].
-//      - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
-//      This prevents an LTR html[lang] (e.g. 'en' from a page template) from
-//      overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
-//   2. If html[dir] is not set: use html[lang] if present, else 'en-US'.
-//
-// SSR-safe: returns 'en-US' when document is unavailable.
-const getArkLocale = () => {
-  if (typeof document === 'undefined') return 'en-US';
-  const explicitDir = document.documentElement.getAttribute('dir');
-  const lang = document.documentElement.getAttribute('lang');
-  if (explicitDir === 'rtl' || explicitDir === 'ltr') {
-    if (lang && getLangDir(lang) === explicitDir) return lang;
-    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
-  }
-  return lang || 'en-US';
-};
-
-// Reactive hook: subscribes to document.documentElement[dir] and [lang] changes
-// via MutationObserver. Re-renders when direction or locale is toggled
-// (e.g. Storybook RTL toolbar, runtime locale switcher).
-// SSR-safe: always initialises to 'en-US' so server and client agree on the first render,
-//           avoiding hydration mismatches. The real locale is read inside useEffect,
-//           which does not run on the server.
-const useArkLocale = () => {
-  const [locale, setLocale] = useState('en-US');
-  useEffect(() => {
-    setLocale(getArkLocale());
-    const observer = new MutationObserver(() => setLocale(getArkLocale()));
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['dir', 'lang']
-    });
-    return () => observer.disconnect();
-  }, []);
-  return locale;
-};
-
-/**
- * BpkArkProvider - Provides locale context for Ark-based Backpack components.
- *
- * Wraps children with Ark UI's LocaleProvider, reactively tracking
- * document direction (html[dir]) and language (html[lang]) via MutationObserver.
- * This enables correct RTL rendering for Ark-based components such as
- * BpkCheckboxV2, BpkSegmentedControlV2, etc.
- *
- * Use BpkProvider (which composes BpkLayoutProvider + BpkArkProvider) if you
- * need both layout primitives and Ark-based components. Use BpkArkProvider
- * directly only if you need Ark locale context without the Chakra layout system.
- *
- * @param {BpkArkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Ark locale context.
- */
-export const BpkArkProvider = ({
-  children
-}) => {
-  const locale = useArkLocale();
-  return /*#__PURE__*/_jsx(LocaleProvider, {
-    locale: locale,
-    children: children
-  });
-};

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

@@ -1,18 +0,0 @@
-import type React from 'react';
-import type { ReactNode } from 'react';
-export interface BpkLayoutProviderProps {
-    children: ReactNode;
-}
-/**
- * BpkLayoutProvider - Kept for backwards compatibility.
- *
- * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.) no longer
- * require a provider. They use CSS Modules and inline styles directly.
- *
- * This component is a passthrough that simply renders its children.
- * It can be safely removed from your app, but keeping it is harmless.
- *
- * @deprecated No provider is needed for layout components.
- * @returns {ReactNode} The children as-is.
- */
-export declare const BpkLayoutProvider: ({ children, }: BpkLayoutProviderProps) => React.JSX.Element;

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

@@ -1,36 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-/*
- * 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.
- */
-
-/**
- * BpkLayoutProvider - Kept for backwards compatibility.
- *
- * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.) no longer
- * require a provider. They use CSS Modules and inline styles directly.
- *
- * This component is a passthrough that simply renders its children.
- * It can be safely removed from your app, but keeping it is harmless.
- *
- * @deprecated No provider is needed for layout components.
- * @returns {ReactNode} The children as-is.
- */
-export const BpkLayoutProvider = ({
-  children
-}) => /*#__PURE__*/_jsx(_Fragment, {
-  children: children
-});

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

@@ -1,13 +0,0 @@
-/**
- * Expands a textStyle token (or responsive object of tokens) into concrete
- * CSS property values that can be spread directly onto a Chakra component.
- *
- * Supports:
- * - Static values:     `textStyle="heading-3"` → `{ fontSize, lineHeight, fontWeight }`
- * - Responsive objects: `textStyle={{ mobile: 'heading-5', desktop: 'heading-3' }}`
- *   → `{ fontSize: { md: '...', '2xl': '...' }, lineHeight: { ... }, ... }`
- *
- * @param {any} value - A textStyle token string, responsive object, or undefined/null.
- * @returns {Record<string, any>} An object of CSS props to spread, or an empty object if no match.
- */
-export declare function expandTextStyleProps(value: any): Record<string, any>;