@skyscanner/backpack-web 41.2.0 → 41.3.0

package/bpk-component-autosuggest/index.js

@@ -16,6 +16,6 @@
  * limitations under the License.
  */import BpkAutosuggest from "./src/BpkAutosuggest";
 import BpkAutosuggestSuggestion from "./src/BpkAutosuggestSuggestion";
-import BpkAutosuggestV2 from "./src/BpkAutosuggestV2/BpkAutosuggest";
+import BpkAutosuggestV2, { defaultTheme } from "./src/BpkAutosuggestV2/BpkAutosuggest";
 export default BpkAutosuggest;
-export { BpkAutosuggestSuggestion, BpkAutosuggestV2 };
+export { BpkAutosuggestSuggestion, BpkAutosuggestV2, defaultTheme };

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.d.ts

@@ -64,5 +64,18 @@ export type BpkAutoSuggestProps<T> = {
     }) => void;
     focusInputOnSuggestionClick?: boolean;
 };
+export declare const defaultTheme: {
+    container: string;
+    containerOpen: string;
+    suggestionsContainer: string;
+    suggestionsContainerOpen: string;
+    suggestionsList: string;
+    suggestion: string;
+    suggestionHighlighted: string;
+    sectionContainer: string;
+    sectionTitle: string;
+    input: string;
+    visuallyHidden: string;
+};
 declare const BpkAutosuggest: import("react").ForwardRefExoticComponent<BpkAutoSuggestProps<any> & import("react").RefAttributes<HTMLInputElement>>;
 export default BpkAutosuggest;

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js

@@ -17,7 +17,7 @@
  */
 
 import { useEffect, forwardRef, useRef } from 'react';
