@skyscanner/backpack-web 42.1.0 → 42.3.0

package/bpk-component-card/src/BpkCardV2/subcomponents/Header.js

@@ -0,0 +1,60 @@
+/*
+ * 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 { BpkFlex, BpkSpacing } from "../../../../bpk-component-layout";
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import resolveDirectionalPadding from "./resolveDirectionalPadding";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Header subcomponent for BpkCardV2.
+ *
+ * Renders a BpkFlex container positioned at the top of the card.
+ * Defaults to horizontal (row) direction with base padding on top, start
+ * and end, and no bottom padding. All BpkFlex props can be used to customise the layout.
+ *
+ * @example
+ * <BpkCardV2.Header>Card title</BpkCardV2.Header>
+ *
+ * @example
+ * <BpkCardV2.Header justify="space-between" align="center">
+ *   <BpkText>Title</BpkText>
+ *   <BpkText>Action</BpkText>
+ * </BpkCardV2.Header>
+ *
+ * @returns {JSX.Element} Header component
+ */
+const Header = ({
+  children,
+  padding,
+  paddingBottom,
+  paddingEnd,
+  paddingStart,
+  paddingTop,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkFlex, {
+  padding: padding,
+  paddingTop: resolveDirectionalPadding(padding, paddingTop, BpkSpacing.Base),
+  paddingStart: resolveDirectionalPadding(padding, paddingStart, BpkSpacing.Base),
+  paddingEnd: resolveDirectionalPadding(padding, paddingEnd, BpkSpacing.Base),
+  paddingBottom: resolveDirectionalPadding(padding, paddingBottom, BpkSpacing.None),
+  ...getDataComponentAttribute('CardV2.Header'),
+  ...rest,
+  children: children
+});
+Header.displayName = 'BpkCardV2.Header';
+export default Header;

package/bpk-component-card/src/BpkCardV2/subcomponents/Root.d.ts

@@ -0,0 +1,28 @@
+import { type BpkCardV2Props } from '../common-types';
+/**
+ * BpkCardV2.Root is the root container for the card component.
+ *
+ * It supports explicit multi-section composition (Header, Body, Footer), flexible
+ * multi-column layouts (Section/Divider), and customizable surface colors. The component
+ * is mobile-first and automatically adapts layout across breakpoints.
+ *
+ * @example
+ * <BpkCardV2.Root>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile).
+ * // The `auto` column in templateColumns reserves space for the Divider.
+ * <BpkCardV2.Root bgColor={CARD_V2_SURFACE_COLORS.surfaceElevated}>
+ *   <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *     <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *     <BpkCardV2.Divider />
+ *     <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ *   </BpkCardV2.Body>
+ * </BpkCardV2.Root>
+ */
+declare const Root: import("react").ForwardRefExoticComponent<BpkCardV2Props & import("react").RefAttributes<HTMLDivElement>>;
+export default Root;

package/bpk-component-card/src/BpkCardV2/subcomponents/Root.js

@@ -0,0 +1,68 @@
+/*
+ * 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 { forwardRef } from 'react';
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { CARD_V2_SURFACE_COLORS, CARD_V2_VARIANTS } from "../common-types";
+import STYLES from "../BpkCardV2.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const toKebab = s => s.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+
+/**
+ * BpkCardV2.Root is the root container for the card component.
+ *
+ * It supports explicit multi-section composition (Header, Body, Footer), flexible
+ * multi-column layouts (Section/Divider), and customizable surface colors. The component
+ * is mobile-first and automatically adapts layout across breakpoints.
+ *
+ * @example
+ * <BpkCardV2.Root>
+ *   <BpkCardV2.Header>Title</BpkCardV2.Header>
+ *   <BpkCardV2.Body>Content</BpkCardV2.Body>
+ *   <BpkCardV2.Footer>Footer</BpkCardV2.Footer>
+ * </BpkCardV2.Root>
+ *
+ * @example
+ * // Multi-column layout (70/30 on desktop, stacked on mobile).
+ * // The `auto` column in templateColumns reserves space for the Divider.
+ * <BpkCardV2.Root bgColor={CARD_V2_SURFACE_COLORS.surfaceElevated}>
+ *   <BpkCardV2.Body templateColumns={{ base: '1fr', tablet: '7fr auto 3fr' }}>
+ *     <BpkCardV2.Section>Main content</BpkCardV2.Section>
+ *     <BpkCardV2.Divider />
+ *     <BpkCardV2.Section>Sidebar</BpkCardV2.Section>
+ *   </BpkCardV2.Body>
+ * </BpkCardV2.Root>
+ */
+const Root = /*#__PURE__*/forwardRef(({
+  bgColor = CARD_V2_SURFACE_COLORS.surfaceDefault,
+  children,
+  variant = CARD_V2_VARIANTS.default,
+  ...rest
+}, ref) => /*#__PURE__*/_jsx("div", {
+  ref: ref,
+  ...getDataComponentAttribute('CardV2'),
+  ...rest,
+  // className and style are placed after {...rest} so any values smuggled
+  // past the TypeScript Omit (e.g. via `as any`) are safely overwritten.
+  className: getClassName('bpk-card-v2', `bpk-card-v2--${toKebab(variant)}`, `bpk-card-v2--${toKebab(bgColor)}`),
+  style: undefined,
+  children: children
+}));
+Root.displayName = 'BpkCardV2.Root';
+export default Root;

package/bpk-component-card/src/BpkCardV2/subcomponents/Section.d.ts

@@ -0,0 +1,22 @@
+import type { BpkCardV2SectionProps } from '../common-types';
+/**
+ * Section subcomponent for multi-column layouts in BpkCardV2.
+ *
+ * Generic content area used with the `columns` prop on BpkCardV2.Body.
+ * Flex value is injected by Body via cloneElement based on the columns spec.
+ * All BpkBox props can be used to customise the layout.
+ *
+ * @returns {JSX.Element} Section component
+ *
+ * @example
+ * <BpkCardV2.Body templateColumns="1fr 2fr 1fr">
+ *   <BpkCardV2.Section>Left</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Center</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Right</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ */
+declare const Section: {
+    ({ children, display, flexDirection, padding, ...rest }: BpkCardV2SectionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Section;

package/bpk-component-card/src/BpkCardV2/subcomponents/Section.js

@@ -0,0 +1,53 @@
+/*
+ * 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 { BpkBox, BpkSpacing } from "../../../../bpk-component-layout";
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Section subcomponent for multi-column layouts in BpkCardV2.
+ *
+ * Generic content area used with the `columns` prop on BpkCardV2.Body.
+ * Flex value is injected by Body via cloneElement based on the columns spec.
+ * All BpkBox props can be used to customise the layout.
+ *
+ * @returns {JSX.Element} Section component
+ *
+ * @example
+ * <BpkCardV2.Body templateColumns="1fr 2fr 1fr">
+ *   <BpkCardV2.Section>Left</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Center</BpkCardV2.Section>
+ *   <BpkCardV2.Section>Right</BpkCardV2.Section>
+ * </BpkCardV2.Body>
+ */
+const Section = ({
+  children,
+  display = 'flex',
+  flexDirection = 'column',
+  padding = BpkSpacing.Base,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkBox, {
+  display: display,
+  flexDirection: flexDirection,
+  padding: padding,
+  ...getDataComponentAttribute('CardV2.Section'),
+  ...rest,
+  children: children
+});
+Section.displayName = 'BpkCardV2.Section';
+export default Section;

package/bpk-component-card/src/BpkCardV2/subcomponents/resolveDirectionalPadding.d.ts

@@ -0,0 +1,16 @@
+import type { BpkFlexProps } from '../../../../bpk-component-layout';
+type PaddingValue = BpkFlexProps['padding'];
+/**
+ * Resolves a directional padding value for Header/Footer subcomponents.
+ *
+ * When the shorthand `padding` prop is set, directional overrides are passed
+ * through as-is (BpkFlex handles shorthand + directional merging).
+ * When no shorthand is set, the directional value falls back to a default.
+ *
+ * @param {PaddingValue} padding - The shorthand padding prop value
+ * @param {PaddingValue} directional - The directional padding override
+ * @param {PaddingValue} fallback - The default value when no shorthand or directional is set
+ * @returns {PaddingValue} The resolved padding value
+ */
+declare const resolveDirectionalPadding: (padding: PaddingValue, directional: PaddingValue, fallback: PaddingValue) => PaddingValue;
+export default resolveDirectionalPadding;

package/bpk-component-card/src/BpkCardV2/subcomponents/resolveDirectionalPadding.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.
+ */
+
+/**
+ * Resolves a directional padding value for Header/Footer subcomponents.
+ *
+ * When the shorthand `padding` prop is set, directional overrides are passed
+ * through as-is (BpkFlex handles shorthand + directional merging).
+ * When no shorthand is set, the directional value falls back to a default.
+ *
+ * @param {PaddingValue} padding - The shorthand padding prop value
+ * @param {PaddingValue} directional - The directional padding override
+ * @param {PaddingValue} fallback - The default value when no shorthand or directional is set
+ * @returns {PaddingValue} The resolved padding value
+ */
+const resolveDirectionalPadding = (padding, directional, fallback) => padding !== undefined ? directional : directional ?? fallback;
+export default resolveDirectionalPadding;

package/bpk-component-card-list/src/BpkCardList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list{display:flex;flex-direction:column;overflow:clip;gap:1.5rem}@media(max-width: 32rem){.bpk-card-list{gap:1rem}}.bpk-card-list--card-list{display:flex;flex-direction:column}
+.bpk-card-list{display:flex;flex-direction:column;gap:1.5rem}@media(max-width: 32rem){.bpk-card-list{gap:1rem}}.bpk-card-list--card-list{display:flex;margin:calc(-1*0.25rem);padding:.25rem;flex-direction:column;overflow:hidden}

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -133,10 +133,10 @@ const BpkCardListCarousel = props => {
         cardDimensionStyle.height = `${firstCardHeightRef.current}px`;
       }
       const isPageStart = index % initiallyShownCards === 0;
+      const cardKey = `carousel-card-${index.toString()}`;
       const commonProps = {
         className: getClassName(`bpk-card-list-row-rail__${layout}__card`, isPageStart && 'bpk-card-list-row-rail__card--page-start'),
         style: shownNumberStyle,
-        key: `carousel-card-${index.toString()}`,
         role: 'group'
       };
 
@@ -157,7 +157,7 @@ const BpkCardListCarousel = props => {
             className: getClassName('bpk-card-list-row-rail__card-slot'),
             children: card
           })
-        });
+        }, cardKey);
       }
       return /*#__PURE__*/_jsx("div", {
         ...commonProps,
@@ -167,7 +167,7 @@ const BpkCardListCarousel = props => {
           className: getClassName('bpk-card-list-row-rail__card-slot'),
           children: card
         })
-      });
+      }, cardKey);
     })
   });
 };

