@skyscanner/backpack-web 25.1.0 → 25.2.0

package/bpk-component-badge/src/BpkBadge.js

@@ -7,7 +7,7 @@ exports.default = exports.BADGE_TYPES = void 0;
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkBadgeModule = _interopRequireDefault(require("./BpkBadge.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["type", "docked", "centered", "className"];
+const _excluded = ["centered", "className", "docked", "type"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -57,10 +57,10 @@ const badgeTypeClassNames = {
 };
 const BpkBadge = _ref => {
   let {
-      type = BADGE_TYPES.normal,
-      docked = null,
       centered = false,
-      className = null
+      className = null,
+      docked = null,
+      type = BADGE_TYPES.normal
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const classNames = getClassName('bpk-badge', badgeTypeClassNames[type], docked === 'right' && 'bpk-badge--docked-right', docked === 'left' && 'bpk-badge--docked-left', centered && 'bpk-badge--centered', className);

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

@@ -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 BpkBreakpoint, { BREAKPOINTS } from './src/BpkBreakpoint';
+export { BREAKPOINTS };
+export default BpkBreakpoint;

package/bpk-component-breakpoint/src/BpkBreakpoint.d.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 type { ReactNode } from 'react';
+declare const BREAKPOINTS: {
+    readonly SMALL_MOBILE: any;
+    readonly MOBILE: any;
+    readonly SMALL_TABLET: any;
+    readonly SMALL_TABLET_ONLY: any;
+    readonly TABLET: any;
+    readonly TABLET_ONLY: any;
+    readonly ABOVE_MOBILE: any;
+    readonly ABOVE_TABLET: any;
+    readonly ABOVE_DESKTOP: any;
+    readonly DESKTOP_ONLY: any;
+};
+type Props = {
+    children: ReactNode | ((matches: boolean) => ReactNode | null);
+    query: string | (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
+    legacy?: boolean;
+};
+declare const BpkBreakpoint: ({ children, legacy, query }: Props) => JSX.Element;
+export { BREAKPOINTS };
+export default BpkBreakpoint;

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BREAKPOINTS = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive/dist/react-responsive"));
 var _base = _interopRequireDefault(require("@skyscanner/bpk-foundations-web/tokens/base.common"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 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.
- */const BREAKPOINTS = {
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
+const BREAKPOINTS = {
   SMALL_MOBILE: _base.default.breakpointQuerySmallMobile,
   MOBILE: _base.default.breakpointQueryMobile,
   SMALL_TABLET: _base.default.breakpointQuerySmallTablet,
@@ -33,34 +38,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   TABLET: _base.default.breakpointQueryTablet,
   TABLET_ONLY: _base.default.breakpointQueryTabletOnly,
   ABOVE_MOBILE: _base.default.breakpointQueryAboveMobile,
-  ABOVE_TABLET: _base.default.breakpointQueryAboveTablet
+  ABOVE_TABLET: _base.default.breakpointQueryAboveTablet,
+  ABOVE_DESKTOP: _base.default.breakpointQueryAboveDesktop,
+  DESKTOP_ONLY: _base.default.breakpointQueryDesktopOnly
 };
 exports.BREAKPOINTS = BREAKPOINTS;
-const BpkBreakpoint = props => {
-  const {
-    children,
-    query
-  } = props;
+const BpkBreakpoint = ({
+  children,
+  legacy = false,
+  query
+}) => {
+  if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
+    console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
     query: query,
     children: children
   });
 };
-const queryValidator = (props, ...rest) => {
-  if (!props.legacy) {
-    return _propTypes.default.oneOf(Object.keys(BREAKPOINTS).map(key => BREAKPOINTS[key])).isRequired(props, ...rest);
-  }
-  return _propTypes.default.string.isRequired(props, ...rest);
-};
-BpkBreakpoint.propTypes = {
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-  query: queryValidator,
-  // eslint-disable-line react/require-default-props
-  legacy: _propTypes.default.bool // eslint-disable-line react/no-unused-prop-types
-};
-
-BpkBreakpoint.defaultProps = {
-  legacy: false
-};
 var _default = BpkBreakpoint;
 exports.default = _default;

package/bpk-component-button/src/BpkButtonV2/BpkButton.js

@@ -8,7 +8,7 @@ var _bpkReactUtils = require("../../../bpk-react-utils");
 var _commonTypes = require("./common-types");
 var _BpkButtonModule = _interopRequireDefault(require("./BpkButton.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "type", "size", "className", "href", "disabled", "onClick", "submit", "iconOnly", "blank", "rel"];
+const _excluded = ["blank", "children", "className", "disabled", "href", "iconOnly", "onClick", "rel", "size", "submit", "type"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -37,17 +37,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const getCommonClassName = (0, _bpkReactUtils.cssModules)(_BpkButtonModule.default);
 const BpkButtonV2 = _ref => {
   let {
+      blank = false,
       children,
-      type = _commonTypes.BUTTON_TYPES.primary,
-      size = _commonTypes.SIZE_TYPES.small,
       className = null,
-      href = null,
       disabled = false,
+      href = null,
+      iconOnly = false,
       onClick = () => {},
+      rel: propRel = undefined,
+      size = _commonTypes.SIZE_TYPES.small,
       submit = false,
-      iconOnly = false,
-      blank = false,
-      rel: propRel = undefined
+      type = _commonTypes.BUTTON_TYPES.primary
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const classNames = getCommonClassName('bpk-button', size === _commonTypes.SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === _commonTypes.SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, className);

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

@@ -18,13 +18,15 @@
 
 import BpkCalendarContainer, { withCalendarState } from './src/BpkCalendarContainer';
 import BpkCalendarGrid, { BpkCalendarGridWithTransition } from './src/BpkCalendarGrid';
+import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid';
 import BpkCalendarGridHeader from './src/BpkCalendarGridHeader';
 import BpkCalendarNav from './src/BpkCalendarNav';
 import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from './src/BpkCalendarDate';
+import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate';
 import composeCalendar from './src/composeCalendar';
 import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes';
 import CustomPropTypes, { BpkCalendarGridPropTypes, BpkCalendarDatePropTypes } from './src/custom-proptypes-legacy';
 import * as DateUtils from './src/date-utils';
 import themeAttributes from './src/themeAttributes';
 export default BpkCalendarContainer;
-export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, };
+export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, BpkCalendarDateProps, BpkCalendarGridProps, };

package/bpk-component-calendar/src/BpkCalendarContainer.d.ts

@@ -19,28 +19,30 @@
 import type { ComponentType } from 'react';
 import type { SelectionConfiguration } from './custom-proptypes';
 type Props = {
-    fixedWidth: boolean;
-    maxDate: Date;
-    minDate: Date;
+    fixedWidth?: boolean;
+    maxDate?: Date;
+    minDate?: Date;
     onDateSelect?: ((date: Date, newDate?: Date) => void) | null;
     onMonthChange?: ((event: UIEvent, { month, source }: {
         month: Date;
         source: string;
     }) => void) | null;
-    selectionConfiguration: SelectionConfiguration;
-    initiallyFocusedDate: Date | null;
+    selectionConfiguration?: SelectionConfiguration;
+    initiallyFocusedDate?: Date | null;
 };
 type InjectedProps = {
     onDateClick: ((date: Date) => void) | null;
     onDateKeyDown: ((event: KeyboardEvent) => void) | null;
     month: Date;
 };
-type CalendarProps<P> = Omit<P & Props, keyof InjectedProps>;
+type CalendarProps<P> = Omit<P & Props, keyof InjectedProps> & {
+    [rest: string]: any;
+};
 type State = {
     preventKeyboardFocus: boolean;
     focusedDate: Date;
 };
-declare const withCalendarState: <P extends {}>(Calendar: ComponentType<P & InjectedProps>) => {
+declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>) => {
     new (props: CalendarProps<P>): {
         UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<P>): void;
         handleDateFocus: (event: UIEvent, { date, source }: {

package/bpk-component-calendar/src/BpkCalendarContainer.js

@@ -134,7 +134,7 @@ const withCalendarState = Calendar => {
         };
         if (onDateSelect) {
           const newDate = (0, _dateUtils.dateToBoundaries)(date, (0, _dateUtils.startOfDay)(this.props.minDate), (0, _dateUtils.startOfDay)(this.props.maxDate));
-          if (selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && ((0, _dateUtils.isAfter)(newDate, selectionConfiguration.startDate) || (0, _dateUtils.isSameDay)(newDate, selectionConfiguration.startDate))) {
+          if (selectionConfiguration && selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && ((0, _dateUtils.isAfter)(newDate, selectionConfiguration.startDate) || (0, _dateUtils.isSameDay)(newDate, selectionConfiguration.startDate))) {
             onDateSelect(selectionConfiguration.startDate, newDate);
           } else {
             onDateSelect(newDate);

package/bpk-component-calendar/src/BpkCalendarDate.d.ts

@@ -38,19 +38,19 @@ export type Props = DefaultProps & {
     date: Date;
 };
 type DefaultProps = {
-    className: string | null;
-    isBlocked: boolean;
-    isFocused: boolean;
-    isKeyboardFocusable: boolean;
-    isOutside: boolean;
-    isSelected: boolean;
-    isToday: boolean;
-    modifiers: DateModifiers;
-    onClick: ((date: Date) => void) | null;
-    onDateKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    className?: string | null;
+    isBlocked?: boolean;
+    isFocused?: boolean;
+    isKeyboardFocusable?: boolean;
+    isOutside?: boolean;
+    isSelected?: boolean;
+    isToday?: boolean;
+    modifiers?: DateModifiers;
+    onClick?: ((date: Date) => void) | null;
+    onDateKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
     preventKeyboardFocus?: boolean;
-    selectionType: SelectionTypes;
-    style: {};
+    selectionType?: SelectionTypes;
+    style?: {};
 };
 declare class BpkCalendarDate extends PureComponent<Props> {
     static defaultProps: DefaultProps;

package/bpk-component-calendar/src/BpkCalendarGrid.d.ts

@@ -20,9 +20,9 @@ import type { ElementType } from 'react';
 import { Component } from 'react';
 import type { DateModifiers, SelectionConfiguration } from './custom-proptypes';
 type DefaultProps = {
-    className: string | null;
-    dateModifiers: DateModifiers;
-    focusedDate: Date | null;
+    className?: string | null;
+    dateModifiers?: DateModifiers;
+    focusedDate?: Date | null;
     cellClassName: string | null;
     isKeyboardFocusable: boolean;
     markOutsideDays: boolean;
@@ -36,7 +36,7 @@ type DefaultProps = {
     ignoreOutsideDate: boolean;
     dateProps: {};
 };
-type Props = DefaultProps & {
+export type Props = DefaultProps & {
     DateComponent: ElementType;
     formatDateFull: (date: Date) => Date | string;
     month: Date;

package/bpk-component-calendar/src/BpkCalendarGridHeader.d.ts

@@ -24,7 +24,7 @@ type Props = DefaultProps & {
 };
 type DefaultProps = {
     className?: string | null;
-    weekDayKey: WeekDayKey;
+    weekDayKey?: WeekDayKey;
 };
 declare class BpkCalendarGridHeader extends PureComponent<Props> {
     static defaultProps: {

package/bpk-component-calendar/src/Week.d.ts

@@ -33,15 +33,15 @@ export type Props = DefaultProps & {
     [rest: string]: any;
 };
 type DefaultProps = {
-    dateProps: {};
-    focusedDate: Date | number | null;
-    ignoreOutsideDate: boolean;
-    maxDate: Date | null;
-    minDate: Date | null;
-    onDateClick: () => void;
-    onDateKeyDown: () => void;
-    cellClassName: string | null;
-    selectionConfiguration: SelectionConfiguration;
+    dateProps?: {};
+    focusedDate?: Date | number | null;
+    ignoreOutsideDate?: boolean;
+    maxDate?: Date | null;
+    minDate?: Date | null;
+    onDateClick?: () => void;
+    onDateKeyDown?: () => void;
+    cellClassName?: string | null;
+    selectionConfiguration?: SelectionConfiguration;
 };
 declare class Week extends Component<Props> {
     static defaultProps: DefaultProps;

package/bpk-component-calendar/src/Week.js

@@ -209,10 +209,10 @@ class Week extends _react.Component {
     // If selected date is changing, and it'll be included as part
     // of either the week we're rendering now or the next week we'll
     // render, component should update.
-    if (this.props.selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.single && this.props.selectionConfiguration.date) {
+    if (this.props.selectionConfiguration?.type === _customProptypes.CALENDAR_SELECTION_TYPE.single && this.props.selectionConfiguration.date) {
       return singleDateHandler(this.props, nextProps);
     }
-    if (this.props.selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range) {
+    if (this.props.selectionConfiguration?.type === _customProptypes.CALENDAR_SELECTION_TYPE.range) {
       return rangeDateHandler(this.props, nextProps);
     }
 

package/bpk-component-card/src/BpkCardWrapper.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-wrapper{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem;box-shadow:0 0 0 2px var(--background-color) }.bpk-no-touch-support .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card-wrapper::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card-wrapper::after{z-index:-1}}.bpk-card-wrapper:active::after{box-shadow:none}.bpk-card-wrapper--header{border-radius:.5rem .5rem 0 0;background-color:var(--background-color);overflow:hidden}.bpk-card-wrapper--content{position:relative;border-radius:0 0 .75rem .75rem;overflow:hidden}.bpk-card-wrapper--content::before,.bpk-card-wrapper--content::after{position:absolute;top:0;content:' ';z-index:2;width:1.5rem;height:1.5rem;background-color:transparent;box-shadow:1rem 0 0 0 var(--background-color);overflow:hidden;border-radius:.75rem}.bpk-card-wrapper--content::before{left:0;transform:rotate(225deg)}.bpk-card-wrapper--content::after{right:0;transform:rotate(-45deg)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-wrapper{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem;box-shadow:0 0 0 2px var(--background-color) }.bpk-no-touch-support .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card-wrapper::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card-wrapper::after{z-index:-1}}.bpk-card-wrapper:active::after{box-shadow:none}.bpk-card-wrapper--header{border-radius:.5rem .5rem 0 0;background-color:var(--background-color);cursor:default;overflow:hidden}.bpk-card-wrapper--content{position:relative;border-radius:0 0 .75rem .75rem;overflow:hidden}.bpk-card-wrapper--content::before,.bpk-card-wrapper--content::after{position:absolute;top:0;content:' ';z-index:2;width:1.5rem;height:1.5rem;background-color:transparent;box-shadow:1rem 0 0 0 var(--background-color);overflow:hidden;border-radius:.75rem}.bpk-card-wrapper--content::before{left:0;transform:rotate(225deg)}.bpk-card-wrapper--content::after{right:0;transform:rotate(-45deg)}.bpk-card-wrapper:has(.bpk-card-wrapper--header:active)::after{box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:1}

package/bpk-component-card/src/BpkDividedCard.js

@@ -8,7 +8,7 @@ var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkCard = _interopRequireDefault(require("./BpkCard"));
 var _BpkDividedCardModule = _interopRequireDefault(require("./BpkDividedCard.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["orientation", "href", "className", "isElevated", "primaryContent", "secondaryContent"];
+const _excluded = ["className", "href", "isElevated", "orientation", "primaryContent", "secondaryContent"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -42,10 +42,10 @@ const ORIENTATION = {
 exports.ORIENTATION = ORIENTATION;
 const BpkDividedCard = _ref => {
   let {
-      orientation = ORIENTATION.horizontal,
-      href = null,
       className = null,
+      href = null,
       isElevated = true,
+      orientation = ORIENTATION.horizontal,
       primaryContent,
       secondaryContent
     } = _ref,

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -10,7 +10,7 @@ var _BpkSelectableChip = _interopRequireDefault(require("./BpkSelectableChip"));
 var _commonTypes = require("./commonTypes");
 var _BpkSelectableChipModule = _interopRequireDefault(require("./BpkSelectableChip.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "type", "leadingAccessoryView"];
+const _excluded = ["className", "leadingAccessoryView", "type"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -46,8 +46,8 @@ const getClassName = (0, _bpkReactUtils.cssModules)(_BpkSelectableChipModule.def
 const BpkDismissibleChip = _ref => {
   let {
       className,
-      type = _commonTypes.CHIP_TYPES.default,
-      leadingAccessoryView = null
+      leadingAccessoryView = null,
+      type = _commonTypes.CHIP_TYPES.default
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const iconClassNames = getClassName(`bpk-chip--${type}-dismissible__trailing-accessory-view`);

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -9,7 +9,7 @@ var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-tex
 var _BpkSelectableChipModule = _interopRequireDefault(require("./BpkSelectableChip.module.css"));
 var _commonTypes = require("./commonTypes");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["role", "selected", "trailingAccessoryView", "className", "disabled", "leadingAccessoryView", "type", "accessibilityLabel", "children"];
+const _excluded = ["accessibilityLabel", "children", "className", "disabled", "leadingAccessoryView", "role", "selected", "trailingAccessoryView", "type"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -40,15 +40,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkSelectableChipModule.default);
 const BpkSelectableChip = _ref => {
   let {
-      role = 'checkbox',
-      selected = false,
-      trailingAccessoryView = null,
+      accessibilityLabel,
+      children,
       className,
       disabled = false,
       leadingAccessoryView = null,
-      type = _commonTypes.CHIP_TYPES.default,
-      accessibilityLabel,
-      children
+      role = 'checkbox',
+      selected = false,
+      trailingAccessoryView = null,
+      type = _commonTypes.CHIP_TYPES.default
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !disabled && selected && `bpk-chip--${type}-selected`, className);

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

@@ -0,0 +1,27 @@
+/*
+ * 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 BpkImage from './src/BpkImage';
+import BpkBackgroundImage from './src/BpkBackgroundImage';
+import type { BpkBackgroundImageProps } from './src/BpkBackgroundImage';
+import withLazyLoading from './src/withLazyLoading';
+import withLoadingBehavior from './src/withLoadingBehavior';
+import BORDER_RADIUS_STYLES from './src/BpkImageBorderRadiusStyles';
+export type { BpkBackgroundImageProps };
+export default BpkImage;
+export { BpkBackgroundImage, withLazyLoading, withLoadingBehavior, BORDER_RADIUS_STYLES, };

package/bpk-component-image/src/BpkBackgroundImage.d.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { Component, CSSProperties } from 'react';
+import type { ReactNode } from 'react';
+export type BpkBackgroundImageProps = {
+    children?: ReactNode;
+    aspectRatio: number;
+    inView?: boolean;
+    loading?: boolean;
+    src: string;
+    className?: string;
+    onLoad?: (() => void) | null;
+    style?: {};
+    imageStyle?: CSSProperties;
+};
+declare class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
+    trackImg?: HTMLImageElement | null;
+    static defaultProps: {
+        className: string;
+        inView: boolean;
+        loading: boolean;
+        onLoad: null;
+        style: {};
+        imageStyle: {};
+    };
+    constructor(props: BpkBackgroundImageProps);
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(newProps: BpkBackgroundImageProps): void;
+    onBackgroundImageLoad: () => void;
+    getAspectRatio: () => number;
+    startImageLoad: () => void;
+    render(): JSX.Element;
+}
+export default BpkBackgroundImage;

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
 var _bpkReactUtils = require("../../bpk-react-utils");
@@ -33,14 +32,14 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
+                                                                                                                                                                                                                                                                                                                                                                                           */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBackgroundImageModule.default);
 class BpkBackgroundImage extends _react.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "trackImg", void 0);
-    _defineProperty(this, "startImageLoad", void 0);
-    _defineProperty(this, "onBackgroundImageLoad", void 0);
     _defineProperty(this, "onBackgroundImageLoad", () => {
       if (this.props.onLoad) {
         this.props.onLoad();
@@ -127,19 +126,8 @@ class BpkBackgroundImage extends _react.Component {
     });
   }
 }
-_defineProperty(BpkBackgroundImage, "propTypes", {
-  aspectRatio: _propTypes.default.number.isRequired,
-  src: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  inView: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  onLoad: _propTypes.default.func,
-  style: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  imageStyle: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-});
 _defineProperty(BpkBackgroundImage, "defaultProps", {
-  className: null,
+  className: '',
   inView: true,
   loading: false,
   onLoad: null,

package/bpk-component-image/src/BpkImage.d.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { Component } from 'react';
+import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';
+type BpkImageProps = {
+    altText: string;
+    src: string;
+    aspectRatio: number;
+    inView?: boolean;
+    loading?: boolean;
+    borderRadiusStyle?: typeof BORDER_RADIUS_STYLES[keyof typeof BORDER_RADIUS_STYLES];
+    className?: string;
+    onLoad?: (() => void) | null;
+    style?: {};
+    suppressHydrationWarning?: boolean;
+    [rest: string]: any;
+};
+declare class BpkImage extends Component<BpkImageProps> {
+    placeholder?: HTMLElement | null;
+    static defaultProps: {
+        borderRadiusStyle: "none";
+        inView: boolean;
+        loading: boolean;
+        onLoad: null;
+        style: {};
+        suppressHydrationWarning: boolean;
+    };
+    onImageLoad: () => void;
+    getAspectRatio: () => number;
+    render(): JSX.Element;
+}
+export default BpkImage;