@skyscanner/backpack-web 42.25.0 → 42.26.0-dev-v27635015998.1

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

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 export const CLEAR_BUTTON_MODES = {
   never: 'never',
   whileEditing: 'whileEditing',
@@ -30,58 +29,4 @@ export const INPUT_TYPES = {
   tel: 'tel'
 };
 
-// Declaring this type here as react docgen gets confused and reads them as native input types
-
-// TODO - this function should be removed once all input examples have been migrated to TS
-export const clearablePropType = (props, propName, componentName) => {
-  const createError = message => new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`);
-  const propBeingChecked = props[propName];
-  if (props.clearButtonMode && props.clearButtonMode !== CLEAR_BUTTON_MODES.never) {
-    if (!propBeingChecked) {
-      return createError(`When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`);
-    }
-    switch (propName) {
-      case 'clearButtonLabel':
-        return typeof propBeingChecked === 'string' ? null : createError(`\`clearButtonLabel\` must be a string`);
-      case 'onClear':
-        return typeof propBeingChecked === 'function' ? null : createError(`\`onClear\` must be a function`);
-      default:
-        return null;
-    }
-  }
-  return null;
-};
-
-// TODO - this should be removed once all input examples have been migrated to TS
-export const propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  type: PropTypes.oneOf([INPUT_TYPES.text, INPUT_TYPES.email, INPUT_TYPES.number, INPUT_TYPES.password, INPUT_TYPES.tel]),
-  className: PropTypes.string,
-  valid: PropTypes.bool,
-  large: PropTypes.bool,
-  docked: PropTypes.bool,
-  dockedFirst: PropTypes.bool,
-  dockedMiddle: PropTypes.bool,
-  dockedLast: PropTypes.bool,
-  inputRef: PropTypes.func,
-  clearButtonMode: PropTypes.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
-  clearButtonLabel: clearablePropType,
-  onClear: clearablePropType
-};
-
-// TODO - this should be removed once all input examples have been migrated to TS
-export const defaultProps = {
-  type: INPUT_TYPES.text,
-  valid: null,
-  large: false,
-  docked: false,
-  dockedFirst: false,
-  dockedMiddle: false,
-  dockedLast: false,
-  inputRef: null,
-  clearButtonMode: CLEAR_BUTTON_MODES.never,
-  clearButtonLabel: null,
-  onClear: null
-};
+// Declaring this type here as react docgen gets confused and reads them as native input types

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -40,7 +40,7 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         handleTouchEnd: (event: UIEvent) => void;
         handleFocus: () => void;
         handleBlur: () => void;
-        render(): ReactElement;
+        render(): ReactElement<any>;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -63,17 +63,6 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        isOpen: boolean;
-        hasTouchSupport: boolean;
-        onOpen: null;
-        onClick: null;
-        onFocus: null;
-        onBlur: null;
-        onTouchEnd: null;
-        onKeyDown: null;
-        onKeyUp: null;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default withOpenEvents;

package/bpk-component-input/src/withOpenEvents.js

@@ -23,6 +23,7 @@ const KEYCODES = {
   ENTER: 'Enter',
   SPACEBAR: 'Space'
 };
