@skyscanner/backpack-web 41.18.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-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[];

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

@@ -16,4 +16,10 @@
  * limitations under the License.
  */
 
-export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
+// Backward-compatible: original 8 selected-state attributes.
+// Do not modify — existing consumers depend on this exact list.
+export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
+export const chipBorderRadiusThemeAttributes = ['chipBorderRadius'];
+export const chipDefaultThemeAttributes = ['chipDefaultBackgroundColor', 'chipDefaultTextColor', 'chipDefaultBorderColor', 'chipDefaultHoverBackgroundColor', 'chipDefaultHoverBorderColor', 'chipDefaultActiveBorderColor', 'chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipDefaultSelectedHoverBackgroundColor', 'chipDefaultSelectedActiveBackgroundColor'];
+export const chipOnDarkThemeAttributes = ['chipOnDarkBackgroundColor', 'chipOnDarkTextColor', 'chipOnDarkBorderColor', 'chipOnDarkHoverBorderColor', 'chipOnDarkActiveBorderColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnDarkSelectedHoverBackgroundColor', 'chipOnDarkSelectedActiveBackgroundColor'];
+export const chipOnImageThemeAttributes = ['chipOnImageBackgroundColor', 'chipOnImageTextColor', 'chipOnImageHoverBackgroundColor', 'chipOnImageActiveBackgroundColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedTextColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor'];

package/bpk-component-pagination/src/BpkPaginationPage.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-page{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-pagination-page: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-pagination-page: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-pagination-page: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-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{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));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected: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-pagination-page--not-selected: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-pagination-page--not-selected: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-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
+.bpk-pagination-page{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-pagination-page: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-pagination-page: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-pagination-page: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-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-pagination-page.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-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{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));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected: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-pagination-page--not-selected: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-pagination-page--not-selected: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-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-pagination-page--not-selected.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-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}

package/bpk-component-scrollable-calendar/src/utils.d.ts

@@ -1,3 +1,3 @@
-declare const getMonthsArray: (startDate: Date, count: number) => Date[];
+declare const getMonthsArray: (startDate: Date, count: number) => any[];
 declare const getMonthItemHeights: (months: Date[], weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, columnCount: number, rowHeight: number, baseMonthItemHeight: number) => number[];
 export { getMonthsArray, getMonthItemHeights };

package/bpk-component-segmented-control/index.d.ts

@@ -2,3 +2,5 @@ import BpkSegmentedControl, { useSegmentedControlPanels, type Props as BpkSegmen
 export type { BpkSegmentControlProps, TabPanelProps };
 export { useSegmentedControlPanels };
 export default BpkSegmentedControl;
+export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from './src/BpkSegmentedControlV2/BpkSegmentedControlV2';
+export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, SegmentTypesV2, } from './src/BpkSegmentedControlV2/common-types';

package/bpk-component-segmented-control/index.js

@@ -18,4 +18,5 @@
 
 import BpkSegmentedControl, { useSegmentedControlPanels } from "./src/BpkSegmentedControl";
 export { useSegmentedControlPanels };
-export default BpkSegmentedControl;
+export default BpkSegmentedControl;
+export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from "./src/BpkSegmentedControlV2/BpkSegmentedControlV2";

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.d.ts

@@ -0,0 +1,19 @@
+import { SEGMENT_TYPES_V2 } from './common-types';
+import type { BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, BpkSegmentedControlV2RootProps } from './common-types';
+declare const BpkSegmentedControlV2Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemControl: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2Indicator: () => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControlV2: {
+    Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
+    ItemControl: () => import("react/jsx-runtime").JSX.Element;
+    ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+    Indicator: () => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkSegmentedControlV2;
+export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2, };
+export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, };

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.js

@@ -0,0 +1,81 @@
+/*
+ * 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 { SegmentGroup } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import { SEGMENT_TYPES_V2 } from "./common-types";
+import STYLES from "./BpkSegmentedControlV2.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkSegmentedControlV2Root = ({
+  children,
+  defaultValue,
+  label,
+  onChange,
+  shadow = false,
+  type = SEGMENT_TYPES_V2.CanvasDefault,
+  value
+}) => {
+  const containerClass = getClassName('bpk-segmented-control-v2', `bpk-segmented-control-v2--${type}`, shadow && 'bpk-segmented-control-v2--shadow');
+  return /*#__PURE__*/_jsxs(SegmentGroup.Root, {
+    className: containerClass,
+    value: value,
+    defaultValue: defaultValue,
+    onValueChange: onChange ? ({
+      value: selectedValue
+    }) => {
+      if (selectedValue !== null) onChange(selectedValue);
+    } : undefined,
+    orientation: "horizontal",
+    ...getDataComponentAttribute('SegmentedControlV2'),
+    children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
+      children: label
+    }), children]
+  });
+};
+const BpkSegmentedControlV2Item = ({
+  children,
+  value
+}) => /*#__PURE__*/_jsx(SegmentGroup.Item, {
+  value: value,
+  className: getClassName('bpk-segmented-control-v2__item'),
+  children: children
+});
+const BpkSegmentedControlV2ItemText = ({
+  children
+}) => /*#__PURE__*/_jsx(SegmentGroup.ItemText, {
+  className: getClassName('bpk-segmented-control-v2__item-text'),
+  children: children
+});
+const BpkSegmentedControlV2ItemControl = () => /*#__PURE__*/_jsx(SegmentGroup.ItemControl, {
+  className: getClassName('bpk-segmented-control-v2__item-control')
+});
+const BpkSegmentedControlV2ItemHiddenInput = () => /*#__PURE__*/_jsx(SegmentGroup.ItemHiddenInput, {});
+const BpkSegmentedControlV2Indicator = () => /*#__PURE__*/_jsx(SegmentGroup.Indicator, {
+  className: getClassName('bpk-segmented-control-v2__indicator')
+});
+const BpkSegmentedControlV2 = {
+  Root: BpkSegmentedControlV2Root,
+  Item: BpkSegmentedControlV2Item,
+  ItemText: BpkSegmentedControlV2ItemText,
+  ItemControl: BpkSegmentedControlV2ItemControl,
+  ItemHiddenInput: BpkSegmentedControlV2ItemHiddenInput,
+  Indicator: BpkSegmentedControlV2Indicator
+};
+export default BpkSegmentedControlV2;
+export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2 };

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.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-segmented-control-v2{position:relative;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;border-radius:.5rem;background-color:#eff3f8;overflow:hidden}.bpk-segmented-control-v2--canvas-default{background-color:#eff3f8}.bpk-segmented-control-v2--canvas-contrast{background-color:#fff}.bpk-segmented-control-v2--canvas-contrast .bpk-segmented-control-v2__indicator{background-color:#fff}.bpk-segmented-control-v2--surface-default{background-color:#eff3f8}.bpk-segmented-control-v2--surface-default .bpk-segmented-control-v2__indicator{background-color:#eff3f8}.bpk-segmented-control-v2--surface-contrast{background-color:hsla(0,0%,100%,.1)}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__indicator{background-color:#024daf}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__item-text{color:#fff;border-inline-start-color:hsla(0,0%,100%,.5)}.bpk-segmented-control-v2--shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control-v2>[data-part=label]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-segmented-control-v2__indicator{position:absolute;top:var(--top);left:var(--left);width:var(--width);height:var(--height);background-color:#05203c;--transition-duration: 0ms}.bpk-segmented-control-v2__item{display:grid;cursor:pointer}.bpk-segmented-control-v2__item:first-of-type .bpk-segmented-control-v2__item-text{border-inline-start:none}.bpk-segmented-control-v2__item:has([data-state=checked]) .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has([data-state=checked])+.bpk-segmented-control-v2__item .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has(:focus-visible){z-index:1;outline:.125rem solid #0062e3;outline-offset:-0.125rem}.bpk-segmented-control-v2__item-control{display:none}.bpk-segmented-control-v2__item-text{padding:.25rem .5rem;display:flex;z-index:1;min-height:2rem;grid-area:1/1;justify-content:center;align-items:center;transition:color 50ms ease-in-out;color:#161616;overflow:hidden;border-inline-start:1px solid #c1c7cf;pointer-events:none;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control-v2__item-text svg{fill:currentcolor}.bpk-segmented-control-v2__item-text[data-state=checked]{color:#fff}