@skyscanner/backpack-web 33.3.1 → 33.5.0

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

@@ -15,14 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { BpkButtonLink } from "../../bpk-component-link";
 import BpkCloseButton from "../../bpk-component-close-button";
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkPopover.module.css";
 import { ARROW_ID } from "./constants";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkPopover.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
@@ -86,7 +85,10 @@ const BpkPopover = props => {
           id: labelId,
           textStyle: TEXT_STYLES.label1,
           children: label
-        }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
+        }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: getClassName('bpk-popover__close-button'),
           label: closeButtonText,
           onClick: bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose),

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

@@ -14,17 +14,15 @@
  * 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 { createPopper } from '@popperjs/core';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
 import { Component } from 'react';
+import { createPopper } from '@popperjs/core';
 import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
+import BpkPopover from "./BpkPopover";
 import keyboardFocusScope from "./keyboardFocusScope";
 import STYLES from "./BpkPopover.module.css";
-import BpkPopover from "./BpkPopover";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class BpkPopoverPortal extends Component {
   constructor() {
@@ -150,7 +148,10 @@ class BpkPopoverPortal extends Component {
     }
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [typeof target !== 'function' && target, /*#__PURE__*/_jsx(Portal, {
-        beforeClose: this.beforeClose,
+        beforeClose: this.beforeClose
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: classNames.join(' '),
         isOpen: isOpen,
         onClose: this.onClose,

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

@@ -21,8 +21,8 @@
 // it only prevents it leaving due to keyboard events.
 // Clicks outside the target element will move focus as normal.
 
-import tabbable from 'tabbable';
 import focusin from 'focusin';
+import tabbable from 'tabbable';
 let polyfilled = false;
 let focusTrapped = false;
 const init = element => {

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

@@ -15,12 +15,11 @@
  * 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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkPrice.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import { SIZES, ALIGNS } from "./common-types";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkPrice.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkPrice = props => {
   const {
@@ -43,14 +42,20 @@ const BpkPrice = props => {
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
       className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right', leadingClassName),
-      children: [previousPrice && /*#__PURE__*/_jsx(BpkText, {
+      children: [previousPrice && /*#__PURE__*/_jsx(BpkText
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: getClassName('bpk-price__previous-price'),
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
         tagName: "span",
         children: previousPrice
       }), previousPrice && leadingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__separator'),
         children: "\uD802\uDD1F"
       }), leadingText && /*#__PURE__*/_jsx(BpkText, {
@@ -61,13 +66,19 @@ const BpkPrice = props => {
     }), /*#__PURE__*/_jsxs("div", {
       className: getClassName(isAlignRight && 'bpk-price__column-container'),
       children: [/*#__PURE__*/_jsx(BpkText, {
-        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
+        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
         tagName: "span",
         children: price
       }), trailingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-price__trailing'),
         children: trailingText
       })]

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

@@ -19,8 +19,7 @@ import { Component } from 'react';
 import clamp from 'lodash.clamp';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkProgress.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
 const renderSteps = numberOfSteps => {

package/bpk-component-radio/src/BpkRadio.js

@@ -17,8 +17,7 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkRadio.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkRadio = props => {
   const {

package/bpk-component-rating/src/BpkRating.js

@@ -16,12 +16,11 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkRating.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import STYLES from "./BpkRating.module.css";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const getMinValue = () =>
 // Currently the min value is zero no matter what scale is used.
@@ -80,11 +79,17 @@ const BpkRating = props => {
       ...rest,
       children: [/*#__PURE__*/_jsxs(BpkText, {
         textStyle: valueTextSize,
-        tagName: "span",
+        tagName: "span"
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: valueStyles,
         "aria-hidden": "true",
         children: [adjustedValue, showScale && /*#__PURE__*/_jsxs(BpkText, {
-          textStyle: scaleTextSize,
+          textStyle: scaleTextSize
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: scaleStyles,
           tagName: "span",
           "aria-hidden": "true",
@@ -93,12 +98,18 @@ const BpkRating = props => {
       }), /*#__PURE__*/_jsxs("div", {
         className: textWrapperStyles,
         children: [title && /*#__PURE__*/_jsx(BpkText, {
-          textStyle: titleTextSize,
+          textStyle: titleTextSize
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: titleStyles,
           tagName: "span",
           "aria-hidden": "true",
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        }), subtitle && /*#__PURE__*/_jsx(BpkText
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: subtitleStyles,
           textStyle: subtitleTextSize,
           tagName: "span",

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

@@ -60,14 +60,10 @@ class BpkRtlToggle extends Component {
     });
   };
   render() {
-    const {
-      className
-    } = this.props;
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
     return /*#__PURE__*/_jsxs(BpkButtonLink, {
       title: "Keyboard Shortcut: ctrl + cmd + r",
       onClick: this.toggleRtl,
-      className: className,
       children: ["RTL ", onOrOff]
     });
   }

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -16,12 +16,11 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { BpkCalendarGrid } from "../../bpk-component-calendar";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkScrollableCalendarGrid.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkScrollableCalendarGrid = ({
   className,
@@ -33,7 +32,10 @@ const BpkScrollableCalendarGrid = ({
   const classNames = getClassName('bpk-scrollable-calendar-grid', className);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [/*#__PURE__*/_jsx(BpkText, {
+    children: [/*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
       tagName: "h1",
       textStyle: TEXT_STYLES.heading4,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -18,13 +18,13 @@
 
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
-import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { cssModules } from "../../bpk-react-utils";
+import { VariableSizeList as List } from 'react-window';
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
-import STYLES from "./BpkScrollableCalendarGridList.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
+import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
@@ -82,7 +82,10 @@ const BpkScrollableCalendarGridList = props => {
       month: months[index],
       focusedDate: focusedDate,
       preventKeyboardFocus: rest.preventKeyboardFocus,
-      "aria-hidden": index !== 1,
+      "aria-hidden": index !== 1
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-scrollable-calendar-grid-list__item')
     })
   });

package/bpk-component-section-header/src/BpkSectionHeader.js

@@ -16,11 +16,10 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
 import BpkText from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionHeader.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const SECTION_TYPES = {
   default: 'default',
@@ -35,13 +34,14 @@ const BpkSectionHeader = ({
   className: getClassName('bpk-section-header'),
   children: [/*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-section-header__title-description', `bpk-section-header__title-description--${type}`),
-    children: [/*#__PURE__*/_jsx(BpkText, {
-      tagName: "h2",
+    children: [/*#__PURE__*/_jsx("h2", {
       className: getClassName('bpk-section-header__title'),
       children: title
-    }), description && /*#__PURE__*/_jsx(BpkText, {
+    }), description && /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-section-header__description'),
-      children: description
+      children: /*#__PURE__*/_jsx(BpkText, {
+        children: description
+      })
     })]
   }), button]
 });

package/bpk-component-section-header/src/BpkSectionHeader.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-section-header__description{padding-top:.25rem}
+.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{margin:0;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-section-header__description{padding-top:.25rem}

package/bpk-component-section-list/index.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkSectionList from "./src/BpkSectionList";
-import BpkSectionListSection from "./src/BpkSectionListSection";
 import BpkSectionListItem from "./src/BpkSectionListItem";
+import BpkSectionListSection from "./src/BpkSectionListSection";
 export default BpkSectionList;
 export { BpkSectionListSection, BpkSectionListItem };

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

@@ -15,12 +15,11 @@
  * 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 BpkLargeChevronRightIcon from "../../bpk-component-icon/lg/chevron-right";
 import { withRtlSupport } from "../../bpk-component-icon";
+import BpkLargeChevronRightIcon from "../../bpk-component-icon/lg/chevron-right";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionListItem.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BpkLargeChevronRightIconWithRtlSupport = withRtlSupport(BpkLargeChevronRightIcon);
 const getClassName = cssModules(STYLES);
 const BpkSectionListItem = props => {
@@ -44,8 +43,9 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {
-          className: getClassName('bpk-section-list-item__chevron')
+        children: [children, /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-section-list-item__chevron'),
+          children: /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {})
         })]
       })
     );
@@ -59,8 +59,9 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {
-          className: getClassName('bpk-section-list-item__chevron')
+        children: [children, /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-section-list-item__chevron'),
+          children: /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {})
         })]
       })
     );

package/bpk-component-section-list/src/BpkSectionListItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-section-list-item{display:flex;width:100%;min-height:4rem;padding:.5rem 1rem;justify-content:space-between;align-items:center;border:none;background-color:#fff;color:#161616;text-decoration:none;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-section-list-item--interactive{cursor:pointer}.bpk-section-list-item__chevron{fill:#626971}.bpk-section-list-item:hover .bpk-section-list-item__chevron{fill:#161616}.bpk-section-list-item:active .bpk-section-list-item__chevron{fill:#161616}
+.bpk-section-list-item{display:flex;width:100%;min-height:4rem;padding:.5rem 1rem;justify-content:space-between;align-items:center;border:none;background-color:#fff;color:#161616;text-decoration:none;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-section-list-item--interactive{cursor:pointer}.bpk-section-list-item__chevron{display:contents;fill:#626971}.bpk-section-list-item:hover .bpk-section-list-item__chevron{fill:#161616}.bpk-section-list-item:active .bpk-section-list-item__chevron{fill:#161616}

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

@@ -16,11 +16,10 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Children } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionListSection.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSectionListSection = props => {
   const {

package/bpk-component-select/src/BpkSelect.js

@@ -18,8 +18,7 @@
 import { cloneElement } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSelect.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSelect = props => {
   const {

package/bpk-component-skeleton/index.js

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkSkeleton from "./src/BpkSkeleton";
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from "./src/common-types";
+export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkBaseSkeleton.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkBaseSkeleton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkBaseSkeleton = ({
+  skeletonStyle,
+  styleObj = undefined
+}) => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-skeleton', skeletonStyle),
+  style: styleObj
+});
+export default BpkBaseSkeleton;

package/bpk-component-skeleton/src/BpkBaseSkeleton.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-skeleton{width:6rem;height:6rem;background:#e0e4e9;background-image:linear-gradient(to right, rgba(255, 255, 255, 0) 7.08%, rgba(255, 255, 255, 0.6) 49.22%, rgba(255, 255, 255, 0) 100%);background-repeat:no-repeat;animation:shimmer-animation 1600ms infinite linear;animation-direction:normal}html[dir=rtl] .bpk-skeleton{animation-direction:reverse}@keyframes shimmer-animation{0%{background-position:-24rem 0}100%{background-position:24rem 0}}

package/bpk-component-skeleton/src/BpkSkeleton.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import BpkBaseSkeleton from "./BpkBaseSkeleton";
+import { SKELETON_TYPES, IMAGE_SKELETON_STYLE, SIZE_TYPES } from "./common-types";
+import STYLES from "./BpkSkeleton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkSkeleton = props => {
+  const {
+    size = SIZE_TYPES.default,
+    type
+  } = props;
+  const isImageRounded = type === SKELETON_TYPES.image && props.style === IMAGE_SKELETON_STYLE.rounded;
+  const classNames = getClassName(`bpk-skeleton__${type}`, typeof size !== 'object' && `bpk-skeleton__${type}--${size}`, isImageRounded && 'bpk-skeleton__image--rounded');
+  const styleObj = typeof size === 'object' ? size : undefined;
+  return /*#__PURE__*/_jsx(BpkBaseSkeleton, {
+    skeletonStyle: classNames,
+    styleObj: styleObj
+  });
+};
+export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkSkeleton.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-skeleton__image{width:6rem;height:6rem}.bpk-skeleton__image--rounded{border-radius:.5rem}.bpk-skeleton__headline{width:5rem;border-radius:.25rem}.bpk-skeleton__headline--small{height:.5rem;border-radius:.125rem}.bpk-skeleton__headline--default{height:1rem;border-radius:.25rem}.bpk-skeleton__headline--large{height:2rem;border-radius:.25rem}.bpk-skeleton__circle{border-radius:50%}.bpk-skeleton__circle--small{width:2rem;height:2rem}.bpk-skeleton__circle--default{width:3rem;height:3rem}.bpk-skeleton__bodyText{height:.5rem;border-radius:.125rem}.bpk-skeleton__bodyText--small{width:7.125rem}.bpk-skeleton__bodyText--default{width:10.6875rem}.bpk-skeleton__bodyText--large{width:12.5rem}

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

@@ -0,0 +1,33 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const SIZE_TYPES = {
+  small: 'small',
+  default: 'default',
+  large: 'large'
+};
+export const SKELETON_TYPES = {
+  image: 'image',
+  bodyText: 'bodyText',
+  circle: 'circle',
+  headline: 'headline'
+};
+export const IMAGE_SKELETON_STYLE = {
+  rounded: 'rounded',
+  default: 'default'
+};

package/bpk-component-slider/src/BpkSlider.js

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
+import PropTypes from 'prop-types';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Slider from 'react-slider';
-import PropTypes from 'prop-types';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-spinner/index.js

@@ -14,9 +14,9 @@
  * 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 BpkSpinner from "./src/BpkSpinner";
-import SPINNER_TYPES from "./src/spinnerTypes";
+ */import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
 import BpkLargeSpinner from "./src/BpkLargeSpinner";
-import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
+import BpkSpinner from "./src/BpkSpinner";
+import SPINNER_TYPES from "./src/spinnerTypes";
 import themeAttributes from "./src/themeAttributes";
 export { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES, themeAttributes };

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -75,10 +75,9 @@ XlSpinner.defaultProps = {
   viewBox: "0 0 32 32"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkSpinner.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkExtraLargeSpinner = props => {
   const {
@@ -87,11 +86,13 @@ const BpkExtraLargeSpinner = props => {
     ...rest
   } = props;
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return /*#__PURE__*/_jsx(XlSpinner, {
+  return /*#__PURE__*/_jsx("span", {
     className: classNames,
-    ...rest
+    children: /*#__PURE__*/_jsx(XlSpinner
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    , {
+      ...rest
+    })
   });
 };
 BpkExtraLargeSpinner.propTypes = {