@skyscanner/backpack-web 42.1.0 → 42.3.0

package/bpk-component-banner-alert/src/BpkBannerAlert.js

@@ -19,13 +19,6 @@
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBannerAlertInner from "./BpkBannerAlertInner";
 import { jsx as _jsx } from "react/jsx-runtime";
-const defaultProps = {
-  animateOnEnter: false,
-  animateOnLeave: false,
-  show: true,
-  icon: null
-};
-
 /**
  * @deprecated use bpk-component-info-banner instead
  * @returns {Component} a banner alert component

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -35,7 +35,9 @@ const useLegacyWarning = (query, legacy, isClient) => useMemo(() => {
   if (isClient) {
     // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
     if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
-      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
+      console.warn(
+      // eslint-disable-line no-console
+      `Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
     }
   }
 }, [isClient, legacy, query]);

package/bpk-component-calendar/src/utils.js

@@ -23,7 +23,7 @@ const splitToken = value => {
   if (!match) {
     throw new Error(`Invalid token value. Expecting a valid css unit, got ${value}`);
   }
-  const [_, val, unit] = match;
+  const [, val, unit] = match;
   return [parseFloat(val), unit];
 };
 export const getCalendarGridWidth = (multiplier = 1) => {

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

@@ -1,5 +1,8 @@
 import BpkCard from './src/BpkCard';
+import BpkCardV2 from './src/BpkCardV2/BpkCardV2';
 import BpkCardWrapper from './src/BpkCardWrapper';
 import BpkDividedCard, { ORIENTATION } from './src/BpkDividedCard';
-export { ORIENTATION, BpkDividedCard, BpkCardWrapper };
+export type { BpkCardV2Props, BpkCardV2HeaderProps, BpkCardV2BodyProps, BpkCardV2SectionProps, BpkCardV2FooterProps, BpkCardV2SurfaceColor, BpkCardV2Variant, BpkCardV2Namespace, } from './src/BpkCardV2/common-types';
+export { CARD_V2_SURFACE_COLORS, CARD_V2_VARIANTS } from './src/BpkCardV2/common-types';
+export { ORIENTATION, BpkDividedCard, BpkCardWrapper, BpkCardV2 };
 export default BpkCard;

package/bpk-component-card/index.js

@@ -17,7 +17,9 @@
  */
 
 import BpkCard from "./src/BpkCard";
+import BpkCardV2 from "./src/BpkCardV2/BpkCardV2";
 import BpkCardWrapper from "./src/BpkCardWrapper";
 import BpkDividedCard, { ORIENTATION } from "./src/BpkDividedCard";
-export { ORIENTATION, BpkDividedCard, BpkCardWrapper };
+export { CARD_V2_SURFACE_COLORS, CARD_V2_VARIANTS } from "./src/BpkCardV2/common-types";
+export { ORIENTATION, BpkDividedCard, BpkCardWrapper, BpkCardV2 };
 export default BpkCard;

package/bpk-component-card/src/BpkCardV2/BpkCardV2.d.ts

@@ -0,0 +1,27 @@
+import type { BpkCardV2Namespace } from './common-types';
+/**
+ * BpkCardV2 is a composable, responsive card component namespace for Backpack.
+ *
+ * It provides subcomponents for explicit multi-section composition (Root, Header, Body, Footer),
+ * flexible multi-column layouts (Section/Divider), and customizable surface colors.
+ *
+ * @example
+ * // Basic card
+ * <BpkCardV2.Root>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Root bgColor={CARD_V2_SURFACE_COLORS.surfaceElevated}>
+ *   <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *     <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *     <BpkCardV2.Divider />
+ *     <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ *   </BpkCardV2.Body>
+ * </BpkCardV2.Root>
+ */
+declare const BpkCardV2: BpkCardV2Namespace;
+export default BpkCardV2;

package/bpk-component-card/src/BpkCardV2/BpkCardV2.js