-import { useFloating, offset, flip, shift, size, arrow as floatingArrow, FloatingArrow, autoUpdate, FloatingPortal } from '@floating-ui/react';
+import { useFloating, offset, shift, size, arrow as floatingArrow, FloatingArrow, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { useCombobox } from 'downshift';
 import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkInput from "../../../bpk-component-input";
@@ -25,7 +25,7 @@ import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const defaultTheme = {
+export const defaultTheme = {
   container: getClassName('bpk-autosuggest__container'),
   containerOpen: getClassName('bpk-autosuggest__container--open'),
   suggestionsContainer: getClassName('bpk-autosuggest__suggestions-container'),
@@ -235,7 +235,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     ...(isDesktop && {
       strategy: 'fixed'
     }),
-    middleware: isDesktop ? [offset(4), flip(), shift(), size({
+    middleware: isDesktop ? [offset(4), shift(), size({
       apply({
         elements,
         rects

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

@@ -20,7 +20,7 @@ import { useCallback, useState } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
@@ -126,7 +126,8 @@ const BpkBottomSheet = ({
             label: closeLabel,
             onClick: handleClose
           }),
-          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
+          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkLink, {
+            as: "button",
             onClick: onAction,
             children: actionText
           }) : null

package/bpk-component-card-list/src/BpkCardList.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { BpkButtonV2 } from "../../bpk-component-button";
+import BpkButton from "../../bpk-component-button";
 import BpkSectionHeader from "../../bpk-component-section-header";
 import { cssModules } from "../../bpk-react-utils";
 import BpkCardListGridStack from "./BpkCardListGridStack";
@@ -53,7 +53,7 @@ const BpkCardList = props => {
     }
     return accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button;
   };
-  const headerButton = buttonContent && /*#__PURE__*/_jsx(BpkButtonV2, {
+  const headerButton = buttonContent && /*#__PURE__*/_jsx(BpkButton, {
     onClick: onButtonClick,
     href: buttonHref,
     "data-testid": "bpk-card-list-header-button",

package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.js

@@ -17,7 +17,7 @@
  */
 
 import { Children, useState } from 'react';
-import { BpkButtonV2 } from "../../../bpk-component-button";
+import BpkButton from "../../../bpk-component-button";
 import { cssModules } from "../../../bpk-react-utils";
 import ExpandAccessoryContent from "../BpkExpand/ExpandAccessoryContent";
 import { ACCESSORY_DESKTOP_TYPES } from "../common-types";
@@ -58,7 +58,7 @@ const BpkCardListGridStack = props => {
   });
   const buttonAccessoryContent = /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-card-list-grid-stack__accessory__button'),
-    children: /*#__PURE__*/_jsx(BpkButtonV2, {
+    children: /*#__PURE__*/_jsx(BpkButton, {
       "data-testid": "bpk-card-list__accessory-button",
       onClick: onButtonClick,
       href: buttonHref,

package/bpk-component-card-list/src/BpkExpand/ExpandAccessoryContent.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BUTTON_TYPES, BpkButtonV2 } from "../../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../../bpk-component-button";
 import { withButtonAlignment, withRtlSupport } from "../../../bpk-component-icon";
 import ChevronDown from "../../../bpk-component-icon/sm/chevron-down";
 import ChevronUp from "../../../bpk-component-icon/sm/chevron-up";
@@ -27,7 +27,7 @@ const ExpandAccessoryContent = ({
   children,
   collapsed,
   onExpandToggle
-}) => /*#__PURE__*/_jsxs(BpkButtonV2, {
+}) => /*#__PURE__*/_jsxs(BpkButton, {
   "data-testid": "bpk-card-list__accessory-expand-button",
   type: BUTTON_TYPES.link,
   onClick: onExpandToggle,

package/bpk-component-chip-group/src/Nudger.js

@@ -17,7 +17,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { CHIP_TYPES } from "../../bpk-component-chip";
 import { withButtonAlignment } from "../../bpk-component-icon/index";
 import ArrowLeft from "../../bpk-component-icon/sm/long-arrow-left";
@@ -76,7 +76,7 @@ const Nudger = ({
   const classNames = getClassName('bpk-chip-group-nudger', `bpk-chip-group-nudger--${leading ? "leading" : "trailing"}`);
   return show ? /*#__PURE__*/_jsx("div", {
     className: classNames,
-    children: /*#__PURE__*/_jsx(BpkButtonV2, {
+    children: /*#__PURE__*/_jsx(BpkButton, {
       title: ariaLabel,
       type: CHIP_STYLE_TO_BUTTON_STYLE[chipStyle],
       iconOnly: true,

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

@@ -21,7 +21,7 @@ import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDrawerContent.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -93,7 +93,8 @@ const BpkDrawerContent = ({
           id: headingId,
           className: headerClassNames.join(' '),
           children: title
-        }), "\xA0", closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
+        }), "\xA0", closeText ? /*#__PURE__*/_jsx(BpkLink, {
+          as: "button",
           onClick: onClose,
           children: closeText
         }) : /*#__PURE__*/_jsx("div", {

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

@@ -19,7 +19,7 @@
 import { useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
-import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
@@ -80,7 +80,7 @@ const BpkFloatingNotification = props => {
         children: text
       }), ctaText && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__cta'),
-        children: /*#__PURE__*/_jsx(BpkButtonV2, {
+        children: /*#__PURE__*/_jsx(BpkButton, {
           type: BUTTON_TYPES.linkOnDark,
           implicit: true,
           onClick: onClick,

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkGraphicPromo.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -152,7 +152,7 @@ const BpkGraphicPromo = ({
           }), subheading && /*#__PURE__*/_jsx("p", {
             className: getClassName('bpk-graphic-promo__subheading'),
             children: subheading
-          }), /*#__PURE__*/_jsx(BpkButtonV2, {
+          }), /*#__PURE__*/_jsx(BpkButton, {
             type: BUTTON_TYPES.primaryOnDark
             // TODO: className to be removed
             // eslint-disable-next-line @skyscanner/rules/forbid-component-props

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkGridToggle.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -60,7 +60,8 @@ class BpkGridToggle extends Component {
     const onOrOff = gridEnabled ? 'off' : 'on';
     return /*#__PURE__*/_jsx("span", {
       className: className,
-      children: /*#__PURE__*/_jsxs(BpkButtonLink, {
+      children: /*#__PURE__*/_jsxs(BpkLink, {
+        as: "button",
         title: "Keyboard Shortcut: ctrl + cmd + g",
         onClick: this.toggleGrid,
         children: ["Baseline grid ", onOrOff]

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

@@ -1,6 +1,15 @@
 import BpkButtonLink, { type Props as BpkButtonLinkProps } from './src/BpkButtonLink';
-import BpkLink, { type Props as BpkLinkProps } from './src/BpkLink';
+import BpkLink from './src/BpkLink';
 import themeAttributes, { linkAlternateThemeAttributes } from './src/themeAttributes';
-export type { BpkButtonLinkProps, BpkLinkProps };
+import type { BpkLinkProps } from './src/common-types';
+/**
+ * @deprecated Use BpkLinkProps for polymorphic usage
+ */
+export type { BpkButtonLinkProps };
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ */
+export { BpkButtonLink };
+export type { BpkLinkProps };
 export default BpkLink;
-export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };
+export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-link/index.js

@@ -19,5 +19,14 @@
 import BpkButtonLink from "./src/BpkButtonLink";
 import BpkLink from "./src/BpkLink";
 import themeAttributes, { linkAlternateThemeAttributes } from "./src/themeAttributes";
+
+/**
+ * @deprecated Use BpkLinkProps for polymorphic usage
+ */
+
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ */
+export { BpkButtonLink };
 export default BpkLink;
-export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };
+export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-link/src/BpkButtonLink.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode, MouseEvent, ButtonHTMLAttributes } from 'react';
 import themeAttributes from './themeAttributes';
+/**
+ * @deprecated Use `BpkLinkProps<'button'>` instead.
+ */
 export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'onClick'> {
     /** The content of the link. */
     children: ReactNode;
@@ -8,6 +11,11 @@ export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'cl
     alternate?: boolean;
     implicit?: boolean;
 }
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ * BpkButtonLink is maintained for backwards compatibility but will be removed in a future major version.
+ * @returns {JSX.Element} A button styled as a link.
+ */
 declare const BpkButtonLink: ({ alternate, children, className, implicit, onClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export { themeAttributes };
 export default BpkButtonLink;

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

@@ -21,6 +21,16 @@ import themeAttributes from "./themeAttributes";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+
+/**
+ * @deprecated Use `BpkLinkProps<'button'>` instead.
+ */
+
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ * BpkButtonLink is maintained for backwards compatibility but will be removed in a future major version.
+ * @returns {JSX.Element} A button styled as a link.
+ */
 const BpkButtonLink = ({
   alternate = false,
   children,

package/bpk-component-link/src/BpkLink.d.ts

@@ -1,16 +1,3 @@
-import type { ReactNode, MouseEvent, AnchorHTMLAttributes } from 'react';
-import themeAttributes, { linkAlternateThemeAttributes } from './themeAttributes';
-export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'rel'> {
-    /** The content of the link. */
-    children: ReactNode;
-    href: string | null;
-    className?: string | null;
-    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    blank?: boolean;
-    rel?: string | null;
-    alternate?: boolean;
-    implicit?: boolean;
-}
-declare const BpkLink: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLAnchorElement>>;
+import type { PolymorphicComponent } from './common-types';
+declare const BpkLink: PolymorphicComponent;
 export default BpkLink;
-export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-link/src/BpkLink.js

@@ -18,54 +18,99 @@
 
 import { forwardRef } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import themeAttributes, { linkAlternateThemeAttributes } from "./themeAttributes";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkLink = /*#__PURE__*/forwardRef(({
+
+/**
+ * Processes anchor-specific props and returns the transformed props.
+ * Handles href, blank (target="_blank"), and rel attributes.
+ * @param {Object} props - The props to process.
+ * @returns {Object} The transformed anchor props.
+ */
+const processAnchorProps = props => {
+  const {
+    blank,
+    href,
+    rel,
+    ...otherProps
+  } = props;
+  return {
+    ...otherProps,
+    href: href ?? undefined,
+    ...(blank ? {
+      target: '_blank',
+      rel: rel || 'noopener noreferrer'
+    } : {}),
+    ...(!blank && rel ? {
+      rel
+    } : {})
+  };
+};
+
+/**
+ * Processes button-specific props and returns the transformed props.
+ * Ensures button has type="button" by default to prevent form submission.
+ * @param {Object} props - The props to process.
+ * @returns {Object} The transformed button props.
+ */
+const processButtonProps = props => ({
+  type: 'button',
+  ...props // Allow override if explicitly provided
+});
+const getClassNames = (alternate, implicit, className) => {
+  const classNames = [getClassName('bpk-link'), className, implicit && getClassName('bpk-link--implicit'), alternate && getClassName('bpk-link--alternate')].filter(Boolean);
+
+  // Lookup table for underlined modifier based on implicit/alternate combination
+  const underlinedModifierMap = {
+    'true-true': 'bpk-link-underlined-implicit--alternate',
+    'true-false': 'bpk-link-underlined--implicit',
+    'false-true': 'bpk-link-underlined--alternate'
+  };
+  const underlinedModifier = underlinedModifierMap[`${implicit}-${alternate}`] || null;
+  const underlinedClassNames = [getClassName('bpk-link-underlined'), underlinedModifier && getClassName(underlinedModifier)].filter(Boolean);
+  return {
+    linkClassName: classNames.join(' '),
+    underlinedClassName: underlinedClassNames.join(' ')
+  };
+};
+const BpkLinkInner = ({
   alternate = false,
-  blank = false,
+  as: Element = 'a',
   children,
   className = null,
-  href,
   implicit = false,
-  onClick = () => {},
-  rel: propRel = null,
   ...rest
 }, ref) => {
-  const classNames = [getClassName('bpk-link')];
-  const underlinedClassNames = [getClassName('bpk-link-underlined')];
-  const target = blank ? '_blank' : undefined;
-  const rel = blank ? propRel || 'noopener noreferrer' : propRel;
-  if (className) {
-    classNames.push(className);
-  }
-  if (implicit) {
-    classNames.push(getClassName('bpk-link--implicit'));
-  }
-  if (alternate) {
-    classNames.push(getClassName('bpk-link--alternate'));
-  }
-  if (implicit && !alternate) {
-    underlinedClassNames.push(getClassName('bpk-link-underlined--implicit'));
-  } else if (alternate && !implicit) {
-    underlinedClassNames.push(getClassName('bpk-link-underlined--alternate'));
-  } else if (implicit && alternate) {
-    underlinedClassNames.push(getClassName('bpk-link-underlined-implicit--alternate'));
+  const {
+    linkClassName,
+    underlinedClassName
+  } = getClassNames(alternate, implicit, className);
+
+  // Process element-specific props based on the rendered element type
+  const baseProps = rest;
+  let elementProps = baseProps;
+  if (Element === 'a') {
+    elementProps = processAnchorProps(baseProps);
+  } else if (Element === 'button') {
+    elementProps = processButtonProps(baseProps);
   }
-  return /*#__PURE__*/_jsx("a", {
-    className: classNames.join(' '),
-    href: href ?? undefined,
-    onClick: onClick,
-    target: target,
-    rel: rel ?? undefined,
-    ref: ref,
-    ...rest,
-    children: /*#__PURE__*/_jsx("span", {
-      className: underlinedClassNames.join(' '),
-      children: children
+  return (
+    /*#__PURE__*/
+    // Allowed: className and ref are passed to the underlying DOM element
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Element, {
+      className: linkClassName,
+      ref: ref,
+      ...elementProps,
+      children: /*#__PURE__*/_jsx("span", {
+        className: underlinedClassName,
+        children: children
+      })
     })
-  });
-});
-export default BpkLink;
-export { themeAttributes, linkAlternateThemeAttributes };
+  );
+};
+
+// A polymorphic link component that can render as different HTML elements.
+const BpkLink = /*#__PURE__*/forwardRef(BpkLinkInner);
+export default BpkLink;

package/bpk-component-link/src/common-types.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from 'react';
+/**
+ * Polymorphic component types following Chakra UI pattern.
+ * Allows BpkLink to be rendered as different HTML elements while
+ * preserving proper type inference for element-specific props.
+ */
+/** Supported element types for BpkLink */
+export type LinkAs = 'a' | 'button' | 'span' | 'div';
+/** Base props that are common to all BpkLink variants */
+export type BpkLinkBaseProps = {
+    /** The content of the link. */
+    children: ReactNode;
+    /** Additional CSS class(es) to apply. */
+    className?: string | null;
+    /** Use alternate (light) styling for dark backgrounds. */
+    alternate?: boolean;
+    /** Use implicit styling (no underline until hover). */
+    implicit?: boolean;
+};
+/** Props specific to anchor elements */
+export type AnchorOnlyProps = {
+    /** The URL the link points to. */
+    href: string | null;
+    /** Opens link in a new tab/window. */
+    blank?: boolean;
+    /** The relationship between linked and current document. */
+    rel?: string | null;
+};
+/** Props for the `as` prop */
+type AsProps<E extends ElementType> = {
+    /** The element type to render as. Defaults to 'a'. */
+    as?: E;
+};
+/** Polymorphic props type that merges base props with element-specific props */
+type PolymorphicProps<E extends ElementType> = BpkLinkBaseProps & AsProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof BpkLinkBaseProps | 'as'>;
+/** Full props type with conditional anchor-specific props */
+export type BpkLinkProps<E extends ElementType = 'a'> = E extends 'a' ? Omit<PolymorphicProps<E>, 'href' | 'rel'> & AnchorOnlyProps : PolymorphicProps<E>;
+/** Polymorphic ref type mapping element types to their ref types */
+export type PolymorphicRef<E extends LinkAs> = E extends 'a' ? Ref<HTMLAnchorElement> : E extends 'button' ? Ref<HTMLButtonElement> : E extends 'span' ? Ref<HTMLSpanElement> : E extends 'div' ? Ref<HTMLDivElement> : never;
+/** Polymorphic component type for BpkLink */
+export type PolymorphicComponent = <E extends LinkAs = 'a'>(props: BpkLinkProps<E> & {
+    ref?: PolymorphicRef<E>;
+}) => JSX.Element | null;
+export {};

package/bpk-component-link/src/common-types.js

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

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BUTTON_TYPES, BpkButtonV2, SIZE_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
 import ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
@@ -108,7 +108,7 @@ const BpkLoadingButton = props => {
   if (primaryOnDark) {
     type = BUTTON_TYPES.primaryOnDark;
   }
-  return /*#__PURE__*/_jsx(BpkButtonV2, {
+  return /*#__PURE__*/_jsx(BpkButton, {
     iconOnly: iconOnly,
     disabled: showBtnDisabled,
     size: large ? SIZE_TYPES.large : SIZE_TYPES.small,

package/bpk-component-modal/src/BpkModalInner.js

@@ -18,7 +18,7 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkNavigationBar, { BAR_STYLES } from "../../bpk-component-navigation-bar";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkModalInner.module.css";
@@ -98,7 +98,8 @@ const BpkModalInner = ({
             children: title
           }),
           leadingButton: accessoryViewFinal,
-          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
+          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkLink, {
+            as: "button",
             onClick: onClose,
             alternate: modalStyle === MODAL_STYLING.surfaceContrast,
             children: closeText

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.d.ts

@@ -1,10 +1,9 @@
-import type { ComponentProps, MouseEvent, ReactNode } from 'react';
-import { BpkButtonLink } from '../../bpk-component-link';
+import { type BpkLinkProps } from '../../bpk-component-link';
 import { type BarStyle } from './BpkNavigationBar';
-export interface Props extends ComponentProps<typeof BpkButtonLink> {
-    children: ReactNode;
-    onClick: (event: MouseEvent<HTMLElement>) => void;
+export interface Props extends Omit<BpkLinkProps<'button'>, 'as'> {
+    /** Additional CSS class(es) to apply to the wrapper span. */
     className?: string;
+    /** The bar style to determine link color variant. */
     barStyle?: BarStyle;
     [rest: string]: any;
 }

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkNavigationBarButtonLink = ({
@@ -26,7 +26,8 @@ const BpkNavigationBarButtonLink = ({
   ...rest
 }) => /*#__PURE__*/_jsx("span", {
   className: className,
-  children: /*#__PURE__*/_jsx(BpkButtonLink, {
+  children: /*#__PURE__*/_jsx(BpkLink, {
+    as: "button",
     alternate: barStyle === BAR_STYLES.onDark,
     ...rest,
     children: children

package/bpk-component-nudger/src/BpkNudger.js

@@ -17,7 +17,7 @@
  */
 
 import { useRef } from 'react';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
@@ -95,7 +95,7 @@ const BpkNudger = ({
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: nudgerClassNames,
-      children: [/*#__PURE__*/_jsx(BpkButtonV2, {
+      children: [/*#__PURE__*/_jsx(BpkButton, {
         type: BUTTON_TYPES[buttonType],
         iconOnly: true,
         onClick: () => {
@@ -135,7 +135,7 @@ const BpkNudger = ({
         },
         className: inputClassNames,
         ...rest
-      }), /*#__PURE__*/_jsx(BpkButtonV2, {
+      }), /*#__PURE__*/_jsx(BpkButton, {
         type: BUTTON_TYPES[buttonType],
         iconOnly: true,
         onClick: () => {

package/bpk-component-page-indicator/src/NavButton.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
@@ -35,7 +35,7 @@ const NavButton = ({
   disabled = false,
   onClick = () => {},
   type = BUTTON_TYPES.link
-}) => /*#__PURE__*/_jsx(BpkButtonV2, {
+}) => /*#__PURE__*/_jsx(BpkButton, {
   iconOnly: true,
   type: type,
   onClick: e => {

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withRtlSupport, withButtonAlignment } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
@@ -37,7 +37,7 @@ const BpkPaginationNudger = props => {
   } = props;
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-pagination-nudger'),
-    children: /*#__PURE__*/_jsxs(BpkButtonV2, {
+    children: /*#__PURE__*/_jsxs(BpkButton, {
       type: BUTTON_TYPES.link,
       onClick: onNudge,
       disabled: disabled,

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

@@ -22,7 +22,7 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID } from "./constants";
@@ -179,7 +179,8 @@ const BpkPopover = ({
                     setIsOpenState(false);
                   },
                   ...closeButtonProps
-                }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
+                }) : closeButtonText && /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: event => {
                     bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                     setIsOpenState(false);
@@ -196,13 +197,15 @@ const BpkPopover = ({
                 children: children
               }), actionText && onAction && /*#__PURE__*/_jsx("div", {
                 className: getClassName('bpk-popover__action'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                children: /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: onAction,
                   children: actionText
                 })
               }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
                 className: getClassName('bpk-popover__footer'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                children: /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: event => {
                     bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                     setIsOpenState(false);

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

@@ -25,6 +25,9 @@ const getPriceTextStyle = size => {
   if (size === SIZES.small) {
     return TEXT_STYLES.heading4;
   }
+  if (size === SIZES.medium) {
+    return TEXT_STYLES.heading3;
+  }
   if (size === SIZES.large) {
     return TEXT_STYLES.xxl;
   }

package/bpk-component-price/src/common-types.js

@@ -17,6 +17,7 @@
  */export const SIZES = {
   xsmall: 'xsmall',
   small: 'small',
+  medium: 'medium',
   large: 'large'
 };
 export const ALIGNS = {

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

@@ -17,7 +17,7 @@
  */
 
 import { Component } from 'react';
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from "./utils";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getDirection = () => {
@@ -59,7 +59,8 @@ class BpkRtlToggle extends Component {
   };
   render() {
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
-    return /*#__PURE__*/_jsxs(BpkButtonLink, {
+    return /*#__PURE__*/_jsxs(BpkLink, {
+      as: "button",
       title: "Keyboard Shortcut: ctrl + cmd + r",
       onClick: this.toggleRtl,
       children: ["RTL ", onOrOff]

package/bpk-component-snippet/src/BpkSnippet.js

@@ -17,7 +17,7 @@
  */
 
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkImage, { BORDER_RADIUS_STYLES, withLazyLoading } from "../../bpk-component-image";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
@@ -120,7 +120,7 @@ const BpkSnippet = ({
           textStyle: isMobile ? BODY_STYLE.bodyDefault : bodyStyle,
           children: bodyText
         })
-      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButtonV2, {
+      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButton, {
         type: buttonStyle,
         onClick: onClick,
         children: buttonText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.2.0",
+  "version": "41.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",