@skyscanner/backpack-web 41.13.0 → 41.15.0

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -15,6 +15,12 @@ export type WithOpenEventsProps = {
      */
     onOpen?: () => void;
     hasTouchSupport?: boolean;
+    /**
+     * @deprecated Use inputMode="none" instead. readOnly will be removed in a future version.
+     * Previously used to prevent the mobile keyboard from opening, but this caused a WCAG 1.3.1
+     * violation due to conflicting readonly + aria-readonly attributes.
+     */
+    readOnly?: boolean | string;
 };
 type EventHandlers = {
     onClick?: (event: UIEvent) => void;
@@ -23,10 +29,11 @@ type EventHandlers = {
     onTouchEnd?: (event: UIEvent) => void;
     onKeyDown?: (event: UIEvent) => void;
     onKeyUp?: (event: UIEvent) => void;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     readOnly?: string;
     'aria-readonly'?: boolean;
 };
-type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
+type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'inputMode' | 'readOnly' | 'aria-readonly'>;
 declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: ComponentType<P>) => {
     new (props: P & WithOpenEventsProps & InputProps): {
         focusCanOpen: boolean;
@@ -35,25 +42,25 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         handleBlur: () => void;
         render(): ReactElement;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
+        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: {

package/bpk-component-input/src/withOpenEvents.js

@@ -96,8 +96,12 @@ const withOpenEvents = WithOpenEventsInputComponent => {
         onKeyUp,
         onOpen,
         onTouchEnd,
+        readOnly,
         ...rest
       } = this.props;
+      if (readOnly !== undefined) {
+        console.warn('withOpenEvents: The readOnly prop is deprecated and will be removed in a future version. ' + 'The component now uses inputMode="none" to prevent mobile keyboards from opening, ' + 'which avoids WCAG 1.3.1 violations from conflicting readonly + aria-readonly attributes.');
+      }
       const eventHandlers = {
         onClick: withEventHandler(onOpen, onClick),
         // @ts-expect-error for some reason the type KeyboardEvent was not being recognized as
@@ -105,9 +109,15 @@ const withOpenEvents = WithOpenEventsInputComponent => {
         onKeyDown: withEventHandler(handleKeyEvent(onOpen), onKeyDown)
       };
       if (hasTouchSupport) {
-        // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
-        eventHandlers.readOnly = 'readOnly';
-        eventHandlers['aria-readonly'] = false;
+        if (readOnly !== undefined) {
+          // Deprecated: prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
+          eventHandlers.readOnly = 'readOnly';
+          eventHandlers['aria-readonly'] = false;
+        } else {
+          // Prevents the mobile keyboard from opening (iOS / Android) using inputMode="none"
+          // This avoids WCAG 1.3.1 violation from conflicting readonly + aria-readonly attributes
+          eventHandlers.inputMode = 'none';
+        }
         eventHandlers.onTouchEnd = withEventHandler(this.handleTouchEnd, onTouchEnd);
       }
 

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

@@ -0,0 +1,18 @@
+export { BpkProvider } from './src/BpkProvider';
+export { BpkBox } from './src/BpkBox';
+export { BpkVessel } from './src/BpkVessel';
+export { BpkFlex } from './src/BpkFlex';
+export { BpkGrid } from './src/BpkGrid';
+export { BpkGridItem } from './src/BpkGridItem';
+export type { BpkProviderProps } from './src/BpkProvider';
+export type { BpkBoxProps } from './src/BpkBox';
+export type { BpkVesselProps } from './src/BpkVessel';
+export type { BpkFlexProps } from './src/BpkFlex';
+export type { BpkGridProps } from './src/BpkGrid';
+export type { BpkGridItemProps } from './src/BpkGridItem';
+export { BpkStack, BpkHStack, BpkVStack } from './src/BpkStack';
+export type { BpkStackProps } from './src/BpkStack';
+export type { BpkCommonLayoutProps, BpkBoxSpecificProps, BpkFlexSpecificProps, BpkGridSpecificProps, BpkGridItemSpecificProps, } from './src/types';
+export type { BpkStackSpecificProps } from './src/types';
+export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkBreakpointValue, } from './src/tokens';
+export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage, } from './src/tokens';

package/bpk-component-layout/index.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export { BpkProvider } from "./src/BpkProvider";
+export { BpkBox } from "./src/BpkBox";
+export { BpkVessel } from "./src/BpkVessel";
+export { BpkFlex } from "./src/BpkFlex";
+export { BpkGrid } from "./src/BpkGrid";
+export { BpkGridItem } from "./src/BpkGridItem";
+export { BpkStack, BpkHStack, BpkVStack } from "./src/BpkStack";
+
+// Export token types and utilities
+
+export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";

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

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

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { 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 = ({
+  children,
+  ...props
+}) => {
+  const processedProps = processBpkComponentProps(props, {
+    component: 'BpkBox'
+  });
+  return /*#__PURE__*/_jsx(Box, {
+    ...getDataComponentAttribute('Box'),
+    ...processedProps,
+    children: children
+  });
+};

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

@@ -0,0 +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 type { BpkFlexProps };

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

@@ -0,0 +1,53 @@
+/*
+ * 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 { 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 = ({
+  align,
+  basis,
+  children,
+  direction,
+  grow,
+  inline,
+  justify,
+  shrink,
+  wrap,
+  ...props
+}) => {
+  const processedProps = processBpkComponentProps(props, {
+    component: 'BpkFlex',
+    responsiveProps: {
+      flexDirection: direction,
+      justifyContent: justify,
+      alignItems: align,
+      flexWrap: wrap,
+      flexGrow: grow,
+      flexShrink: shrink,
+      flexBasis: basis
+    }
+  });
+  return /*#__PURE__*/_jsx(Flex, {
+    ...getDataComponentAttribute('Flex'),
+    ...processedProps,
+    display: inline ? 'inline-flex' : undefined,
+    children: children
+  });
+};

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

@@ -0,0 +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 type { BpkGridProps };

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

@@ -0,0 +1,59 @@
+/*
+ * 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 { 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 = ({
+  align,
+  autoColumns,
+  autoFlow,
+  autoRows,
+  children,
+  column,
+  inline,
+  justify,
+  row,
+  templateAreas,
+  templateColumns,
+  templateRows,
+  ...props
+}) => {
+  const processedProps = processBpkComponentProps(props, {
+    component: 'BpkGrid',
+    responsiveProps: {
+      justifyContent: justify,
+      alignItems: align,
+      gridTemplateColumns: templateColumns,
+      gridTemplateRows: templateRows,
+      gridTemplateAreas: templateAreas,
+      gridAutoFlow: autoFlow,
+      gridAutoRows: autoRows,
+      gridAutoColumns: autoColumns,
+      gridColumn: column,
+      gridRow: row
+    }
+  });
+  return /*#__PURE__*/_jsx(Grid, {
+    ...getDataComponentAttribute('Grid'),
+    ...processedProps,
+    display: inline ? 'inline-grid' : undefined,
+    children: children
+  });
+};

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

@@ -0,0 +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 type { BpkGridItemProps };

package/bpk-component-layout/src/BpkGridItem.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 { GridItem } from '@chakra-ui/react';
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { processBpkProps } from "./tokenUtils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BpkGridItem = ({
+  area,
+  children,
+  colEnd,
+  colSpan,
+  colStart,
+  rowEnd,
+  rowSpan,
+  rowStart,
+  ...props
+}) => {
+  const processedProps = processBpkProps(props);
+  return /*#__PURE__*/_jsx(GridItem, {
+    ...getDataComponentAttribute('GridItem'),
+    ...processedProps,
+    area: area,
+    colEnd: colEnd,
+    colStart: colStart,
+    colSpan: colSpan,
+    rowEnd: rowEnd,
+    rowStart: rowStart,
+    rowSpan: rowSpan,
+    children: children
+  });
+};

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface BpkProviderProps {
+    children: ReactNode;
+}
+/**
+ * BpkProvider - Provides Chakra UI context for Backpack layout components
+ *
+ * Chakra UI 3.0 requires the `value` prop to be set to a system object.
+ * We create a custom system with Backpack tokens using createSystem.
+ *
+ * @param {BpkProviderProps} props - The provider props.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ */
+export declare const BpkProvider: ({ children }: BpkProviderProps) => JSX.Element;

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

