@skyscanner/backpack-web 41.2.0 → 41.4.0

package/bpk-component-link/src/common-types.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from 'react';
+/**
+ * Polymorphic component types following Chakra UI pattern.
+ * Allows BpkLink to be rendered as different HTML elements while
+ * preserving proper type inference for element-specific props.
+ */
+/** Supported element types for BpkLink */
+export type LinkAs = 'a' | 'button' | 'span' | 'div';
+/** Base props that are common to all BpkLink variants */
+export type BpkLinkBaseProps = {
+    /** The content of the link. */
+    children: ReactNode;
+    /** Additional CSS class(es) to apply. */
+    className?: string | null;
+    /** Use alternate (light) styling for dark backgrounds. */
+    alternate?: boolean;
+    /** Use implicit styling (no underline until hover). */
+    implicit?: boolean;
+};
+/** Props specific to anchor elements */
+export type AnchorOnlyProps = {
+    /** The URL the link points to. */
+    href: string | null;
+    /** Opens link in a new tab/window. */
+    blank?: boolean;
+    /** The relationship between linked and current document. */
+    rel?: string | null;
+};
+/** Props for the `as` prop */
+type AsProps<E extends ElementType> = {
+    /** The element type to render as. Defaults to 'a'. */
+    as?: E;
+};
+/** Polymorphic props type that merges base props with element-specific props */
+type PolymorphicProps<E extends ElementType> = BpkLinkBaseProps & AsProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof BpkLinkBaseProps | 'as'>;
+/** Full props type with conditional anchor-specific props */
+export type BpkLinkProps<E extends ElementType = 'a'> = E extends 'a' ? Omit<PolymorphicProps<E>, 'href' | 'rel'> & AnchorOnlyProps : PolymorphicProps<E>;
+/** Polymorphic ref type mapping element types to their ref types */
+export type PolymorphicRef<E extends LinkAs> = E extends 'a' ? Ref<HTMLAnchorElement> : E extends 'button' ? Ref<HTMLButtonElement> : E extends 'span' ? Ref<HTMLSpanElement> : E extends 'div' ? Ref<HTMLDivElement> : never;
+/** Polymorphic component type for BpkLink */
+export type PolymorphicComponent = <E extends LinkAs = 'a'>(props: BpkLinkProps<E> & {
+    ref?: PolymorphicRef<E>;
+}) => JSX.Element | null;
+export {};

package/bpk-component-link/src/common-types.js

@@ -0,0 +1 @@
+export {};

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BUTTON_TYPES, BpkButtonV2, SIZE_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
 import ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
