@skyscanner/backpack-web 41.8.0 → 41.10.0-beta-v1

package/bpk-component-description-list/src/BpkDescriptionList.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,6 +27,7 @@ export default ({
 }) => /*#__PURE__*/_jsx("dl", {
   className: [getClassName('bpk-description-list'), className].filter(x => x) // inline drops the className if undefined
   .join(' '),
+  ...getDataComponentAttribute('DescriptionList'),
   ...rest,
   children: children
 });

package/bpk-component-description-list/src/BpkDescriptionTerm.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,6 +27,7 @@ export default ({
 }) => /*#__PURE__*/_jsx("dt", {
   className: [getClassName('bpk-description-list__term'), className].filter(x => x) // inline drops the className if undefined
   .join(' '),
+  ...getDataComponentAttribute('DescriptionTerm'),
   ...rest,
   children: children
 });

package/bpk-component-dialog/src/BpkDialog.js

@@ -18,7 +18,7 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { cssModules, Portal } from "../../bpk-react-utils";
+import { cssModules, Portal, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkDialogInner from "./BpkDialogInner";
 import { HEADER_ICON_TYPES } from "./common-types";
 import STYLES from "./BpkDialog.module.css";
@@ -52,6 +52,7 @@ const BpkDialog = ({
       containerClassName: getClassName('bpk-dialog__container'),
       contentClassName: headerIcon ? getClassName('bpk-dialog--with-icon') : undefined,
       ...rest,
+      ...getDataComponentAttribute('Dialog'),
       children: [headerIcon && /*#__PURE__*/_jsx("div", {
         className: headerIconClassNames,
         children: headerIcon

package/bpk-component-drawer/src/BpkDrawer.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useState, useEffect } from 'react';
-import { Portal, isDeviceIpad, isDeviceIphone } from "../../bpk-react-utils";
+import { Portal, isDeviceIpad, isDeviceIphone, getDataComponentAttribute } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,6 +59,7 @@ const BpkDrawer = ({
     isOpen: isOpen,
     onClose: hide,
     renderTarget: renderTarget,
+    ...getDataComponentAttribute('Drawer'),
     children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
       id: id,
       title: title,

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -20,7 +20,7 @@ import { cloneElement } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
 import BpkLabel from "../../bpk-component-label";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -74,6 +74,7 @@ const BpkFieldset = ({
   }
   return /*#__PURE__*/_jsxs("fieldset", {
     className: classNames.join(' '),
+    ...getDataComponentAttribute('Fieldset'),
     ...rest,
     children: [!isCheckbox && /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-fieldset__label'),

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -21,7 +21,7 @@ import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -62,6 +62,7 @@ const BpkFloatingNotification = props => {
     onExited: onExit,
     children: /*#__PURE__*/_jsxs("div", {
       className: classNames,
+      ...getDataComponentAttribute('FloatingNotification'),
       ...rest,
       children: [Icon && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__icon'),

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -17,7 +17,7 @@
  */
 
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkGraphicPromo.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -125,6 +125,7 @@ const BpkGraphicPromo = ({
       }),
       onClick: onClickWrapper,
       onKeyDown: onKeyWrapper,
+      ...getDataComponentAttribute('GraphicPromo'),
       children: /*#__PURE__*/_jsxs("div", {
         id: contentId && `${contentId}__content` || '',
         className: containerClasses,

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -20,7 +20,7 @@ import { Component } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBackgroundImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -102,6 +102,7 @@ class BpkBackgroundImage extends Component {
           paddingBottom: aspectRatioPc
         },
         className: classNames.join(' '),
+        ...getDataComponentAttribute('BackgroundImage'),
         children: [/*#__PURE__*/_jsx("div", {
           style: {
             backgroundImage: !inView || loading ? '' : `url(${src})`,

package/bpk-component-image/src/BpkImage.js

@@ -20,7 +20,7 @@ import { Component } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
 import STYLES from "./BpkImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -110,6 +110,7 @@ class BpkImage extends Component {
     return /*#__PURE__*/_jsx("div", {
       style: style,
       className: className,
+      ...getDataComponentAttribute('Image'),
       children: /*#__PURE__*/_jsxs("div", {
         ref: div => {
           this.placeholder = div;

package/bpk-component-info-banner/src/BpkInfoBanner.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkInfoBannerInner from "./BpkInfoBannerInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkInfoBanner = ({
@@ -29,6 +30,7 @@ const BpkInfoBanner = ({
   animateOnLeave: animateOnLeave,
   show: show,
   icon: icon,
+  ...getDataComponentAttribute('InfoBanner'),
   ...rest
 });
 export default BpkInfoBanner;

package/bpk-component-info-banner/src/BpkInfoBannerDismissable.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkInfoBannerInner, { CONFIGURATION } from "./BpkInfoBannerInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkInfoBannerDismissable = ({
@@ -24,6 +25,7 @@ const BpkInfoBannerDismissable = ({
 }) => /*#__PURE__*/_jsx(BpkInfoBannerInner, {
   configuration: CONFIGURATION.DISMISSABLE,
   onDismiss: onDismiss,
+  ...getDataComponentAttribute('InfoBannerDismissable'),
   ...rest
 });
 export default BpkInfoBannerDismissable;

package/bpk-component-info-banner/src/BpkInfoBannerExpandable.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkInfoBannerInner, { CONFIGURATION } from "./BpkInfoBannerInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkInfoBannerExpandable = ({
@@ -29,6 +30,7 @@ const BpkInfoBannerExpandable = ({
   configuration: CONFIGURATION.EXPANDABLE,
   expanded: expanded,
   onExpandToggle: onExpandToggle,
+  ...getDataComponentAttribute('InfoBannerExpandable'),
   ...rest,
   children: children
 });

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

@@ -19,7 +19,7 @@
 import { Component } from 'react';
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ClearIcon from "../../bpk-component-icon/sm/close-circle";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
 import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -107,6 +107,7 @@ class BpkInput extends Component {
       "aria-invalid": isInvalid,
       value: value,
       name: name,
+      ...getDataComponentAttribute('Input'),
       ...rest
     });
 

package/bpk-component-inset-banner/src/BpkInsetBanner.js

@@ -19,7 +19,7 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base
 import InfoIcon from "../../bpk-component-icon/sm/information-circle";
 import BpkPopover from "../../bpk-component-popover/src/BpkPopover";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkInsetBanner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -42,6 +42,7 @@ const BpkInsetBanner = ({
   const popoverMarginStart = callToAction?.popoverMarginStart || 'auto';
   const popoverMarginEnd = callToAction?.popoverMarginEnd || 'auto';
   return /*#__PURE__*/_jsxs("div", {
+    ...getDataComponentAttribute('InsetBanner'),
     children: [/*#__PURE__*/_jsxs("div", {
       "aria-label": accessibilityLabel,
       className: classNames,

package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js

@@ -23,7 +23,7 @@ import ViewIcon from "../../../bpk-component-icon/lg/view";
 import InfoIcon from "../../../bpk-component-icon/sm/information-circle";
 import BpkImage from "../../../bpk-component-image";
 import BpkText, { TEXT_STYLES } from "../../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { VARIANT } from "./common-types";
 import STYLES from "./BpkInsetBannerSponsored.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -43,6 +43,7 @@ const BpkInsetBannerSponsored = ({
   const classNames = getClassName('bpk-inset-banner', `bpk-inset-banner--${variant}`, image && 'bpk-inset-banner--with-image');
   const [sheetOpen, setSheetOpen] = useState(false);
   return /*#__PURE__*/_jsxs("div", {
+    ...getDataComponentAttribute('InsetBannerSponsored'),
     children: [/*#__PURE__*/_jsxs("div", {
       "aria-label": accessibilityLabel,
       className: classNames,

package/bpk-component-journey-arrow/src/BpkJourneyArrow.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkJourneyArrow.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -28,6 +28,7 @@ const BpkJourneyArrow = ({
   const dotCount = Math.min(3, Math.max(0, stops));
   return /*#__PURE__*/_jsx("div", {
     className: getClassName("bpk-journey-arrow"),
+    ...getDataComponentAttribute('JourneyArrow'),
     ...rest,
     children: Array.from({
       length: dotCount

package/bpk-component-label/src/BpkLabel.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkLabel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -33,6 +33,7 @@ const BpkLabel = ({
   const classNames = getClassName('bpk-label', white && 'bpk-label--white', invalid && 'bpk-label--invalid', disabled && 'bpk-label--disabled', white && disabled && 'bpk-label--disabled--white', className);
   return /*#__PURE__*/_jsxs("label", {
     className: classNames,
+    ...getDataComponentAttribute('Label'),
     ...rest,
     children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-label__asterisk'),

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,33 @@
+/*
+ * 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

@@ -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,51 @@
+/*
+ * 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

@@ -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,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 { 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

@@ -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,45 @@
+/*
+ * 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

@@ -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 };