@@ -0,0 +1,57 @@
+/*
+ * 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 Body from "./subcomponents/Body";
+import Divider from "./subcomponents/Divider";
+import Footer from "./subcomponents/Footer";
+import Header from "./subcomponents/Header";
+import Root from "./subcomponents/Root";
+import Section from "./subcomponents/Section";
+/**
+ * BpkCardV2 is a composable, responsive card component namespace for Backpack.
+ *
+ * It provides subcomponents for explicit multi-section composition (Root, Header, Body, Footer),
+ * flexible multi-column layouts (Section/Divider), and customizable surface colors.
+ *
+ * @example
+ * // Basic card
+ * <BpkCardV2.Root>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Root bgColor={CARD_V2_SURFACE_COLORS.surfaceElevated}>
+ *   <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *     <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *     <BpkCardV2.Divider />
+ *     <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ *   </BpkCardV2.Body>
+ * </BpkCardV2.Root>
+ */
+const BpkCardV2 = {
+  Root,
+  Header,
+  Body,
+  Section,
+  Divider,
+  Footer
+};
+export default BpkCardV2;

package/bpk-component-card/src/BpkCardV2/BpkCardV2.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-card-v2{display:flex;flex-direction:column;flex:1;transition:box-shadow 200ms ease-in-out;background-color:#fff;overflow:hidden;border-radius:.75rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-card-v2--surface-default{background-color:#fff}.bpk-card-v2--surface-elevated{background-color:#fff}.bpk-card-v2--surface-hero{background-color:#0062e3}.bpk-card-v2--surface-contrast{background-color:#05203c}.bpk-card-v2--surface-highlight{background-color:#e0e4e9}.bpk-card-v2--surface-subtle{background-color:#e3f0ff}.bpk-card-v2--surface-low-contrast{background-color:#f5f7fa}.bpk-card-v2--surface-tint{background-color:hsla(0,0%,100%,.1)}.bpk-no-touch-support .bpk-card-v2:hover:not(:active):not(:disabled){box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}:global(.bpk-no-touch-support) .bpk-card-v2:hover:not(:active):not(:disabled){box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-card-v2--default{cursor:pointer}.bpk-card-v2--outlined{border:1px solid #c1c7cf;box-shadow:none}.bpk-no-touch-support .bpk-card-v2--outlined:hover:not(:active):not(:disabled){box-shadow:none}:global(.bpk-no-touch-support) .bpk-card-v2--outlined:hover:not(:active):not(:disabled){box-shadow:none}.bpk-card-v2--no-elevation{box-shadow:none}.bpk-no-touch-support .bpk-card-v2--no-elevation:hover:not(:active):not(:disabled){box-shadow:none}:global(.bpk-no-touch-support) .bpk-card-v2--no-elevation:hover:not(:active):not(:disabled){box-shadow:none}.bpk-card-v2--cars-prompt{background-color:#f5f7fa;box-shadow:none}.bpk-no-touch-support .bpk-card-v2--cars-prompt:hover:not(:active):not(:disabled){background-color:#e3f0ff;box-shadow:none}:global(.bpk-no-touch-support) .bpk-card-v2--cars-prompt:hover:not(:active):not(:disabled){background-color:#e3f0ff;box-shadow:none}.bpk-card-v2--cars-prompt:active{background-color:#e3f0ff;box-shadow:none}.bpk-card-v2--cars-prompt:focus-visible{background-color:#e3f0ff;box-shadow:none;outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-card-v2__divider{height:1px;margin:0 .5rem;background-color:#c1c7cf}@media(min-width: 32.0625rem){.bpk-card-v2__divider{width:1px;height:auto;margin:.5rem 0;align-self:stretch}}

package/bpk-component-card/src/BpkCardV2/common-types.d.ts

@@ -0,0 +1,124 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from 'react';
+import type { BpkBoxProps, BpkFlexProps, BpkGridProps } from '../../../bpk-component-layout';
+/** Surface color token options for BpkCardV2 background */
+export declare const CARD_V2_SURFACE_COLORS: {
+    readonly surfaceDefault: "surfaceDefault";
+    readonly surfaceElevated: "surfaceElevated";
+    readonly surfaceTint: "surfaceTint";
+    readonly surfaceSubtle: "surfaceSubtle";
+    readonly surfaceHero: "surfaceHero";
+    readonly surfaceContrast: "surfaceContrast";
+    readonly surfaceLowContrast: "surfaceLowContrast";
+    readonly surfaceHighlight: "surfaceHighlight";
+};
+export type BpkCardV2SurfaceColor = (typeof CARD_V2_SURFACE_COLORS)[keyof typeof CARD_V2_SURFACE_COLORS];
+/** Visual variant options for BpkCardV2 */
+export declare const CARD_V2_VARIANTS: {
+    readonly default: "default";
+    readonly outlined: "outlined";
+    readonly noElevation: "noElevation";
+    readonly carsPrompt: "carsPrompt";
+};
+export type BpkCardV2Variant = (typeof CARD_V2_VARIANTS)[keyof typeof CARD_V2_VARIANTS];
+type BpkCardV2BaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
+    /** Card content - use Header, Body, Footer subcomponents */
+    children: ReactNode;
+};
+/**
+ * BpkCardV2 root component props.
+ *
+ * Composable card component with explicit Header/Body/Footer subcomponents.
+ * Supports multiple surface colors, visual variants, and responsive multi-column layouts.
+ *
+ * Note: `bgColor` is not supported for the `carsPrompt` variant — its background is fixed
+ * by design and cannot be customised.
+ *
+ * @example
+ * <BpkCardV2 variant={CARD_V2_VARIANTS.default} bgColor={CARD_V2_SURFACE_COLORS.surfaceDefault}>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2>
+ */
+export type BpkCardV2Props = BpkCardV2BaseProps & ({
+    /** Visual variant controlling styling treatment (shadow/border) */
+    variant?: Exclude<BpkCardV2Variant, 'carsPrompt'>;
+    /** Background surface color token (default: surfaceDefault) */
+    bgColor?: BpkCardV2SurfaceColor;
+} | {
+    /** Cars prompt variant — bgColor is fixed and cannot be set */
+    variant: 'carsPrompt';
+    bgColor?: never;
+});
+/**
+ * BpkCardV2.Header component props.
+ *
+ * Renders a BpkFlex container positioned at top of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+export type BpkCardV2HeaderProps = BpkFlexProps;
+/**
+ * BpkCardV2.Body component props.
+ *
+ * Renders card main content area as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props are supported for layout customisation.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *
+ * // Multi-column layout with divider (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ */
+export type BpkCardV2BodyProps = BpkGridProps;
+/**
+ * BpkCardV2.Section component props.
+ *
+ * Generic content area for multi-column layouts. Renders a BpkBox.
+ * All BpkBox props are supported for layout customisation.
+ */
+export type BpkCardV2SectionProps = BpkBoxProps;
+/**
+ * BpkCardV2.Footer component props.
+ *
+ * Renders a BpkFlex container positioned at bottom of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+export type BpkCardV2FooterProps = BpkFlexProps;
+/**
+ * BpkCardV2 namespace type.
+ *
+ * Contains all card subcomponents as properties.
+ */
+export type BpkCardV2Namespace = {
+    Root: ForwardRefExoticComponent<BpkCardV2Props & RefAttributes<HTMLDivElement>>;
+    Header: {
+        (props: BpkCardV2HeaderProps): ReactNode;
+        displayName?: string;
+    };
+    Body: {
+        (props: BpkCardV2BodyProps): ReactNode;
+        displayName?: string;
+    };
+    Section: {
+        (props: BpkCardV2SectionProps): ReactNode;
+        displayName?: string;
+    };
+    Divider: {
+        (): ReactNode;
+        displayName?: string;
+    };
+    Footer: {
+        (props: BpkCardV2FooterProps): ReactNode;
+        displayName?: string;
+    };
+};
+export {};

