@skyscanner/backpack-web 41.1.0 → 41.3.0

package/bpk-component-icon/lg/vdl-tab-saved.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VdlTabSavedIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    stroke: "#161616",
+    strokeLinejoin: "round",
+    strokeWidth: 1.6,
+    d: "M12 20.495s-9.62-6.26-9.62-12.02a4.88 4.88 0 0 1 1.44-3.53A4.925 4.925 0 0 1 12 6.965a4.925 4.925 0 0 1 8.18-2.02c.98.98 1.46 2.25 1.44 3.53 0 5.76-9.62 12.02-9.62 12.02Z"
+  })
+});
+export default VdlTabSavedIcon;

package/bpk-component-icon/lg/vdl-tab-search-selected.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VdlTabSearchSelectedIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M10.5 1.5a9 9 0 0 1 7.334 14.213l4.227 4.227a1.5 1.5 0 1 1-2.122 2.12l-4.226-4.226A9 9 0 1 1 10.5 1.5m0 3a6 6 0 1 0 0 12 6 6 0 0 0 0-12"
+  })
+});
+export default VdlTabSearchSelectedIcon;

package/bpk-component-icon/lg/vdl_tab-search.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VdlTabSearchIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M10.5 2.2a8.3 8.3 0 0 1 6.406 13.575l4.66 4.66a.8.8 0 1 1-1.131 1.13l-4.66-4.659A8.3 8.3 0 1 1 10.5 2.2m0 1.6a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4"
+  })
+});
+export default VdlTabSearchIcon;

package/bpk-component-icon/lg/walk.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const WalkIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M14.247 4.5a2.25 2.25 0 1 0 0-4.501 2.25 2.25 0 0 0 0 4.5m4.43 6.987-1.093-.553-.454-1.378c-.69-2.09-2.61-3.552-4.79-3.557-1.687-.005-2.62.473-4.373 1.181a4.47 4.47 0 0 0-2.33 2.166l-.313.637c-.366.74-.07 1.64.665 2.01a1.48 1.48 0 0 0 1.992-.67l.314-.637a1.5 1.5 0 0 1 .773-.722l1.257-.506-.713 2.845a3.01 3.01 0 0 0 .698 2.756l2.808 3.065c.337.37.576.815.698 1.298l.858 3.436a1.5 1.5 0 0 0 1.818 1.092 1.5 1.5 0 0 0 1.092-1.819l-1.04-4.171a3 3 0 0 0-.698-1.298l-2.133-2.33.806-3.22.258.774a3 3 0 0 0 1.486 1.734l1.092.553a1.48 1.48 0 0 0 1.992-.67 1.517 1.517 0 0 0-.67-2.016m-10.73 6.596a2.9 2.9 0 0 1-.665 1.007l-2.344 2.349a1.5 1.5 0 0 0 0 2.123 1.496 1.496 0 0 0 2.119 0l2.784-2.784c.286-.286.51-.628.665-1.008l.633-1.584c-2.592-2.826-1.814-1.96-2.222-2.517z"
+  })
+});
+export default WalkIcon;

package/bpk-component-icon/sm/baggage-cabin-included-tick.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaggageCabinIncludedTickIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.5 4A1.5 1.5 0 0 1 9 5.5V12h.5a1.5 1.5 0 0 1 1.5 1.5v4A1.5 1.5 0 0 1 9.5 19v.25a.75.75 0 0 1-1.5 0V19H5v.25a.75.75 0 0 1-1.5 0V19A1.5 1.5 0 0 1 2 17.5v-4A1.5 1.5 0 0 1 3.5 12H4V5.498A1.5 1.5 0 0 1 5.5 4zM5.25 5.5a.25.25 0 0 0-.25.25V12h3V5.75a.25.25 0 0 0-.25-.25zm17.54 6.36a.714.714 0 0 1 0 1.01l-5.892 5.892a.714.714 0 0 1-1.01 0l-2.679-2.678a.714.714 0 0 1 1.01-1.01l2.174 2.173 5.388-5.388a.714.714 0 0 1 1.01 0"
+  })
+});
+export default BaggageCabinIncludedTickIcon;