@@ -108,7 +108,7 @@ const BpkLoadingButton = props => {
   if (primaryOnDark) {
     type = BUTTON_TYPES.primaryOnDark;
   }
-  return /*#__PURE__*/_jsx(BpkButtonV2, {
+  return /*#__PURE__*/_jsx(BpkButton, {
     iconOnly: iconOnly,
     disabled: showBtnDisabled,
     size: large ? SIZE_TYPES.large : SIZE_TYPES.small,

package/bpk-component-modal/src/BpkModalInner.js

@@ -18,7 +18,7 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkNavigationBar, { BAR_STYLES } from "../../bpk-component-navigation-bar";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkModalInner.module.css";
@@ -98,7 +98,8 @@ const BpkModalInner = ({
             children: title
           }),
           leadingButton: accessoryViewFinal,
-          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
+          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkLink, {
+            as: "button",
             onClick: onClose,
             alternate: modalStyle === MODAL_STYLING.surfaceContrast,
             children: closeText

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.d.ts

@@ -1,10 +1,9 @@
-import type { ComponentProps, MouseEvent, ReactNode } from 'react';
-import { BpkButtonLink } from '../../bpk-component-link';
+import { type BpkLinkProps } from '../../bpk-component-link';
 import { type BarStyle } from './BpkNavigationBar';
-export interface Props extends ComponentProps<typeof BpkButtonLink> {
-    children: ReactNode;
-    onClick: (event: MouseEvent<HTMLElement>) => void;
+export interface Props extends Omit<BpkLinkProps<'button'>, 'as'> {
+    /** Additional CSS class(es) to apply to the wrapper span. */
     className?: string;
+    /** The bar style to determine link color variant. */
     barStyle?: BarStyle;
     [rest: string]: any;
 }

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkNavigationBarButtonLink = ({
@@ -26,7 +26,8 @@ const BpkNavigationBarButtonLink = ({
   ...rest
 }) => /*#__PURE__*/_jsx("span", {
   className: className,
-  children: /*#__PURE__*/_jsx(BpkButtonLink, {
+  children: /*#__PURE__*/_jsx(BpkLink, {
+    as: "button",
     alternate: barStyle === BAR_STYLES.onDark,
     ...rest,
     children: children

package/bpk-component-nudger/src/BpkNudger.js

@@ -17,7 +17,7 @@
  */
 
 import { useRef } from 'react';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
@@ -95,7 +95,7 @@ const BpkNudger = ({
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: nudgerClassNames,
-      children: [/*#__PURE__*/_jsx(BpkButtonV2, {
+      children: [/*#__PURE__*/_jsx(BpkButton, {
         type: BUTTON_TYPES[buttonType],
         iconOnly: true,
         onClick: () => {
@@ -135,7 +135,7 @@ const BpkNudger = ({
         },
         className: inputClassNames,
         ...rest
-      }), /*#__PURE__*/_jsx(BpkButtonV2, {
+      }), /*#__PURE__*/_jsx(BpkButton, {
         type: BUTTON_TYPES[buttonType],
         iconOnly: true,
         onClick: () => {

package/bpk-component-page-indicator/src/NavButton.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
@@ -35,7 +35,7 @@ const NavButton = ({
   disabled = false,
   onClick = () => {},
   type = BUTTON_TYPES.link
-}) => /*#__PURE__*/_jsx(BpkButtonV2, {
+}) => /*#__PURE__*/_jsx(BpkButton, {
   iconOnly: true,
   type: type,
   onClick: e => {

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withRtlSupport, withButtonAlignment } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
@@ -37,7 +37,7 @@ const BpkPaginationNudger = props => {
   } = props;
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-pagination-nudger'),
-    children: /*#__PURE__*/_jsxs(BpkButtonV2, {
+    children: /*#__PURE__*/_jsxs(BpkButton, {
       type: BUTTON_TYPES.link,
       onClick: onNudge,
       disabled: disabled,

package/bpk-component-popover/src/BpkPopover.js

@@ -22,7 +22,7 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID } from "./constants";
@@ -179,7 +179,8 @@ const BpkPopover = ({
                     setIsOpenState(false);
                   },
                   ...closeButtonProps
-                }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
+                }) : closeButtonText && /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: event => {
                     bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                     setIsOpenState(false);
@@ -196,13 +197,15 @@ const BpkPopover = ({
                 children: children
               }), actionText && onAction && /*#__PURE__*/_jsx("div", {
                 className: getClassName('bpk-popover__action'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                children: /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: onAction,
                   children: actionText
                 })
               }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
                 className: getClassName('bpk-popover__footer'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                children: /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: event => {
                     bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                     setIsOpenState(false);

package/bpk-component-price/src/BpkPrice.js

@@ -25,6 +25,9 @@ const getPriceTextStyle = size => {
   if (size === SIZES.small) {
     return TEXT_STYLES.heading4;
   }
+  if (size === SIZES.medium) {
+    return TEXT_STYLES.heading3;
+  }
   if (size === SIZES.large) {
     return TEXT_STYLES.xxl;
   }

package/bpk-component-price/src/common-types.js

@@ -17,6 +17,7 @@
  */export const SIZES = {
   xsmall: 'xsmall',
   small: 'small',
+  medium: 'medium',
   large: 'large'
 };
 export const ALIGNS = {

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -17,7 +17,7 @@
  */
 
 import { Component } from 'react';
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from "./utils";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getDirection = () => {
@@ -59,7 +59,8 @@ class BpkRtlToggle extends Component {
   };
   render() {
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
-    return /*#__PURE__*/_jsxs(BpkButtonLink, {
+    return /*#__PURE__*/_jsxs(BpkLink, {
+      as: "button",
       title: "Keyboard Shortcut: ctrl + cmd + r",
       onClick: this.toggleRtl,
       children: ["RTL ", onOrOff]

package/bpk-component-snippet/src/BpkSnippet.js

@@ -17,7 +17,7 @@
  */
 
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkImage, { BORDER_RADIUS_STYLES, withLazyLoading } from "../../bpk-component-image";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
@@ -120,7 +120,7 @@ const BpkSnippet = ({
           textStyle: isMobile ? BODY_STYLE.bodyDefault : bodyStyle,
           children: bodyText
         })
-      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButtonV2, {
+      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButton, {
         type: buttonStyle,
         onClick: onClick,
         children: buttonText

package/bpk-component-theme-toggle/index.d.ts

@@ -0,0 +1,4 @@
+import BpkThemeToggle from './src/BpkThemeToggle';
+import updateOnThemeChange from './src/updateOnThemeChange';
+export default BpkThemeToggle;
+export { updateOnThemeChange };

package/bpk-component-theme-toggle/src/BpkThemeToggle.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent } from 'react';
+import { Component } from 'react';
+type Props = Record<string, never>;
+type State = {
+    selectedTheme: string;
+};
+declare class BpkThemeToggle extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleChange: (e: ChangeEvent<HTMLSelectElement>) => void;
+    cycleTheme: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BpkThemeToggle;

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -17,7 +17,10 @@
  */
 
 import { Component } from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
 import bpkCustomThemes from "./theming";
@@ -29,11 +32,13 @@ const getClassName = cssModules(STYLES);
 const availableThemes = Object.keys(bpkCustomThemes);
 const setTheme = theme => {
   const htmlElement = getHtmlElement();
-  htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
-    detail: {
-      theme
-    }
-  }));
+  if (htmlElement) {
+    htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
+      detail: {
+        theme
+      }
+    }));
+  }
 };
 class BpkThemeToggle extends Component {
   constructor(props) {
@@ -58,7 +63,7 @@ class BpkThemeToggle extends Component {
     this.setState({
       selectedTheme
     });
-    setTheme(bpkCustomThemes[selectedTheme]);
+    setTheme(selectedTheme ? bpkCustomThemes[selectedTheme] : undefined);
   };
   cycleTheme = () => {
     let {
@@ -73,7 +78,7 @@ class BpkThemeToggle extends Component {
     this.setState({
       selectedTheme
     });
-    setTheme(bpkCustomThemes[selectedTheme]);
+    setTheme(selectedTheme ? bpkCustomThemes[selectedTheme] : undefined);
   };
   render() {
     const {

package/bpk-component-theme-toggle/src/theming.d.ts

@@ -0,0 +1,136 @@
+export type Theme = {
+    themeName: string;
+    primaryColor: string;
+    logoFillColor: string;
+    accordionActiveColor: string;
+    accordionColor: string;
+    accordionHoverColor: string;
+    badgeBackgroundColor: string;
+    badgeSuccessBackgroundColor: string;
+    badgeDestructiveBackgroundColor: string;
+    bannerAlertPrimaryColor: string;
+    bannerAlertSuccessColor: string;
+    bannerAlertWarnColor: string;
+    bannerAlertErrorColor: string;
+    barchartBarBackgroundColor: string;
+    barchartBarHoverBackgroundColor: string;
+    barchartBarActiveBackgroundColor: string;
+    barchartBarSelectedBackgroundColor: string;
+    blockquoteBarColor: string;
+    buttonFontSize: string;
+    buttonPrimaryTextColor: string;
+    buttonPrimaryHoverTextColor: string;
+    buttonPrimaryActiveTextColor: string;
+    buttonPrimaryGradientStartColor: string;
+    buttonPrimaryGradientEndColor: string;
+    buttonPrimaryBackgroundColor: string;
+    buttonPrimaryHoverBackgroundColor: string;
+    buttonPrimaryActiveBackgroundColor: string;
+    buttonSecondaryTextColor: string;
+    buttonSecondaryHoverTextColor: string;
+    buttonSecondaryActiveTextColor: string;
+    buttonSecondaryBorderColor: string;
+    buttonSecondaryHoverBorderColor: string;
+    buttonSecondaryActiveBorderColor: string;
+    buttonSecondaryBackgroundColor: string;
+    buttonSecondaryHoverBackgroundColor: string;
+    buttonSecondaryActiveBackgroundColor: string;
+    buttonFeaturedTextColor: string;
+    buttonFeaturedHoverTextColor: string;
+    buttonFeaturedActiveTextColor: string;
+    buttonFeaturedGradientStartColor: string;
+    buttonFeaturedGradientEndColor: string;
+    buttonFeaturedBackgroundColor: string;
+    buttonFeaturedHoverBackgroundColor: string;
+    buttonFeaturedActiveBackgroundColor: string;
+    buttonDestructiveTextColor: string;
+    buttonDestructiveHoverTextColor: string;
+    buttonDestructiveActiveTextColor: string;
+    buttonDestructiveBorderColor: string;
+    buttonDestructiveHoverBorderColor: string;
+    buttonDestructiveActiveBorderColor: string;
+    buttonDestructiveBackgroundColor: string;
+    buttonDestructiveHoverBackgroundColor: string;
+    buttonDestructiveActiveBackgroundColor: string;
+    chipDefaultSelectedBackgroundColor: string;
+    chipDefaultSelectedTextColor: string;
+    chipOnDarkSelectedBackgroundColor: string;
+    chipOnDarkSelectedTextColor: string;
+    chipOnImageSelectedBackgroundColor: string;
+    chipOnImageSelectedHoverBackgroundColor: string;
+    chipOnImageSelectedActiveBackgroundColor: string;
+    chipOnImageSelectedTextColor: string;
+    fieldsetLabelTextColor: string;
+    formValidationIconFill: string;
+    formValidationTextColor: string;
+    inputInvalidBorderColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+    linkActiveColor: string;
+    linkVisitedColor: string;
+    linkAlternateColor: string;
+    linkAlternateHoverColor: string;
+    linkAlternateActiveColor: string;
+    linkAlternateVisitedColor: string;
+    horizontalNavBarSelectedColor: string;
+    horizontalNavLinkSelectedColor: string;
+    horizontalNavLinkColor: string;
+    horizontalNavLinkHoverColor: string;
+    horizontalNavLinkActiveColor: string;
+    selectInvalidBorderColor: string;
+    spinnerPrimaryColor: string;
+    starRatingFilledColor: string;
+    sliderBarColor: string;
+    textareaInvalidBorderColor: string;
+    paginationNudgerActiveColor: string;
+    paginationNudgerColor: string;
+    paginationNudgerHoverColor: string;
+    paginationSelectedBackgroundColor: string;
+    progressBarFillColor: string;
+    calendarDateTextColor: string;
+    calendarDateTextHoverColor: string;
+    calendarDateTextActiveColor: string;
+    calendarDateTextFocusColor: string;
+    calendarDateTextSelectedColor: string;
+    calendarDateSelectedBackgroundColor: string;
+    calendarDateFocusedBorderColor: string;
+    calendarNudgerIconColor: string;
+    calendarNudgerIconHoverColor: string;
+    calendarNudgerIconActiveColor: string;
+    checkboxCheckedColor: string;
+    radioCheckedColor: string;
+    switchCheckedColor: string;
+    ratingHighTextColor: string;
+    ratingHighColor: string;
+    ratingMediumTextColor: string;
+    ratingMediumColor: string;
+    ratingLowColor: string;
+    iconMarkerDefaultBackgroundColor: string;
+    iconMarkerDefaultSelectedColor: string;
+    iconMarkerDefaultDisabledColor: string;
+    iconMarkerDefaultDisabledBackgroundColor: string;
+    priceMarkerBackgroundColor: string;
+    priceMarkerSelectedBorderColor: string;
+    priceMarkerSelectedColor: string;
+    priceMarkerViewedBackgroundColor: string;
+    priceMarkerViewedBorderColor: string;
+    priceMarkerViewedColor: string;
+    skipLinkBackgroundColor: string;
+    navigationBarIconButtonColor: string;
+    navigationBarIconButtonHoverColor: string;
+    navigationBarIconButtonActiveColor: string;
+    navigationBarButtonLinkColor: string;
+    navigationBarButtonLinkHoverColor: string;
+    navigationBarButtonLinkActiveColor: string;
+    navigationBarButtonLinkVisitedColor: string;
+    navigationBarTitleColor: string;
+    navigationBarBackgroundColor: string;
+    docsSidebarBackground: string;
+    docsSidebarLink: string;
+    docsSidebarLinkBorder: string;
+    docsSidebarSelectedArrowColor: string;
+};
+declare const bpkCustomThemes: {
+    [key: string]: Theme;
+};
+export default bpkCustomThemes;

package/bpk-component-theme-toggle/src/updateOnThemeChange.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { Theme } from './theming';
+type ThemeChangeEvent = CustomEvent<{
+    theme: Theme | null;
+}>;
+type UpdateOnThemeChangeProps = {
+    children: ReactNode;
+};
+type UpdateOnThemeChangeState = {
+    theme: Theme | null;
+};
+declare const updateOnThemeChange: <P extends object>(EnhancedComponent: ComponentType<P & {
+    theme: Theme | null;
+}>) => {
+    new (props: P & UpdateOnThemeChangeProps): {
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onThemeChange: (e: ThemeChangeEvent) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends "theme">(state: UpdateOnThemeChangeState | ((prevState: Readonly<UpdateOnThemeChangeState>, props: Readonly<P & UpdateOnThemeChangeProps>) => UpdateOnThemeChangeState | Pick<UpdateOnThemeChangeState, K> | null) | Pick<UpdateOnThemeChangeState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & UpdateOnThemeChangeProps>;
+        state: Readonly<UpdateOnThemeChangeState>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextState: Readonly<UpdateOnThemeChangeState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & UpdateOnThemeChangeProps>, prevState: Readonly<UpdateOnThemeChangeState>): any;
+        componentDidUpdate?(prevProps: Readonly<P & UpdateOnThemeChangeProps>, prevState: Readonly<UpdateOnThemeChangeState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextState: Readonly<UpdateOnThemeChangeState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextState: Readonly<UpdateOnThemeChangeState>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType?: import("react").Context<any> | undefined;
+};
+export default updateOnThemeChange;

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -16,24 +16,29 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { wrapDisplayName } from "../../bpk-react-utils";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateOnThemeChange = EnhancedComponent => {
   class UpdateOnThemeChange extends Component {
-    constructor() {
-      super();
+    constructor(props) {
+      super(props);
       this.state = {
         theme: null
       };
     }
     componentDidMount() {
-      getHtmlElement().addEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      const htmlElement = getHtmlElement();
+      if (htmlElement) {
+        htmlElement.addEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      }
     }
     componentWillUnmount() {
-      getHtmlElement().removeEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      const htmlElement = getHtmlElement();
+      if (htmlElement) {
+        htmlElement.removeEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      }
     }
     onThemeChange = e => {
       const {
@@ -52,9 +57,6 @@ const updateOnThemeChange = EnhancedComponent => {
     }
   }
   UpdateOnThemeChange.displayName = wrapDisplayName(EnhancedComponent, 'updateOnThemeChange');
-  UpdateOnThemeChange.propTypes = {
-    children: PropTypes.node.isRequired
-  };
   return UpdateOnThemeChange;
 };
 export default updateOnThemeChange;

package/bpk-component-theme-toggle/src/utils.d.ts

@@ -0,0 +1,3 @@
+declare const THEME_CHANGE_EVENT = "bpkchangetheme";
+declare const getHtmlElement: () => HTMLElement | null;
+export { THEME_CHANGE_EVENT, getHtmlElement };

package/bpk-component-theme-toggle/src/utils.js

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 const THEME_CHANGE_EVENT = 'bpkchangetheme';
-const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
+const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : null;
 export { THEME_CHANGE_EVENT, getHtmlElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.2.0",
+  "version": "41.4.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",