@skyscanner/backpack-web 42.8.0 → 42.9.0-dev-v24441922940.1

package/bpk-component-calendar/src/BpkCalendarNav.d.ts

@@ -1,5 +1,5 @@
 import type { ChangeEvent, MouseEvent } from 'react';
-type MonthChangeEvent = ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>;
+type MonthChangeEvent = ChangeEvent<HTMLSelectElement> | MouseEvent<HTMLButtonElement>;
 type Props = {
     changeMonthLabel: string;
     /**

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

@@ -20,7 +20,6 @@ import { textColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkAriaLive from "../../bpk-component-aria-live";
 import ArrowLeftIcon from "../../bpk-component-icon/lg/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/lg/arrow-right";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { addMonths, formatIsoMonth, getMonthRange, getMonthsInRange, isWithinRange, parseIsoDate, startOfMonth } from "./date-utils";

package/bpk-component-comparison-table/index.d.ts

@@ -0,0 +1,3 @@
+import BpkComparisonTray from './src/BpkComparisonTray/BpkComparisonTray';
+export type { BpkComparisonItem, BpkComparisonTrayRootProps, BpkComparisonTrayItemProps, BpkComparisonTrayNamespace, } from './src/BpkComparisonTray/common-types';
+export default BpkComparisonTray;

package/bpk-component-comparison-table/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkComparisonTray from "./src/BpkComparisonTray/BpkComparisonTray";
+export default BpkComparisonTray;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.d.ts

@@ -0,0 +1,18 @@
+import type { BpkComparisonTrayNamespace } from './common-types';
+/**
+ * BpkComparisonTray is a data-driven tray component for comparing up to 3 items.
+ *
+ * Consumer usage — only `Root` is the public API:
+ *
+ * @example
+ * <BpkComparisonTray.Root
+ *   items={items}
+ *   onRemove={(id) => setItems(items.filter(item => item.id !== id))}
+ *   onCompare={() => navigate('/compare')}
+ * />
+ *
+ * `Item` and `ItemPlaceholder` are internal rendering primitives exported for
+ * testing and extension purposes only.
+ */
+declare const BpkComparisonTray: BpkComparisonTrayNamespace;
+export default BpkComparisonTray;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.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 BpkComparisonTrayItem from "./BpkComparisonTrayItem";
+import BpkComparisonTrayItemPlaceholder from "./BpkComparisonTrayItemPlaceholder";
+import BpkComparisonTrayRoot from "./BpkComparisonTrayRoot";
+/**
+ * BpkComparisonTray is a data-driven tray component for comparing up to 3 items.
+ *
+ * Consumer usage — only `Root` is the public API:
+ *
+ * @example
+ * <BpkComparisonTray.Root
+ *   items={items}
+ *   onRemove={(id) => setItems(items.filter(item => item.id !== id))}
+ *   onCompare={() => navigate('/compare')}
+ * />
+ *
+ * `Item` and `ItemPlaceholder` are internal rendering primitives exported for
+ * testing and extension purposes only.
+ */
+const BpkComparisonTray = {
+  Root: BpkComparisonTrayRoot,
+  Item: BpkComparisonTrayItem,
+  ItemPlaceholder: BpkComparisonTrayItemPlaceholder
+};
+export default BpkComparisonTray;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-comparison-tray{width:22.1875rem;max-width:100%}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}@media(max-width: 32rem){.bpk-comparison-tray__item{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:absolute;top:0;right:0;display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translate(50%, -50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;position:relative;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}@media(max-width: 32rem){.bpk-comparison-tray__item-placeholder{width:auto;min-width:0;flex:1}}

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTrayItemProps } from './common-types';
+declare function BpkComparisonTrayItem({ item, onRemove, removeLabel }: BpkComparisonTrayItemProps): import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTrayItem;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.js

@@ -0,0 +1,48 @@
+/*
+ * 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 CloseIcon from "../../../bpk-component-icon/sm/close";
+import BpkImage from "../../../bpk-component-image";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTray.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+function BpkComparisonTrayItem({
+  item,
+  onRemove,
+  removeLabel
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-comparison-tray__item'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-comparison-tray__item-image-container'),
+      children: /*#__PURE__*/_jsx(BpkImage, {
+        src: item.image,
+        altText: item.imageAlt ?? item.label,
+        aspectRatio: 62 / 28
+      })
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: getClassName('bpk-comparison-tray__item-close'),
+      "aria-label": removeLabel,
+      onClick: () => onRemove(item.id),
+      children: /*#__PURE__*/_jsx(CloseIcon, {})
+    })]
+  });
+}
+export default BpkComparisonTrayItem;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.d.ts