package/bpk-component-icon/sm/baggage-cabin-not-included-cross.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaggageCabinNotIncludedCrossIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.5 4h-2A1.5 1.5 0 0 0 4 5.498V12h-.5A1.5 1.5 0 0 0 2 13.5v4A1.5 1.5 0 0 0 3.5 19v.25a.75.75 0 0 0 1.5 0V19h3v.25a.75.75 0 0 0 1.5 0V19a1.5 1.5 0 0 0 1.5-1.5v-4A1.5 1.5 0 0 0 9.5 12H9V5.5A1.5 1.5 0 0 0 7.5 4M5.25 5.5h2.5a.25.25 0 0 1 .25.25V12H5V5.75a.25.25 0 0 1 .25-.25m15.552 5.97a.72.72 0 0 1 1.034 0 .764.764 0 0 1 0 1.06l-2.652 2.72 2.652 2.72a.764.764 0 0 1 0 1.06.72.72 0 0 1-1.034 0l-2.653-2.72-2.651 2.72a.72.72 0 0 1-1.034 0 .764.764 0 0 1 0-1.06l2.651-2.72-2.651-2.72a.764.764 0 0 1 0-1.06.72.72 0 0 1 1.034 0l2.651 2.718z"
+  })
+});
+export default BaggageCabinNotIncludedCrossIcon;

package/bpk-component-icon/sm/baggage-cabin-uncertain.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaggageCabinUncertainIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.5 4A1.5 1.5 0 0 1 9 5.5V12h.5a1.5 1.5 0 0 1 1.5 1.5v4A1.5 1.5 0 0 1 9.5 19v.25a.75.75 0 0 1-1.5 0V19H5v.25a.75.75 0 0 1-1.5 0V19A1.5 1.5 0 0 1 2 17.5v-4A1.5 1.5 0 0 1 3.5 12H4V5.498A1.5 1.5 0 0 1 5.5 4zM5.25 5.5a.25.25 0 0 0-.25.25V12h3V5.75a.25.25 0 0 0-.25-.25zm12.512 12.06a.776.776 0 1 1 0 1.552.776.776 0 0 1 0-1.551m0-8.931c1.122 0 1.968.383 2.526.997.542.596.75 1.34.75 1.967 0 .552-.093 1.16-.408 1.738-.32.586-.837 1.082-1.584 1.455a1 1 0 0 0-.354.27.7.7 0 0 0-.128.285c-.046.194-.042.37-.034.614q.006.145.007.325a.776.776 0 0 1-1.55 0q0-.057-.005-.156c-.01-.265-.027-.72.072-1.139.143-.607.517-1.195 1.299-1.586.502-.25.766-.537.916-.81.153-.281.217-.611.217-.996 0-.31-.105-.66-.344-.924-.223-.245-.628-.488-1.38-.488s-1.14.24-1.358.502c-.238.286-.367.713-.367 1.222a.776.776 0 0 1-1.55 0c0-.74.183-1.563.726-2.215.564-.676 1.425-1.06 2.549-1.06"
+  })
+});
+export default BaggageCabinUncertainIcon;

package/bpk-component-icon/sm/baggage-checked-included-tick.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaggageCheckedIncludedTickIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.5 4A1.5 1.5 0 0 1 9 5.5V8h.5A1.5 1.5 0 0 1 11 9.5v8A1.5 1.5 0 0 1 9.5 19v.25a.75.75 0 0 1-1.5 0V19H5v.25a.75.75 0 0 1-1.5 0V19A1.5 1.5 0 0 1 2 17.5v-8A1.5 1.5 0 0 1 3.5 8H4V5.498A1.5 1.5 0 0 1 5.5 4zM5.25 5.5a.25.25 0 0 0-.25.25V8h3V5.75a.25.25 0 0 0-.25-.25zm17.55 6.36a.714.714 0 0 1 0 1.01l-5.892 5.892a.714.714 0 0 1-1.01 0l-2.679-2.678a.714.714 0 1 1 1.01-1.01l2.174 2.173 5.388-5.388a.714.714 0 0 1 1.01 0"
+  })
+});
+export default BaggageCheckedIncludedTickIcon;

package/bpk-component-icon/sm/baggage-checked-not-included-cross.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaggageCheckedNotIncludedCrossIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.5 4A1.5 1.5 0 0 1 9 5.5V8h.5A1.5 1.5 0 0 1 11 9.5v8A1.5 1.5 0 0 1 9.5 19v.25a.75.75 0 0 1-1.5 0V19H5v.25a.75.75 0 0 1-1.5 0V19A1.5 1.5 0 0 1 2 17.5v-8A1.5 1.5 0 0 1 3.5 8H4V5.498A1.5 1.5 0 0 1 5.5 4zM5.25 5.5a.25.25 0 0 0-.25.25V8h3V5.75a.25.25 0 0 0-.25-.25zm15.55 5.97a.72.72 0 0 1 1.035 0 .764.764 0 0 1 0 1.06l-2.652 2.72 2.652 2.72a.764.764 0 0 1 0 1.06.72.72 0 0 1-1.034 0l-2.653-2.72-2.65 2.72a.72.72 0 0 1-1.034 0 .764.764 0 0 1 0-1.06l2.651-2.72-2.651-2.72a.764.764 0 0 1 0-1.06.72.72 0 0 1 1.033 0l2.651 2.72z"
+  })
+});
+export default BaggageCheckedNotIncludedCrossIcon;