@@ -0,0 +1,42 @@
+/*
+ * 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 { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react';
+import { createBpkConfig } from "./theme";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Creates a Chakra UI system with Backpack token mappings
+ * Chakra UI 3.0 uses `createSystem` with `defaultConfig` and custom config
+ */
+const bpkSystem = createSystem(defaultConfig, createBpkConfig());
+
+/**
+ * BpkProvider - Provides Chakra UI context for Backpack layout components
+ *
+ * Chakra UI 3.0 requires the `value` prop to be set to a system object.
+ * We create a custom system with Backpack tokens using createSystem.
+ *
+ * @param {BpkProviderProps} props - The provider props.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ */
+export const BpkProvider = ({
+  children
+}) => /*#__PURE__*/_jsx(ChakraProvider, {
+  value: bpkSystem,
+  children: children
+});

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

@@ -0,0 +1,2 @@
+declare const StackOptionKeys: readonly ["align", "justify", "wrap", "direction"];
+export default StackOptionKeys;

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

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+// these options align with Chakra's StackOption excluding separator
+// TODO: add separator to Stack
+const StackOptionKeys = ['align', 'justify', 'wrap', 'direction'];
+export default StackOptionKeys;

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

@@ -0,0 +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 type { BpkStackProps };

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

@@ -0,0 +1,61 @@
+/*
+ * 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 { 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 = ({
+  children,
+  ...props
+}) => {
+  const processedProps = processBpkComponentProps(props, {
+    component: 'BpkStack'
+  });
+  return /*#__PURE__*/_jsx(Stack, {
+    ...getDataComponentAttribute('Stack'),
+    ...processedProps,
+    children: children
+  });
+};
+export const BpkHStack = ({
+  children,
+  ...props
+}) => {
+  const processedProps = processBpkComponentProps(props, {
+    component: 'BpkStack'
+  });
+  return /*#__PURE__*/_jsx(HStack, {
+    ...getDataComponentAttribute('HStack'),
+    ...processedProps,
+    children: children
+  });
+};
+export const BpkVStack = ({
+  children,
+  ...props
+}) => {
+  const processedProps = processBpkComponentProps(props, {
+    component: 'BpkStack'
+  });
+  return /*#__PURE__*/_jsx(VStack, {
+    ...getDataComponentAttribute('VStack'),
+    ...processedProps,
+    children: children
+  });
+};

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