+const HAS_TOUCH_SUPPORT = !!(typeof window !== 'undefined' && 'ontouchstart' in window);
 const handleKeyEvent = callback => e => {
   if (e.code === KEYCODES.ENTER || e.code === KEYCODES.SPACEBAR) {
     if (callback) {
@@ -40,19 +41,6 @@ const withEventHandler = (fn, eventHandler) => e => {
 };
 const withOpenEvents = WithOpenEventsInputComponent => {
   class WithOpenEvents extends Component {
-    static defaultProps = {
-      // Custom props
-      isOpen: false,
-      hasTouchSupport: !!(typeof window !== 'undefined' && 'ontouchstart' in window),
-      onOpen: null,
-      // Input props
-      onClick: null,
-      onFocus: null,
-      onBlur: null,
-      onTouchEnd: null,
-      onKeyDown: null,
-      onKeyUp: null
-    };
     constructor(props) {
       super(props);
       this.focusCanOpen = true;
@@ -87,7 +75,7 @@ const withOpenEvents = WithOpenEventsInputComponent => {
     render() {
       const {
         className,
-        hasTouchSupport,
+        hasTouchSupport = HAS_TOUCH_SUPPORT,
         isOpen,
         onBlur,
         onClick,

package/bpk-component-layout/src/BpkProvider.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 export interface BpkProviderProps {
     children: ReactNode;
 }
@@ -14,6 +14,6 @@ export interface BpkProviderProps {
  * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
+ * @returns {ReactElement} The provider wrapping its children with Chakra and Ark context.
  */
-export declare const BpkProvider: ({ children }: BpkProviderProps) => JSX.Element;
+export declare const BpkProvider: ({ children }: BpkProviderProps) => ReactElement;

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

@@ -16,9 +16,11 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { LocaleProvider } from '@ark-ui/react';
 import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -29,6 +31,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * See: https://chakra-ui.com/guides/component-bundle-optimization
  */
 const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
+
+// Cypress/Percy workaround: `hydrateRoot()` strips SSR <style> nodes, then
+// Emotion falls back to speedy mode (insertRule) which Percy can't serialise.
+// Force speedy:false + recreate after mount in Cypress. Remove once Emotion /
+// React Router 7 provide a cleaner hydration story. Ported from hotels-website#12025.
+
+const isCypressEnv = () => {
+  if (typeof window === 'undefined') return false;
+  const win = window;
+  // `bpkDisableEmotionSpeedy` is an explicit escape hatch for non-Cypress
+  // Percy runs; consumers set it in their test bootstrap.
+  if (win.Cypress || win.bpkDisableEmotionSpeedy) return true;
+  try {
+    return Boolean(win.parent?.Cypress);
+  } catch {
+    return false; // cross-origin parent frame
+  }
+};
+
+// `'css'` is shared with Chakra v3's internal key on purpose — keeps this
+// boundary in front of Chakra's auto-created cache.
+const createBpkEmotionCache = speedy => createCache(speedy === undefined ? {
+  key: 'css'
+} : {
+  key: 'css',
+  speedy
+});
+const BpkEmotionCacheContext = /*#__PURE__*/createContext(null);
 // Fallback locale mapping used when no explicit locale is available on the document.
 // Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
 // 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.
@@ -116,17 +146,43 @@ const useArkLocale = () => {
  * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
  * @param {BpkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
+ * @returns {ReactElement} The provider wrapping its children with Chakra and Ark context.
  */
 export const BpkProvider = ({
   children
 }) => {
+  const parentCache = useContext(BpkEmotionCacheContext);
+  const isNested = parentCache !== null;
+  const [isCypress] = useState(isCypressEnv);
+  const [ownCache, setOwnCache] = useState(() => isNested ? parentCache : createBpkEmotionCache(isCypress ? false : undefined));
+  const hasRecreated = useRef(false);
   const locale = useArkLocale();
-  return /*#__PURE__*/_jsx(ChakraProvider, {
+
+  // Recreate the cache once after mount in Cypress to replace SSR <style>
+  // nodes the hydrator stripped. `hasRecreated` guards StrictMode double-invoke.
+  // Deps stable for provider lifetime → empty array is intentional.
+  useEffect(() => {
+    if (isNested || !isCypress) return;
+    if (hasRecreated.current) return;
+    hasRecreated.current = true;
+    setOwnCache(createBpkEmotionCache(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const inner = /*#__PURE__*/_jsx(ChakraProvider, {
     value: bpkSystem,
     children: /*#__PURE__*/_jsx(LocaleProvider, {
       locale: locale,
       children: children
     })
   });
+  if (isNested) {
+    return inner;
+  }
+  return /*#__PURE__*/_jsx(BpkEmotionCacheContext.Provider, {
+    value: ownCache,
+    children: /*#__PURE__*/_jsx(CacheProvider, {
+      value: ownCache,
+      children: inner
+    })
+  });
 };

package/bpk-component-map/src/BpkBasicMapMarker.d.ts

@@ -1,15 +1,8 @@
-import PropTypes from 'prop-types';
 import type { ReactNode } from 'react';
 import { type LatLong } from './common-types';
 type Props = {
     children: ReactNode;
     position: LatLong;
 };
-declare const BpkBasicMapMarker: {
-    (props: Props): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        position: any;
-    };
-};
+declare const BpkBasicMapMarker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkBasicMapMarker.js

@@ -16,13 +16,11 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkOverlayView from "./BpkOverlayView";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { LatLongPropType } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getPixelPositionOffset = (width, height) => ({
   x: -(width / 2),
@@ -42,8 +40,4 @@ const BpkBasicMapMarker = props => {
     children: children
   });
 };
-BpkBasicMapMarker.propTypes = {
-  children: PropTypes.node.isRequired,
-  position: LatLongPropType.isRequired
-};
 export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkIconMarker.js

@@ -24,12 +24,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkIconMarker = props => {
   const {
-    buttonProps,
-    className,
+    buttonProps = null,
+    className = null,
     icon,
-    onClick,
+    onClick = null,
     position,
-    selected,
+    selected = false,
     ...rest
   } = props;
   const wrapperClassNames = getClassName('bpk-icon-marker__wrapper', selected && 'bpk-icon-marker__wrapper--selected', className);
@@ -64,10 +64,4 @@ BpkIconMarker.propTypes = {
   selected: PropTypes.bool,
   buttonProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
-BpkIconMarker.defaultProps = {
-  className: null,
-  onClick: null,
-  selected: false,
-  buttonProps: null
-};
 export default BpkIconMarker;

package/bpk-component-map/src/BpkIconMarkerBackground.js

@@ -20,9 +20,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkIconMarkerBackground = props => {
   const {
-    disabled,
-    interactive,
-    selected,
+    disabled = false,
+    interactive = false,
+    selected = false,
     ...rest
   } = props;
   const classNames = getClassName('bpk-icon-marker-background', interactive && 'bpk-icon-marker-background--interactive', disabled && 'bpk-icon-marker-background--disabled', selected && 'bpk-icon-marker-background--selected');
@@ -61,9 +61,4 @@ const BpkIconMarkerBackground = props => {
     })
   );
 };
-BpkIconMarkerBackground.defaultProps = {
-  disabled: false,
-  interactive: false,
-  selected: false
-};
 export default BpkIconMarkerBackground;

package/bpk-component-map/src/BpkMap.js

@@ -24,20 +24,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkMap = props => {
   const {
-    bounds,
-    center,
-    children,
-    className,
-    greedyGestureHandling,
-    mapId,
-    mapOptionStyles,
-    mapRef,
-    onRegionChange,
-    onTilesLoaded,
-    onZoom,
-    panEnabled,
-    showControls,
-    zoom
+    bounds = null,
+    center = undefined,
+    children = null,
+    className = null,
+    greedyGestureHandling = false,
+    mapId = null,
+    mapOptionStyles = null,
+    mapRef = null,
+    onRegionChange = null,
+    onTilesLoaded = null,
+    onZoom = null,
+    panEnabled = true,
+    showControls = true,
+    zoom = 15
   } = props;
   if (!bounds && !center) {
     throw new Error('BpkMap: Provide either `bounds` or `center` props.');
@@ -138,20 +138,4 @@ BpkMap.propTypes = {
   })),
   mapId: PropTypes.string
 };
-BpkMap.defaultProps = {
-  bounds: null,
-  center: undefined,
-  children: null,
-  greedyGestureHandling: false,
-  mapRef: null,
-  onRegionChange: null,
-  onZoom: null,
-  onTilesLoaded: null,
-  panEnabled: true,
-  showControls: true,
-  zoom: 15,
-  className: null,
-  mapOptionStyles: null,
-  mapId: null
-};
 export default BpkMap;

package/bpk-component-map/src/withGoogleMapsScript.js

@@ -19,12 +19,13 @@ import { useJsApiLoader } from '@react-google-maps/api';
 import DefaultLoadingElement from "./DefaultLoadingElement";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const LibraryShapeType = PropTypes.arrayOf(PropTypes.oneOf(['drawing', 'geometry', 'localContext', 'places', 'visualization']));
+const DEFAULT_LIBRARIES = ['geometry', 'drawing', 'places'];
 function withGoogleMapsScript(Component) {
   const WithGoogleMapsScript = ({
     googleMapsApiKey,
-    libraries,
-    loadingElement,
-    preventGoogleFontsLoading,
+    libraries = DEFAULT_LIBRARIES,
+    loadingElement = /*#__PURE__*/_jsx(DefaultLoadingElement, {}),
+    preventGoogleFontsLoading = false,
     ...rest
   }) => {
     const {
@@ -52,11 +53,6 @@ function withGoogleMapsScript(Component) {
     libraries: LibraryShapeType,
     preventGoogleFontsLoading: PropTypes.bool
   };
-  WithGoogleMapsScript.defaultProps = {
-    loadingElement: /*#__PURE__*/_jsx(DefaultLoadingElement, {}),
-    preventGoogleFontsLoading: false,
-    libraries: ['geometry', 'drawing', 'places']
-  };
   return WithGoogleMapsScript;
 }
 export default withGoogleMapsScript;

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts

@@ -21,7 +21,6 @@ type State = {
 };
 declare class BpkMobileScrollContainer extends Component<Props, State> {
     debouncedResize: DebouncedFunc<() => void>;
-    static defaultProps: Partial<Props>;
     constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -52,10 +52,6 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName,
   return classNames;
 };
 class BpkMobileScrollContainer extends Component {
-  static defaultProps = {
-    innerContainerTagName: 'div',
-    showScrollbar: false
-  };
   constructor(props) {
     super(props);
     this.state = {
@@ -111,7 +107,7 @@ class BpkMobileScrollContainer extends Component {
       leadingIndicatorClassName,
       onScroll,
       scrollerRef,
-      showScrollbar,
+      showScrollbar = false,
       style,
       trailingIndicatorClassName,
       ...rest

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

@@ -3,9 +3,8 @@ import { MODAL_STYLING } from './src/BpkModalInner';
 import { BpkModalV2 } from './src/BpkModalV2/BpkModal';
 import BpkModalV3 from './src/BpkModalV3/BpkModalV3';
 import { MODAL_V3_TYPES } from './src/BpkModalV3/common-types';
-import { propTypes, defaultProps } from './src/legacy-prop-types';
 import themeAttributes from './src/themeAttributes';
 import type { Props } from './src/BpkModal';
 export type BpkModalProps = Props;
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING, };
+export { themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING, };

package/bpk-component-modal/index.js

@@ -21,8 +21,6 @@ import { MODAL_STYLING } from "./src/BpkModalInner";
 import { BpkModalV2 } from "./src/BpkModalV2/BpkModal";
 import BpkModalV3 from "./src/BpkModalV3/BpkModalV3";
 import { MODAL_V3_TYPES } from "./src/BpkModalV3/common-types";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { propTypes, defaultProps } from "./src/legacy-prop-types";
 import themeAttributes from "./src/themeAttributes";
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING };
+export { themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING };

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

@@ -14,8 +14,8 @@ export type Props = {
      * Note: this prop only applies when `title` is a string; ReactNode titles are not truncated and wrap naturally. */
     wrapTitle?: boolean;
     className?: string;
-    leadingButton?: ReactElement | null;
-    trailingButton?: ReactElement | null;
+    leadingButton?: ReactElement<any> | null;
+    trailingButton?: ReactElement<any> | null;
     sticky?: boolean;
     barStyle?: BarStyle;
     [rest: string]: any;

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -24,21 +24,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkPhoneInput = props => {
   const {
-    className,
+    className = null,
     dialingCode,
-    dialingCodeMask,
+    dialingCodeMask = false,
     dialingCodeProps,
     dialingCodes,
-    disabled,
+    disabled = false,
     id,
     label,
-    large,
+    large = false,
     name,
     onChange,
     onDialingCodeChange,
-    valid,
+    valid = null,
     value,
-    wrapperProps,
+    wrapperProps = {},
     ...rest
   } = props;
   const commonProps = {
@@ -164,12 +164,4 @@ BpkPhoneInput.propTypes = {
   valid: PropTypes.bool,
   wrapperProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
-BpkPhoneInput.defaultProps = {
-  className: null,
-  disabled: false,
-  dialingCodeMask: false,
-  large: false,
-  valid: null,
-  wrapperProps: {}
-};
 export default BpkPhoneInput;

package/bpk-component-progress/src/BpkProgress.d.ts

@@ -12,14 +12,6 @@ export type Props = Omit<NativeDivProps, 'className'> & {
     getValueText?: ((value: number, min: number, max: number) => string) | null;
 };
 declare class BpkProgress extends Component<Props> {
-    static defaultProps: {
-        className: null;
-        stepped: boolean;
-        small: boolean;
-        onComplete: () => null;
-        onCompleteTransitionEnd: () => null;
-        getValueText: null;
-    };
     componentDidUpdate(previousProps: Props): void;
     handleCompleteTransitionEnd: () => void;
     render(): import("react/jsx-runtime").JSX.Element;

package/bpk-component-progress/src/BpkProgress.js

@@ -37,23 +37,17 @@ const renderSteps = numberOfSteps => {
   return steps;
 };
 class BpkProgress extends Component {
-  static defaultProps = {
-    className: null,
-    stepped: false,
-    small: false,
-    onComplete: () => null,
-    onCompleteTransitionEnd: () => null,
-    getValueText: null
-  };
   componentDidUpdate(previousProps) {
     const {
       max,
+      onComplete,
+      onCompleteTransitionEnd,
       value
     } = this.props;
-    if (value >= max && value !== previousProps.value && this.props.onComplete) {
-      this.props.onComplete();
-      if (!isTransitionEndSupported() && this.props.onCompleteTransitionEnd) {
-        this.props.onCompleteTransitionEnd();
+    if (value >= max && value !== previousProps.value) {
+      onComplete?.();
+      if (!isTransitionEndSupported() && onCompleteTransitionEnd) {
+        onCompleteTransitionEnd();
       }
     }
   }
@@ -69,14 +63,14 @@ class BpkProgress extends Component {
   };
   render() {
     const {
-      className,
-      getValueText,
+      className = null,
+      getValueText = null,
       max,
       min,
       onComplete,
       onCompleteTransitionEnd,
-      small,
-      stepped,
+      small = false,
+      stepped = false,
       value,
       ...rest
     } = this.props;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts

@@ -145,20 +145,6 @@ declare const _default: {
             focusedDate: Date;
         }>, nextContext: any): void;
     };
-    defaultProps: {
-        fixedWidth: boolean;
-        maxDate: Date;
-        minDate: Date;
-        onDateSelect: null;
-        onMonthChange: null;
-        selectionConfiguration: {
-            type: "single";
-            date: null;
-        };
-        initiallyFocusedDate: null;
-        markToday: boolean;
-        markOutsideDays: boolean;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default _default;

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -24,11 +24,11 @@ const BpkLargeChevronRightIconWithRtlSupport = withRtlSupport(BpkLargeChevronRig
 const getClassName = cssModules(STYLES);
 const BpkSectionListItem = props => {
   const {
-    blank,
+    blank = false,
     children,
-    className,
-    href,
-    onClick,
+    className = null,
+    href = null,
+    onClick = null,
     ...rest
   } = props;
   const classNames = [getClassName('bpk-section-list-item', (href || onClick) && 'bpk-section-list-item--interactive', className)];
@@ -83,10 +83,4 @@ BpkSectionListItem.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func
 };
-BpkSectionListItem.defaultProps = {
-  blank: false,
-  className: null,
-  href: null,
-  onClick: null
-};
 export default BpkSectionListItem;

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -24,7 +24,7 @@ const getClassName = cssModules(STYLES);
 const BpkSectionListSection = props => {
   const {
     children,
-    headerText,
+    headerText = null,
     ...rest
   } = props;
   return /*#__PURE__*/_jsxs("section", {
@@ -47,7 +47,4 @@ BpkSectionListSection.propTypes = {
   children: PropTypes.node.isRequired,
   headerText: PropTypes.string
 };
-BpkSectionListSection.defaultProps = {
-  headerText: null
-};
 export default BpkSectionListSection;

package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts

@@ -27,7 +27,7 @@ export type TabPanelProps = {
 export declare const useSegmentedControlPanels: (buttonContents: string[] | ReactNode[], selectedIndex: number) => {
     controlProps: {
         id: string;
-        buttonContents: string[] | ReactNode[];
+        buttonContents: ReactNode[] | string[];
         selectedIndex: number;
     };
     getPanelProps: (index: number) => TabPanelProps;