package/bpk-component-icon/sm/baggage-checked-uncertain.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaggageCheckedUncertainIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M7.5 4A1.5 1.5 0 0 1 9 5.5V8h.5A1.5 1.5 0 0 1 11 9.5v8A1.5 1.5 0 0 1 9.5 19v.25a.75.75 0 0 1-1.5 0V19H5v.25a.75.75 0 0 1-1.5 0V19A1.5 1.5 0 0 1 2 17.5v-8A1.5 1.5 0 0 1 3.5 8H4V5.498A1.5 1.5 0 0 1 5.5 4zM5.25 5.5a.25.25 0 0 0-.25.25V8h3V5.75a.25.25 0 0 0-.25-.25zm12.512 12.06a.776.776 0 1 1 0 1.552.776.776 0 0 1 0-1.551m0-8.931c1.122 0 1.968.383 2.526.997.542.596.75 1.34.75 1.967 0 .552-.093 1.16-.408 1.738-.32.586-.837 1.082-1.584 1.455a1 1 0 0 0-.354.27.7.7 0 0 0-.128.285c-.046.194-.042.37-.034.614q.006.145.007.325a.776.776 0 0 1-1.55 0q0-.057-.005-.156c-.01-.265-.027-.72.072-1.139.143-.607.517-1.195 1.299-1.586.502-.25.766-.537.916-.81.153-.281.217-.611.217-.996 0-.31-.105-.66-.344-.924-.223-.245-.628-.488-1.38-.488s-1.14.24-1.358.502c-.238.286-.367.713-.367 1.222a.776.776 0 0 1-1.55 0c0-.74.183-1.563.726-2.215.564-.676 1.425-1.06 2.549-1.06"
+  })
+});
+export default BaggageCheckedUncertainIcon;

package/bpk-component-icon/sm/vdl-cars.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VdlCarsIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M9.312 7.924c1.348 0 2.612.725 3.542 1.455.334.262.139.8-.286.8H5.246c-.401 0-.612-.497-.317-.77.842-.774 2.21-1.485 4.383-1.485m14.667 4.264v2.92c0 1.313-.883 2.402-2.04 2.626a3.23 3.23 0 0 1-3.183 2.739 3.23 3.23 0 0 1-3.179-2.691H8.435a3.23 3.23 0 0 1-3.18 2.69 3.23 3.23 0 0 1-3.183-2.738C.92 17.508.041 16.425.041 15.122V9.28c0-.17.044-.336.128-.484.827-1.448 3.38-4.817 9.2-4.817 4.142 0 7.443 3.34 8.356 4.362.785.148 2.716.57 4.727 1.466a2.6 2.6 0 0 1 1.527 2.381M6.539 17.24c0-.707-.576-1.284-1.283-1.284-.708 0-1.284.577-1.284 1.284s.576 1.284 1.284 1.284c.707 0 1.284-.576 1.284-1.284m13.5 0c0-.707-.576-1.284-1.283-1.284-.708 0-1.284.577-1.284 1.284s.576 1.284 1.284 1.284c.707 0 1.284-.576 1.284-1.284m1.99-5.05a.65.65 0 0 0-.37-.6c-2.31-1.029-4.57-1.38-4.591-1.384a.98.98 0 0 1-.612-.35c-.031-.04-3.24-3.926-7.086-3.926-4.402 0-6.483 2.175-7.38 3.619v5.574c0 .32.17.586.389.672a3.23 3.23 0 0 1 2.877-1.789c1.277 0 2.373.75 2.898 1.827h7.704a3.23 3.23 0 0 1 2.898-1.827c1.262 0 2.345.733 2.878 1.79.222-.084.395-.358.395-.687z"
+  })
+});
+export default VdlCarsIcon;