@@ -0,0 +1,2 @@
+declare function BpkComparisonTrayItemPlaceholder(): import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTrayItemPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.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.
+ */
+
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTray.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+function BpkComparisonTrayItemPlaceholder() {
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-tray__item-placeholder'),
+    "aria-hidden": "true"
+  });
+}
+export default BpkComparisonTrayItemPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTrayRootProps } from './common-types';
+declare function BpkComparisonTrayRoot({ ariaLabel, compareLabel, items, onCompare, onRemove, removeLabel, }: BpkComparisonTrayRootProps): import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTrayRoot;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.js

@@ -0,0 +1,75 @@
+/*
+ * 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 BpkButton, { BUTTON_TYPES } from "../../../bpk-component-button";
+import { BpkCardV2, CARD_V2_SURFACE_COLORS } from "../../../bpk-component-card";
+import { BpkSpacing } from "../../../bpk-component-layout";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import BpkComparisonTrayItem from "./BpkComparisonTrayItem";
+import BpkComparisonTrayItemPlaceholder from "./BpkComparisonTrayItemPlaceholder";
+import STYLES from "./BpkComparisonTray.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const MAX_ITEMS = 3;
+function BpkComparisonTrayRoot({
+  ariaLabel,
+  compareLabel,
+  items,
+  onCompare,
+  onRemove,
+  removeLabel
+}) {
+  const displayItems = Array.from({
+    length: MAX_ITEMS
+  }, (_value, index) => items[index] ?? null);
+  return /*#__PURE__*/_jsx("div", {
+    ...getDataComponentAttribute('ComparisonTray'),
+    className: getClassName('bpk-comparison-tray'),
+    children: /*#__PURE__*/_jsx(BpkCardV2.Root, {
+      bgColor: CARD_V2_SURFACE_COLORS.surfaceContrast,
+      role: "region",
+      "aria-label": ariaLabel,
+      children: /*#__PURE__*/_jsxs(BpkCardV2.Body, {
+        templateColumns: "1fr auto",
+        align: "center",
+        gap: BpkSpacing.Base,
+        children: [/*#__PURE__*/_jsx(BpkCardV2.Section, {
+          flexDirection: "row",
+          alignItems: "center",
+          padding: BpkSpacing.None,
+          gap: BpkSpacing.MD,
+          children: displayItems.map((item, index) => item ? /*#__PURE__*/_jsx(BpkComparisonTrayItem, {
+            item: item,
+            onRemove: onRemove,
+            removeLabel: `${removeLabel} ${item.label}`
+          }, item.id) :
+          /*#__PURE__*/
+          // eslint-disable-next-line react/no-array-index-key
+          _jsx(BpkComparisonTrayItemPlaceholder, {}, `placeholder-${index}`))
+        }), /*#__PURE__*/_jsx(BpkButton, {
+          type: BUTTON_TYPES.linkOnDark,
+          implicit: true,
+          disabled: items.length <= 1,
+          onClick: onCompare,
+          children: compareLabel
+        })]
+      })
+    })
+  });
+}
+export default BpkComparisonTrayRoot;

