@skyscanner/backpack-web 41.17.0 → 41.19.0

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

@@ -1,5 +1,5 @@
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
-import themeAttributes from './src/themeAttributes';
+import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes } from './src/themeAttributes';
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes, };

package/bpk-component-badge/index.js

@@ -17,6 +17,6 @@
  */
 
 import component, { BADGE_TYPES } from "./src/BpkBadge";
-import themeAttributes from "./src/themeAttributes";
+import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes } from "./src/themeAttributes";
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes, badgeNormalThemeAttributes, badgeWarningThemeAttributes, badgeSuccessThemeAttributes, badgeCriticalThemeAttributes, badgeInverseThemeAttributes, badgeOutlineThemeAttributes, badgeStrongThemeAttributes, badgeBrandThemeAttributes };

package/bpk-component-badge/src/BpkBadge.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir=rtl] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir=rtl] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff3f8;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff3f8;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff3f8;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff3f8;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:rgba(0,0,0,0);color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff}
+.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:.25rem;border-radius:var(--bpk-badge-border-radius, 0.25rem);margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400;font-size:.875rem;font-size:var(--bpk-badge-font-size, 0.875rem);font-weight:400;font-weight:var(--bpk-badge-font-weight, 400);line-height:1.25rem;line-height:var(--bpk-badge-line-height, 1.25rem)}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir=rtl] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir=rtl] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff3f8;background-color:var(--bpk-badge-warning-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-warning-text-color, rgb(22, 22, 22));fill:#f55d42;fill:var(--bpk-badge-warning-icon-color, rgb(245, 93, 66))}.bpk-badge--success{background-color:#eff3f8;background-color:var(--bpk-badge-success-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-success-text-color, rgb(22, 22, 22));fill:#0c838a;fill:var(--bpk-badge-success-icon-color, rgb(12, 131, 138))}.bpk-badge--critical{background-color:#eff3f8;background-color:var(--bpk-badge-critical-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-critical-text-color, rgb(22, 22, 22));fill:#e70866;fill:var(--bpk-badge-critical-icon-color, rgb(231, 8, 102))}.bpk-badge--normal{background-color:#eff3f8;background-color:var(--bpk-badge-normal-background-color, rgb(239, 243, 248));color:#161616;color:var(--bpk-badge-normal-text-color, rgb(22, 22, 22));fill:#161616;fill:var(--bpk-badge-normal-icon-color, rgb(22, 22, 22))}.bpk-badge--inverse{background-color:#fff;background-color:var(--bpk-badge-inverse-background-color, rgb(255, 255, 255));color:#161616;color:var(--bpk-badge-inverse-text-color, rgb(22, 22, 22));fill:#161616;fill:var(--bpk-badge-inverse-icon-color, rgb(22, 22, 22))}.bpk-badge--outline{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--bpk-badge-outline-text-color, rgb(255, 255, 255));background-color:rgba(0,0,0,0);background-color:var(--bpk-badge-outline-background-color, transparent);color:#fff;color:var(--bpk-badge-outline-text-color, rgb(255, 255, 255));fill:#fff;fill:var(--bpk-badge-outline-icon-color, rgb(255, 255, 255))}.bpk-badge--strong{background-color:#05203c;background-color:var(--bpk-badge-strong-background-color, rgb(5, 32, 60));color:#fff;color:var(--bpk-badge-strong-text-color, rgb(255, 255, 255));fill:#fff;fill:var(--bpk-badge-strong-icon-color, rgb(255, 255, 255))}.bpk-badge--brand{background-color:#0062e3;background-color:var(--bpk-badge-brand-background-color, rgb(0, 98, 227));color:#fff;color:var(--bpk-badge-brand-text-color, rgb(255, 255, 255));fill:#fff;fill:var(--bpk-badge-brand-icon-color, rgb(255, 255, 255))}

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

