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

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{position:absolute;width:1.5rem;height:1.5rem;transform:rotate(45deg);border:.0625rem solid rgba(0,0,0,0);background:inherit}.bpk-popover-portal[data-popper-placement=top] .bpk-popover__arrow{bottom:-0.6875rem;border-right-color:#e0e4e9;border-bottom-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=right] .bpk-popover__arrow{left:-0.6875rem;border-bottom-color:#e0e4e9;border-left-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=bottom] .bpk-popover__arrow{top:-0.6875rem;border-top-color:#e0e4e9;border-left-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=left] .bpk-popover__arrow{right:-0.6875rem;border-top-color:#e0e4e9;border-right-color:#e0e4e9}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__close-button{float:right}html[dir=rtl] .bpk-popover__close-button{float:left}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}
+.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}

package/bpk-component-popover/src/themeAttributes.js

@@ -14,5 +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 { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

package/bpk-component-price/src/BpkPrice.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import { SIZES, ALIGNS } from "./common-types";
 import STYLES from "./BpkPrice.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,14 +42,20 @@ const BpkPrice = props => {
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
       className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right', leadingClassName),
-      children: [previousPrice && /*#__PURE__*/_jsx(BpkText, {
+      children: [previousPrice && /*#__PURE__*/_jsx(BpkText
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: getClassName('bpk-price__previous-price'),
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
         tagName: "span",
         children: previousPrice
       }), previousPrice && leadingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__separator'),
         children: "\uD802\uDD1F"
       }), leadingText && /*#__PURE__*/_jsx(BpkText, {
@@ -60,13 +66,19 @@ const BpkPrice = props => {
     }), /*#__PURE__*/_jsxs("div", {
       className: getClassName(isAlignRight && 'bpk-price__column-container'),
       children: [/*#__PURE__*/_jsx(BpkText, {
-        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
+        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
         tagName: "span",
         children: price
       }), trailingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__trailing'),
         children: trailingText
       })]

package/bpk-component-rating/src/BpkRating.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
 import STYLES from "./BpkRating.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -79,11 +79,17 @@ const BpkRating = props => {
       ...rest,
       children: [/*#__PURE__*/_jsxs(BpkText, {
         textStyle: valueTextSize,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: valueStyles,
         "aria-hidden": "true",
         children: [adjustedValue, showScale && /*#__PURE__*/_jsxs(BpkText, {
-          textStyle: scaleTextSize,
+          textStyle: scaleTextSize
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: scaleStyles,
           tagName: "span",
           "aria-hidden": "true",
@@ -92,12 +98,18 @@ const BpkRating = props => {
       }), /*#__PURE__*/_jsxs("div", {
         className: textWrapperStyles,
         children: [title && /*#__PURE__*/_jsx(BpkText, {
-          textStyle: titleTextSize,
+          textStyle: titleTextSize
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: titleStyles,
           tagName: "span",
           "aria-hidden": "true",
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        }), subtitle && /*#__PURE__*/_jsx(BpkText
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: subtitleStyles,
           textStyle: subtitleTextSize,
           tagName: "span",

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -66,7 +66,10 @@ class BpkRtlToggle extends Component {
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
     return /*#__PURE__*/_jsxs(BpkButtonLink, {
       title: "Keyboard Shortcut: ctrl + cmd + r",
-      onClick: this.toggleRtl,
+      onClick: this.toggleRtl
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: className,
       children: ["RTL ", onOrOff]
     });

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { BpkCalendarGrid } from "../../bpk-component-calendar";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkScrollableCalendarGrid.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,7 +32,10 @@ const BpkScrollableCalendarGrid = ({
   const classNames = getClassName('bpk-scrollable-calendar-grid', className);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [/*#__PURE__*/_jsx(BpkText, {
+    children: [/*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
       tagName: "h1",
       textStyle: TEXT_STYLES.heading4,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -18,10 +18,10 @@
 
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
-import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { cssModules } from "../../bpk-react-utils";
+import { VariableSizeList as List } from 'react-window';
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
+import { cssModules } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
@@ -82,7 +82,10 @@ const BpkScrollableCalendarGridList = props => {
       month: months[index],
       focusedDate: focusedDate,
       preventKeyboardFocus: rest.preventKeyboardFocus,
-      "aria-hidden": index !== 1,
+      "aria-hidden": index !== 1
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-scrollable-calendar-grid-list__item')
     })
   });

package/bpk-component-section-header/src/BpkSectionHeader.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
 import BpkText from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionHeader.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -35,10 +35,16 @@ const BpkSectionHeader = ({
   children: [/*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-section-header__title-description', `bpk-section-header__title-description--${type}`),
     children: [/*#__PURE__*/_jsx(BpkText, {
-      tagName: "h2",
+      tagName: "h2"
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-section-header__title'),
       children: title
-    }), description && /*#__PURE__*/_jsx(BpkText, {
+    }), description && /*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-section-header__description'),
       children: description
     })]

package/bpk-component-section-list/index.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkSectionList from "./src/BpkSectionList";
-import BpkSectionListSection from "./src/BpkSectionListSection";
 import BpkSectionListItem from "./src/BpkSectionListItem";
+import BpkSectionListSection from "./src/BpkSectionListSection";
 export default BpkSectionList;
 export { BpkSectionListSection, BpkSectionListItem };

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -15,9 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
-import BpkLargeChevronRightIcon from "../../bpk-component-icon/lg/chevron-right";
 import { withRtlSupport } from "../../bpk-component-icon";
+import BpkLargeChevronRightIcon from "../../bpk-component-icon/lg/chevron-right";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionListItem.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BpkLargeChevronRightIconWithRtlSupport = withRtlSupport(BpkLargeChevronRightIcon);
@@ -43,7 +43,10 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {
+        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: getClassName('bpk-section-list-item__chevron')
         })]
       })
@@ -58,7 +61,10 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {
+        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: getClassName('bpk-section-list-item__chevron')
         })]
       })

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Children } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionListSection.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-slider/src/BpkSlider.js

@@ -44,7 +44,10 @@ const BpkSlider = props => {
     ...rest,
     withTracks: true,
     snapDragDisabled: false,
-    invert: invert,
+    invert: invert
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: classNames.join(' '),
     thumbClassName: thumbClassNames.join(' '),
     thumbActiveClassName: getClassName('bpk-slider__handle--active'),

package/bpk-component-spinner/index.js

@@ -14,9 +14,9 @@
  * 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 BpkSpinner from "./src/BpkSpinner";
-import SPINNER_TYPES from "./src/spinnerTypes";
+ */import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
 import BpkLargeSpinner from "./src/BpkLargeSpinner";
-import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
+import BpkSpinner from "./src/BpkSpinner";
+import SPINNER_TYPES from "./src/spinnerTypes";
 import themeAttributes from "./src/themeAttributes";
 export { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES, themeAttributes };

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -86,10 +86,13 @@ const BpkExtraLargeSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(XlSpinner, {
-    className: classNames,
+  return /*#__PURE__*/_jsx(XlSpinner
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
     ...rest
   });
 };

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -87,10 +87,13 @@ const BpkLargeSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(LgSpinner, {
-    className: classNames,
+  return /*#__PURE__*/_jsx(LgSpinner
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
     ...rest
   });
 };

package/bpk-component-spinner/src/BpkSpinner.js

@@ -74,10 +74,13 @@ const BpkSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(SmSpinner, {
-    className: classNames,
+  return /*#__PURE__*/_jsx(SmSpinner
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    ,
     ...rest
   });
 };

package/bpk-component-split-input/src/BpkInputField.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 { Component } from 'react';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkInputField.module.css";

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -14,10 +14,10 @@
  * 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 { Component } from 'react';
-import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
+import { cssModules } from "../../bpk-react-utils";
 import InputField from "./BpkInputField";
 import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-star-rating/index.js

@@ -14,11 +14,11 @@
  * 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 BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
-import BpkInteractiveStar from "./src/BpkInteractiveStar";
-import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
+ */import BpkInteractiveStar from "./src/BpkInteractiveStar";
 import BpkInteractiveStarRating from "./src/BpkInteractiveStarRating";
-import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
+import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
+import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
 import themeAttributes from "./src/themeAttributes";
+import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
 export { BpkStar, BpkStarNonRtl, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStar, BpkInteractiveStarRating, withInteractiveStarRatingState, themeAttributes };
 export default BpkStarRating;

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -44,9 +44,13 @@ const BpkInteractiveStar = props => {
     className: buttonClassNames,
     "aria-pressed": selected,
     type: "button",
-    children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
+    children: /*#__PURE__*/_jsx(BpkStarNonRtl
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: iconClassNames,
-      type: type,
+      type: type
+      /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */,
       ...rest
     })
   });

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import { STAR_TYPES } from "./BpkStar";
 import BpkInteractiveStar from "./BpkInteractiveStar";
+import { STAR_TYPES } from "./BpkStar";
 import STYLES from "./BpkStarRating.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-star-rating/src/BpkStar.js

@@ -15,13 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import SmallIcon from "../../bpk-component-icon/sm/star";
+import { withRtlSupport } from "../../bpk-component-icon";
 import LargeIcon from "../../bpk-component-icon/lg/star";
-import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
+import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
 import OutlineLargeIcon from "../../bpk-component-icon/lg/star-outline";
+import SmallIcon from "../../bpk-component-icon/sm/star";
 import HalfSmallIcon from "../../bpk-component-icon/sm/star-half";
-import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
-import { withRtlSupport } from "../../bpk-component-icon";
+import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkStar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -56,23 +56,30 @@ const BpkStar = props => {
       _jsx("span", {
         className: containerClassNames,
         ...rest,
-        children: /*#__PURE__*/_jsx(HalfIcon, {
+        children: /*#__PURE__*/_jsx(HalfIcon
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: halfIconClassNames
         })
       })
     );
   }
-  return type === STAR_TYPES.FULL ?
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-  _jsx(Icon, {
-    className: iconClassNames,
+  return type === STAR_TYPES.FULL ? /*#__PURE__*/_jsx(Icon
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: iconClassNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+    ,
     ...rest
-  }) :
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-  _jsx(OutlineIcon, {
-    className: iconClassNames,
+  }) : /*#__PURE__*/_jsx(OutlineIcon
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: iconClassNames
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+    ,
     ...rest
   });
 };

package/bpk-component-swap-button/src/BpkSwapButton.js

@@ -17,9 +17,10 @@
  */
 
 import { useState } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSwapButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-table/index.js

@@ -15,9 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkTable from "./src/BpkTable";
-import BpkTableHead from "./src/BpkTableHead";
 import BpkTableBody from "./src/BpkTableBody";
-import BpkTableRow from "./src/BpkTableRow";
 import BpkTableCell from "./src/BpkTableCell";
+import BpkTableHead from "./src/BpkTableHead";
 import BpkTableHeadCell from "./src/BpkTableHeadCell";
+import BpkTableRow from "./src/BpkTableRow";
 export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell };

package/bpk-component-text/src/BpkText.js

@@ -57,10 +57,15 @@ const BpkText = ({
   ...rest
 }) => {
   const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
-  return /*#__PURE__*/_jsx(TagName, {
-    className: classNames,
-    ...rest,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    // Allowed, TagName is always a dom element.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(TagName, {
+      className: classNames,
+      ...rest,
+      children: children
+    })
+  );
 };
 export default BpkText;

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -81,7 +81,10 @@ class BpkThemeToggle extends Component {
     } = this.props;
     return /*#__PURE__*/_jsxs("div", {
       ...rest,
-      children: [/*#__PURE__*/_jsx(BpkLabel, {
+      children: [/*#__PURE__*/_jsx(BpkLabel
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: getClassName('bpk-theme-toggle__label'),
         htmlFor: inputId,
         children: "Change theme"

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { wrapDisplayName } from "../../bpk-react-utils";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -137,7 +137,10 @@ class BpkTooltipPortal extends Component {
         onOpen: this.onOpen,
         onClose: this.closeTooltip,
         style: portalStyle,
-        renderTarget: renderTarget,
+        renderTarget: renderTarget
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: classNames.join(' '),
         children: /*#__PURE__*/_jsx(BpkTooltip, {
           padded: padded,

package/bpk-mixins/_chips.scss

@@ -237,4 +237,13 @@
     color: $bpk-text-disabled-day;
     cursor: not-allowed;
   }
+
+  &--icon-only {
+    padding-inline-end: bpk-spacing-md();
+    padding-inline-start: bpk-spacing-md();
+
+    &__leading-accessory-view {
+      @include bpk-margin-trailing(0);
+    }
+  }
 }

package/bpk-react-utils/index.js

@@ -16,16 +16,16 @@
  * limitations under the License.
  */
 
-import wrapDisplayName from "./src/wrapDisplayName";
+import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
 import Portal from "./src/Portal";
 import TransitionInitialMount from "./src/TransitionInitialMount";
 import cssModules from "./src/cssModules";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import deprecated from "./src/deprecated";
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
-import withDefaultProps from "./src/withDefaultProps";
 import isRTL from "./src/isRTL";
-import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
+import withDefaultProps from "./src/withDefaultProps";
+import wrapDisplayName from "./src/wrapDisplayName";
 export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
 export default {
   Portal,

package/bpk-react-utils/src/withDefaultProps.js

@@ -35,7 +35,10 @@ const withDefaultProps = (WrappedComponent, defaultProps) => {
     if (innerClassName) {
       classNames.push(innerClassName);
     }
-    return /*#__PURE__*/_jsx(WrappedComponent, {
+    return /*#__PURE__*/_jsx(WrappedComponent
+    // General HOC difficult/impossible to remove
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: classNames.join(' '),
       ...defaultRest,
       ...rest,