@skyscanner/backpack-web 41.10.0-beta-v1 → 41.11.1-beta.1

package/bpk-mixins/_surfaces.scss

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens';
+
+////
+/// @group surfaces
+////
+
+// Keys must stay in sync with bpk-react-utils/src/surfaceColors.ts
+$bpk-surface-bg-colors: (
+  'surface-default': tokens.$bpk-surface-default-day,
+  'surface-elevated': tokens.$bpk-surface-elevated-day,
+  'surface-hero': tokens.$bpk-surface-hero-day,
+  'surface-contrast': tokens.$bpk-surface-contrast-day,
+  'surface-highlight': tokens.$bpk-surface-highlight-day,
+  'surface-subtle': tokens.$bpk-surface-subtle-day,
+  'surface-low-contrast': tokens.$bpk-surface-low-contrast-day,
+  'surface-tint': tokens.$bpk-surface-tint-day,
+);
+
+/// Generates background-color modifier classes for all surface colors.
+///
+/// @example scss
+///   .bpk-panel {
+///     @include bpk-surface-bg-colors;
+///   }
+
+@mixin bpk-surface-bg-colors {
+  @each $color-name, $color-value in $bpk-surface-bg-colors {
+    &--#{$color-name} {
+      background-color: $color-value;
+    }
+  }
+}

package/bpk-react-utils/index.d.ts

@@ -7,9 +7,11 @@ import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection
 import { getDataComponentAttribute } from './src/getDataComponentAttribute';
 import isRTL from './src/isRTL';
 import { setNativeValue } from './src/nativeEventHandler';
+import { SURFACE_COLORS } from './src/surfaceColors';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, };
+export type { SurfaceBgColor } from './src/surfaceColors';
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS, };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -43,5 +45,15 @@ declare const _default: {
     getDataComponentAttribute: (componentName: string) => {
         "data-backpack-ds-component": string;
     };
+    SURFACE_COLORS: {
+        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 default _default;

package/bpk-react-utils/index.js

@@ -26,9 +26,10 @@ import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection
 import { getDataComponentAttribute } from "./src/getDataComponentAttribute";
 import isRTL from "./src/isRTL";
 import { setNativeValue } from "./src/nativeEventHandler";
+import { SURFACE_COLORS } from "./src/surfaceColors";
 import withDefaultProps from "./src/withDefaultProps";
 import wrapDisplayName from "./src/wrapDisplayName";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, SURFACE_COLORS };
 export default {
   Portal,
   TransitionInitialMount,
@@ -42,5 +43,6 @@ export default {
   isRTL,
   BpkDialogWrapper,
   setNativeValue,
-  getDataComponentAttribute
+  getDataComponentAttribute,
+  SURFACE_COLORS
 };

package/bpk-react-utils/src/surfaceColors.d.ts

@@ -0,0 +1,11 @@
+export declare const SURFACE_COLORS: {
+    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 SurfaceBgColor = (typeof SURFACE_COLORS)[keyof typeof SURFACE_COLORS];

package/{bpk-component-layout/src/BpkStack.constant.js → bpk-react-utils/src/surfaceColors.js}

@@ -16,7 +16,14 @@
  * 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;
+// Values must stay in sync with bpk-mixins/_surfaces.scss
+export const SURFACE_COLORS = {
+  surfaceDefault: 'surface-default',
+  surfaceElevated: 'surface-elevated',
+  surfaceHero: 'surface-hero',
+  surfaceContrast: 'surface-contrast',
+  surfaceHighlight: 'surface-highlight',
+  surfaceSubtle: 'surface-subtle',
+  surfaceLowContrast: 'surface-low-contrast',
+  surfaceTint: 'surface-tint'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.10.0-beta-v1",
+  "version": "41.11.1-beta.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,7 +22,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.30.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",

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

@@ -1,18 +0,0 @@
-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

@@ -1,29 +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.
- */
-
-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

@@ -1,3 +0,0 @@
-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

@@ -1,33 +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 { Box } from '@chakra-ui/react';
-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, {
-    ...processedProps,
-    children: children
-  });
-};

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

@@ -1,3 +0,0 @@
-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

@@ -1,51 +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 { Flex } from '@chakra-ui/react';
-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, {
-    ...processedProps,
-    display: inline ? 'inline-flex' : undefined,
-    children: children
-  });
-};

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

@@ -1,3 +0,0 @@
-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

@@ -1,57 +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 { Grid } from '@chakra-ui/react';
-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, {
-    ...processedProps,
-    display: inline ? 'inline-grid' : undefined,
-    children: children
-  });
-};

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

@@ -1,3 +0,0 @@
-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

@@ -1,45 +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 { GridItem } from '@chakra-ui/react';
-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, {
-    ...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

@@ -1,14 +0,0 @@
-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

@@ -1,42 +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 { 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

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

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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,70 +0,0 @@
-import { 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.
- */
-
-/**
- * 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, {
-  ...restProps,
-  children: children
-});