@skyscanner/backpack-web 42.0.0 → 42.2.0

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.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 BpkCheckboxV2HiddenInput = () => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {});
+export default BpkCheckboxV2HiddenInput;

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

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

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Indicator.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 BpkCheckboxV2Control
+// (bpk-checkbox__checkmark mixin + ::before pseudo-element), so this slot
+// component intentionally renders nothing.
+const BpkCheckboxV2Indicator = () => null;
+export default BpkCheckboxV2Indicator;

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

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

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Label.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 "./BpkCheckboxV2.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCheckboxV2Label = ({
+  children
+}) => /*#__PURE__*/_jsx(Checkbox.Label, {
+  className: getClassName('bpk-checkbox-v2__label'),
+  children: children
+});
+export default BpkCheckboxV2Label;

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

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

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.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 "./BpkCheckboxV2.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCheckboxV2Root = ({
+  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 BpkCheckboxV2Root;

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";

package/bpk-component-checkbox-card/src/BpkCheckboxCard.d.ts

@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+import { Root } from './BpkCheckboxCardRoot';
+import type { TextStyle } from '../../bpk-component-text/src/BpkText';
+/**
+ * BpkCheckboxCard.HiddenInput - Accessible hidden checkbox input for form submission.
+ *
+ * Renders a visually hidden <input type="checkbox"> managed by Ark UI.
+ * Handles name, value, checked state, required, and disabled automatically.
+ * Must be placed inside BpkCheckboxCard.Root.
+ *
+ * @returns {JSX.Element} The hidden checkbox input element.
+ */
+declare function HiddenInput(): import("react/jsx-runtime").JSX.Element;
+export type ContentProps = {
+    /**
+     * Child components (slots, Stack layout primitives, etc.)
+     * Optional - can be empty for minimal card displays
+     */
+    children?: ReactNode;
+};
+/**
+ * BpkCheckboxCard.Content - Main content container
+ *
+ * Provides a simple wrapper container for organising checkbox card content.
+ * Use BpkVStack / BpkHStack for layout control inside Content.
+ */
+declare function Content({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export type LabelProps = {
+    /** Label text content (plain string only) */
+    children: string;
+    /** Text style from Backpack typography system. @default "heading-5" */
+    textStyle?: TextStyle;
+    /** Maximum number of lines before truncation. @default 2 */
+    lineClamp?: number;
+};
+/**
+ * BpkCheckboxCard.Label - Primary label slot component
+ *
+ * Displays the primary text label using BpkText.
+ * Automatically truncates with ellipsis after the specified number of lines.
+ * Accessibility is provided by the wrapping <label> element from Ark UI's CheckboxRoot.
+ */
+declare function Label({ children, lineClamp, textStyle }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export type DescriptionProps = {
+    /** Description text content (plain string only) */
+    children: string;
+    /** Text style from Backpack typography system. @default "body-default" */
+    textStyle?: TextStyle;
+    /** Maximum number of lines before truncation. @default 3 */
+    lineClamp?: number;
+};
+/**
+ * BpkCheckboxCard.Description - Secondary description slot component
+ *
+ * Displays secondary descriptive text using BpkText.
+ * Automatically truncates with ellipsis after the specified number of lines.
+ */
+declare function Description({ children, lineClamp, textStyle }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type PriceProps = {
+    /** Price string, e.g. "£35" */
+    price: string;
+    /** Leading text before the price, e.g. "from". @default "from" */
+    leadingText?: string;
+};
+/**
+ * BpkCheckboxCard.Price - Cars-specific price slot.
+ *
+ * Reads `loading` from context automatically:
+ * - loading=true  → shows "{leadingText}" + spinner
+ * - loading=false → shows "{leadingText} {price}" as secondary description text
+ *
+ * Intended for use with variant="cars" only.
+ */
+declare function Price({ leadingText, price }: PriceProps): import("react/jsx-runtime").JSX.Element;
+export type IndicatorProps = Record<string, never>;
+/**
+ * BpkCheckboxCard.Indicator - Visual corner indicator
+ *
+ * Renders a circular checkbox indicator in the top-right corner of the card.
+ * Empty circle when unchecked; filled with a checkmark when checked.
+ * The visual state is driven by Ark UI's data-state attribute on the root <label>.
+ */
+declare function Indicator(_props?: IndicatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * BpkCheckboxCard - Compound component for selectable cards.
+ *
+ * Built on Ark UI's Checkbox primitive — the Root renders as a <label> element,
+ * providing native accessibility, keyboard navigation, and form integration.
+ *
+ * @example Standard layout
+ * <BpkCheckboxCard.Root checked={selected} onCheckedChange={setSelected}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkVStack gap="bpk-spacing-md" align="center" width="100%">
+ *       <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *       <BpkPrice price="£85" />
+ *     </BpkVStack>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ *
+ * @example With corner indicator
+ * <BpkCheckboxCard.Root checked={selected} onCheckedChange={setSelected}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Indicator />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ */
+declare const BpkCheckboxCard: typeof Root & {
+    Root: typeof Root;
+    HiddenInput: typeof HiddenInput;
+    Content: typeof Content;
+    Indicator: typeof Indicator;
+    Label: typeof Label;
+    Description: typeof Description;
+    Price: typeof Price;
+};
+export { BpkCheckboxCard };
+export default BpkCheckboxCard;
+export type { RootProps, RootProps as BpkCheckboxCardRootProps } from './BpkCheckboxCardRoot';
+export type { ContentProps as BpkCheckboxCardContentProps };
+export type { LabelProps as BpkCheckboxCardLabelProps };
+export type { DescriptionProps as BpkCheckboxCardDescriptionProps };
+export type { PriceProps as BpkCheckboxCardPriceProps };
+export { useCheckboxCardContext } from './CheckboxCardContext';
+export type { CheckboxCardContextValue } from './CheckboxCardContext';
+export * from './common-types';

package/bpk-component-checkbox-card/src/BpkCheckboxCard.js

@@ -0,0 +1,216 @@
+/*
+ * 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 { CheckboxHiddenInput } from '@ark-ui/react';
+import { withButtonAlignment } from "../../bpk-component-icon";
+import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
+import { BpkSpinner, SPINNER_TYPES } from "../../bpk-component-spinner";
+import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import { Root } from "./BpkCheckboxCardRoot";
+import { useCheckboxCardContext } from "./CheckboxCardContext";
+import STYLES from "./BpkCheckboxCard.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const AlignedTickCircleIcon = withButtonAlignment(TickCircleIcon);
+
+// ─── HiddenInput ─────────────────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard.HiddenInput - Accessible hidden checkbox input for form submission.
+ *
+ * Renders a visually hidden <input type="checkbox"> managed by Ark UI.
+ * Handles name, value, checked state, required, and disabled automatically.
+ * Must be placed inside BpkCheckboxCard.Root.
+ *
+ * @returns {JSX.Element} The hidden checkbox input element.
+ */
+function HiddenInput() {
+  return /*#__PURE__*/_jsx(CheckboxHiddenInput, {});
+}
+
+// ─── Content ─────────────────────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard.Content - Main content container
+ *
+ * Provides a simple wrapper container for organising checkbox card content.
+ * Use BpkVStack / BpkHStack for layout control inside Content.
+ */
+
+function Content({
+  children
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-checkbox-card-content'),
+    children: children
+  });
+}
+
+// ─── Label ───────────────────────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard.Label - Primary label slot component
+ *
+ * Displays the primary text label using BpkText.
+ * Automatically truncates with ellipsis after the specified number of lines.
+ * Accessibility is provided by the wrapping <label> element from Ark UI's CheckboxRoot.
+ */
+
+function Label({
+  children,
+  lineClamp = 2,
+  textStyle = TEXT_STYLES.heading5
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-checkbox-card-label'),
+    style: {
+      '--bpk-label-line-clamp': lineClamp
+    },
+    children: /*#__PURE__*/_jsx(BpkText, {
+      textStyle: textStyle,
+      tagName: "span",
+      children: children
+    })
+  });
+}
+
+// ─── Description ─────────────────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard.Description - Secondary description slot component
+ *
+ * Displays secondary descriptive text using BpkText.
+ * Automatically truncates with ellipsis after the specified number of lines.
+ */
+
+function Description({
+  children,
+  lineClamp = 3,
+  textStyle = TEXT_STYLES.bodyDefault
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-checkbox-card-description'),
+    style: {
+      '--bpk-description-line-clamp': lineClamp
+    },
+    children: /*#__PURE__*/_jsx(BpkText, {
+      textStyle: textStyle,
+      tagName: "span",
+      children: children
+    })
+  });
+}
+
+// ─── Price (cars variant only) ────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard.Price - Cars-specific price slot.
+ *
+ * Reads `loading` from context automatically:
+ * - loading=true  → shows "{leadingText}" + spinner
+ * - loading=false → shows "{leadingText} {price}" as secondary description text
+ *
+ * Intended for use with variant="cars" only.
+ */
+
+function Price({
+  leadingText = 'from',
+  price
+}) {
+  const {
+    loading
+  } = useCheckboxCardContext();
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-checkbox-card-price'),
+    children: [/*#__PURE__*/_jsx(BpkText, {
+      textStyle: TEXT_STYLES.footnote,
+      tagName: "span",
+      color: TEXT_COLORS.textSecondary,
+      children: leadingText
+    }), loading ? /*#__PURE__*/_jsx(BpkSpinner, {
+      type: SPINNER_TYPES.primary,
+      small: true
+    }) : /*#__PURE__*/_jsx(BpkText, {
+      textStyle: TEXT_STYLES.footnote,
+      tagName: "span",
+      color: TEXT_COLORS.textSecondary,
+      children: price
+    })]
+  });
+}
+
+// ─── Indicator ───────────────────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard.Indicator - Visual corner indicator
+ *
+ * Renders a circular checkbox indicator in the top-right corner of the card.
+ * Empty circle when unchecked; filled with a checkmark when checked.
+ * The visual state is driven by Ark UI's data-state attribute on the root <label>.
+ */
+
+function Indicator(_props = {}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-checkbox-card-indicator'),
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx(AlignedTickCircleIcon, {})
+  });
+}
+
+// ─── Compound Component ───────────────────────────────────────────────────────
+
+/**
+ * BpkCheckboxCard - Compound component for selectable cards.
+ *
+ * Built on Ark UI's Checkbox primitive — the Root renders as a <label> element,
+ * providing native accessibility, keyboard navigation, and form integration.
+ *
+ * @example Standard layout
+ * <BpkCheckboxCard.Root checked={selected} onCheckedChange={setSelected}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkVStack gap="bpk-spacing-md" align="center" width="100%">
+ *       <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *       <BpkPrice price="£85" />
+ *     </BpkVStack>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ *
+ * @example With corner indicator
+ * <BpkCheckboxCard.Root checked={selected} onCheckedChange={setSelected}>
+ *   <BpkCheckboxCard.HiddenInput />
+ *   <BpkCheckboxCard.Indicator />
+ *   <BpkCheckboxCard.Content>
+ *     <BpkCheckboxCard.Label>City Centre</BpkCheckboxCard.Label>
+ *   </BpkCheckboxCard.Content>
+ * </BpkCheckboxCard.Root>
+ */
+const BpkCheckboxCard = Object.assign(Root, {
+  Root,
+  HiddenInput,
+  Content,
+  Indicator,
+  Label,
+  Description,
+  Price
+});
+export { BpkCheckboxCard };
+export default BpkCheckboxCard;
+export { useCheckboxCardContext } from "./CheckboxCardContext";
+export * from "./common-types";

package/bpk-component-checkbox-card/src/BpkCheckboxCard.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-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-border-color: transparent;--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:0 0 0 1px #05203c}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}