@skyscanner/backpack-web 42.0.0 → 42.2.0

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

@@ -0,0 +1,111 @@
+/*
+ * 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, useRef, useState } from 'react';
+import { CHATBOT_INPUT_TYPES } from "../common-types";
+import { MAX_CHARACTERS } from "../constants";
+import useTextAreaAutoResize from "./useTextAreaAutoResize";
+const useChatbotInput = ({
+  inputType = CHATBOT_INPUT_TYPES.COMPOSER,
+  inputValue,
+  isPolling = false,
+  isSending = false,
+  maxCharacters = MAX_CHARACTERS,
+  onInputBlur,
+  onInputChange,
+  onInputClick = () => {},
+  onInputFocus,
+  onKeyDown = () => {},
+  onSubmit,
+  placeholder
+}) => {
+  const isCars = inputType === CHATBOT_INPUT_TYPES.CARS;
+  const isMultiLine = inputType === CHATBOT_INPUT_TYPES.CARS_COMPOSER || inputType === CHATBOT_INPUT_TYPES.COMPOSER;
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const isOverLimit = inputValue.length > maxCharacters;
+  const isDisabled = isSending || isPolling;
+  const {
+    containerHeight,
+    isCapped,
+    isExpanding,
+    textareaHeight
+  } = useTextAreaAutoResize({
+    ref: inputRef,
+    value: inputValue,
+    enabled: isMultiLine
+  });
+  const handleSubmit = useCallback(() => {
+    if (inputValue.trim() && !isDisabled && !isOverLimit) {
+      onSubmit();
+    }
+  }, [inputValue, onSubmit, isDisabled, isOverLimit]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === 'Enter') {
+      if (!isMultiLine) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        return;
+      }
+      if (!e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        return;
+      }
+    }
+    onKeyDown?.(e);
+  }, [isMultiLine, handleSubmit, onKeyDown]);
+  const handleInputFocus = useCallback(() => {
+    setIsFocused(true);
+    onInputFocus();
+  }, [onInputFocus]);
+  const handleInputBlur = useCallback(() => {
+    setIsFocused(false);
+    onInputBlur();
+  }, [onInputBlur]);
+  const inputProps = {
+    value: inputValue,
+    placeholder,
+    disabled: isDisabled,
+    isOverLimit,
+    onInputChange,
+    onInputFocus: handleInputFocus,
+    onInputBlur: handleInputBlur,
+    onInputClick,
+    onKeyDown: handleKeyDown,
+    dataTestId: isMultiLine ? 'bpk-chatbot-textarea-field' : 'bpk-chatbot-input-field'
+  };
+  const sendButtonDisabled = isCars ? isFocused && !inputValue.trim() || isDisabled || isOverLimit : !inputValue.trim() || isDisabled || isOverLimit;
+  return {
+    inputRef,
+    isFocused,
+    isDisabled,
+    isOverLimit,
+    isExpanding,
+    isCars,
+    sendButtonDisabled,
+    inputProps,
+    handleSubmit,
+    containerHeight,
+    textareaHeight,
+    isCapped
+  };
+};
+export default useChatbotInput;

package/bpk-component-chatbot-input/src/hooks/useChatbotInputManager.d.ts

@@ -0,0 +1,20 @@
+interface UseChatbotInputManagerOptions {
+    isSending?: boolean;
+    onSubmit: (value: string) => void;
+    sendMessage?: (message: string) => Promise<void>;
+    onPromptClick?: (id: string, promptText?: string) => void;
+    isModalOpen?: boolean;
+    autoClearOnSendingComplete?: boolean;
+    autoClearOnModalClose?: boolean;
+    autoClearOnClose?: boolean;
+    isOpen?: boolean;
+}
+interface UseChatbotInputManagerReturn {
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    handleInputChange: (value: string) => void;
+    handleSubmit: () => Promise<void> | void;
+    handlePromptClick?: (id: string, promptText?: string) => void;
+}
+declare const useChatbotInputManager: ({ autoClearOnClose, autoClearOnModalClose, autoClearOnSendingComplete, isModalOpen, isOpen, isSending, onPromptClick, onSubmit, sendMessage, }: UseChatbotInputManagerOptions) => UseChatbotInputManagerReturn;
+export default useChatbotInputManager;

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

@@ -0,0 +1,83 @@
+/*
+ * 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 { useState, useEffect, useRef, useCallback } from 'react';
+const useChatbotInputManager = ({
+  autoClearOnClose = false,
+  autoClearOnModalClose = false,
+  autoClearOnSendingComplete = false,
+  isModalOpen = false,
+  isOpen,
+  isSending = false,
+  onPromptClick,
+  onSubmit,
+  sendMessage
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const previousIsSending = useRef(isSending);
+  const previousIsModalOpen = useRef(isModalOpen);
+  const previousIsOpen = useRef(isOpen);
+  useEffect(() => {
+    if (autoClearOnSendingComplete && previousIsSending.current && !isSending) {
+      setInputValue('');
+    }
+    previousIsSending.current = isSending;
+  }, [isSending, autoClearOnSendingComplete]);
+  useEffect(() => {
+    if (autoClearOnModalClose && previousIsModalOpen.current && !isModalOpen) {
+      setInputValue('');
+    }
+    previousIsModalOpen.current = isModalOpen;
+  }, [isModalOpen, autoClearOnModalClose]);
+  useEffect(() => {
+    if (autoClearOnClose && previousIsOpen.current && !isOpen) {
+      setInputValue('');
+    }
+    previousIsOpen.current = isOpen;
+  }, [isOpen, autoClearOnClose]);
+  const handleInputChange = useCallback(value => {
+    setInputValue(value);
+  }, []);
+  const handleSubmit = useCallback(async () => {
+    const userMessage = inputValue.trim();
+    if (!userMessage || isSending) {
+      return;
+    }
+    setInputValue('');
+    onSubmit(userMessage);
+    if (sendMessage) {
+      await sendMessage(userMessage);
+    }
+  }, [inputValue, isSending, onSubmit, sendMessage]);
+  const handlePromptClick = useCallback((id, promptText) => {
+    if (promptText && !isSending && onPromptClick) {
+      setInputValue(promptText);
+    }
+    onPromptClick?.(id, promptText);
+  }, [isSending, onPromptClick]);
+  return {
+    inputValue,
+    setInputValue,
+    handleInputChange,
+    handleSubmit,
+    ...(onPromptClick && {
+      handlePromptClick
+    })
+  };
+};
+export default useChatbotInputManager;

package/bpk-component-chatbot-input/src/hooks/useInputHandlers.d.ts

@@ -0,0 +1,8 @@
+import type { ChangeEvent, ForwardedRef, MouseEvent, TouchEvent } from 'react';
+declare const useInputHandlers: <T extends HTMLInputElement | HTMLTextAreaElement>(ref: ForwardedRef<T>, onInputChange: (value: string) => void, onInputClick: () => void) => {
+    handleInputChange: (e: ChangeEvent<T>) => void;
+    handleInputClick: (e: MouseEvent<T>) => void;
+    handleTouchStart: (e: TouchEvent<T>) => void;
+    handleTouchEnd: (e: TouchEvent<T>) => void;
+};
+export default useInputHandlers;

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

@@ -0,0 +1,54 @@
+/*
+ * 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, useRef } from 'react';
+const useInputHandlers = (ref, onInputChange, onInputClick) => {
+  const touchStartTargetRef = useRef(null);
+  const handleInputChange = useCallback(e => {
+    onInputChange(e.target.value);
+  }, [onInputChange]);
+  const handleInputClick = useCallback(e => {
+    e.stopPropagation();
+    if (ref && typeof ref !== 'function' && ref.current && !ref.current.disabled) {
+      ref.current.focus();
+      onInputClick();
+    }
+  }, [onInputClick, ref]);
+  const handleTouchStart = useCallback(e => {
+    e.stopPropagation();
+    touchStartTargetRef.current = e.target;
+  }, []);
+  const handleTouchEnd = useCallback(e => {
+    e.stopPropagation();
+    if (touchStartTargetRef.current === e.target) {
+      if (ref && typeof ref !== 'function' && ref.current && !ref.current.disabled) {
+        e.preventDefault();
+        ref.current.focus();
+        onInputClick();
+      }
+    }
+    touchStartTargetRef.current = null;
+  }, [onInputClick, ref]);
+  return {
+    handleInputChange,
+    handleInputClick,
+    handleTouchStart,
+    handleTouchEnd
+  };
+};
+export default useInputHandlers;

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from 'react';
+interface UseTextAreaAutoResizeProps {
+    ref: RefObject<HTMLTextAreaElement>;
+    value: string;
+    enabled?: boolean;
+}
+interface UseTextAreaAutoResizeReturn {
+    isExpanding: boolean;
+    textareaHeight: number;
+    containerHeight: number;
+    isCapped: boolean;
+    scrollToBottom: () => void;
+}
+export declare const LINE_HEIGHT = 24;
+export declare const MIN_INPUT_HEIGHT = 24;
+export declare const MAX_INPUT_HEIGHT_PHASE_1: number;
+export declare const MAX_INPUT_HEIGHT_PHASE_2: number;
+export declare const MIN_CONTAINER_HEIGHT = 24;
+export declare const MAX_CONTAINER_HEIGHT = 96;
+export declare const PARENT_PADDING_TOP = 16;
+declare const useTextAreaAutoResize: ({ enabled, ref, value, }: UseTextAreaAutoResizeProps) => UseTextAreaAutoResizeReturn;
+export default useTextAreaAutoResize;

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,5 +1,11 @@
 import BpkCheckbox, { type Props as BpkCheckboxProps } from './src/BpkCheckbox';
 import themeAttributes from './src/themeAttributes';
-export type { BpkCheckboxProps };
 export default BpkCheckbox;
+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

@@ -19,4 +19,6 @@
 import BpkCheckbox from "./src/BpkCheckbox";
 import themeAttributes from "./src/themeAttributes";
 export default BpkCheckbox;
-export { themeAttributes };
+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/BpkCheckboxV2.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 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 BpkCheckboxV2;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.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/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/BpkCheckboxV2Control.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 BpkCheckboxV2Control = ({
+  children
+}) => /*#__PURE__*/_jsx(Checkbox.Control, {
+  className: getClassName('bpk-checkbox-v2__control'),
+  children: children
+});
+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/BpkCheckboxV2Description.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 "./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 BpkCheckboxV2Description = ({
+  children
+}) => /*#__PURE__*/_jsx("span", {
+  className: getClassName('bpk-checkbox-v2__description'),
+  children: children
+});
+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;