@skyscanner/backpack-web 42.0.0-test → 42.0.0

package/bpk-mixins/_chips.scss

@@ -24,15 +24,29 @@
 @use 'shadows';
 @use 'utils';
 
+// Private helper: applies a box-shadow border with CSS variable fallback.
+// bpk-border-sm() uses a box-shadow shorthand, so bpk-themeable-property cannot
+// embed a CSS variable inside it — this mixin applies the two-line fallback pattern manually.
+@mixin _bpk-chip-themeable-border($var-name, $fallback-color) {
+  box-shadow: 0 0 0 tokens.$bpk-border-size-sm $fallback-color inset;
+  box-shadow: 0 0 0 tokens.$bpk-border-size-sm
+    var(#{$var-name}, $fallback-color) inset;
+}
+
 @mixin bpk-chip {
   display: inline-flex;
   height: tokens.bpk-spacing-xl();
   padding: 0 tokens.bpk-spacing-base();
   align-items: center;
   border: none;
-  border-radius: tokens.$bpk-border-radius-xs * 2;
   cursor: pointer;
 
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-chip-border-radius,
+    tokens.$bpk-border-radius-sm
+  );
+
   &__leading-accessory-view {
     display: inline-flex;
     fill: currentcolor;
@@ -49,17 +63,33 @@
   }
 
   &--on-dark {
-    background-color: transparent;
-    color: tokens.$bpk-text-on-dark-day;
-
-    @include borders.bpk-border-sm(tokens.$bpk-line-on-dark-day);
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-chip-on-dark-background-color,
+      transparent
+    );
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-chip-on-dark-text-color,
+      tokens.$bpk-text-on-dark-day
+    );
+    @include _bpk-chip-themeable-border(
+      --bpk-chip-on-dark-border-color,
+      tokens.$bpk-line-on-dark-day
+    );
 
     @include utils.bpk-hover {
-      @include borders.bpk-border-sm(tokens.$bpk-surface-default-day);
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-on-dark-hover-border-color,
+        tokens.$bpk-surface-default-day
+      );
     }
 
     &:active:not(:disabled) {
-      @include borders.bpk-border-sm(tokens.$bpk-surface-default-day);
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-on-dark-active-border-color,
+        tokens.$bpk-surface-default-day
+      );
     }
 
     &-selected {
@@ -76,10 +106,20 @@
       @include borders.bpk-border-sm(transparent);
 
       @include utils.bpk-hover {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-on-dark-selected-hover-background-color,
+          tokens.$bpk-surface-default-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
 
       &:active:not(:disabled) {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-on-dark-selected-active-background-color,
+          tokens.$bpk-surface-default-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
     }
@@ -108,17 +148,38 @@
   }
 
   &--default {
-    background-color: transparent;
-    color: tokens.$bpk-text-primary-day;
-
-    @include borders.bpk-border-sm(tokens.$bpk-line-day);
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-chip-default-background-color,
+      transparent
+    );
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-chip-default-text-color,
+      tokens.$bpk-text-primary-day
+    );
+    @include _bpk-chip-themeable-border(
+      --bpk-chip-default-border-color,
+      tokens.$bpk-line-day
+    );
 
     @include utils.bpk-hover {
-      @include borders.bpk-border-sm(tokens.$bpk-core-primary-day);
+      @include utils.bpk-themeable-property(
+        background-color,
+        --bpk-chip-default-hover-background-color,
+        transparent
+      );
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-default-hover-border-color,
+        tokens.$bpk-core-primary-day
+      );
     }
 
     &:active:not(:disabled) {
-      @include borders.bpk-border-sm(tokens.$bpk-core-primary-day);
+      @include _bpk-chip-themeable-border(
+        --bpk-chip-default-active-border-color,
+        tokens.$bpk-core-primary-day
+      );
     }
 
     &-selected {
@@ -135,10 +196,20 @@
       @include borders.bpk-border-sm(transparent);
 
       @include utils.bpk-hover {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-default-selected-hover-background-color,
+          tokens.$bpk-core-primary-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
 
       &:active:not(:disabled) {
+        @include utils.bpk-themeable-property(
+          background-color,
+          --bpk-chip-default-selected-active-background-color,
+          tokens.$bpk-core-primary-day
+        );
         @include borders.bpk-border-sm(transparent);
       }
     }
@@ -167,17 +238,32 @@
   }
 
   &--on-image {
-    background-color: tokens.$bpk-surface-default-day;
-    color: tokens.$bpk-text-primary-day;
-
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-chip-on-image-background-color,
+      tokens.$bpk-surface-default-day
+    );
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-chip-on-image-text-color,
+      tokens.$bpk-text-primary-day
+    );
     @include shadows.bpk-box-shadow-sm;
 
     @include utils.bpk-hover {
-      background-color: tokens.$bpk-canvas-contrast-day;
+      @include utils.bpk-themeable-property(
+        background-color,
+        --bpk-chip-on-image-hover-background-color,
+        tokens.$bpk-canvas-contrast-day
+      );
     }
 
     &:active:not(:disabled) {
-      background-color: tokens.$bpk-canvas-contrast-day;
+      @include utils.bpk-themeable-property(
+        background-color,
+        --bpk-chip-on-image-active-background-color,
+        tokens.$bpk-canvas-contrast-day
+      );
     }
 
     &-selected {

package/bpk-mixins/_index.scss

@@ -30,6 +30,7 @@
 @forward 'panels';
 @forward 'radii';
 @forward 'scroll-indicators';
+@forward 'segmented-control';
 @forward 'shadows';
 @forward 'spinners';
 @forward 'surfaces';

package/bpk-mixins/_segmented-control.scss

@@ -0,0 +1,263 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens';
+@use 'typography';
+@use 'utils';
+@use 'shadows';
+
+////
+/// @group segmented-control-v2
+////
+
+/// Segmented control group container.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///   }
+
+@mixin bpk-segmented-control-v2 {
+  position: relative;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  border-radius: tokens.$bpk-border-radius-sm;
+  background-color: tokens.$bpk-private-segmented-control-canvas-default-day;
+  overflow: hidden;
+}
+
+/// Canvas default type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--canvas-default();
+///   }
+
+@mixin bpk-segmented-control-v2--canvas-default {
+  background-color: tokens.$bpk-private-segmented-control-canvas-default-day;
+}
+
+/// Canvas contrast type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--canvas-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2--canvas-contrast {
+  background-color: tokens.$bpk-surface-default-day;
+}
+
+/// Surface default type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--surface-default();
+///   }
+
+@mixin bpk-segmented-control-v2--surface-default {
+  background-color: tokens.$bpk-canvas-contrast-day;
+}
+
+/// Surface contrast type. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2--surface-contrast {
+  background-color: tokens.$bpk-private-segmented-control-surface-contrast-day;
+}
+
+/// Adds a box shadow to the group container. Modifies the bpk-segmented-control-v2 mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2();
+///     @include bpk-segmented-control-v2--shadow();
+///   }
+
+@mixin bpk-segmented-control-v2--shadow {
+  @include shadows.bpk-box-shadow-sm;
+}
+
+/// Visually hidden group label (satisfies aria-labelledby generated by Ark-UI).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__label();
+///   }
+
+@mixin bpk-segmented-control-v2__label {
+  @include utils.bpk-visually-hidden;
+}
+
+/// Segmented control item (label wrapper).
+/// Creates a grid cell in the root grid, and a stacking context for ItemText + ItemControl.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item();
+///   }
+
+@mixin bpk-segmented-control-v2__item {
+  display: grid;
+  cursor: pointer;
+}
+
+/// Segmented control item control (background layer, aria-hidden).
+/// Sits behind ItemText via CSS grid stacking (grid-area: 1 / 1).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-control();
+///   }
+
+@mixin bpk-segmented-control-v2__item-control {
+  display: none;
+}
+
+/// Segmented control item text (content layer, visible to accessibility tree).
+/// Sits above ItemControl via CSS grid stacking (grid-area: 1 / 1, z-index: 1).
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-text();
+///   }
+
+@mixin bpk-segmented-control-v2__item-text {
+  display: flex;
+  z-index: 1;
+  min-height: tokens.bpk-spacing-xl();
+
+  // Content layer: stacked above item-control via shared grid-area
+  grid-area: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  transition: color tokens.$bpk-duration-xs ease-in-out;
+  color: tokens.$bpk-text-primary-day;
+  overflow: hidden;
+  border-inline-start: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day;
+  pointer-events: none;
+
+  @include typography.bpk-label-2;
+
+  // stylelint-disable-next-line selector-max-type
+  svg {
+    fill: currentcolor;
+  }
+
+  &[data-state='checked'] {
+    color: tokens.$bpk-text-on-dark-day;
+  }
+}
+
+/// Surface contrast item text colors. Modifies the bpk-segmented-control-v2__item-text mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__item-text
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__item-text();
+///     @include bpk-segmented-control-v2__item-text--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__item-text--surface-contrast {
+  color: tokens.$bpk-text-on-dark-day;
+  border-inline-start-color: tokens.$bpk-line-on-dark-day;
+}
+
+/// Segmented control indicator (floating selection background, positioned by Ark-UI CSS variables).
+/// Mirrors ItemControl visually but uses absolute positioning driven by --left/--top/--height
+/// injected by Ark. --transition-duration is set to 0ms to prevent sliding animation.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator {
+  position: absolute;
+  top: var(--top);
+  left: var(--left);
+  width: var(--width);
+  height: var(--height);
+  background-color: tokens.$bpk-core-primary-day;
+
+  --transition-duration: 0ms;
+}
+
+/// Canvas contrast indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--canvas-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--canvas-contrast {
+  background-color: tokens.$bpk-surface-default-day;
+}
+
+/// Surface default indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--surface-default();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--surface-default {
+  background-color: tokens.$bpk-canvas-contrast-day;
+}
+
+/// Surface contrast indicator color. Modifies the bpk-segmented-control-v2__indicator mixin.
+///
+/// @require {mixin} bpk-segmented-control-v2__indicator
+///
+/// @example scss
+///   .selector {
+///     @include bpk-segmented-control-v2__indicator();
+///     @include bpk-segmented-control-v2__indicator--surface-contrast();
+///   }
+
+@mixin bpk-segmented-control-v2__indicator--surface-contrast {
+  background-color: tokens.$bpk-private-segmented-control-surface-contrast-on-day;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.0.0-test",
+  "version": "42.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@ark-ui/react": "^5.34.1",
     "@chakra-ui/react": "^3.33.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",

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

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

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

@@ -1,18 +0,0 @@
-/*
- * 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-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){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.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--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){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.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-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.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--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){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.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--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-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-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-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){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.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-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){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.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--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){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.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-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){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45))}.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--full-width{display:block;width:100%}.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}