@@ -1,2 +1,25 @@
-declare const _default: string[];
-export default _default;
+export declare const badgeThemeAttributes: string[];
+export declare const badgeNormalThemeAttributes: string[];
+export declare const badgeWarningThemeAttributes: string[];
+export declare const badgeSuccessThemeAttributes: string[];
+export declare const badgeCriticalThemeAttributes: string[];
+export declare const badgeInverseThemeAttributes: string[];
+export declare const badgeOutlineThemeAttributes: string[];
+export declare const badgeStrongThemeAttributes: string[];
+export declare const badgeBrandThemeAttributes: string[];
+/**
+ * Combined array of all badge theme attributes across all variants and shared properties.
+ * Requires all these attributes to be present in the BpkThemeProvider theme object or theming
+ * will be silently ignored. Prefer per-variant arrays (e.g. badgeNormalThemeAttributes) for
+ * targeted theming.
+ */
+export declare const allBadgeThemeAttributes: string[];
+/**
+ * @deprecated The keys in this array pre-date full badge theming support and map to CSS variables
+ * that were never wired up in the SCSS (the previous mixin used static token values directly).
+ * Use per-variant arrays (e.g. badgeNormalThemeAttributes) for fine-grained theming, or
+ * allBadgeThemeAttributes for the complete list.
+ * Will be removed in the next major release.
+ */
+declare const themeAttributes: string[];
+export default themeAttributes;

package/bpk-component-badge/src/themeAttributes.js

@@ -16,4 +16,30 @@
  * limitations under the License.
  */
 
-export default ['badgeBackgroundColor', 'badgeSuccessBackgroundColor', 'badgeDestructiveBackgroundColor'];
+export const badgeThemeAttributes = ['badgeFontSize', 'badgeFontWeight', 'badgeLineHeight', 'badgeBorderRadius'];
+export const badgeNormalThemeAttributes = ['badgeNormalBackgroundColor', 'badgeNormalTextColor', 'badgeNormalIconColor'];
+export const badgeWarningThemeAttributes = ['badgeWarningBackgroundColor', 'badgeWarningTextColor', 'badgeWarningIconColor'];
+export const badgeSuccessThemeAttributes = ['badgeSuccessBackgroundColor', 'badgeSuccessTextColor', 'badgeSuccessIconColor'];
+export const badgeCriticalThemeAttributes = ['badgeCriticalBackgroundColor', 'badgeCriticalTextColor', 'badgeCriticalIconColor'];
+export const badgeInverseThemeAttributes = ['badgeInverseBackgroundColor', 'badgeInverseTextColor', 'badgeInverseIconColor'];
+export const badgeOutlineThemeAttributes = ['badgeOutlineBackgroundColor', 'badgeOutlineTextColor', 'badgeOutlineIconColor'];
+export const badgeStrongThemeAttributes = ['badgeStrongBackgroundColor', 'badgeStrongTextColor', 'badgeStrongIconColor'];
+export const badgeBrandThemeAttributes = ['badgeBrandBackgroundColor', 'badgeBrandTextColor', 'badgeBrandIconColor'];
+
+/**
+ * Combined array of all badge theme attributes across all variants and shared properties.
+ * Requires all these attributes to be present in the BpkThemeProvider theme object or theming
+ * will be silently ignored. Prefer per-variant arrays (e.g. badgeNormalThemeAttributes) for
+ * targeted theming.
+ */
+export const allBadgeThemeAttributes = [...badgeThemeAttributes, ...badgeNormalThemeAttributes, ...badgeWarningThemeAttributes, ...badgeSuccessThemeAttributes, ...badgeCriticalThemeAttributes, ...badgeInverseThemeAttributes, ...badgeOutlineThemeAttributes, ...badgeStrongThemeAttributes, ...badgeBrandThemeAttributes];
+
+/**
+ * @deprecated The keys in this array pre-date full badge theming support and map to CSS variables
+ * that were never wired up in the SCSS (the previous mixin used static token values directly).
+ * Use per-variant arrays (e.g. badgeNormalThemeAttributes) for fine-grained theming, or
+ * allBadgeThemeAttributes for the complete list.
+ * Will be removed in the next major release.
+ */
+const themeAttributes = ['badgeBackgroundColor', 'badgeSuccessBackgroundColor', 'badgeDestructiveBackgroundColor'];
+export default themeAttributes;

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

@@ -1,6 +1,6 @@
 import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton';
 export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButtonV2/common-types';