package/bpk-component-icon/sm/vdl-flight.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VdlFlightIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M23.808 4.846c-.285-.8-1.042-1.363-2.077-1.543-1.68-.296-3.29.097-4.937 1.198l-3.26 2.197-.012-.019-.274.185-7.212-3.07a2.29 2.29 0 0 0-2.837.998 2.29 2.29 0 0 0 .473 2.834l3.635 3.269-1.477.994-2.03-.52a2.6 2.6 0 0 0-2.101.361l-1.194.805a.975.975 0 0 0-.037 1.59l3.866 2.88a1 1 0 0 0 .102.068 4.26 4.26 0 0 0 3.307.367c1.035-.313 2.053-.77 3.139-1.414l1.63 4.677a2.37 2.37 0 0 0 2.534 1.567 2.374 2.374 0 0 0 2.065-2.337v-8.04l3.107-2.116c1.52-1.023 2.188-1.583 2.98-2.498.665-.766.887-1.653.61-2.433M4.966 6.168a.34.34 0 0 1-.068-.42c.082-.144.26-.207.393-.152l6.03 2.567-2.365 1.593zM21.726 6c-.63.726-1.117 1.162-2.601 2.162l-3.538 2.408a.97.97 0 0 0-.426.806v8.551a.418.418 0 0 1-.808.134l-2.034-5.838a.974.974 0 0 0-1.466-.488c-1.334.9-2.501 1.483-3.674 1.837a2.3 2.3 0 0 1-1.734-.17l-2.71-2.02.053-.035a.66.66 0 0 1 .526-.091l2.455.63c.27.07.557.02.788-.136l2.875-1.937c.028-.019.042-.05.067-.072l4.339-2.924c.027-.015.059-.013.085-.03L17.88 6.12c1.224-.816 2.337-1.1 3.514-.897.37.065.55.204.576.277.02.06-.027.25-.246.501"
+  })
+});
+export default VdlFlightIcon;

package/bpk-component-icon/sm/vdl-hotels.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const VdlHotelsIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M21.674 12.664V5.492a.97.97 0 0 0-.557-.881C17.583 2.99 14.207 2.65 12 2.65c-4 0-7.16 1.064-9.108 1.957a.97.97 0 0 0-.567.885v7.172a2.5 2.5 0 0 0-1.8 2.395v7.466c0 .249.201.45.45.45h1.05a.45.45 0 0 0 .45-.45v-2.05h19.05v2.05c0 .249.201.45.45.45h1.05a.45.45 0 0 0 .45-.45V15.06a2.5 2.5 0 0 0-1.8-2.395M4.274 6.13A20.1 20.1 0 0 1 12 4.599c1.892 0 4.723.274 7.725 1.53v6.421H4.275zm-1.8 8.93a.56.56 0 0 1 .56-.56h17.932a.56.56 0 0 1 .559.56v3.466H2.475zm7.88-6.46v.8a.455.455 0 0 1-.382.45c-1.147.17-2.298.17-3.444 0a.455.455 0 0 1-.383-.45v-.8c0-.223.162-.418.383-.45 1.146-.17 2.297-.17 3.444 0 .22.032.383.227.383.45m7.5 0v.8a.455.455 0 0 1-.382.45c-1.147.17-2.298.17-3.444 0a.455.455 0 0 1-.383-.45v-.8c0-.223.162-.418.383-.45 1.146-.17 2.297-.17 3.444 0 .22.032.383.227.383.45"
+  })
+});
+export default VdlHotelsIcon;

package/bpk-component-icon/sm/walk.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const WalkIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M14.247 4.5a2.25 2.25 0 1 0 0-4.501 2.25 2.25 0 0 0 0 4.5m4.43 6.987-1.093-.553-.454-1.378c-.69-2.09-2.61-3.552-4.79-3.557-1.687-.005-2.62.473-4.373 1.181a4.47 4.47 0 0 0-2.33 2.166l-.313.637c-.366.74-.07 1.64.665 2.01a1.48 1.48 0 0 0 1.992-.67l.314-.637a1.5 1.5 0 0 1 .773-.722l1.257-.506-.713 2.845a3.01 3.01 0 0 0 .698 2.756l2.808 3.065c.337.37.576.815.698 1.298l.858 3.436a1.5 1.5 0 0 0 1.818 1.092 1.5 1.5 0 0 0 1.092-1.819l-1.04-4.171a3 3 0 0 0-.698-1.298l-2.133-2.33.806-3.22.258.774a3 3 0 0 0 1.486 1.734l1.092.553a1.48 1.48 0 0 0 1.992-.67 1.517 1.517 0 0 0-.67-2.016m-10.73 6.596a2.9 2.9 0 0 1-.665 1.007l-2.344 2.349a1.5 1.5 0 0 0 0 2.123 1.496 1.496 0 0 0 2.119 0l2.784-2.784c.286-.286.51-.628.665-1.008l.633-1.584c-2.592-2.826-1.814-1.96-2.222-2.517z"
+  })
+});
+export default WalkIcon;

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 => {