package/bpk-component-comparison-table/src/BpkComparisonTray/common-types.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+/** A single item to be displayed in the ComparisonTray. */
+export type BpkComparisonItem = {
+    /** Stable unique identifier used for removal. */
+    id: string;
+    /** Accessible label for the item (used as image alt if imageAlt is not provided). */
+    label: string;
+    /** Image src URL. */
+    image: string;
+    /** Alt text for the image. Defaults to `label` if not provided. */
+    imageAlt?: string;
+};
+/** Props for BpkComparisonTray.Root — the only consumer-facing API. */
+export type BpkComparisonTrayRootProps = {
+    /** Up to 3 items to display. Consumer owns and manages this state. */
+    items: BpkComparisonItem[];
+    /** Called when the ✕ button on an item is clicked, with the item's id. */
+    onRemove: (id: string) => void;
+    /** Called when the Compare button is clicked. */
+    onCompare: () => void;
+    /** Label for the Compare button. */
+    compareLabel: string;
+    /** Accessible label for the tray region. */
+    ariaLabel: string;
+    /** Accessible label for the remove button (e.g. "Remove"). Composed with the item label internally. */
+    removeLabel: string;
+};
+/** Props for BpkComparisonTray.Item — internal use only. */
+export type BpkComparisonTrayItemProps = {
+    item: BpkComparisonItem;
+    onRemove: (id: string) => void;
+    removeLabel: string;
+};
+/** Namespace type covering all BpkComparisonTray subcomponents. */
+export type BpkComparisonTrayNamespace = {
+    Root: {
+        (props: BpkComparisonTrayRootProps): ReactNode;
+        displayName?: string;
+    };
+    Item: {
+        (props: BpkComparisonTrayItemProps): ReactNode;
+        displayName?: string;
+    };
+    ItemPlaceholder: {
+        (): ReactNode;
+        displayName?: string;
+    };
+};

package/bpk-component-comparison-table/src/BpkComparisonTray/common-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -18,9 +18,24 @@
 
 import { defineConfig } from '@chakra-ui/react';
 
