@skyscanner/backpack-web 41.16.0 → 41.18.0

package/bpk-animate-height/index.d.ts

@@ -0,0 +1,3 @@
+import AnimateHeight from './src/AnimateHeight';
+export type { Props } from './src/AnimateHeight';
+export default AnimateHeight;

package/bpk-animate-height/src/AnimateHeight.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Component } from 'react';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    duration: number;
+    height: number | string;
+    easing?: string;
+    transitionOverflow?: string;
+    onAnimationComplete?: (() => void) | null;
+};
+type State = {
+    height: number | string;
+    overflow: string;
+};
+declare class AnimateHeight extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    onTransitionEnd: () => void;
+    timeoutID: ReturnType<typeof setTimeout> | null;
+    contentElement: HTMLDivElement | null;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default AnimateHeight;

package/bpk-animate-height/src/AnimateHeight.js

@@ -16,14 +16,12 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { Component } from 'react';
-
-// IE11 doesn't support `Number.isNaN` so we must use the global.
-// When IE11 support drops we can migrate.
-// eslint-disable-next-line no-restricted-globals
 import { jsx as _jsx } from "react/jsx-runtime";
-const isNumber = n => !isNaN(parseFloat(n)) && isFinite(n);
+const isNumber = n => {
+  const parsed = typeof n === 'number' ? n : parseFloat(n);
+  return !Number.isNaN(parsed) && Number.isFinite(parsed);
+};
 const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
 class AnimateHeight extends Component {
   constructor(props) {
@@ -32,7 +30,7 @@ class AnimateHeight extends Component {
     let overflow = 'visible';
     if (isNumber(this.props.height)) {
       height = this.props.height < 0 ? 0 : this.props.height;
-      overflow = this.props.transitionOverflow;
+      overflow = this.props.transitionOverflow ?? 'hidden';
     }
     this.state = {
       height,
@@ -64,9 +62,9 @@ class AnimateHeight extends Component {
       let newHeight = null;
       let shouldSetTimeout = false;
       let timeoutHeight = null;
-      let timeoutOverflow = prevTransitionOverflow;
+      let timeoutOverflow = prevTransitionOverflow ?? 'hidden';
       let timeoutDuration = duration;
-      clearTimeout(this.timeoutID);
+      clearTimeout(this.timeoutID ?? undefined);
       if (isNumber(height)) {
         // If new height is a number
         newHeight = height < 0 ? 0 : height;
@@ -88,12 +86,12 @@ class AnimateHeight extends Component {
       }
       this.setState({
         height: newHeight,
-        overflow: transitionOverflow
+        overflow: transitionOverflow ?? 'hidden'
       });
       if (shouldSetTimeout) {
         this.timeoutID = setTimeout(() => {
           this.setState({
-            height: timeoutHeight,
+            height: timeoutHeight ?? 0,
             overflow: timeoutOverflow
           });
           if (!isTransitionEndSupported()) {
@@ -104,7 +102,7 @@ class AnimateHeight extends Component {
     }
   }
   componentWillUnmount() {
-    clearTimeout(this.timeoutID);
+    clearTimeout(this.timeoutID ?? undefined);
     this.timeoutID = null;
   }
   onTransitionEnd = () => {
@@ -115,13 +113,17 @@ class AnimateHeight extends Component {
       this.props.onAnimationComplete();
     }
   };
+  timeoutID = null;
+  contentElement = null;
   render() {
     const {
       children,
       duration,
-      easing,
-      onAnimationComplete,
+      easing = 'ease',
+      height: _height,
+      onAnimationComplete: _onAnimationComplete,
       style,
+      transitionOverflow: _transitionOverflow,
       ...rest
     } = this.props;
     const {
@@ -138,8 +140,6 @@ class AnimateHeight extends Component {
       msTransition: `height ${duration}ms ${easing} `,
       transition: `height ${duration}ms ${easing} `
     };
-    delete rest.height;
-    delete rest.transitionOverflow;
     return /*#__PURE__*/_jsx("div", {
       style: componentStyle,
       onTransitionEnd: this.onTransitionEnd,
@@ -153,19 +153,4 @@ class AnimateHeight extends Component {
     });
   }
 }
-AnimateHeight.propTypes = {
-  children: PropTypes.node.isRequired,
-  duration: PropTypes.number.isRequired,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  easing: PropTypes.string,
-  transitionOverflow: PropTypes.string,
-  onAnimationComplete: PropTypes.func,
-  style: PropTypes.object // eslint-disable-line react/forbid-prop-types
-};
-AnimateHeight.defaultProps = {
-  easing: 'ease',
-  transitionOverflow: 'hidden',
-  onAnimationComplete: null,
-  style: {}
-};
 export default AnimateHeight;

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -17,7 +17,6 @@
  */
 
 import { useContext, cloneElement } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import AnimateHeight from "../../bpk-animate-height";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -19,8 +19,6 @@
 import { Component } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAnimateAndFade.module.css";

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -21,8 +21,6 @@
  */
 
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";

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

@@ -0,0 +1,2 @@
+export { default } from './src/BpkChatNotification';
+export type { BpkChatNotificationProps } from './src/BpkChatNotification';

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

@@ -0,0 +1,19 @@
+/*
+ * 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 { default } from "./src/BpkChatNotification";

package/bpk-component-chat-notification/src/BpkChatNotification.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+export type BpkChatNotificationProps = {
+    /** Text displayed in the notification. */
+    text: string;
+    /** Optional icon to display before the text. */
+    icon?: FunctionComponent;
+};
+declare const BpkChatNotification: ({ icon: Icon, text, }: BpkChatNotificationProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatNotification;

package/bpk-component-chat-notification/src/BpkChatNotification.js

@@ -0,0 +1,43 @@
+/*
+ * 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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkChatNotification.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkChatNotification = ({
+  icon: Icon,
+  text
+}) => /*#__PURE__*/_jsxs("output", {
+  className: getClassName('bpk-chat-notification'),
+  "aria-atomic": "true",
+  "data-testid": "bpk-chat-notification",
+  ...getDataComponentAttribute('ChatNotification'),
+  children: [Icon && /*#__PURE__*/_jsx("span", {
+    className: getClassName('bpk-chat-notification__icon'),
+    children: /*#__PURE__*/_jsx(Icon, {
+      "aria-hidden": "true"
+    })
+  }), /*#__PURE__*/_jsx(BpkText, {
+    tagName: "span",
+    textStyle: TEXT_STYLES.footnote,
+    children: text
+  })]
+});
+export default BpkChatNotification;

package/bpk-component-chat-notification/src/BpkChatNotification.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-chat-notification{display:flex;width:100%;padding:1rem;align-items:center;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:none;animation:bpk-chat-notification-slide-in 400ms ease-out forwards;gap:.5rem}@media(prefers-reduced-motion: reduce){.bpk-chat-notification{animation:none}}.bpk-chat-notification__icon{display:flex;flex-shrink:0;fill:#fff}@keyframes bpk-chat-notification-slide-in{from{transform:translateY(-0.625rem);opacity:0}to{transform:translateY(0);opacity:1}}

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

@@ -0,0 +1,3 @@
+import BpkChatThoughtBubble from './src/BpkChatThoughtBubble';
+export type { BpkChatThoughtBubbleProps } from './src/BpkChatThoughtBubble';
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/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.
+ */
+
+import BpkChatThoughtBubble from "./src/BpkChatThoughtBubble";
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/src/BpkChatThoughtBubble.d.ts

@@ -0,0 +1,8 @@
+export type BpkChatThoughtBubbleProps = {
+    /**
+     * The content to display in the thinking bubble.
+     */
+    content: string;
+};
+declare const BpkChatThoughtBubble: ({ content }: BpkChatThoughtBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/src/BpkChatThoughtBubble.js

@@ -0,0 +1,46 @@
+/*
+ * 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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkChatThoughtBubble.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkChatThoughtBubble = ({
+  content
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-chat-thought-bubble'),
+  ...getDataComponentAttribute('ChatThoughtBubble'),
+  "data-testid": "bpk-chat-thought-bubble",
+  children: [/*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-chat-thought-bubble__dots'),
+    "aria-hidden": "true",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-chat-thought-bubble__dots--dot', 'bpk-chat-thought-bubble__dots--dot-first')
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-chat-thought-bubble__dots--dot', 'bpk-chat-thought-bubble__dots--dot-second')
+    })]
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-chat-thought-bubble__bubble'),
+    children: /*#__PURE__*/_jsx(BpkText, {
+      textStyle: TEXT_STYLES.bodyDefault,
+      children: content
+    })
+  })]
+});
+export default BpkChatThoughtBubble;

package/bpk-component-chat-thought-bubble/src/BpkChatThoughtBubble.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-chat-thought-bubble{display:flex;align-items:flex-end;transform:translateY(0.75rem) scale(0.98);opacity:0;animation:bpk-chat-thought-bubble-entrance .24s cubic-bezier(0.2, 0, 0, 1) forwards;gap:.5rem;will-change:transform,opacity}@media(prefers-reduced-motion: reduce){.bpk-chat-thought-bubble{animation:bpk-chat-thought-bubble-entrance-reduced .2s ease-out forwards}}.bpk-chat-thought-bubble__dots{display:flex;align-items:flex-end;flex-shrink:0;gap:.5rem}.bpk-chat-thought-bubble__dots--dot{border-radius:50%;background-color:#05203c;animation:bpk-chat-thought-bubble-dot-bounce 1.2s ease-in-out infinite;will-change:transform}@media(prefers-reduced-motion: reduce){.bpk-chat-thought-bubble__dots--dot{transform:none;animation:bpk-chat-thought-bubble-dot-pulse 2s ease-in-out infinite}}.bpk-chat-thought-bubble__dots--dot-first{width:.5rem;height:.5rem;animation-delay:0ms}.bpk-chat-thought-bubble__dots--dot-second{width:1rem;height:1rem;animation-delay:.2s}.bpk-chat-thought-bubble__bubble{position:relative;min-width:2.5rem;max-width:17.5rem;padding:1rem;align-self:flex-start;background:#05203c;color:#fff;opacity:1;animation:bpk-chat-thought-bubble-bubble-bounce 1.2s ease-in-out infinite;animation-delay:.4s;border-end-end-radius:1.5rem;border-end-start-radius:.25rem;border-start-end-radius:1.5rem;border-start-start-radius:1.5rem;overflow-wrap:break-word;will-change:transform;word-wrap:break-word}@media(prefers-reduced-motion: reduce){.bpk-chat-thought-bubble__bubble{animation:none}}@keyframes bpk-chat-thought-bubble-dot-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-0.625rem)}}@keyframes bpk-chat-thought-bubble-dot-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:1}}@keyframes bpk-chat-thought-bubble-bubble-bounce{0%,60%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-0.375rem) scale(1.02)}}@keyframes bpk-chat-thought-bubble-entrance{from{transform:translateY(0.75rem) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes bpk-chat-thought-bubble-entrance-reduced{from{opacity:0}to{opacity:1}}

package/bpk-component-info-banner/src/AnimateAndFade.js

@@ -19,8 +19,6 @@
 import { Component } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAnimateAndFade.module.css";

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -21,8 +21,6 @@
  */
 
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";

package/bpk-component-layout/src/BpkProvider.js

@@ -23,7 +23,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Creates a Chakra UI system with Backpack token mappings
  * Chakra UI 3.0 uses `createSystem` with `defaultConfig` and custom config
  */
-const bpkSystem = createSystem(defaultConfig, createBpkConfig());
+// Remove Chakra's global CSS to prevent style conflicts with Backpack components
+const {
+  globalCss: _chakraGlobalCss,
+  ...defaultConfigWithoutGlobalCss
+} = defaultConfig;
+const bpkSystem = createSystem(defaultConfigWithoutGlobalCss, createBpkConfig());
 
 /**
  * BpkProvider - Provides Chakra UI context for Backpack layout components

package/bpk-component-layout/src/theme.js

@@ -218,6 +218,10 @@ export function createBpkConfig() {
     chakraBreakpoints[token] = value;
   });
   return defineConfig({
+    // Disable Chakra's preflight (CSS reset) so it does not override Backpack's
+    // global font styles, in particular the `-webkit-font-smoothing: antialiased`
+    // setting applied by Backpack.
+    preflight: false,
     cssVarsPrefix: 'bpk',
     theme: {
       tokens: {

package/bpk-component-skip-link/index.d.ts

@@ -0,0 +1,5 @@
+import BpkSkipLink, { type Props as BpkSkipLinkProps } from './src/BpkSkipLink';
+import themeAttributes from './src/themeAttributes';
+export type { BpkSkipLinkProps };
+export { themeAttributes };
+export default BpkSkipLink;

package/bpk-component-skip-link/index.js

@@ -14,7 +14,8 @@
  * 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 BpkSkipLink from "./src/BpkSkipLink";
+ */
+import BpkSkipLink from "./src/BpkSkipLink";
 import themeAttributes from "./src/themeAttributes";
 export { themeAttributes };
 export default BpkSkipLink;

package/bpk-component-skip-link/src/BpkSkipLink.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type NativeAnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'className' | 'children'>;
+export type Props = NativeAnchorProps & {
+    label: string;
+    href: string;
+    className?: string | null;
+    [rest: string]: any;
+};
+declare const BpkSkipLink: ({ className, href, label, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkSkipLink;

package/bpk-component-skip-link/src/BpkSkipLink.js

@@ -14,7 +14,8 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSkipLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,18 +25,10 @@ const BpkSkipLink = ({
   href,
   label,
   ...rest
-}) =>
-/*#__PURE__*/
-// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-_jsx("a", {
+}) => /*#__PURE__*/_jsx("a", {
   href: href,
   className: getClassName('bpk-skip-link', className),
   ...rest,
   children: label
 });
-BpkSkipLink.propTypes = {
-  label: PropTypes.string.isRequired,
-  href: PropTypes.string.isRequired,
-  className: PropTypes.string
-};
 export default BpkSkipLink;

package/bpk-component-skip-link/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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

@@ -0,0 +1,3 @@
+import BpkThumbButton from './src/BpkThumbButton';
+export type { BpkThumbButtonProps, ThumbsButtonType } from './src/BpkThumbButton';
+export default BpkThumbButton;

package/bpk-component-thumb-button/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.
+ */
+
+import BpkThumbButton from "./src/BpkThumbButton";
+export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.d.ts

@@ -0,0 +1,21 @@
+export type ThumbsButtonType = 'up' | 'down';
+export type BpkThumbButtonProps = {
+    /**
+     * Accessibility label for screen readers (REQUIRED).
+     */
+    accessibilityLabel: string;
+    /**
+     * Click handler callback.
+     */
+    onClick: (type: ThumbsButtonType) => void;
+    /**
+     * Whether the thumb is in selected state.
+     */
+    selected?: boolean;
+    /**
+     * Type of thumb icon to display.
+     */
+    type: ThumbsButtonType;
+};
+declare const BpkThumbButton: ({ accessibilityLabel, onClick, selected, type, }: BpkThumbButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.js

@@ -0,0 +1,52 @@
+/*
+ * 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 ThumbsDownIcon from "../../bpk-component-icon/lg/thumbs-down";
+import ThumbsUpIcon from "../../bpk-component-icon/lg/thumbs-up";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import STYLES from "./BpkThumbButton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkThumbButton = ({
+  accessibilityLabel,
+  onClick,
+  selected = false,
+  type
+}) => {
+  const Icon = type === 'up' ? ThumbsUpIcon : ThumbsDownIcon;
+  const classNames = getClassName('bpk-thumb-button', selected && 'bpk-thumb-button--selected');
+  const handleClick = event => {
+    event.stopPropagation();
+    onClick(type);
+  };
+  const iconClassNames = getClassName('bpk-thumb-button__icon');
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: classNames,
+    onClick: handleClick,
+    "aria-label": accessibilityLabel,
+    "aria-pressed": selected,
+    "data-testid": `bpk-thumb-button-${type}`,
+    ...getDataComponentAttribute('ThumbButton'),
+    children: /*#__PURE__*/_jsx("span", {
+      className: iconClassNames,
+      children: /*#__PURE__*/_jsx(Icon, {})
+    })
+  });
+};
+export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.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-thumb-button{display:flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;transition:all 200ms ease-in-out;border:none;background:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:pointer;appearance:none;position:relative}.bpk-thumb-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}@media(prefers-reduced-motion: reduce){.bpk-thumb-button{transition:none}}.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button__icon{display:flex;fill:currentcolor}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.16.0",
+  "version": "41.18.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.30.0",
+    "@chakra-ui/react": "^3.33.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",