@@ -0,0 +1,46 @@
+import type { BpkVesselProps } from './types';
+/**
+ * A "migration hatch" layout primitive designed to ease component migration.
+ *
+ * BpkVessel renders an HTML element (default: div) and accepts all standard
+ * HTML attributes for maximum migration flexibility.
+ *
+ * **When to use:**
+ * - During component migration when you need to maintain existing className/style usage
+ * - When you need to pass testing attributes (data-testid) or accessibility props
+ * - As a temporary solution while refactoring components
+ *
+ * **Important:**
+ * - This is a temporary migration tool, not a permanent solution
+ * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
+ * - Plan to migrate to BpkBox once legacy styling is removed
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-class"
+ *   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>
+ * ```
+ *
+ * @todo Migration component - pending removal after component migration is complete.
+ *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
+ *
+ * @returns {JSX.Element} An HTML element with all props applied.
+ */
+export declare const BpkVessel: ({ as: Element, children, ...restProps }: BpkVesselProps) => import("react/jsx-runtime").JSX.Element;
+export type { BpkVesselProps };

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

@@ -0,0 +1,72 @@
+/*
+ * 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 { getDataComponentAttribute } from "../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A "migration hatch" layout primitive designed to ease component migration.
+ *
+ * BpkVessel renders an HTML element (default: div) and accepts all standard
+ * HTML attributes for maximum migration flexibility.
+ *
+ * **When to use:**
+ * - During component migration when you need to maintain existing className/style usage
+ * - When you need to pass testing attributes (data-testid) or accessibility props
+ * - As a temporary solution while refactoring components
+ *
+ * **Important:**
+ * - This is a temporary migration tool, not a permanent solution
+ * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
+ * - Plan to migrate to BpkBox once legacy styling is removed
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-class"
+ *   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>
+ * ```
+ *
+ * @todo Migration component - pending removal after component migration is complete.
+ *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
+ *
+ * @returns {JSX.Element} An HTML element with all props applied.
+ */
+export const BpkVessel = ({
+  as: Element = 'div',
+  children,
+  ...restProps
+}) => /*#__PURE__*/_jsx(Element, {
+  ...getDataComponentAttribute('Vessel'),
+  ...restProps,
+  children: children
+});