@skyscanner/backpack-web 42.1.0 → 42.2.0

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.js

@@ -0,0 +1,137 @@
+/*
+ * 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 { useCallback, useLayoutEffect, useRef, useState } from 'react';
+export const LINE_HEIGHT = 24;
+export const MIN_INPUT_HEIGHT = LINE_HEIGHT;
+export const MAX_INPUT_HEIGHT_PHASE_1 = LINE_HEIGHT * 4;
+export const MAX_INPUT_HEIGHT_PHASE_2 = LINE_HEIGHT * 5;
+export const MIN_CONTAINER_HEIGHT = 24;
+export const MAX_CONTAINER_HEIGHT = 96;
+export const PARENT_PADDING_TOP = 16;
+const useTextAreaAutoResize = ({
+  enabled = true,
+  ref,
+  value
+}) => {
+  const [dimensions, setDimensions] = useState({
+    isExpanding: false,
+    textareaHeight: MIN_INPUT_HEIGHT,
+    containerHeight: MIN_CONTAINER_HEIGHT,
+    isCapped: false
+  });
+  const [containerWidth, setContainerWidth] = useState(0);
+  const measureElementRef = useRef(null);
+  const lineHeightRef = useRef(LINE_HEIGHT);
+  const previousValueRef = useRef('');
+  const shouldScrollRef = useRef(false);
+  const isInitialRenderRef = useRef(true);
+  const scrollToBottom = useCallback(() => {
+    if (ref?.current) {
+      const textarea = ref.current;
+      requestAnimationFrame(() => {
+        textarea.scrollTop = textarea.scrollHeight;
+      });
+    }
+  }, [ref]);
+  useLayoutEffect(() => {
+    if (!enabled || !ref?.current) {
+      return undefined;
+    }
+    const textarea = ref.current;
+    const computedStyle = getComputedStyle(textarea);
+    const parsedLineHeight = parseFloat(computedStyle.lineHeight);
+    if (!Number.isNaN(parsedLineHeight) && parsedLineHeight > 0) {
+      lineHeightRef.current = parsedLineHeight;
+    }
+    const tempTextarea = document.createElement('textarea');
+    tempTextarea.style.position = 'absolute';
+    tempTextarea.style.visibility = 'hidden';
+    tempTextarea.style.height = 'auto';
+    tempTextarea.style.fontSize = computedStyle.fontSize;
+    tempTextarea.style.fontFamily = computedStyle.fontFamily;
+    tempTextarea.style.lineHeight = computedStyle.lineHeight;
+    tempTextarea.style.padding = computedStyle.padding;
+    tempTextarea.style.border = computedStyle.border;
+    tempTextarea.style.boxSizing = computedStyle.boxSizing;
+    tempTextarea.style.whiteSpace = 'pre-wrap';
+    tempTextarea.style.overflowWrap = 'break-word';
+    tempTextarea.style.width = `${textarea.offsetWidth}px`;
+    tempTextarea.rows = 1;
+    document.body.appendChild(tempTextarea);
+    measureElementRef.current = tempTextarea;
+    const resizeObserver = new ResizeObserver(entries => {
+      setContainerWidth(Math.round(entries[0].contentRect.width));
+    });
+    resizeObserver.observe(textarea);
+    return () => {
+      if (measureElementRef.current) {
+        measureElementRef.current.remove();
+        measureElementRef.current = null;
+      }
+      resizeObserver.disconnect();
+    };
+  }, [enabled, ref]);
+  useLayoutEffect(() => {
+    if (!enabled || !ref?.current || !measureElementRef.current) {
+      return;
+    }
+    const textarea = ref.current;
+    const measureEl = measureElementRef.current;
+    measureEl.style.width = `${textarea.offsetWidth}px`;
+    measureEl.value = value || ' ';
+    const {
+      scrollHeight
+    } = measureEl;
+    const lines = Math.max(1, Math.ceil(scrollHeight / lineHeightRef.current));
+    const isCapped = lines >= 5;
+    const maxInputHeight = isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+    const targetInputHeight = Math.max(MIN_INPUT_HEIGHT, Math.min(scrollHeight, maxInputHeight));
+    const extraSpace = isCapped ? PARENT_PADDING_TOP : 0;
+    const targetContainerHeight = Math.max(MIN_CONTAINER_HEIGHT, Math.min(targetInputHeight - extraSpace, MAX_CONTAINER_HEIGHT));
+    setDimensions(prev => {
+      const isContentAdded = value.length > previousValueRef.current.length;
+      const isAppending = value.startsWith(previousValueRef.current);
+      const prevMaxHeight = prev.isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+      const isInitialRender = isInitialRenderRef.current;
+      const shouldScroll = isContentAdded && isAppending && textarea.scrollHeight > prevMaxHeight || isInitialRender && scrollHeight > maxInputHeight;
+      shouldScrollRef.current = shouldScroll;
+      if (isInitialRender) {
+        isInitialRenderRef.current = false;
+      }
+      return {
+        isExpanding: lines > 1,
+        textareaHeight: targetInputHeight,
+        containerHeight: targetContainerHeight,
+        isCapped
+      };
+    });
+    previousValueRef.current = value;
+  }, [value, ref, enabled, containerWidth]);
+  useLayoutEffect(() => {
+    if (shouldScrollRef.current) {
+      scrollToBottom();
+      shouldScrollRef.current = false;
+    }
+  }, [dimensions, scrollToBottom]);
+  return {
+    ...dimensions,
+    scrollToBottom
+  };
+};
+export default useTextAreaAutoResize;

package/bpk-component-chatbot-input/src/themeAttributes.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Theme attributes for BpkChatbotInput.
+ *
+ * Usage with BpkThemeProvider:
+ *
+ *   import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ *   import BpkChatbotInput, { themeAttributes } from '@skyscanner/backpack-web/bpk-component-chatbot-input';
+ *
+ *   <BpkThemeProvider theme={{ chatbotInputBorderRadius: '999px', chatbotInputFocusBorderColor: '#FF6600' }} themeAttributes={themeAttributes}>
+ *     <BpkChatbotInput ... />
+ *   </BpkThemeProvider>
+ */
+declare const themeAttributes: string[];
+export default themeAttributes;

