@skyscanner/backpack-web 33.4.0 → 34.0.0-premajor.1

package/bpk-component-accordion/index.js

@@ -16,6 +16,6 @@
  * limitations under the License.
  */import BpkAccordion from "./src/BpkAccordion";
 import BpkAccordionItem from "./src/BpkAccordionItem";
-import withSingleItemAccordionState from "./src/withSingleItemAccordionState";
 import withAccordionItemState from "./src/withAccordionItemState";
+import withSingleItemAccordionState from "./src/withSingleItemAccordionState";
 export { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState, withAccordionItemState };

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -17,10 +17,10 @@
  */import PropTypes from 'prop-types';
 import { Node, Element, useContext, cloneElement } from 'react';
 import AnimateHeight from "../../bpk-animate-height";
+import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import { withButtonAlignment } from "../../bpk-component-icon";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -94,18 +94,18 @@ const BpkAccordionItem = props => {
           "aria-controls": contentId,
           onClick: onClick,
           className: getClassName('bpk-accordion__toggle-button'),
-          children: /*#__PURE__*/_jsxs("span", {
-            className: getClassName('bpk-accordion__flex-container'),
-            children: [/*#__PURE__*/_jsxs(BpkText, {
-              textStyle: textStyle,
-              tagName: tagName,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: `${getClassName('bpk-accordion__flex-container')}`,
+            children: [/*#__PURE__*/_jsx("div", {
               className: titleTextClassNames.join(' '),
-              children: [clonedIcon, title]
-            }), /*#__PURE__*/_jsx("span", {
-              className: getClassName('bpk-accordion__icon-wrapper'),
-              children: /*#__PURE__*/_jsx(ExpandIcon, {
-                className: iconClassNames.join(' ')
+              children: /*#__PURE__*/_jsxs(BpkText, {
+                textStyle: textStyle,
+                tagName: tagName,
+                children: [clonedIcon, title]
               })
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${getClassName('bpk-accordion__icon-wrapper')} ${iconClassNames.join(' ')}`,
+              children: /*#__PURE__*/_jsx(ExpandIcon, {})
             })]
           })
         })
@@ -135,7 +135,7 @@ BpkAccordionItem.defaultProps = {
   expanded: false,
   icon: null,
   onClick: () => null,
-  tagName: 'span',
+  tagName: 'h3',
   textStyle: TEXT_STYLES.bodyDefault
 };
 export default BpkAccordionItem;

package/bpk-component-accordion/src/BpkAccordionItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-accordion__title{height:auto}.bpk-accordion__title--collapsed{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__title--collapsed-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{display:inline-block;flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-container--expanded{padding-bottom:1rem;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__content-container--expanded-on-dark{padding-bottom:1rem;box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}
+.bpk-accordion__title{height:auto}.bpk-accordion__title--collapsed{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__title--collapsed-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-container--expanded{padding-bottom:1rem;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__content-container--expanded-on-dark{padding-bottom:1rem;box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -43,7 +43,10 @@ const BpkAutosuggestSuggestion = props => {
     _jsxs("section", {
       className: classNames.join(' '),
       ...rest,
-      children: [icon ? /*#__PURE__*/_jsx(Icon, {
+      children: [icon ? /*#__PURE__*/_jsx(Icon
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: getClassName('bpk-autosuggest__suggestion-icon')
       }) : null, /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-autosuggest__suggestion-content'),

package/bpk-component-banner-alert/index.js

@@ -20,7 +20,7 @@ import BpkBannerAlert from "./src/BpkBannerAlert";
 import BpkBannerAlertDismissable from "./src/BpkBannerAlertDismissable";
 import BpkBannerAlertExpandable from "./src/BpkBannerAlertExpandable";
 import { ALERT_TYPES } from "./src/common-types";
-import withBannerAlertState from "./src/withBannerAlertState";
 import themeAttributes from "./src/themeAttributes";
+import withBannerAlertState from "./src/withBannerAlertState";
 export { ALERT_TYPES, BpkBannerAlertDismissable, BpkBannerAlertExpandable, withBannerAlertState, themeAttributes };
 export default BpkBannerAlert;

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

@@ -22,9 +22,10 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAnimateAndFade.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,8 +33,7 @@ const ANIMATION_DURATION = parseInt(durationSm, 10);
 class AnimateAndFade extends Component {
   static defaultProps = {
     animateOnEnter: false,
-    animateOnLeave: false,
-    className: null
+    animateOnLeave: false
   };
   constructor(props) {
     super(props);
@@ -110,37 +110,39 @@ class AnimateAndFade extends Component {
     // While the expanding animation takes place, we render the child element
     // close to invisible. If we don't do this, the animate-height container
     // will take on height 0, and will never expand to allow the children to fade in
-    return this.state.inDom ? /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+    return this.state.inDom ? /*#__PURE__*/_jsx("div", {
       className: className,
-      onAnimationComplete: this.onAnimateHeightComplete,
-      duration: ANIMATION_DURATION,
-      height: this.state.isExpanded ? 'auto' : 0,
-      children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
-        style: {
-          opacity: 0.35
-        },
-        children: children
-      }), /*#__PURE__*/_jsx(TransitionGroup, {
-        exit: animateOnLeave,
-        enter: animateOnEnter,
-        appear: animateOnEnter,
-        onTransitionEnd: this.onFadeComplete,
-        children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
-          classNames: {
-            exit: getClassName('bpk-animate-and-fade--leave'),
-            exitActive: getClassName('bpk-animate-and-fade--leave-active'),
-            enter: getClassName('bpk-animate-and-fade--enter'),
-            enterActive: getClassName('bpk-animate-and-fade--enter-active'),
-            appear: getClassName('bpk-animate-and-fade--appear'),
-            appearActive: getClassName('bpk-animate-and-fade--appear-active')
-          },
-          timeout: {
-            enter: ANIMATION_DURATION * 2,
-            exit: ANIMATION_DURATION * 2
+      children: /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+        onAnimationComplete: this.onAnimateHeightComplete,
+        duration: ANIMATION_DURATION,
+        height: this.state.isExpanded ? 'auto' : 0,
+        children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+          style: {
+            opacity: 0.35
           },
           children: children
-        })
-      })]
+        }), /*#__PURE__*/_jsx(TransitionGroup, {
+          exit: animateOnLeave,
+          enter: animateOnEnter,
+          appear: animateOnEnter,
+          onTransitionEnd: this.onFadeComplete,
+          children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
+            classNames: {
+              exit: getClassName('bpk-animate-and-fade--leave'),
+              exitActive: getClassName('bpk-animate-and-fade--leave-active'),
+              enter: getClassName('bpk-animate-and-fade--enter'),
+              enterActive: getClassName('bpk-animate-and-fade--enter-active'),
+              appear: getClassName('bpk-animate-and-fade--appear'),
+              appearActive: getClassName('bpk-animate-and-fade--appear-active')
+            },
+            timeout: {
+              enter: ANIMATION_DURATION * 2,
+              exit: ANIMATION_DURATION * 2
+            },
+            children: children
+          })
+        })]
+      })
     }) : null;
   }
 }

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

@@ -22,17 +22,18 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { withButtonAlignment } from "../../bpk-component-icon";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
+import { withButtonAlignment } from "../../bpk-component-icon";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import ChevronDownIcon from "../../bpk-component-icon/lg/chevron-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES } from "./common-types";
@@ -63,6 +64,9 @@ const getIconForType = (type, CustomIcon) => {
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
+
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
   return /*#__PURE__*/_jsx(AlignedIcon, {
     className: className
   });
@@ -78,7 +82,10 @@ const ToggleButton = props => {
     "aria-label": props.label,
     "aria-expanded": props.expanded,
     title: props.label,
-    children: /*#__PURE__*/_jsx(ExpandIcon, {
+    children: /*#__PURE__*/_jsx(ExpandIcon
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: classNames.join(' ')
     })
   });

package/bpk-component-barchart/src/BpkBarchart.js

@@ -16,22 +16,22 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Component } from 'react';
-import debounce from 'lodash.debounce';
 import { scaleLinear, scaleBand } from 'd3-scale';
+import debounce from 'lodash.debounce';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
-import BpkBarchartDefs from "./BpkBarchartDefs";
+import { cssModules } from "../../bpk-react-utils";
+import BpkBarchartBar from "./BpkBarchartBar";
 import BpkBarchartBars from "./BpkBarchartBars";
-import BpkChartDataTable from "./BpkChartDataTable";
-import BpkChartMargin from "./BpkChartMargin";
+import BpkBarchartDefs from "./BpkBarchartDefs";
 import BpkChartAxis from "./BpkChartAxis";
+import BpkChartDataTable from "./BpkChartDataTable";
 import BpkChartGridLines from "./BpkChartGridLines";
-import BpkBarchartBar from "./BpkBarchartBar";
-import dataProp from "./customPropTypes";
-import { identity, remToPx } from "./utils";
+import BpkChartMargin from "./BpkChartMargin";
 import { applyArrayRTLTransform, applyMarginRTLTransform } from "./RTLtransforms";
+import dataProp from "./customPropTypes";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
+import { identity, remToPx } from "./utils";
 import STYLES from "./BpkBarchart.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -19,12 +19,12 @@
 import { useState } from "react";
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkButtonLink } from "../../bpk-component-link";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkBottomSheet.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -15,11 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
+import { withRtlSupport } from "../../bpk-component-icon";
+import ArrowRight from "../../bpk-component-icon/sm/arrow-right";
 import BpkLink from "../../bpk-component-link";
 import BpkText from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import { withRtlSupport } from "../../bpk-component-icon";
-import ArrowRight from "../../bpk-component-icon/sm/arrow-right";
 import STYLES from "./BpkBreadcrumbItem.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -42,21 +42,26 @@ const BpkBreadcrumbItem = props => {
       children: [active ?
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkText, {
+      _jsx("div", {
         className: getClassName('bpk-breadcrumb-item__active-item'),
-        "aria-current": "page",
-        ...linkProps,
-        children: children
+        children: /*#__PURE__*/_jsx(BpkText, {
+          "aria-current": "page",
+          ...linkProps,
+          children: children
+        })
       }) :
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkLink, {
-        href: href,
+      _jsx("div", {
         className: getClassName('bpk-breadcrumb-item__link'),
-        ...linkProps,
-        children: children
-      }), !active && /*#__PURE__*/_jsx(RtlSupportedArrowRight, {
-        className: getClassName('bpk-breadcrumb-item__arrow')
+        children: /*#__PURE__*/_jsx(BpkLink, {
+          href: href,
+          ...linkProps,
+          children: children
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-breadcrumb-item__arrow'),
+        children: !active && /*#__PURE__*/_jsx(RtlSupportedArrowRight, {})
       })]
     })
   );

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#626971}.bpk-breadcrumb-item__arrow{margin:0 .25rem;fill:rgba(0,0,0,.2)}
+.bpk-breadcrumb-item{display:flex;align-items:center;white-space:nowrap}.bpk-breadcrumb-item__link{margin:0}.bpk-breadcrumb-item__active-item{color:#626971}.bpk-breadcrumb-item__arrow{margin:0 .25rem;line-height:.5rem;fill:rgba(0,0,0,.2)}

package/bpk-component-button/index.js

@@ -15,16 +15,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkButton from "./src/BpkButton"; // eslint-disable-line import/no-cycle
-import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
+import BpkButtonDestructive from "./src/BpkButtonDestructive";
+import BpkButtonFeatured from "./src/BpkButtonFeatured";
+import BpkButtonLink from "./src/BpkButtonLink";
+import BpkButtonLinkOnDark from "./src/BpkButtonLinkOnDark";
 import BpkButtonPrimary from "./src/BpkButtonPrimary";
 import BpkButtonPrimaryOnDark from "./src/BpkButtonPrimaryOnDark";
 import BpkButtonPrimaryOnLight from "./src/BpkButtonPrimaryOnLight";
 import BpkButtonSecondary from "./src/BpkButtonSecondary";
 import BpkButtonSecondaryOnDark from "./src/BpkButtonSecondaryOnDark";
-import BpkButtonDestructive from "./src/BpkButtonDestructive";
-import BpkButtonLink from "./src/BpkButtonLink";
-import BpkButtonLinkOnDark from "./src/BpkButtonLinkOnDark";
-import BpkButtonFeatured from "./src/BpkButtonFeatured";
+import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
 export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButtonV2/common-types";
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./themeAttributes";
 export default BpkButton;

package/bpk-component-button/src/BpkButtonDestructive.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonDestructive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonDestructive = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonDestructive.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonFeatured.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonFeatured.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonFeatured = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonFeatured.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonLink.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -33,15 +33,16 @@ const BpkButtonLink = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal,
+    large: large
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      large: large,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonLink.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonLinkOnDark.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonLinkOnDark.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -33,15 +33,16 @@ const BpkButtonLinkOnDark = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal,
+    large: large
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      large: large,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonLinkOnDark.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonPrimary.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase from "./BpkButtonBase";
+ */import BpkButtonBase from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 
 // TODO: BpkButtonBase has the primary button style as it wasn't removed to
 // avoid a breaking change in the mixin. Review after this is tested.

package/bpk-component-button/src/BpkButtonPrimaryOnDark.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonPrimaryOnDark.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonPrimaryOnDark = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonPrimaryOnDark.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonPrimaryOnLight.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonPrimaryOnLight.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonPrimaryOnLight = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonPrimaryOnLight.propTypes = {
   ...propTypes

package/bpk-component-button/src/BpkButtonSecondary.js

@@ -14,8 +14,8 @@
  * 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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonSecondary.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,14 @@ const BpkButtonSecondary = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
+    ...rest
+  });
 };
 BpkButtonSecondary.propTypes = {
   ...propTypes