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

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -132,6 +132,7 @@ const BpkBottomSheet = ({
           title: titleWithId,
           titleTextStyle: TEXT_STYLES.label1,
           titleTagName: hasTitle ? 'h2' : 'span',
+          wrapTitle: true,
           className: getClassName('bpk-bottom-sheet--header'),
           leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
             label: closeLabel,

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

@@ -1,14 +1,10 @@
 export { BpkProvider } from './src/BpkProvider';
-export { BpkLayoutProvider } from './src/BpkLayoutProvider';
-export { BpkArkProvider } from './src/BpkArkProvider';
 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 { BpkLayoutProviderProps } from './src/BpkLayoutProvider';
-export type { BpkArkProviderProps } from './src/BpkArkProvider';
 export type { BpkBoxProps } from './src/BpkBox';
 export type { BpkVesselProps } from './src/BpkVessel';
 export type { BpkFlexProps } from './src/BpkFlex';

package/bpk-component-layout/index.js

@@ -17,8 +17,6 @@
  */
 
 export { BpkProvider } from "./src/BpkProvider";
-export { BpkLayoutProvider } from "./src/BpkLayoutProvider";
-export { BpkArkProvider } from "./src/BpkArkProvider";
 export { BpkBox } from "./src/BpkBox";
 export { BpkVessel } from "./src/BpkVessel";
 export { BpkFlex } from "./src/BpkFlex";

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

@@ -17,10 +17,9 @@
  */
 
 import { forwardRef } from 'react';
+import { Box } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
-import useCurrentBreakpoint from "./useCurrentBreakpoint";
 import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -30,22 +29,20 @@ export const BpkBox = /*#__PURE__*/forwardRef(({
   color,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkBox'
   });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
-    ...getDataComponentAttribute('Box'),
-    ...passthrough,
-    children: children
-  });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Box, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('Box'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkBox.displayName = 'BpkBox';

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

@@ -17,10 +17,9 @@
  */
 
 import { forwardRef } from 'react';
+import { Flex } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
-import useCurrentBreakpoint from "./useCurrentBreakpoint";
 import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -39,7 +38,6 @@ export const BpkFlex = /*#__PURE__*/forwardRef(({
   wrap,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkFlex',
     responsiveProps: {
@@ -53,24 +51,15 @@ export const BpkFlex = /*#__PURE__*/forwardRef(({
       flexBasis: basis
     }
   });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-
-  // Set default display if not already set by a user-provided display prop
-  if (!style.display) {
-    style.display = inline ? 'inline-flex' : 'flex';
-  } else if (inline) {
-    style.display = 'inline-flex';
-  }
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return /*#__PURE__*/_jsx(Flex, {
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('Flex'),
-    ...passthrough,
+    ...processedProps,
+    display: inline ? 'inline-flex' : undefined,
     children: children
   });
 });

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

@@ -17,10 +17,9 @@
  */
 
 import { forwardRef } from 'react';
+import { Grid } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
-import useCurrentBreakpoint from "./useCurrentBreakpoint";
 import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -42,7 +41,6 @@ export const BpkGrid = /*#__PURE__*/forwardRef(({
   textStyle,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkGrid',
     responsiveProps: {
@@ -59,24 +57,15 @@ export const BpkGrid = /*#__PURE__*/forwardRef(({
       gridRow: row
     }
   });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-
-  // Set default display if not already set by a user-provided display prop
-  if (!style.display) {
-    style.display = inline ? 'inline-grid' : 'grid';
-  } else if (inline) {
-    style.display = 'inline-grid';
-  }
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return /*#__PURE__*/_jsx(Grid, {
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('Grid'),
-    ...passthrough,
+    ...processedProps,
+    display: inline ? 'inline-grid' : undefined,
     children: children
   });
 });

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

@@ -17,10 +17,9 @@
  */
 
 import { forwardRef } from 'react';
+import { GridItem } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
-import useCurrentBreakpoint from "./useCurrentBreakpoint";
 import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -38,34 +37,27 @@ export const BpkGridItem = /*#__PURE__*/forwardRef(({
   textStyle,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps({
     textStyle,
     ...props
   }, {
     component: 'BpkGridItem'
   });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-
-  // Apply grid item placement props as inline styles
-  if (area != null) style.gridArea = area;
-  // Use "span N / span N" format to ensure forward-only spanning
-  if (colSpan != null) style.gridColumn = `span ${colSpan}/span ${colSpan}`;
-  if (colStart != null) style.gridColumnStart = String(colStart);
-  if (colEnd != null) style.gridColumnEnd = String(colEnd);
-  if (rowSpan != null) style.gridRow = `span ${rowSpan}/span ${rowSpan}`;
-  if (rowStart != null) style.gridRowStart = String(rowStart);
-  if (rowEnd != null) style.gridRowEnd = String(rowEnd);
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return /*#__PURE__*/_jsx(GridItem, {
+    ref: ref
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: classNames,
     ...getDataComponentAttribute('GridItem'),
-    ...passthrough,
+    ...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,16 +1,19 @@
-import type React from 'react';
 import type { ReactNode } from 'react';
 export interface BpkProviderProps {
     children: ReactNode;
 }
 /**
- * BpkProvider - Provides context for Ark-based components.
+ * BpkProvider - Provides context for Backpack layout and Ark-based components.
  *
- * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack) no longer require a
- * provider. This wrapper still sets up BpkArkProvider (Ark UI locale) for
- * Ark-based components (BpkCheckboxV2, BpkSegmentedControlV2, etc.).
+ * Wraps children with:
+ * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
+ * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
+ *
+ * RTL support: reads document direction reactively via MutationObserver and passes
+ * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
+ * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {React.JSX.Element} The provider wrapping its children with Ark context.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
  */
-export declare const BpkProvider: ({ children }: BpkProviderProps) => React.JSX.Element;
+export declare const BpkProvider: ({ children }: BpkProviderProps) => JSX.Element;

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

@@ -16,23 +16,109 @@
  * limitations under the License.
  */
 
-import { BpkArkProvider } from "./BpkArkProvider";
-import { BpkLayoutProvider } from "./BpkLayoutProvider";
+import { useEffect, useState } from 'react';
+import { LocaleProvider } from '@ark-ui/react';
+import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
+import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * BpkProvider - Provides context for Ark-based components.
+ * Creates a Chakra UI system with Backpack token mappings.
  *
- * Layout components (BpkBox, BpkFlex, BpkGrid, BpkStack) no longer require a
- * provider. This wrapper still sets up BpkArkProvider (Ark UI locale) for
- * Ark-based components (BpkCheckboxV2, BpkSegmentedControlV2, etc.).
+ * Uses `defaultBaseConfig` (conditions + utilities only) instead of
+ * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
+ * See: https://chakra-ui.com/guides/component-bundle-optimization
+ */
+const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
+// 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 BpkProvider 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;
+};
+
+/**
+ * BpkProvider - Provides context for Backpack layout and Ark-based components.
+ *
+ * Wraps children with:
+ * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
+ * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
+ *
+ * RTL support: reads document direction reactively via MutationObserver and passes
+ * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
+ * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {React.JSX.Element} The provider wrapping its children with Ark context.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
  */
 export const BpkProvider = ({
   children
-}) => /*#__PURE__*/_jsx(BpkLayoutProvider, {
-  children: /*#__PURE__*/_jsx(BpkArkProvider, {
-    children: children
-  })
-});
+}) => {
+  const locale = useArkLocale();
+  return /*#__PURE__*/_jsx(ChakraProvider, {
+    value: bpkSystem,
+    children: /*#__PURE__*/_jsx(LocaleProvider, {
+      locale: locale,
+      children: children
+    })
+  });
+};

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

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-// Public API prop names for BpkStack/BpkHStack/BpkVStack.
-// These are the consumer-facing names; the components map them to CSS-standard
-// names (alignItems, justifyContent, flexWrap, flexDirection) internally.
+// 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.js

@@ -17,127 +17,78 @@
  */
 
 import { forwardRef } from 'react';
+import { Stack, VStack, HStack } from '@chakra-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { buildLayoutOutput } from "./responsiveStyleBuilder";
 import { processBpkComponentProps } from "./tokenUtils";
-import useCurrentBreakpoint from "./useCurrentBreakpoint";
 import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const BpkStack = /*#__PURE__*/forwardRef(({
-  align,
   backgroundColor,
   children,
   color,
-  direction,
-  justify,
-  wrap,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps(props, {
-    component: 'BpkStack',
-    responsiveProps: {
-      alignItems: align,
-      justifyContent: justify,
-      flexWrap: wrap,
-      flexDirection: direction
-    }
-  });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-
-  // Default: flex + column
-  if (!style.display) style.display = 'flex';
-  if (!style.flexDirection) style.flexDirection = 'column';
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
-    ...getDataComponentAttribute('Stack'),
-    ...passthrough,
-    children: children
+    component: 'BpkStack'
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Stack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('Stack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkStack.displayName = 'BpkStack';
 export const BpkHStack = /*#__PURE__*/forwardRef(({
-  align = 'center',
   backgroundColor,
   children,
   color,
-  direction = 'row',
-  justify,
-  wrap,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps(props, {
-    component: 'BpkStack',
-    responsiveProps: {
-      alignItems: align,
-      justifyContent: justify,
-      flexWrap: wrap,
-      flexDirection: direction
-    }
-  });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-
-  // Default: flex + row
-  if (!style.display) style.display = 'flex';
-  if (!style.flexDirection) style.flexDirection = 'row';
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
-    ...getDataComponentAttribute('HStack'),
-    ...passthrough,
-    children: children
+    component: 'BpkStack'
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(HStack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('HStack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkHStack.displayName = 'BpkHStack';
 export const BpkVStack = /*#__PURE__*/forwardRef(({
-  align = 'center',
   backgroundColor,
   children,
   color,
-  direction = 'column',
-  justify,
-  wrap,
   ...props
 }, ref) => {
-  const currentBreakpoint = useCurrentBreakpoint();
   const processedProps = processBpkComponentProps(props, {
-    component: 'BpkStack',
-    responsiveProps: {
-      alignItems: align,
-      justifyContent: justify,
-      flexWrap: wrap,
-      flexDirection: direction
-    }
-  });
-  const {
-    passthrough,
-    style
-  } = buildLayoutOutput(processedProps, currentBreakpoint);
-
-  // Default: flex + column
-  if (!style.display) style.display = 'flex';
-  if (!style.flexDirection) style.flexDirection = 'column';
-  const className = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: className,
-    style: style,
-    ...getDataComponentAttribute('VStack'),
-    ...passthrough,
-    children: children
+    component: 'BpkStack'
   });
+  const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(VStack, {
+      ref: ref,
+      className: classNames,
+      ...getDataComponentAttribute('VStack'),
+      ...processedProps,
+      children: children
+    })
+  );
 });
 BpkVStack.displayName = 'BpkVStack';

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

@@ -1,4 +1,4 @@
-import type { AriaAttributes, AriaRole, CSSProperties, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { AriaAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
 import type { BpkLayoutBackgroundColor } from './backgroundColors';
 import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkPositionKeyword, BpkOverflowValue, BpkZIndexValue, BpkResponsiveValue } from './tokens';
 import type { TextColor, TextStyle } from '../../bpk-component-text';
@@ -90,13 +90,6 @@ export interface BpkCommonLayoutProps extends BpkSpacingProps, AriaAttributes {
     borderBlock?: never;
     borderX?: never;
     borderY?: never;
-    textAlign?: BpkResponsiveValue<CSSProperties['textAlign']>;
-    whiteSpace?: CSSProperties['whiteSpace'];
-    cursor?: CSSProperties['cursor'];
-    opacity?: CSSProperties['opacity'];
-    visibility?: CSSProperties['visibility'];
-    pointerEvents?: CSSProperties['pointerEvents'];
-    userSelect?: CSSProperties['userSelect'];
     transition?: never;
     transitionProperty?: never;
     transitionDuration?: never;

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

@@ -33,3 +33,4 @@ export declare function getBorderRadiusValue(token: string): string | undefined;
  * @returns {string | undefined} The actual box-shadow value.
  */
 export declare function getShadowValue(token: string): string | undefined;
+export declare function createBpkConfig(): import("@chakra-ui/react").SystemConfig;