package/bpk-component-chatbot-input/src/themeAttributes.js

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+/**
+ * Theme attributes for BpkChatbotInput.
+ *
+ * Usage with BpkThemeProvider:
+ *
+ *   import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ *   import BpkChatbotInput, { themeAttributes } from '@skyscanner/backpack-web/bpk-component-chatbot-input';
+ *
+ *   <BpkThemeProvider theme={{ chatbotInputBorderRadius: '999px', chatbotInputFocusBorderColor: '#FF6600' }} themeAttributes={themeAttributes}>
+ *     <BpkChatbotInput ... />
+ *   </BpkThemeProvider>
+ */
+const themeAttributes = [/** Border radius for the input container. Applies to both cars and composer modes. */
+'chatbotInputBorderRadius', /** Border colour for hover and focus states. Only applies to the cars (single-line) mode. */
+'chatbotInputFocusBorderColor'];
+export default themeAttributes;

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

@@ -1,11 +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, checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, BpkCheckboxV2, };
+export type { BpkCheckboxProps };
+export { themeAttributes };
+export { default as BpkCheckboxV2 } from './src/BpkCheckboxV2/BpkCheckboxV2';
+export { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, } from './src/BpkCheckboxV2/themeAttributes';
+export type { BpkCheckboxV2RootProps, BpkCheckboxV2CheckedState } from './src/BpkCheckboxV2/BpkCheckboxV2Root';
+export type { BpkCheckboxV2ControlProps } from './src/BpkCheckboxV2/BpkCheckboxV2Control';
+export type { BpkCheckboxV2LabelProps } from './src/BpkCheckboxV2/BpkCheckboxV2Label';
+export type { BpkCheckboxV2DescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxV2Description';

package/bpk-component-checkbox/index.js

@@ -17,8 +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, checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes, BpkCheckboxV2 };
+export { themeAttributes };
+export { default as BpkCheckboxV2 } from "./src/BpkCheckboxV2/BpkCheckboxV2";
+export { checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes } from "./src/BpkCheckboxV2/themeAttributes";

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