-export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './src/themeAttributes';
-declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, onClick, rel: propRel, size, submit, type, ...rest }: import("./src/BpkButtonV2/common-types").Props) => import("react/jsx-runtime").JSX.Element;
+export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, linkThemeAttributes, } from './src/themeAttributes';
+declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, loading, onClick, rel: propRel, size, submit, type, ...rest }: import("./src/BpkButtonV2/common-types").Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButton;
 export { BpkButtonV2 };

package/bpk-component-button/index.js

@@ -18,7 +18,7 @@
 
 import { BpkButtonV2 } from "./src/BpkButtonV2/BpkButton";
 export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButtonV2/common-types";
-export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./src/themeAttributes";
+export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, linkThemeAttributes } from "./src/themeAttributes";
 const BpkButton = BpkButtonV2;
 export default BpkButton;
 export { BpkButtonV2 };

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

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

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

@@ -15,11 +15,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { BpkSpinner, BpkLargeSpinner, SPINNER_TYPES } from "../../../bpk-component-spinner";
 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 } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getCommonClassName = cssModules(COMMON_STYLES);
+const getSpinnerType = buttonType => {
+  switch (buttonType) {
+    case BUTTON_TYPES.secondary:
+    case BUTTON_TYPES.destructive:
+    case BUTTON_TYPES.link:
+    case BUTTON_TYPES.primaryOnDark:
+      return SPINNER_TYPES.dark;
+    default:
+      return SPINNER_TYPES.light;
+  }
+};
 
 // eslint-disable-next-line import/prefer-default-export
 export const BpkButtonV2 = ({
@@ -31,6 +43,7 @@ export const BpkButtonV2 = ({
   href = null,
   iconOnly = false,
   implicit = false,
+  loading = false,
   onClick = () => {},
   rel: propRel = undefined,
   size = SIZE_TYPES.small,
@@ -38,18 +51,36 @@ export const BpkButtonV2 = ({
   type = BUTTON_TYPES.primary,
   ...rest
 }) => {
+  const isDisabled = disabled || loading;
   const isLinkType = type === BUTTON_TYPES.link || type === BUTTON_TYPES.linkOnDark;
   const alternate = type === BUTTON_TYPES.linkOnDark;
-  const shouldUnderline = isLinkType && !iconOnly && !disabled;
-  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}`, fullWidth && 'bpk-button--full-width', isLinkType && iconOnly && 'bpk-button--link--icon-only', isLinkType && implicit && 'bpk-button--link--implicit', className);
+  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 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 content = underlinedClassName ? /*#__PURE__*/_jsx("span", {
+  const innerContent = underlinedClassName ? /*#__PURE__*/_jsx("span", {
     className: underlinedClassName,
     children: children
   }) : children;
+  const content = loading ? /*#__PURE__*/_jsxs("div", {
+    className: getCommonClassName('bpk-button__loading-container'),
+    children: [/*#__PURE__*/_jsx("span", {
+      className: getCommonClassName('bpk-button__loading-icon'),
+      "aria-hidden": "true",
+      children: size === SIZE_TYPES.large ? /*#__PURE__*/_jsx(BpkLargeSpinner, {
+        type: getSpinnerType(type),
+        alignToButton: true
+      }) : /*#__PURE__*/_jsx(BpkSpinner, {
+        type: getSpinnerType(type),
+        alignToButton: true
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: getCommonClassName('bpk-button__content--hidden'),
+      children: innerContent
+    })]
+  }) : innerContent;
   const target = blank ? '_blank' : '';
   const rel = blank ? propRel || 'noopener noreferrer' : propRel;
-  if (!disabled && href) {
+  if (!isDisabled && href) {
     return /*#__PURE__*/_jsx("a", {
       href: href,
       className: classNames,
@@ -63,9 +94,10 @@ export const BpkButtonV2 = ({
   }
   return /*#__PURE__*/_jsx("button", {
     type: submit ? 'submit' : 'button',
-    disabled: disabled,
+    disabled: isDisabled,
     className: classNames,
     ...getDataComponentAttribute('Button'),
+    "aria-busy": loading || undefined,
     onClick: onClick,
     ...rest,
     children: content

package/bpk-component-button/src/BpkButtonV2/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;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;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{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.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}
+.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}

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

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

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

@@ -6,3 +6,4 @@ export declare const secondaryThemeAttributes: string[];
 export declare const secondaryOnDarkThemeAttributes: string[];
 export declare const featuredThemeAttributes: string[];
 export declare const destructiveThemeAttributes: string[];
+export declare const linkThemeAttributes: string[];

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

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-export const buttonThemeAttributes = ['buttonFontSize'];
+export const buttonThemeAttributes = ['buttonFontSize', 'buttonBorderRadius'];
 export const primaryThemeAttributes = ['buttonPrimaryTextColor', 'buttonPrimaryHoverTextColor', 'buttonPrimaryActiveTextColor', 'buttonPrimaryGradientStartColor', 'buttonPrimaryGradientEndColor', 'buttonPrimaryBackgroundColor', 'buttonPrimaryHoverBackgroundColor', 'buttonPrimaryActiveBackgroundColor'];
 export const primaryOnDarkThemeAttributes = ['buttonPrimaryOnDarkTextColor', 'buttonPrimaryOnDarkHoverTextColor', 'buttonPrimaryOnDarkActiveTextColor', 'buttonPrimaryOnDarkBackgroundColor', 'buttonPrimaryOnDarkHoverBackgroundColor', 'buttonPrimaryOnDarkActiveBackgroundColor'];
 export const primaryOnLightThemeAttributes = ['buttonPrimaryOnLightTextColor', 'buttonPrimaryOnLightHoverTextColor', 'buttonPrimaryOnLightActiveTextColor', 'buttonPrimaryOnLightBackgroundColor', 'buttonPrimaryOnLightHoverBackgroundColor', 'buttonPrimaryOnLightActiveBackgroundColor'];
 export const secondaryThemeAttributes = ['buttonSecondaryTextColor', 'buttonSecondaryHoverTextColor', 'buttonSecondaryActiveTextColor', 'buttonSecondaryBorderColor', 'buttonSecondaryHoverBorderColor', 'buttonSecondaryActiveBorderColor', 'buttonSecondaryBackgroundColor', 'buttonSecondaryHoverBackgroundColor', 'buttonSecondaryActiveBackgroundColor'];
 export const secondaryOnDarkThemeAttributes = ['buttonSecondaryOnDarkTextColor', 'buttonSecondaryOnDarkHoverTextColor', 'buttonSecondaryOnDarkActiveTextColor', 'buttonSecondaryOnDarkBackgroundColor', 'buttonSecondaryOnDarkHoverBackgroundColor', 'buttonSecondaryOnDarkActiveBackgroundColor'];
 export const featuredThemeAttributes = ['buttonFeaturedTextColor', 'buttonFeaturedHoverTextColor', 'buttonFeaturedActiveTextColor', 'buttonFeaturedGradientStartColor', 'buttonFeaturedGradientEndColor', 'buttonFeaturedBackgroundColor', 'buttonFeaturedHoverBackgroundColor', 'buttonFeaturedActiveBackgroundColor'];
-export const destructiveThemeAttributes = ['buttonDestructiveTextColor', 'buttonDestructiveHoverTextColor', 'buttonDestructiveActiveTextColor', 'buttonDestructiveBorderColor', 'buttonDestructiveHoverBorderColor', 'buttonDestructiveActiveBorderColor', 'buttonDestructiveBackgroundColor', 'buttonDestructiveHoverBackgroundColor', 'buttonDestructiveActiveBackgroundColor'];
+export const destructiveThemeAttributes = ['buttonDestructiveTextColor', 'buttonDestructiveHoverTextColor', 'buttonDestructiveActiveTextColor', 'buttonDestructiveBorderColor', 'buttonDestructiveHoverBorderColor', 'buttonDestructiveActiveBorderColor', 'buttonDestructiveBackgroundColor', 'buttonDestructiveHoverBackgroundColor', 'buttonDestructiveActiveBackgroundColor'];
+export const linkThemeAttributes = ['buttonLinkLoadingColor'];

package/bpk-component-chat-notification/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './src/BpkChatNotification';
+export type { BpkChatNotificationProps } from './src/BpkChatNotification';

package/bpk-component-chat-notification/index.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export { default } from "./src/BpkChatNotification";

package/bpk-component-chat-notification/src/BpkChatNotification.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+export type BpkChatNotificationProps = {
+    /** Text displayed in the notification. */
+    text: string;
+    /** Optional icon to display before the text. */
+    icon?: FunctionComponent;
+};
+declare const BpkChatNotification: ({ icon: Icon, text, }: BpkChatNotificationProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatNotification;

package/bpk-component-chat-notification/src/BpkChatNotification.js

@@ -0,0 +1,43 @@
+/*
+ * 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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkChatNotification.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkChatNotification = ({
+  icon: Icon,
+  text
+}) => /*#__PURE__*/_jsxs("output", {
+  className: getClassName('bpk-chat-notification'),
+  "aria-atomic": "true",
+  "data-testid": "bpk-chat-notification",
+  ...getDataComponentAttribute('ChatNotification'),
+  children: [Icon && /*#__PURE__*/_jsx("span", {
+    className: getClassName('bpk-chat-notification__icon'),
+    children: /*#__PURE__*/_jsx(Icon, {
+      "aria-hidden": "true"
+    })
+  }), /*#__PURE__*/_jsx(BpkText, {
+    tagName: "span",
+    textStyle: TEXT_STYLES.footnote,
+    children: text
+  })]
+});
+export default BpkChatNotification;

package/bpk-component-chat-notification/src/BpkChatNotification.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-chat-notification{display:flex;width:100%;padding:1rem;align-items:center;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:none;animation:bpk-chat-notification-slide-in 400ms ease-out forwards;gap:.5rem}@media(prefers-reduced-motion: reduce){.bpk-chat-notification{animation:none}}.bpk-chat-notification__icon{display:flex;flex-shrink:0;fill:#fff}@keyframes bpk-chat-notification-slide-in{from{transform:translateY(-0.625rem);opacity:0}to{transform:translateY(0);opacity:1}}

package/bpk-component-chat-thought-bubble/index.d.ts

@@ -0,0 +1,3 @@
+import BpkChatThoughtBubble from './src/BpkChatThoughtBubble';
+export type { BpkChatThoughtBubbleProps } from './src/BpkChatThoughtBubble';
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/index.js

@@ -0,0 +1,20 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkChatThoughtBubble from "./src/BpkChatThoughtBubble";
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/src/BpkChatThoughtBubble.d.ts

@@ -0,0 +1,8 @@
+export type BpkChatThoughtBubbleProps = {
+    /**
+     * The content to display in the thinking bubble.
+     */
+    content: string;
+};
+declare const BpkChatThoughtBubble: ({ content }: BpkChatThoughtBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/src/BpkChatThoughtBubble.js

@@ -0,0 +1,46 @@
+/*
+ * 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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkChatThoughtBubble.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkChatThoughtBubble = ({
+  content
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-chat-thought-bubble'),
+  ...getDataComponentAttribute('ChatThoughtBubble'),
+  "data-testid": "bpk-chat-thought-bubble",
+  children: [/*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-chat-thought-bubble__dots'),
+    "aria-hidden": "true",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-chat-thought-bubble__dots--dot', 'bpk-chat-thought-bubble__dots--dot-first')
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-chat-thought-bubble__dots--dot', 'bpk-chat-thought-bubble__dots--dot-second')
+    })]
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-chat-thought-bubble__bubble'),
+    children: /*#__PURE__*/_jsx(BpkText, {
+      textStyle: TEXT_STYLES.bodyDefault,
+      children: content
+    })
+  })]
+});
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/src/BpkChatThoughtBubble.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-chat-thought-bubble{display:flex;align-items:flex-end;transform:translateY(0.75rem) scale(0.98);opacity:0;animation:bpk-chat-thought-bubble-entrance .24s cubic-bezier(0.2, 0, 0, 1) forwards;gap:.5rem;will-change:transform,opacity}@media(prefers-reduced-motion: reduce){.bpk-chat-thought-bubble{animation:bpk-chat-thought-bubble-entrance-reduced .2s ease-out forwards}}.bpk-chat-thought-bubble__dots{display:flex;align-items:flex-end;flex-shrink:0;gap:.5rem}.bpk-chat-thought-bubble__dots--dot{border-radius:50%;background-color:#05203c;animation:bpk-chat-thought-bubble-dot-bounce 1.2s ease-in-out infinite;will-change:transform}@media(prefers-reduced-motion: reduce){.bpk-chat-thought-bubble__dots--dot{transform:none;animation:bpk-chat-thought-bubble-dot-pulse 2s ease-in-out infinite}}.bpk-chat-thought-bubble__dots--dot-first{width:.5rem;height:.5rem;animation-delay:0ms}.bpk-chat-thought-bubble__dots--dot-second{width:1rem;height:1rem;animation-delay:.2s}.bpk-chat-thought-bubble__bubble{position:relative;min-width:2.5rem;max-width:17.5rem;padding:1rem;align-self:flex-start;background:#05203c;color:#fff;opacity:1;animation:bpk-chat-thought-bubble-bubble-bounce 1.2s ease-in-out infinite;animation-delay:.4s;border-end-end-radius:1.5rem;border-end-start-radius:.25rem;border-start-end-radius:1.5rem;border-start-start-radius:1.5rem;overflow-wrap:break-word;will-change:transform;word-wrap:break-word}@media(prefers-reduced-motion: reduce){.bpk-chat-thought-bubble__bubble{animation:none}}@keyframes bpk-chat-thought-bubble-dot-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-0.625rem)}}@keyframes bpk-chat-thought-bubble-dot-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:1}}@keyframes bpk-chat-thought-bubble-bubble-bounce{0%,60%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-0.375rem) scale(1.02)}}@keyframes bpk-chat-thought-bubble-entrance{from{transform:translateY(0.75rem) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes bpk-chat-thought-bubble-entrance-reduced{from{opacity:0}to{opacity:1}}

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

@@ -3,10 +3,10 @@ import BpkDropdownChip from './src/BpkDropdownChip';
 import BpkIconChip from './src/BpkIconChip';
 import BpkSelectableChip, { type Props as SelectableProps } from './src/BpkSelectableChip';
 import { CHIP_TYPES } from './src/commonTypes';
-import themeAttributes from './src/themeAttributes';
+import themeAttributes, { chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes } from './src/themeAttributes';
 import type { CommonProps } from './src/commonTypes';
 export type BpkSelectableChipProps = SelectableProps;
 export type BpkDismissibleChipProps = CommonProps;
 export type BpkDropdownChipProps = CommonProps;
 export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes, chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes, };

package/bpk-component-chip/index.js

@@ -21,6 +21,6 @@ import BpkDropdownChip from "./src/BpkDropdownChip";
 import BpkIconChip from "./src/BpkIconChip";
 import BpkSelectableChip from "./src/BpkSelectableChip";
 import { CHIP_TYPES } from "./src/commonTypes";
-import themeAttributes from "./src/themeAttributes";
+import themeAttributes, { chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes } from "./src/themeAttributes";
 export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes, chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes };

package/bpk-component-chip/src/BpkSelectableChip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}
+.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;cursor:pointer;border-radius:.5rem;border-radius:var(--bpk-chip-border-radius, 0.5rem)}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-on-dark-background-color, transparent);color:#fff;color:var(--bpk-chip-on-dark-text-color, rgb(255, 255, 255));box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-border-color, rgba(255, 255, 255, 0.5)) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-active-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-active-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-background-color, transparent);color:#161616;color:var(--bpk-chip-default-text-color, rgb(22, 22, 22));box-shadow:0 0 0 1px #c1c7cf inset;box-shadow:0 0 0 1px var(--bpk-chip-default-border-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-active-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-active-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;background-color:var(--bpk-chip-on-image-background-color, rgb(255, 255, 255));color:#161616;color:var(--bpk-chip-on-image-text-color, rgb(22, 22, 22));box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-active-background-color, rgb(239, 243, 248))}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}

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

@@ -1,2 +1,6 @@
 declare const _default: string[];
 export default _default;
+export declare const chipBorderRadiusThemeAttributes: string[];
+export declare const chipDefaultThemeAttributes: string[];
+export declare const chipOnDarkThemeAttributes: string[];
+export declare const chipOnImageThemeAttributes: string[];