@skyscanner/backpack-web 42.0.0 → 42.2.0

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

@@ -19,13 +19,6 @@
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBannerAlertInner from "./BpkBannerAlertInner";
 import { jsx as _jsx } from "react/jsx-runtime";
-const defaultProps = {
-  animateOnEnter: false,
-  animateOnLeave: false,
-  show: true,
-  icon: null
-};
-
 /**
  * @deprecated use bpk-component-info-banner instead
  * @returns {Component} a banner alert component

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -35,7 +35,9 @@ const useLegacyWarning = (query, legacy, isClient) => useMemo(() => {
   if (isClient) {
     // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
     if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
-      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
+      console.warn(
+      // eslint-disable-line no-console
+      `Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
     }
   }
 }, [isClient, legacy, query]);

package/bpk-component-button/src/BpkButton.d.ts

@@ -1,3 +1,3 @@
 import type { Props } from './common-types';
-declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, loading, onClick, rel: propRel, size, submit, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, leadingIcon, loading, onClick, rel: propRel, size, submit, trailingIcon, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButton;

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

@@ -19,7 +19,7 @@ import { BpkSpinner, BpkLargeSpinner, SPINNER_TYPES } from "../../bpk-component-
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { BUTTON_TYPES, SIZE_TYPES } from "./common-types";
 import COMMON_STYLES from "./BpkButton.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getCommonClassName = cssModules(COMMON_STYLES);
 const getSpinnerType = buttonType => {
   switch (buttonType) {
@@ -41,11 +41,13 @@ const BpkButton = ({
   href = null,
   iconOnly = false,
   implicit = false,
+  leadingIcon = null,
   loading = false,
   onClick = () => {},
   rel: propRel = undefined,
   size = SIZE_TYPES.small,
   submit = false,
+  trailingIcon = null,
   type = BUTTON_TYPES.primary,
   ...rest
 }) => {
@@ -53,12 +55,24 @@ const BpkButton = ({
   const isLinkType = type === BUTTON_TYPES.link || type === BUTTON_TYPES.linkOnDark;
   const alternate = type === BUTTON_TYPES.linkOnDark;
   const shouldUnderline = isLinkType && !iconOnly && !isDisabled;
-  const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, loading && 'bpk-button--loading', fullWidth && 'bpk-button--full-width', isLinkType && iconOnly && 'bpk-button--link--icon-only', isLinkType && implicit && 'bpk-button--link--implicit', className);
+  const hasIcons = !!(leadingIcon || trailingIcon);
+  const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, loading && 'bpk-button--loading', fullWidth && 'bpk-button--full-width', hasIcons && 'bpk-button--has-icon', isLinkType && iconOnly && 'bpk-button--link--icon-only', isLinkType && implicit && 'bpk-button--link--implicit', className);
   const underlinedClassName = shouldUnderline ? getCommonClassName('bpk-button--link-underlined', implicit && !alternate && 'bpk-button--link-underlined--implicit', alternate && !implicit && 'bpk-button--link-underlined--alternate', implicit && alternate && 'bpk-button--link-underlined--implicit--alternate') : null;
-  const innerContent = underlinedClassName ? /*#__PURE__*/_jsx("span", {
+  const textContent = underlinedClassName ? /*#__PURE__*/_jsx("span", {
     className: underlinedClassName,
     children: children
   }) : children;
+  const leadingIconEl = !iconOnly && leadingIcon ? /*#__PURE__*/_jsx("span", {
+    className: getCommonClassName('bpk-button__leading-icon'),
+    children: leadingIcon
+  }) : null;
+  const trailingIconEl = !iconOnly && trailingIcon ? /*#__PURE__*/_jsx("span", {
+    className: getCommonClassName('bpk-button__trailing-icon'),
+    children: trailingIcon
+  }) : null;
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leadingIconEl, textContent, trailingIconEl]
+  });
   const content = loading ? /*#__PURE__*/_jsxs("div", {
     className: getCommonClassName('bpk-button__loading-container'),
     children: [/*#__PURE__*/_jsx("span", {

package/bpk-component-button/src/BpkButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}
+.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}@media(hover: hover){.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined{background-size:0 1px}.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit--alternate{background-size:100% 1px}}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button--has-icon{display:inline-flex;align-items:center;gap:.5rem}.bpk-button--full-width.bpk-button--has-icon{display:flex;justify-content:center}.bpk-button__leading-icon,.bpk-button__trailing-icon{display:inline-flex;flex-shrink:0;text-decoration:none}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}

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

@@ -30,6 +30,8 @@ export type Props = {
     submit?: boolean;
     href?: string | null;
     blank?: boolean;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
     /** When true, shows a loading spinner and disables interaction. Layout is preserved. @default false */
     loading?: boolean;
     [rest: string]: any;

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

@@ -23,7 +23,7 @@ const splitToken = value => {
   if (!match) {
     throw new Error(`Invalid token value. Expecting a valid css unit, got ${value}`);
   }
-  const [_, val, unit] = match;
+  const [, val, unit] = match;
   return [parseFloat(val), unit];
 };
 export const getCalendarGridWidth = (multiplier = 1) => {

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

@@ -1,5 +1,8 @@
 import BpkCard from './src/BpkCard';
+import BpkCardV2 from './src/BpkCardV2/BpkCardV2';
 import BpkCardWrapper from './src/BpkCardWrapper';
 import BpkDividedCard, { ORIENTATION } from './src/BpkDividedCard';
-export { ORIENTATION, BpkDividedCard, BpkCardWrapper };
+export type { BpkCardV2Props, BpkCardV2HeaderProps, BpkCardV2BodyProps, BpkCardV2SectionProps, BpkCardV2FooterProps, BpkCardV2SurfaceColor, BpkCardV2Variant, BpkCardV2Namespace, } from './src/BpkCardV2/common-types';
+export { CARD_V2_SURFACE_COLORS, CARD_V2_VARIANTS } from './src/BpkCardV2/common-types';
+export { ORIENTATION, BpkDividedCard, BpkCardWrapper, BpkCardV2 };
 export default BpkCard;

package/bpk-component-card/index.js

@@ -17,7 +17,9 @@
  */
 
 import BpkCard from "./src/BpkCard";
+import BpkCardV2 from "./src/BpkCardV2/BpkCardV2";
 import BpkCardWrapper from "./src/BpkCardWrapper";
 import BpkDividedCard, { ORIENTATION } from "./src/BpkDividedCard";
-export { ORIENTATION, BpkDividedCard, BpkCardWrapper };
+export { CARD_V2_SURFACE_COLORS, CARD_V2_VARIANTS } from "./src/BpkCardV2/common-types";
+export { ORIENTATION, BpkDividedCard, BpkCardWrapper, BpkCardV2 };
 export default BpkCard;

package/bpk-component-card/src/BpkCardV2/BpkCardV2.d.ts

@@ -0,0 +1,27 @@
+import type { BpkCardV2Namespace } from './common-types';
+/**
+ * BpkCardV2 is a composable, responsive card component namespace for Backpack.
+ *
+ * It provides subcomponents for explicit multi-section composition (Root, Header, Body, Footer),
+ * flexible multi-column layouts (Section/Divider), and customizable surface colors.
+ *
+ * @example
+ * // Basic card
+ * <BpkCardV2.Root>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Root bgColor={CARD_V2_SURFACE_COLORS.surfaceElevated}>
+ *   <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *     <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *     <BpkCardV2.Divider />
+ *     <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ *   </BpkCardV2.Body>
+ * </BpkCardV2.Root>
+ */
+declare const BpkCardV2: BpkCardV2Namespace;
+export default BpkCardV2;

package/bpk-component-card/src/BpkCardV2/BpkCardV2.js

@@ -0,0 +1,57 @@
+/*
+ * 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 Body from "./subcomponents/Body";
+import Divider from "./subcomponents/Divider";
+import Footer from "./subcomponents/Footer";
+import Header from "./subcomponents/Header";
+import Root from "./subcomponents/Root";
+import Section from "./subcomponents/Section";
+/**
+ * BpkCardV2 is a composable, responsive card component namespace for Backpack.
+ *
+ * It provides subcomponents for explicit multi-section composition (Root, Header, Body, Footer),
+ * flexible multi-column layouts (Section/Divider), and customizable surface colors.
+ *
+ * @example
+ * // Basic card
+ * <BpkCardV2.Root>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Root bgColor={CARD_V2_SURFACE_COLORS.surfaceElevated}>
+ *   <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *     <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *     <BpkCardV2.Divider />
+ *     <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ *   </BpkCardV2.Body>
+ * </BpkCardV2.Root>
+ */
+const BpkCardV2 = {
+  Root,
+  Header,
+  Body,
+  Section,
+  Divider,
+  Footer
+};
+export default BpkCardV2;

package/bpk-component-card/src/BpkCardV2/BpkCardV2.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-card-v2{display:flex;flex-direction:column;flex:1;transition:box-shadow 200ms ease-in-out;background-color:#fff;overflow:hidden;border-radius:.75rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-card-v2--surface-default{background-color:#fff}.bpk-card-v2--surface-elevated{background-color:#fff}.bpk-card-v2--surface-hero{background-color:#0062e3}.bpk-card-v2--surface-contrast{background-color:#05203c}.bpk-card-v2--surface-highlight{background-color:#e0e4e9}.bpk-card-v2--surface-subtle{background-color:#e3f0ff}.bpk-card-v2--surface-low-contrast{background-color:#f5f7fa}.bpk-card-v2--surface-tint{background-color:hsla(0,0%,100%,.1)}.bpk-no-touch-support .bpk-card-v2:hover:not(:active):not(:disabled){box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}:global(.bpk-no-touch-support) .bpk-card-v2:hover:not(:active):not(:disabled){box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-card-v2--default{cursor:pointer}.bpk-card-v2--outlined{border:1px solid #c1c7cf;box-shadow:none}.bpk-no-touch-support .bpk-card-v2--outlined:hover:not(:active):not(:disabled){box-shadow:none}:global(.bpk-no-touch-support) .bpk-card-v2--outlined:hover:not(:active):not(:disabled){box-shadow:none}.bpk-card-v2--no-elevation{box-shadow:none}.bpk-no-touch-support .bpk-card-v2--no-elevation:hover:not(:active):not(:disabled){box-shadow:none}:global(.bpk-no-touch-support) .bpk-card-v2--no-elevation:hover:not(:active):not(:disabled){box-shadow:none}.bpk-card-v2--cars-prompt{background-color:#f5f7fa;box-shadow:none}.bpk-no-touch-support .bpk-card-v2--cars-prompt:hover:not(:active):not(:disabled){background-color:#e3f0ff;box-shadow:none}:global(.bpk-no-touch-support) .bpk-card-v2--cars-prompt:hover:not(:active):not(:disabled){background-color:#e3f0ff;box-shadow:none}.bpk-card-v2--cars-prompt:active{background-color:#e3f0ff;box-shadow:none}.bpk-card-v2--cars-prompt:focus-visible{background-color:#e3f0ff;box-shadow:none;outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-card-v2__divider{height:1px;margin:0 .5rem;background-color:#c1c7cf}@media(min-width: 32.0625rem){.bpk-card-v2__divider{width:1px;height:auto;margin:.5rem 0;align-self:stretch}}

package/bpk-component-card/src/BpkCardV2/common-types.d.ts

@@ -0,0 +1,124 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from 'react';
+import type { BpkBoxProps, BpkFlexProps, BpkGridProps } from '../../../bpk-component-layout';
+/** Surface color token options for BpkCardV2 background */
+export declare const CARD_V2_SURFACE_COLORS: {
+    readonly surfaceDefault: "surfaceDefault";
+    readonly surfaceElevated: "surfaceElevated";
+    readonly surfaceTint: "surfaceTint";
+    readonly surfaceSubtle: "surfaceSubtle";
+    readonly surfaceHero: "surfaceHero";
+    readonly surfaceContrast: "surfaceContrast";
+    readonly surfaceLowContrast: "surfaceLowContrast";
+    readonly surfaceHighlight: "surfaceHighlight";
+};
+export type BpkCardV2SurfaceColor = (typeof CARD_V2_SURFACE_COLORS)[keyof typeof CARD_V2_SURFACE_COLORS];
+/** Visual variant options for BpkCardV2 */
+export declare const CARD_V2_VARIANTS: {
+    readonly default: "default";
+    readonly outlined: "outlined";
+    readonly noElevation: "noElevation";
+    readonly carsPrompt: "carsPrompt";
+};
+export type BpkCardV2Variant = (typeof CARD_V2_VARIANTS)[keyof typeof CARD_V2_VARIANTS];
+type BpkCardV2BaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
+    /** Card content - use Header, Body, Footer subcomponents */
+    children: ReactNode;
+};
+/**
+ * BpkCardV2 root component props.
+ *
+ * Composable card component with explicit Header/Body/Footer subcomponents.
+ * Supports multiple surface colors, visual variants, and responsive multi-column layouts.
+ *
+ * Note: `bgColor` is not supported for the `carsPrompt` variant — its background is fixed
+ * by design and cannot be customised.
+ *
+ * @example
+ * <BpkCardV2 variant={CARD_V2_VARIANTS.default} bgColor={CARD_V2_SURFACE_COLORS.surfaceDefault}>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2>
+ */
+export type BpkCardV2Props = BpkCardV2BaseProps & ({
+    /** Visual variant controlling styling treatment (shadow/border) */
+    variant?: Exclude<BpkCardV2Variant, 'carsPrompt'>;
+    /** Background surface color token (default: surfaceDefault) */
+    bgColor?: BpkCardV2SurfaceColor;
+} | {
+    /** Cars prompt variant — bgColor is fixed and cannot be set */
+    variant: 'carsPrompt';
+    bgColor?: never;
+});
+/**
+ * BpkCardV2.Header component props.
+ *
+ * Renders a BpkFlex container positioned at top of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+export type BpkCardV2HeaderProps = BpkFlexProps;
+/**
+ * BpkCardV2.Body component props.
+ *
+ * Renders card main content area as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props are supported for layout customisation.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *
+ * // Multi-column layout with divider (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ */
+export type BpkCardV2BodyProps = BpkGridProps;
+/**
+ * BpkCardV2.Section component props.
+ *
+ * Generic content area for multi-column layouts. Renders a BpkBox.
+ * All BpkBox props are supported for layout customisation.
+ */
+export type BpkCardV2SectionProps = BpkBoxProps;
+/**
+ * BpkCardV2.Footer component props.
+ *
+ * Renders a BpkFlex container positioned at bottom of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+export type BpkCardV2FooterProps = BpkFlexProps;
+/**
+ * BpkCardV2 namespace type.
+ *
+ * Contains all card subcomponents as properties.
+ */
+export type BpkCardV2Namespace = {
+    Root: ForwardRefExoticComponent<BpkCardV2Props & RefAttributes<HTMLDivElement>>;
+    Header: {
+        (props: BpkCardV2HeaderProps): ReactNode;
+        displayName?: string;
+    };
+    Body: {
+        (props: BpkCardV2BodyProps): ReactNode;
+        displayName?: string;
+    };
+    Section: {
+        (props: BpkCardV2SectionProps): ReactNode;
+        displayName?: string;
+    };
+    Divider: {
+        (): ReactNode;
+        displayName?: string;
+    };
+    Footer: {
+        (props: BpkCardV2FooterProps): ReactNode;
+        displayName?: string;
+    };
+};
+export {};

package/bpk-component-card/src/BpkCardV2/common-types.js

@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+/** Surface color token options for BpkCardV2 background */
+export const CARD_V2_SURFACE_COLORS = {
+  surfaceDefault: 'surfaceDefault',
+  surfaceElevated: 'surfaceElevated',
+  surfaceTint: 'surfaceTint',
+  surfaceSubtle: 'surfaceSubtle',
+  surfaceHero: 'surfaceHero',
+  surfaceContrast: 'surfaceContrast',
+  surfaceLowContrast: 'surfaceLowContrast',
+  surfaceHighlight: 'surfaceHighlight'
+};
+/** Visual variant options for BpkCardV2 */
+export const CARD_V2_VARIANTS = {
+  default: 'default',
+  outlined: 'outlined',
+  noElevation: 'noElevation',
+  carsPrompt: 'carsPrompt'
+};
+
+/**
+ * BpkCardV2 root component props.
+ *
+ * Composable card component with explicit Header/Body/Footer subcomponents.
+ * Supports multiple surface colors, visual variants, and responsive multi-column layouts.
+ *
+ * Note: `bgColor` is not supported for the `carsPrompt` variant — its background is fixed
+ * by design and cannot be customised.
+ *
+ * @example
+ * <BpkCardV2 variant={CARD_V2_VARIANTS.default} bgColor={CARD_V2_SURFACE_COLORS.surfaceDefault}>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2>
+ */
+
+/**
+ * BpkCardV2.Header component props.
+ *
+ * Renders a BpkFlex container positioned at top of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+
+/**
+ * BpkCardV2.Body component props.
+ *
+ * Renders card main content area as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props are supported for layout customisation.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *
+ * // Multi-column layout with divider (70/30 on desktop, stacked on mobile)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ */
+
+/**
+ * BpkCardV2.Section component props.
+ *
+ * Generic content area for multi-column layouts. Renders a BpkBox.
+ * All BpkBox props are supported for layout customisation.
+ */
+
+/**
+ * BpkCardV2.Footer component props.
+ *
+ * Renders a BpkFlex container positioned at bottom of card.
+ * Defaults to horizontal (row) direction with base padding.
+ * All BpkFlex props are supported for layout customisation.
+ */
+
+/**
+ * BpkCardV2 namespace type.
+ *
+ * Contains all card subcomponents as properties.
+ */

package/bpk-component-card/src/BpkCardV2/subcomponents/Body.d.ts

@@ -0,0 +1,36 @@
+import type { BpkCardV2BodyProps } from '../common-types';
+/**
+ * Body subcomponent for BpkCardV2.
+ *
+ * Renders the main content area of the card as a BpkGrid container.
+ * Defaults to a single-column vertical layout with base padding.
+ * Use templateColumns for multi-column layouts. Include `auto` for each Divider child.
+ * All BpkGrid props can be used to customise the layout.
+ *
+ * @example
+ * // Simple body
+ * <BpkCardV2.Body>Content here</BpkCardV2.Body>
+ *
+ * @example
+ * // Multi-column layout
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '1fr 2fr 1fr' }}>
+ *   <BpkCardV2.Section>Left</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Center (2x wide)</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Right</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ *
+ * @example
+ * // Multi-column with divider (include auto for the divider)
+ * <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *   <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *   <BpkCardV2.Divider />
+ *   <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ *
+ * @returns {JSX.Element} Body component
+ */
+declare const Body: {
+    ({ children, padding, templateColumns, ...rest }: BpkCardV2BodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Body;