@@ -0,0 +1,9 @@
+declare const BpkCheckboxV2: {
+    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: () => null;
+    Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children }: import("./BpkCheckboxV2Description").BpkCheckboxV2DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+};
+export default BpkCheckboxV2;

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckbox.js → BpkCheckboxV2.js}

@@ -16,18 +16,18 @@
  * 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
+import BpkCheckboxV2Control from "./BpkCheckboxV2Control";
+import BpkCheckboxV2Description from "./BpkCheckboxV2Description";
+import BpkCheckboxV2HiddenInput from "./BpkCheckboxV2HiddenInput";
+import BpkCheckboxV2Indicator from "./BpkCheckboxV2Indicator";
+import BpkCheckboxV2Label from "./BpkCheckboxV2Label";
+import BpkCheckboxV2Root from "./BpkCheckboxV2Root";
+const BpkCheckboxV2 = {
+  Root: BpkCheckboxV2Root,
+  Control: BpkCheckboxV2Control,
+  Indicator: BpkCheckboxV2Indicator,
+  Label: BpkCheckboxV2Label,
+  Description: BpkCheckboxV2Description,
+  HiddenInput: BpkCheckboxV2HiddenInput
 };
-export default BpkCheckbox;
+export default BpkCheckboxV2;

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

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

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxControl.js → BpkCheckboxV2Control.js}

@@ -18,13 +18,13 @@
 
 import { Checkbox } from '@ark-ui/react';
 import { cssModules } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCheckboxControl = ({
+const BpkCheckboxV2Control = ({
   children
 }) => /*#__PURE__*/_jsx(Checkbox.Control, {
   className: getClassName('bpk-checkbox-v2__control'),
   children: children
 });
-export default BpkCheckboxControl;
+export default BpkCheckboxV2Control;

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

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

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxDescription.js → BpkCheckboxV2Description.js}

@@ -17,16 +17,16 @@
  */
 
 import { cssModules } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.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 = ({
+const BpkCheckboxV2Description = ({
   children
 }) => /*#__PURE__*/_jsx("span", {
   className: getClassName('bpk-checkbox-v2__description'),
   children: children
 });
-export default BpkCheckboxDescription;
+export default BpkCheckboxV2Description;

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

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

package/bpk-component-checkbox/src/BpkCheckboxV2/{BpkCheckboxHiddenInput.js → BpkCheckboxV2HiddenInput.js}

@@ -21,5 +21,5 @@ 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;
+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/{BpkCheckboxIndicator.js → BpkCheckboxV2Indicator.js}

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-// The checkmark and indeterminate bar are rendered via CSS on BpkCheckboxControl
+// 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 BpkCheckboxIndicator = () => null;
-export default BpkCheckboxIndicator;
+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/{BpkCheckboxLabel.js → BpkCheckboxV2Label.js}

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

@@ -18,10 +18,10 @@
 
 import { Checkbox } from '@ark-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
-import STYLES from "./BpkCheckbox.module.css";
+import STYLES from "./BpkCheckboxV2.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCheckboxRoot = ({
+const BpkCheckboxV2Root = ({
   checked,
   children,
   defaultChecked,
@@ -46,4 +46,4 @@ const BpkCheckboxRoot = ({
   ...getDataComponentAttribute('CheckboxV2'),
   children: children
 });
-export default BpkCheckboxRoot;
+export default BpkCheckboxV2Root;

package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css

@@ -15,4 +15,4 @@
  * 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;right:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;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}
+.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}