package/bpk-component-card/src/BpkCardV2/common-types.js

@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+/** Surface color token options for BpkCardV2 background */
+export const CARD_V2_SURFACE_COLORS = {
+  surfaceDefault: 'surfaceDefault',
+  surfaceElevated: 'surfaceElevated',
+  surfaceTint: 'surfaceTint',
+  surfaceSubtle: 'surfaceSubtle',
+  surfaceHero: 'surfaceHero',
+  surfaceContrast: 'surfaceContrast',
+  surfaceLowContrast: 'surfaceLowContrast',
+  surfaceHighlight: 'surfaceHighlight'
+};
+/** Visual variant options for BpkCardV2 */
+export const CARD_V2_VARIANTS = {
+  default: 'default',
+  outlined: 'outlined',
+  noElevation: 'noElevation',
+  carsPrompt: 'carsPrompt'
+};
+
+/**
+ * BpkCardV2 root component props.
+ *
+ * Composable card component with explicit Header/Body/Footer subcomponents.
+ * Supports multiple surface colors, visual variants, and responsive multi-column layouts.
+ *
+ * Note: `bgColor` is not supported for the `carsPrompt` variant — its background is fixed
+ * by design and cannot be customised.
+ *
+ * @example
+ * <BpkCardV2 variant={CARD_V2_VARIANTS.default} bgColor={CARD_V2_SURFACE_COLORS.surfaceDefault}>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2>
+ */
+
+/**
+ * BpkCardV2.Header component props.
+ *
+ * Renders a BpkFlex container positioned at top of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+
+/**
+ * BpkCardV2.Body component props.
+ *
+ * Renders card main content area as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props are supported for layout customisation.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *
+ * // Multi-column layout with divider (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ */
+
+/**
+ * BpkCardV2.Section component props.
+ *
+ * Generic content area for multi-column layouts. Renders a BpkBox.
+ * All BpkBox props are supported for layout customisation.
+ */
+
+/**
+ * BpkCardV2.Footer component props.
+ *
+ * Renders a BpkFlex container positioned at bottom of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+
+/**
+ * BpkCardV2 namespace type.
+ *
+ * Contains all card subcomponents as properties.
+ */