package/bpk-component-chat-bubble/index.d.ts

@@ -0,0 +1,4 @@
+import BpkChatBubble from './src/BpkChatBubble';
+export { CHAT_BUBBLE_TYPE, CHAT_BUBBLE_POSITION } from './src/common-types';
+export type { BpkChatBubbleProps, ChatBubbleType, BubblePosition } from './src/common-types';
+export default BpkChatBubble;

package/bpk-component-chat-bubble/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 BpkChatBubble from "./src/BpkChatBubble";
+export { CHAT_BUBBLE_TYPE, CHAT_BUBBLE_POSITION } from "./src/common-types";
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.d.ts

@@ -0,0 +1,3 @@
+import type { BpkChatBubbleProps } from './common-types';
+declare const BpkChatBubble: (props: BpkChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.js

@@ -0,0 +1,107 @@
+/*
+ * 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 BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
+import RedoSmIcon from "../../bpk-component-icon/sm/redo";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import BpkThumbButton from "../../bpk-component-thumb-button";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { CHAT_BUBBLE_TYPE } from "./common-types";
+import STYLES from "./BpkChatBubble.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const clampAndSnap = (ms, maxDelay = 300) => {
+  const v = Math.min(ms, maxDelay);
+  return Math.round(v / 50) * 50;
+};
+const BpkChatBubble = props => {
+  const {
+    animationDelay = 0,
+    children,
+    type
+  } = props;
+  const userPosition = 'userPosition' in props ? props.userPosition : undefined;
+  const systemPosition = 'systemPosition' in props ? props.systemPosition : undefined;
+  const showFeedback = 'showFeedback' in props ? props.showFeedback ?? false : false;
+  const selectedFeedback = 'selectedFeedback' in props ? props.selectedFeedback ?? null : null;
+  const onFeedbackClick = 'onFeedbackClick' in props ? props.onFeedbackClick : undefined;
+  const onRetry = 'onRetry' in props ? props.onRetry : undefined;
+  const retryDisabled = 'retryDisabled' in props ? props.retryDisabled ?? false : false;
+  const retryLabel = 'retryLabel' in props ? props.retryLabel : '';
+  const onSuggestionClick = 'onSuggestionClick' in props ? props.onSuggestionClick : undefined;
+  const thumbsUpLabel = 'thumbsUpLabel' in props ? props.thumbsUpLabel ?? 'Rate as useful' : 'Rate as useful';
+  const thumbsDownLabel = 'thumbsDownLabel' in props ? props.thumbsDownLabel ?? 'Rate as not useful' : 'Rate as not useful';
+  const isUser = type === CHAT_BUBBLE_TYPE.user;
+  const isSuggestion = type === CHAT_BUBBLE_TYPE.button;
+  const isRetry = type === CHAT_BUBBLE_TYPE.retry;
+  const isBot = type === CHAT_BUBBLE_TYPE.bot;
+  const isSystem = isBot || isRetry;
+  const snapped = clampAndSnap(animationDelay);
+  const inlineStyle = {
+    '--anim-delay': `${snapped}ms`
+  };
+  const containerClassName = getClassName('bpk-chat-bubble', 'bpk-chat-bubble--animated', isUser && 'bpk-chat-bubble--user', isBot && 'bpk-chat-bubble--bot', isRetry && 'bpk-chat-bubble--retry', isSuggestion && 'bpk-chat-bubble--button', isUser && userPosition === 'first' && 'bpk-chat-bubble--user-first', isUser && userPosition === 'middle' && 'bpk-chat-bubble--user-middle', isUser && userPosition === 'last' && 'bpk-chat-bubble--user-last', isSystem && systemPosition === 'first' && 'bpk-chat-bubble--system-first', isSystem && systemPosition === 'middle' && 'bpk-chat-bubble--system-middle', isSystem && systemPosition === 'last' && 'bpk-chat-bubble--system-last');
+  if (isSuggestion) {
+    return /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: containerClassName,
+      style: inlineStyle,
+      onClick: onSuggestionClick,
+      "data-testid": "bpk-chat-bubble-suggestion",
+      ...getDataComponentAttribute('ChatBubble'),
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    style: inlineStyle,
+    "data-testid": "bpk-chat-bubble",
+    ...getDataComponentAttribute('ChatBubble'),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chat-bubble__content'),
+      children: [children, isRetry && onRetry && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-chat-bubble__retry'),
+        children: /*#__PURE__*/_jsx(BpkButton, {
+          type: BUTTON_TYPES.primary,
+          size: SIZE_TYPES.small,
+          onClick: onRetry,
+          disabled: retryDisabled,
+          leadingIcon: /*#__PURE__*/_jsx(RedoSmIcon, {}),
+          children: /*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.label1,
+            children: retryLabel
+          })
+        })
+      })]
+    }), showFeedback && isBot && /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chat-bubble__thumbs'),
+      children: [/*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "up",
+        selected: selectedFeedback === 'up',
+        onClick: onFeedbackClick ?? (() => {}),
+        accessibilityLabel: thumbsUpLabel
+      }), /*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "down",
+        selected: selectedFeedback === 'down',
+        onClick: onFeedbackClick ?? (() => {}),
+        accessibilityLabel: thumbsDownLabel
+      })]
+    })]
+  });
+};
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.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.
+ */
+@keyframes bpk-chat-bubble-entrance{from{transform:translateY(0.625rem) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes bpk-chat-bubble-entrance-reduced{from{opacity:0}to{opacity:1}}.bpk-chat-bubble{width:fit-content;max-width:17.5rem;padding:1rem;background:#fff;color:#161616;overflow-wrap:break-word;word-wrap:break-word}.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{align-self:flex-start}.bpk-chat-bubble--button,.bpk-chat-bubble--user{align-self:flex-end}.bpk-chat-bubble--button,.bpk-chat-bubble--user,.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{border-radius:1.5rem}html[dir=rtl] .bpk-chat-bubble{direction:rtl}.bpk-chat-bubble--animated{transform:translateY(0.625rem) scale(0.98);opacity:0;animation:bpk-chat-bubble-entrance 200ms cubic-bezier(0.2, 0, 0, 1) forwards;animation-delay:var(--anim-delay, 0ms)}@media(prefers-reduced-motion: reduce){.bpk-chat-bubble--animated{transform:translateY(0) scale(1);animation:bpk-chat-bubble-entrance-reduced 200ms ease-out forwards}}.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{text-align:start}.bpk-chat-bubble--user{background:#0062e3;color:#fff;text-align:start}.bpk-chat-bubble--button{width:fit-content;transition:transform 200ms ease-in-out,box-shadow 200ms ease-in-out;border:1px solid #0062e3;background:rgba(0,0,0,0);color:#0062e3;text-align:start;cursor:pointer;border-end-end-radius:.25rem}.bpk-no-touch-support .bpk-chat-bubble--button:hover:not(:active):not(:disabled){transform:translateY(-0.0625rem);box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}:global(.bpk-no-touch-support) .bpk-chat-bubble--button:hover:not(:active):not(:disabled){transform:translateY(-0.0625rem);box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chat-bubble--button:active{transform:translateY(0);box-shadow:none}.bpk-chat-bubble--system-first{border-end-start-radius:.25rem}.bpk-chat-bubble--system-middle{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.bpk-chat-bubble--system-last{border-start-start-radius:.25rem}.bpk-chat-bubble--user-first{border-end-end-radius:.25rem}.bpk-chat-bubble--user-middle{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.bpk-chat-bubble--user-last{border-start-end-radius:.25rem}.bpk-chat-bubble__content p+p{margin-top:1rem}.bpk-chat-bubble__retry{margin-top:1rem}.bpk-chat-bubble__retry button{padding:0 1rem}.bpk-chat-bubble__thumbs{display:flex;margin-top:.5rem;align-items:center;gap:1rem}

package/bpk-component-chat-bubble/src/common-types.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { ThumbsButtonType } from '../../bpk-component-thumb-button';
+export declare const CHAT_BUBBLE_TYPE: {
+    readonly user: "user";
+    readonly bot: "bot";
+    readonly retry: "retry";
+    readonly button: "button";
+};
+export declare const CHAT_BUBBLE_POSITION: {
+    readonly first: "first";
+    readonly middle: "middle";
+    readonly last: "last";
+};
+export type ChatBubbleType = (typeof CHAT_BUBBLE_TYPE)[keyof typeof CHAT_BUBBLE_TYPE];
+export type BubblePosition = (typeof CHAT_BUBBLE_POSITION)[keyof typeof CHAT_BUBBLE_POSITION];
+type BaseBubbleProps = {
+    /** Content to render inside the bubble */
+    children?: ReactNode;
+    /** Animation entrance delay in milliseconds (0–300, snapped to nearest 50ms) */
+    animationDelay?: number;
+};
+export type BpkChatBubbleProps = (BaseBubbleProps & {
+    type: 'user';
+    /** Position within a sequence of user bubbles, affects border-radius */
+    userPosition?: BubblePosition;
+}) | (BaseBubbleProps & {
+    type: 'bot';
+    /** Position within a sequence of same-sender bubbles, affects border-radius */
+    systemPosition?: BubblePosition;
+    /** Show thumbs up/down feedback buttons */
+    showFeedback?: boolean;
+    /** Currently selected feedback type */
+    selectedFeedback?: ThumbsButtonType | null;
+    /** Called when a feedback thumb button is clicked */
+    onFeedbackClick?: (type: ThumbsButtonType) => void;
+    /** Accessibility label for the thumbs up button (defaults to "Rate as useful") */
+    thumbsUpLabel?: string;
+    /** Accessibility label for the thumbs down button (defaults to "Rate as not useful") */
+    thumbsDownLabel?: string;
+}) | (BaseBubbleProps & {
+    type: 'retry';
+    /** Position within a sequence of same-sender bubbles, affects border-radius */
+    systemPosition?: BubblePosition;
+    /** Label for the retry button */
+    retryLabel: string;
+    /** Called when retry button is clicked */
+    onRetry?: () => void;
+    /** Whether the retry button is disabled */
+    retryDisabled?: boolean;
+}) | (BaseBubbleProps & {
+    type: 'button';
+    /** Called when the suggestion is clicked */
+    onSuggestionClick?: () => void;
+});
+export {};

package/bpk-component-chat-bubble/src/common-types.js

@@ -0,0 +1,29 @@
+/*
+ * 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 CHAT_BUBBLE_TYPE = {
+  user: 'user',
+  bot: 'bot',
+  retry: 'retry',
+  button: 'button'
+};
+export const CHAT_BUBBLE_POSITION = {
+  first: 'first',
+  middle: 'middle',
+  last: 'last'
+};

package/bpk-component-chatbot-input/index.d.ts

@@ -0,0 +1,7 @@
+import BpkChatbotInput from './src/BpkChatbotInput';
+export type { BpkChatbotInputProps } from './src/common-types';
+export { CHATBOT_INPUT_TYPES } from './src/common-types';
+export type { ChatbotInputType } from './src/common-types';
+export { useChatbotInputManager } from './src/hooks';
+export { default as themeAttributes } from './src/themeAttributes';
+export default BpkChatbotInput;

package/bpk-component-chatbot-input/index.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.
+ */
+
+import BpkChatbotInput from "./src/BpkChatbotInput";
+export { CHATBOT_INPUT_TYPES } from "./src/common-types";
+export { useChatbotInputManager } from "./src/hooks";
+export { default as themeAttributes } from "./src/themeAttributes";
+export default BpkChatbotInput;

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

@@ -0,0 +1,4 @@
+import type { BpkChatbotInputProps } from './common-types';
+export type { BpkChatbotInputProps };
+declare const BpkChatbotInput: ({ inputType, inputValue, isPolling, isSending, loadingAriaLabel, maxCharacters, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, sendAriaLabel, }: BpkChatbotInputProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatbotInput;