@skyscanner/backpack-web 42.0.0-test → 42.1.0

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

@@ -1,4 +1,4 @@
-import BpkButton from './src/BpkButton/BpkButton';
-export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButton/common-types';
-export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './src/themeAttributes';
+import BpkButton from './src/BpkButton';
+export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/common-types';
+export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, linkThemeAttributes, } from './src/themeAttributes';
 export default BpkButton;

package/bpk-component-button/index.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import BpkButton from "./src/BpkButton/BpkButton";
-export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButton/common-types";
-export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./src/themeAttributes";
+import BpkButton from "./src/BpkButton";
+export { BUTTON_TYPES, SIZE_TYPES } from "./src/common-types";
+export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, linkThemeAttributes } from "./src/themeAttributes";
 export default BpkButton;

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

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

package/bpk-component-button/src/{BpkButton/BpkButton.js → BpkButton.js}

@@ -15,11 +15,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+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, Fragment as _Fragment, 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;
+  }
+};
 const BpkButton = ({
   blank = false,
   children,
@@ -29,25 +41,58 @@ const BpkButton = ({
   href = null,
   iconOnly = false,
   implicit = false,
+  leadingIcon = null,
+  loading = false,
   onClick = () => {},
   rel: propRel = undefined,
   size = SIZE_TYPES.small,
   submit = false,
+  trailingIcon = null,
   type = BUTTON_TYPES.primary,
   ...rest
 }) => {
+  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 hasIcons = !!(leadingIcon || trailingIcon);
+  const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, loading && 'bpk-button--loading', fullWidth && 'bpk-button--full-width', hasIcons && 'bpk-button--has-icon', isLinkType && iconOnly && 'bpk-button--link--icon-only', isLinkType && implicit && 'bpk-button--link--implicit', className);
   const underlinedClassName = shouldUnderline ? getCommonClassName('bpk-button--link-underlined', implicit && !alternate && 'bpk-button--link-underlined--implicit', alternate && !implicit && 'bpk-button--link-underlined--alternate', implicit && alternate && 'bpk-button--link-underlined--implicit--alternate') : null;
-  const content = underlinedClassName ? /*#__PURE__*/_jsx("span", {
+  const textContent = underlinedClassName ? /*#__PURE__*/_jsx("span", {
     className: underlinedClassName,
     children: children
   }) : children;
+  const leadingIconEl = !iconOnly && leadingIcon ? /*#__PURE__*/_jsx("span", {
+    className: getCommonClassName('bpk-button__leading-icon'),
+    children: leadingIcon
+  }) : null;
+  const trailingIconEl = !iconOnly && trailingIcon ? /*#__PURE__*/_jsx("span", {
+    className: getCommonClassName('bpk-button__trailing-icon'),
+    children: trailingIcon
+  }) : null;
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leadingIconEl, textContent, trailingIconEl]
+  });
+  const content = loading ? /*#__PURE__*/_jsxs("div", {
+    className: getCommonClassName('bpk-button__loading-container'),
+    children: [/*#__PURE__*/_jsx("span", {
+      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,
@@ -61,9 +106,10 @@ const BpkButton = ({
   }
   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/BpkButton.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-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}@media(hover: hover){.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined{background-size:0 1px}.bpk-button--link:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit,.bpk-button--link-on-dark:hover:not(:active):not(:disabled) .bpk-button--link-underlined--implicit--alternate{background-size:100% 1px}}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button--has-icon{display:inline-flex;align-items:center;gap:.5rem}.bpk-button--full-width.bpk-button--has-icon{display:flex;justify-content:center}.bpk-button__leading-icon,.bpk-button__trailing-icon{display:inline-flex;flex-shrink:0;text-decoration:none}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}

package/bpk-component-button/src/{BpkButton/common-types.d.ts → common-types.d.ts}

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

package/bpk-component-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

@@ -23,4 +23,5 @@ export const primaryOnLightThemeAttributes = ['buttonPrimaryOnLightTextColor', '
 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-checkbox/index.d.ts

@@ -1,5 +1,11 @@
 import BpkCheckbox, { type Props as BpkCheckboxProps } from './src/BpkCheckbox';
+import BpkCheckboxV2 from './src/BpkCheckboxV2/BpkCheckbox';
+import { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes } from './src/BpkCheckboxV2/themeAttributes';
 import themeAttributes from './src/themeAttributes';
 export type { BpkCheckboxProps };
+export type { BpkCheckboxRootProps, BpkCheckedState } from './src/BpkCheckboxV2/BpkCheckboxRoot';
+export type { BpkCheckboxControlProps } from './src/BpkCheckboxV2/BpkCheckboxControl';
+export type { BpkCheckboxLabelProps } from './src/BpkCheckboxV2/BpkCheckboxLabel';
+export type { BpkCheckboxDescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxDescription';
 export default BpkCheckbox;
-export { themeAttributes };
+export { themeAttributes, checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, BpkCheckboxV2, };

package/bpk-component-checkbox/index.js

@@ -17,6 +17,8 @@
  */
 
 import BpkCheckbox from "./src/BpkCheckbox";
+import BpkCheckboxV2 from "./src/BpkCheckboxV2/BpkCheckbox";
+import { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes } from "./src/BpkCheckboxV2/themeAttributes";
 import themeAttributes from "./src/themeAttributes";
 export default BpkCheckbox;
-export { themeAttributes };
+export { themeAttributes, checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, BpkCheckboxV2 };

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.d.ts

@@ -0,0 +1,9 @@
+declare const BpkCheckbox: {
+    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxRoot").BpkCheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children }: import("./BpkCheckboxControl").BpkCheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: () => null;
+    Label: ({ children }: import("./BpkCheckboxLabel").BpkCheckboxLabelProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children }: import("./BpkCheckboxDescription").BpkCheckboxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkCheckbox;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.js

@@ -0,0 +1,33 @@
+/*
+ * 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 BpkCheckboxControl from "./BpkCheckboxControl";
+import BpkCheckboxDescription from "./BpkCheckboxDescription";
+import BpkCheckboxHiddenInput from "./BpkCheckboxHiddenInput";
+import BpkCheckboxIndicator from "./BpkCheckboxIndicator";
+import BpkCheckboxLabel from "./BpkCheckboxLabel";
+import BpkCheckboxRoot from "./BpkCheckboxRoot";
+const BpkCheckbox = {
+  Root: BpkCheckboxRoot,
+  Control: BpkCheckboxControl,
+  Indicator: BpkCheckboxIndicator,
+  Label: BpkCheckboxLabel,
+  Description: BpkCheckboxDescription,
+  HiddenInput: BpkCheckboxHiddenInput
+};
+export default BpkCheckbox;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.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-checkbox-v2{display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-focus-visible]{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxControl.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxControlProps = {
+    children: ReactNode;
+};
+declare const BpkCheckboxControl: ({ children }: BpkCheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxControl;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxControl.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { Checkbox } from '@ark-ui/react';
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkCheckbox.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCheckboxControl = ({
+  children
+}) => /*#__PURE__*/_jsx(Checkbox.Control, {
+  className: getClassName('bpk-checkbox-v2__control'),
+  children: children
+});
+export default BpkCheckboxControl;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxDescription.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxDescriptionProps = {
+    children: ReactNode;
+};
+declare const BpkCheckboxDescription: ({ children }: BpkCheckboxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxDescription;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxDescription.js

@@ -0,0 +1,32 @@
+/*
+ * 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 { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkCheckbox.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+// Description renders as a <span> inside the Checkbox.Root <label>.
+// Being inside the <label> element means screen readers announce its text
+// as part of the checkbox's accessible name.
+const BpkCheckboxDescription = ({
+  children
+}) => /*#__PURE__*/_jsx("span", {
+  className: getClassName('bpk-checkbox-v2__description'),
+  children: children
+});
+export default BpkCheckboxDescription;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxHiddenInput.d.ts

@@ -0,0 +1,2 @@
+declare const BpkCheckboxHiddenInput: () => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxHiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxHiddenInput.js

@@ -0,0 +1,25 @@
+/*
+ * 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 { Checkbox } from '@ark-ui/react';
+
+// Renders Ark's visually hidden native <input type="checkbox">.
+// Include when the checkbox is inside a <form> for native form submission.
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkCheckboxHiddenInput = () => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {});
+export default BpkCheckboxHiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxIndicator.d.ts

@@ -0,0 +1,2 @@
+declare const BpkCheckboxIndicator: () => null;
+export default BpkCheckboxIndicator;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxIndicator.js

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+// The checkmark and indeterminate bar are rendered via CSS on BpkCheckboxControl
+// (bpk-checkbox__checkmark mixin + ::before pseudo-element), so this slot
+// component intentionally renders nothing.
+const BpkCheckboxIndicator = () => null;
+export default BpkCheckboxIndicator;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxLabel.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCheckboxLabelProps = {
+    children: ReactNode;
+};
+declare const BpkCheckboxLabel: ({ children }: BpkCheckboxLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxLabel;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxLabel.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { Checkbox } from '@ark-ui/react';
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkCheckbox.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCheckboxLabel = ({
+  children
+}) => /*#__PURE__*/_jsx(Checkbox.Label, {
+  className: getClassName('bpk-checkbox-v2__label'),
+  children: children
+});
+export default BpkCheckboxLabel;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxRoot.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export type BpkCheckedState = boolean | 'indeterminate';
+export type BpkCheckboxRootProps = {
+    children: ReactNode;
+    checked?: BpkCheckedState;
+    defaultChecked?: BpkCheckedState;
+    disabled?: boolean;
+    id?: string;
+    invalid?: boolean;
+    name?: string;
+    onCheckedChange?: (checked: BpkCheckedState) => void;
+    required?: boolean;
+    value?: string;
+};
+declare const BpkCheckboxRoot: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckboxRoot;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxRoot.js

@@ -0,0 +1,49 @@
+/*
+ * 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 { Checkbox } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import STYLES from "./BpkCheckbox.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCheckboxRoot = ({
+  checked,
+  children,
+  defaultChecked,
+  disabled = false,
+  id,
+  invalid = false,
+  name,
+  onCheckedChange,
+  required = false,
+  value
+}) => /*#__PURE__*/_jsx(Checkbox.Root, {
+  className: getClassName('bpk-checkbox-v2'),
+  checked: checked,
+  defaultChecked: defaultChecked,
+  disabled: disabled,
+  id: id,
+  invalid: invalid,
+  name: name,
+  onCheckedChange: details => onCheckedChange?.(details.checked),
+  required: required,
+  value: value,
+  ...getDataComponentAttribute('CheckboxV2'),
+  children: children
+});
+export default BpkCheckboxRoot;

package/bpk-component-checkbox/src/BpkCheckboxV2/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxSelectedColorThemeAttributes: string[];
+export declare const checkboxBorderRadiusThemeAttributes: string[];

package/bpk-component-checkbox/src/BpkCheckboxV2/themeAttributes.js

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

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

@@ -0,0 +1,3 @@
+export { BpkCheckboxCard, default, CHECKBOX_CARD_VARIANTS, CHECKBOX_CARD_RADIUS, useCheckboxCardContext, } from './src/BpkCheckboxCard';
+export type { BpkCheckboxCardRootProps, BpkCheckboxCardContentProps, BpkCheckboxCardLabelProps, BpkCheckboxCardDescriptionProps, CheckboxCardContextValue, CheckboxCardVariant, CheckboxCardRadius, CheckboxCardChangeHandler, } from './src/BpkCheckboxCard';
+export { default as CHECKBOX_CARD_THEME_ATTRIBUTES, createCheckboxCardTheme, } from './src/themeAttributes';

package/bpk-component-checkbox-card/index.js

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