package/bpk-component-card/src/BpkCardV2/subcomponents/Body.d.ts

@@ -0,0 +1,36 @@
+import type { BpkCardV2BodyProps } from '../common-types';
+/**
+ * Body subcomponent for BpkCardV2.
+ *
+ * Renders the main content area of the card as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props can be used to customise the layout.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content here</BpkCardV2.Body>
+ *
+ * @example
+ * // Multi-column layout
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '1fr 2fr 1fr' }}>
+ *   <BpkCardV2.Section>Left</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Center (2x wide)</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Right</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ *
+ * @example
+ * // Multi-column with divider (include auto for the divider)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ *
+ * @returns {JSX.Element} Body component
+ */
+declare const Body: {
+    ({ children, padding, templateColumns, ...rest }: BpkCardV2BodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Body;

package/bpk-component-card/src/BpkCardV2/subcomponents/Body.js

@@ -0,0 +1,65 @@
+/*
+ * 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 { BpkGrid, BpkSpacing } from "../../../../bpk-component-layout";
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Body subcomponent for BpkCardV2.
+ *
+ * Renders the main content area of the card as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props can be used to customise the layout.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content here</BpkCardV2.Body>
+ *
+ * @example
+ * // Multi-column layout
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '1fr 2fr 1fr' }}>
+ *   <BpkCardV2.Section>Left</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Center (2x wide)</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Right</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ *
+ * @example
+ * // Multi-column with divider (include auto for the divider)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ *
+ * @returns {JSX.Element} Body component
+ */
+const Body = ({
+  children,
+  padding = BpkSpacing.Base,
+  templateColumns = '1fr',
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkGrid, {
+  templateColumns: templateColumns,
+  padding: padding,
+  ...getDataComponentAttribute('CardV2.Body'),
+  ...rest,
+  children: children
+});
+Body.displayName = 'BpkCardV2.Body';
+export default Body;

package/bpk-component-card/src/BpkCardV2/subcomponents/Divider.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Divider between Section children in multi-column layout.
+ *
+ * Renders as a horizontal line on mobile and a vertical line on desktop.
+ * Styled via SCSS for breakpoint handling.
+ *
+ * @returns {JSX.Element} Divider component
+ */
+declare const Divider: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Divider;

package/bpk-component-card/src/BpkCardV2/subcomponents/Divider.js

@@ -0,0 +1,37 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import STYLES from "../BpkCardV2.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+
+/**
+ * Divider between Section children in multi-column layout.
+ *
+ * Renders as a horizontal line on mobile and a vertical line on desktop.
+ * Styled via SCSS for breakpoint handling.
+ *
+ * @returns {JSX.Element} Divider component
+ */
+const Divider = () => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-card-v2__divider'),
+  ...getDataComponentAttribute('CardV2.Divider')
+});
+Divider.displayName = 'BpkCardV2.Divider';
+export default Divider;

package/bpk-component-card/src/BpkCardV2/subcomponents/Footer.d.ts

@@ -0,0 +1,24 @@
+import type { BpkCardV2FooterProps } from '../common-types';
+/**
+ * Footer subcomponent for BpkCardV2.
+ *
+ * Renders a BpkFlex container positioned at the bottom of the card.
+ * Defaults to horizontal (row) direction with base padding on bottom, start
+ * and end, and no top padding. All BpkFlex props can be used to customise the layout.
+ *
+ * @example
+ * <BpkCardV2.Footer>Footer content</BpkCardV2.Footer>
+ *
+ * @example
+ * <BpkCardV2.Footer justify="flex-end" gap={BpkSpacing.SM}>
+ *   <BpkButton>Cancel</BpkButton>
+ *   <BpkButton>Save</BpkButton>
+ * </BpkCardV2.Footer>
+ *
+ * @returns {JSX.Element} Footer component
+ */
+declare const Footer: {
+    ({ children, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, ...rest }: BpkCardV2FooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Footer;

package/bpk-component-card/src/BpkCardV2/subcomponents/Footer.js

@@ -0,0 +1,60 @@
+/*
+ * 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 { BpkFlex, BpkSpacing } from "../../../../bpk-component-layout";
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import resolveDirectionalPadding from "./resolveDirectionalPadding";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Footer subcomponent for BpkCardV2.
+ *
+ * Renders a BpkFlex container positioned at the bottom of the card.
+ * Defaults to horizontal (row) direction with base padding on bottom, start
+ * and end, and no top padding. All BpkFlex props can be used to customise the layout.
+ *
+ * @example
+ * <BpkCardV2.Footer>Footer content</BpkCardV2.Footer>
+ *
+ * @example
+ * <BpkCardV2.Footer justify="flex-end" gap={BpkSpacing.SM}>
+ *   <BpkButton>Cancel</BpkButton>
+ *   <BpkButton>Save</BpkButton>
+ * </BpkCardV2.Footer>
+ *
+ * @returns {JSX.Element} Footer component
+ */
+const Footer = ({
+  children,
+  padding,
+  paddingBottom,
+  paddingEnd,
+  paddingStart,
+  paddingTop,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkFlex, {
+  padding: padding,
+  paddingTop: resolveDirectionalPadding(padding, paddingTop, BpkSpacing.None),
+  paddingStart: resolveDirectionalPadding(padding, paddingStart, BpkSpacing.Base),
+  paddingEnd: resolveDirectionalPadding(padding, paddingEnd, BpkSpacing.Base),
+  paddingBottom: resolveDirectionalPadding(padding, paddingBottom, BpkSpacing.Base),
+  ...getDataComponentAttribute('CardV2.Footer'),
+  ...rest,
+  children: children
+});
+Footer.displayName = 'BpkCardV2.Footer';
+export default Footer;

package/bpk-component-card/src/BpkCardV2/subcomponents/Header.d.ts

@@ -0,0 +1,24 @@
+import type { BpkCardV2HeaderProps } from '../common-types';
+/**
+ * Header subcomponent for BpkCardV2.
+ *
+ * Renders a BpkFlex container positioned at the top of the card.
+ * Defaults to horizontal (row) direction with base padding on top, start
+ * and end, and no bottom padding. All BpkFlex props can be used to customise the layout.
+ *
+ * @example
+ * <BpkCardV2.Header>Card title</BpkCardV2.Header>
+ *
+ * @example
+ * <BpkCardV2.Header justify="space-between" align="center">
+ *   <BpkText>Title</BpkText>
+ *   <BpkText>Action</BpkText>
+ * </BpkCardV2.Header>
+ *
+ * @returns {JSX.Element} Header component
+ */
+declare const Header: {
+    ({ children, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, ...rest }: BpkCardV2HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Header;