-// Import tokens from Backpack foundations
-// Note: Some tokens may not be in TypeScript definitions but exist at runtime
-import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+// Import only the tokens we actually use from Backpack foundations
+import {
+// Border sizes
+borderSizeSm, borderSizeLg, borderSizeXl,
+// Border radii
+borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
+// Box shadows
+boxShadowSm, boxShadowLg, boxShadowXl,
+// Font sizes
+fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl,
+// Line heights
+lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl,
+// Font weights
+fontWeightLight, fontWeightBook, fontWeightBold, fontWeightBlack,
+// Letter spacing
+letterSpacingTight, letterSpacingHero,
+// Font family
+fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
@@ -100,9 +115,9 @@ const spacingMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const borderSizeMap = {
-  'bpk-border-size-sm': bpkTokens.borderSizeSm,
-  'bpk-border-size-lg': bpkTokens.borderSizeLg,
-  'bpk-border-size-xl': bpkTokens.borderSizeXl
+  'bpk-border-size-sm': borderSizeSm,
+  'bpk-border-size-lg': borderSizeLg,
+  'bpk-border-size-xl': borderSizeXl
 };
 
 /**
@@ -111,12 +126,12 @@ const borderSizeMap = {
  */
 const borderRadiusMap = {
   'bpk-border-radius-none': '0',
-  'bpk-border-radius-xs': bpkTokens.borderRadiusXs,
-  'bpk-border-radius-sm': bpkTokens.borderRadiusSm,
-  'bpk-border-radius-md': bpkTokens.borderRadiusMd,
-  'bpk-border-radius-lg': bpkTokens.borderRadiusLg,
-  'bpk-border-radius-xl': bpkTokens.borderRadiusXl,
-  'bpk-border-radius-full': bpkTokens.borderRadiusFull
+  'bpk-border-radius-xs': borderRadiusXs,
+  'bpk-border-radius-sm': borderRadiusSm,
+  'bpk-border-radius-md': borderRadiusMd,
+  'bpk-border-radius-lg': borderRadiusLg,
+  'bpk-border-radius-xl': borderRadiusXl,
+  'bpk-border-radius-full': borderRadiusFull
 };
 
 /**
@@ -124,9 +139,9 @@ const borderRadiusMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const shadowMap = {
-  'bpk-shadow-sm': bpkTokens.boxShadowSm,
-  'bpk-shadow-lg': bpkTokens.boxShadowLg,
-  'bpk-shadow-xl': bpkTokens.boxShadowXl
+  'bpk-shadow-sm': boxShadowSm,
+  'bpk-shadow-lg': boxShadowLg,
+  'bpk-shadow-xl': boxShadowXl
 };
 
 /**
@@ -218,230 +233,230 @@ export function getShadowValue(token) {
 const textStylesMap = {
   xs: {
     value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXs,
+      lineHeight: lineHeightXs,
+      fontWeight: fontWeightBook
     }
   },
   sm: {
     value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeSm,
+      lineHeight: lineHeightSm,
+      fontWeight: fontWeightBook
     }
   },
   base: {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBase,
+      fontWeight: fontWeightBook
     }
   },
   lg: {
     value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLg,
+      fontWeight: fontWeightBook
     }
   },
   xl: {
     value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXl,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXl,
+      lineHeight: lineHeightXl,
+      fontWeight: fontWeightBook
     }
   },
   xxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightBold
     }
   },
   xxxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxxl,
+      lineHeight: lineHeightXxxl,
+      fontWeight: fontWeightBold
     }
   },
   xxxxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxl,
-      fontWeight: bpkTokens.fontWeightBold,
-      letterSpacing: bpkTokens.letterSpacingTight
+      fontSize: fontSizeXxxxl,
+      lineHeight: lineHeightXxxxl,
+      fontWeight: fontWeightBold,
+      letterSpacing: letterSpacingTight
     }
   },
   xxxxxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxxl,
-      fontWeight: bpkTokens.fontWeightBold,
-      letterSpacing: bpkTokens.letterSpacingTight
+      fontSize: fontSizeXxxxxl,
+      lineHeight: lineHeightXxxxxl,
+      fontWeight: fontWeightBold,
+      letterSpacing: letterSpacingTight
     }
   },
   caption: {
     value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXs,
+      lineHeight: lineHeightXs,
+      fontWeight: fontWeightBook
     }
   },
   footnote: {
     value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeSm,
+      lineHeight: lineHeightSm,
+      fontWeight: fontWeightBook
     }
   },
   'label-1': {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBase,
+      fontWeight: fontWeightBold
     }
   },
   'label-2': {
     value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeSm,
+      lineHeight: lineHeightSm,
+      fontWeight: fontWeightBold
     }
   },
   'label-3': {
     value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXs,
+      lineHeight: lineHeightXs,
+      fontWeight: fontWeightBold
     }
   },
   'body-default': {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBase,
+      fontWeight: fontWeightBook
     }
   },
   'body-longform': {
     value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLg,
+      fontWeight: fontWeightBook
     }
   },
   subheading: {
     value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXl,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXl,
+      lineHeight: lineHeightXl,
+      fontWeight: fontWeightBook
     }
   },
   'heading-1': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxxl,
+      lineHeight: lineHeightXxxl,
+      fontWeight: fontWeightBold
     }
   },
   'heading-2': {
     value: {
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightBold
     }
   },
   'heading-3': {
     value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXlTight,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXl,
+      lineHeight: lineHeightXlTight,
+      fontWeight: fontWeightBold
     }
   },
   'heading-4': {
     value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLgTight,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLgTight,
+      fontWeight: fontWeightBold
     }
   },
   'heading-5': {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBaseTight,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBaseTight,
+      fontWeight: fontWeightBold
     }
   },
   'hero-1': {
     value: {
-      fontSize: bpkTokens.fontSize8Xl,
-      lineHeight: bpkTokens.lineHeight8Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSize8Xl,
+      lineHeight: lineHeight8Xl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-2': {
     value: {
-      fontSize: bpkTokens.fontSize7Xl,
-      lineHeight: bpkTokens.lineHeight7Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSize7Xl,
+      lineHeight: lineHeight7Xl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-3': {
     value: {
-      fontSize: bpkTokens.fontSize6Xl,
-      lineHeight: bpkTokens.lineHeight6Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSize6Xl,
+      lineHeight: lineHeight6Xl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-4': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSizeXxxxxl,
+      lineHeight: lineHeightXxxxxl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-5': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSizeXxxxl,
+      lineHeight: lineHeightXxxl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-6': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSizeXxxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'editorial-1': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxl,
-      fontWeight: bpkTokens.fontWeightLight
+      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+      fontSize: fontSizeXxxxl,
+      lineHeight: lineHeightXxxxl,
+      fontWeight: fontWeightLight
     }
   },
   'editorial-2': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightLight
+      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+      fontSize: fontSizeXxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightLight
     }
   },
   'editorial-3': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
+      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLg,
+      fontWeight: fontWeightBook
     }
   }
 };

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

@@ -0,0 +1,5 @@
+import BpkSelect, { type Props } from './src/BpkSelect';
+import themeAttributes from './src/themeAttributes';
+export type BpkSelectProps = Props;
+export default BpkSelect;
+export { themeAttributes };

package/bpk-component-select/index.js

@@ -14,7 +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 BpkSelect from "./src/BpkSelect";
+ */
+
+import BpkSelect from "./src/BpkSelect";
 import themeAttributes from "./src/themeAttributes";
 export default BpkSelect;
 export { themeAttributes };

package/bpk-component-select/src/BpkSelect.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement, SelectHTMLAttributes } from 'react';
+export type Props = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className' | 'disabled' | 'value'> & {
+    id: string;
+    name: string;
+    value?: string;
+    className?: string | null;
+    disabled?: boolean;
+    docked?: boolean;
+    dockedFirst?: boolean;
+    dockedLast?: boolean;
+    dockedMiddle?: boolean;
+    image?: ReactElement | null;
+    large?: boolean;
+    valid?: boolean | null;
+    wrapperClassName?: string | null;
+};
+declare const BpkSelect: ({ className, disabled, docked, dockedFirst, dockedLast, dockedMiddle, image, large, valid, wrapperClassName, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkSelect;

package/bpk-component-select/src/BpkSelect.js

@@ -14,7 +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 PropTypes from 'prop-types';
+ */
+
 import { cloneElement } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSelect.module.css";
@@ -36,10 +37,7 @@ const BpkSelect = ({
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
-  const select =
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  _jsx("select", {
+  const select = /*#__PURE__*/_jsx("select", {
     className: getClassName('bpk-select', large && 'bpk-select--large', docked && 'bpk-select--docked', dockedFirst && 'bpk-select--docked-first', dockedMiddle && 'bpk-select--docked-middle', dockedLast && 'bpk-select--docked-last', isInvalid && 'bpk-select--invalid', image && 'bpk-select--with-image', image && large && 'bpk-select--with-image-large', className),
     disabled: disabled,
     "aria-invalid": isInvalid,
@@ -56,27 +54,4 @@ const BpkSelect = ({
   }
   return select;
 };
-BpkSelect.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  /**
-   * The "value" prop is only relevant if the user is wanting a controlled component
-   * In some cases, users may want to create an uncontrolled select as described here: https://beta.reactjs.org/reference/react-dom/components/select
-   * In this case value is not required and nor should it be given a default value (as the linter thinks)
-   * Prop types are not expressive enough (without a drastic increase in complexity of writing a custom validator) to encode this relationship. Equally, this wouldn't actually solve the linting issue (AFAIK).
-   * As a solution, the require-default-props has been disabled for this line.
-   */
-
-  value: PropTypes.string,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  docked: PropTypes.bool,
-  dockedFirst: PropTypes.bool,
-  dockedLast: PropTypes.bool,
-  dockedMiddle: PropTypes.bool,
-  image: PropTypes.node,
-  large: PropTypes.bool,
-  valid: PropTypes.bool,
-  wrapperClassName: PropTypes.string
-};
 export default BpkSelect;

package/bpk-component-select/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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

@@ -18,7 +18,6 @@
 
 import { Component } from 'react';
 import BpkLabel from "../../bpk-component-label";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
 import { getDataComponentAttribute } from "../../bpk-react-utils";

package/bpk-component-thumb-button/index.d.ts

@@ -1,3 +1,3 @@
 import BpkThumbButton from './src/BpkThumbButton';
-export type { BpkThumbButtonProps, ThumbsButtonType } from './src/BpkThumbButton';
+export type { BpkThumbButtonProps, ThumbsButtonType, ThumbsButtonSize, ThumbsButtonColor } from './src/BpkThumbButton';
 export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.d.ts

@@ -1,9 +1,15 @@
 export type ThumbsButtonType = 'up' | 'down';
+export type ThumbsButtonSize = 'default' | 'small';
+export type ThumbsButtonColor = 'default' | 'primary';
 export type BpkThumbButtonProps = {
     /**
      * Accessibility label for screen readers (REQUIRED).
      */
     accessibilityLabel: string;
+    /**
+     * Icon color variant. 'primary' uses the primary text color, 'default' uses the disabled text color (grayish).
+     */
+    iconColor?: ThumbsButtonColor;
     /**
      * Click handler callback.
      */
@@ -12,10 +18,15 @@ export type BpkThumbButtonProps = {
      * Whether the thumb is in selected state.
      */
     selected?: boolean;
+    /**
+     * Size variant. 'small' uses sm icons with no fixed dimensions, matching inline text use cases.
+     * Note: 'small' disables the 48px touch target pseudo-element — do not use on touch-primary surfaces.
+     */
+    size?: ThumbsButtonSize;
     /**
      * Type of thumb icon to display.
      */
     type: ThumbsButtonType;
 };
-declare const BpkThumbButton: ({ accessibilityLabel, onClick, selected, type, }: BpkThumbButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkThumbButton: ({ accessibilityLabel, iconColor, onClick, selected, size, type, }: BpkThumbButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.js

@@ -16,20 +16,34 @@
  * limitations under the License.
  */
 
-import ThumbsDownIcon from "../../bpk-component-icon/lg/thumbs-down";
-import ThumbsUpIcon from "../../bpk-component-icon/lg/thumbs-up";
+import ThumbsDownIconLg from "../../bpk-component-icon/lg/thumbs-down";
+import ThumbsUpIconLg from "../../bpk-component-icon/lg/thumbs-up";
+import ThumbsDownIconSm from "../../bpk-component-icon/sm/thumbs-down";
+import ThumbsUpIconSm from "../../bpk-component-icon/sm/thumbs-up";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkThumbButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkThumbButton = ({
   accessibilityLabel,
+  iconColor = 'default',
   onClick,
   selected = false,
+  size = 'default',
   type
 }) => {
-  const Icon = type === 'up' ? ThumbsUpIcon : ThumbsDownIcon;
-  const classNames = getClassName('bpk-thumb-button', selected && 'bpk-thumb-button--selected');
+  const icons = {
+    small: {
+      up: ThumbsUpIconSm,
+      down: ThumbsDownIconSm
+    },
+    default: {
+      up: ThumbsUpIconLg,
+      down: ThumbsDownIconLg
+    }
+  };
+  const Icon = icons[size][type];
+  const classNames = getClassName('bpk-thumb-button', selected && 'bpk-thumb-button--selected', size === 'small' && 'bpk-thumb-button--small', iconColor === 'primary' && 'bpk-thumb-button--color-primary');
   const handleClick = event => {
     event.stopPropagation();
     onClick(type);

package/bpk-component-thumb-button/src/BpkThumbButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-thumb-button{display:flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;transition:all 200ms ease-in-out;border:none;background:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:pointer;appearance:none;position:relative}.bpk-thumb-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}@media(prefers-reduced-motion: reduce){.bpk-thumb-button{transition:none}}.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button__icon{display:flex;fill:currentcolor}
+.bpk-thumb-button{display:flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;transition:all 200ms ease-in-out;border:none;background:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:pointer;appearance:none;position:relative}.bpk-thumb-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}@media(prefers-reduced-motion: reduce){.bpk-thumb-button{transition:none}}.bpk-thumb-button:active{color:#626971}.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button--selected:active{color:#0062e3}.bpk-thumb-button__icon{display:flex;fill:currentcolor}.bpk-thumb-button--color-primary{color:#161616}.bpk-no-touch-support .bpk-thumb-button--color-primary:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button--color-primary:hover:not(:active):not(:disabled){color:#626971}.bpk-thumb-button--color-primary.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--color-primary.bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--color-primary.bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button--small{width:auto;height:auto;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-thumb-button--small::before{content:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.8.0",
+  "version": "42.9.0-dev-v24441922940.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -25,7 +25,6 @@
     "@ark-ui/react": "^5.34.1",
     "@chakra-ui/react": "^3.33.0",
     "@floating-ui/react": "^0.26.12",
-    "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",