@skyscanner/backpack-web 35.6.0 → 35.7.1

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

@@ -17,7 +17,6 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

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

@@ -0,0 +1,6 @@
+import BpkDrawer from './src/BpkDrawer';
+import themeAttributes from './src/themeAttributes';
+import type { Props } from './src/BpkDrawer';
+export type BpkDrawerProps = Props;
+export default BpkDrawer;
+export { themeAttributes };

package/bpk-component-drawer/src/BpkDrawer.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    id: string;
+    children: ReactNode;
+    isOpen: boolean;
+    onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
+        source: 'ESCAPE' | 'DOCUMENT_CLICK';
+    }) => void;
+    title: string;
+    getApplicationElement: () => HTMLElement | null;
+    renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    dialogRef?: (ref: HTMLElement | null | undefined) => void;
+    className?: string;
+    contentClassName?: string;
+    closeLabel?: string | null;
+    closeText?: string;
+    hideTitle?: boolean;
+    isIphone?: boolean;
+    padded?: boolean;
+    mobileModalDisplay?: boolean;
+};
+declare const BpkDrawer: ({ children, className, closeLabel, closeText, contentClassName, dialogRef, getApplicationElement, hideTitle, id, isIphone, isOpen, mobileModalDisplay, onClose, padded, renderTarget, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawer.js

@@ -14,85 +14,70 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { Portal } from "../../bpk-react-utils";
+ */import { useState, useEffect } from 'react';
+import { Portal, isDeviceIphone } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
-class BpkDrawer extends Component {
-  constructor() {
-    super();
-    this.state = {
-      isDrawerShown: true
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.isOpen && nextProps.isOpen) {
-      this.setState({
-        isDrawerShown: true
-      });
+const BpkDrawer = ({
+  children,
+  className = undefined,
+  closeLabel = null,
+  closeText = undefined,
+  contentClassName = undefined,
+  dialogRef,
+  getApplicationElement,
+  hideTitle = false,
+  id,
+  isIphone = isDeviceIphone(),
+  isOpen,
+  mobileModalDisplay = false,
+  onClose,
+  padded = true,
+  renderTarget = null,
+  title
+}) => {
+  const [isDrawerShown, setIsDrawerShown] = useState(true);
+  useEffect(() => {
+    if (isOpen) {
+      setIsDrawerShown(true);
+    }
+  }, [isOpen]);
+  const onCloseAnimationComplete = () => {
+    if (onClose) {
+      onClose();
     }
-  }
-  onCloseAnimationComplete = () => {
-    this.props.onClose();
   };
-  hide = () => {
-    this.setState({
-      isDrawerShown: false
-    });
+  const hide = () => {
+    setIsDrawerShown(false);
   };
-  render() {
-    const {
-      isOpen,
-      onClose,
-      renderTarget,
-      ...rest
-    } = this.props;
-    const {
-      isDrawerShown
-    } = this.state;
-    return /*#__PURE__*/_jsx(Portal, {
-      isOpen: isOpen,
-      onClose: this.hide,
-      renderTarget: renderTarget,
-      children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
-        isDrawerShown: isDrawerShown,
-        onClose: this.hide,
-        onCloseAnimationComplete: this.onCloseAnimationComplete,
-        ...rest
-      })
-    });
-  }
-}
-BpkDrawer.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  /**
-   * **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
-   * the root element for your application is by returning it's DOM node via the function passed to the
-   * `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-   */
-  getApplicationElement: PropTypes.func.isRequired,
-  renderTarget: PropTypes.func,
-  dialogRef: PropTypes.func,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  hideTitle: PropTypes.bool
-};
-BpkDrawer.defaultProps = {
-  renderTarget: null,
-  className: null,
-  contentClassName: null,
-  closeLabel: null,
-  closeText: null,
-  hideTitle: false,
-  padded: true
+  return /*#__PURE__*/_jsx(Portal, {
+    isOpen: isOpen,
+    onClose: hide,
+    renderTarget: renderTarget,
+    children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
+      id: id,
+      title: title,
+      dialogRef: dialogRef,
+      closeLabel: closeLabel || "",
+      closeText: closeText
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
+      className: className,
+      contentClassName: contentClassName,
+      getApplicationElement: getApplicationElement,
+      hideTitle: hideTitle,
+      isDrawerShown: isDrawerShown,
+      onClose: hide,
+      onCloseAnimationComplete: onCloseAnimationComplete,
+      closeOnScrimClick: true,
+      isIpad: true,
+      isIphone: isIphone,
+      padded: padded,
+      mobileModalDisplay: mobileModalDisplay,
+      children: children
+    })
+  });
 };
 export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -1,12 +1,12 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 type Props = {
     children: ReactNode;
-    dialogRef: () => React.RefObject<HTMLElement>;
+    dialogRef: () => RefObject<HTMLElement>;
     onCloseAnimationComplete: () => void;
     onClose: () => void;
     id: string;
     title: string;
-    className?: string;
+    className?: string | null;
     contentClassName?: string;
     closeLabel?: string;
     closeText?: string;
@@ -16,6 +16,7 @@ type Props = {
     isIphone?: boolean;
     isIpad?: boolean;
     padded?: boolean;
+    mobileModalDisplay?: boolean;
 };
-declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, onClose, onCloseAnimationComplete, padded, title, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, mobileModalDisplay, onClose, onCloseAnimationComplete, padded, title, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkDrawerContent;

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import Transition from 'react-transition-group/Transition';
+import { Transition } from 'react-transition-group';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -44,6 +43,7 @@ const BpkDrawerContent = ({
   // Unused from withScrim scrim HOC
   isIphone = false,
   // Unused from withScrim scrim HOC
+  mobileModalDisplay = false,
   onClose,
   onCloseAnimationComplete,
   padded,
@@ -81,7 +81,7 @@ const BpkDrawerContent = ({
       tabIndex: -1,
       role: "dialog",
       "aria-labelledby": headingId,
-      className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`)].join(' '),
+      className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`, mobileModalDisplay ? `bpk-drawer__modal-mobile-view--${status}` : undefined)].join(' '),
       ref: dialogRef,
       ...rest,
       children: [/*#__PURE__*/_jsxs("header", {

package/bpk-component-drawer/src/BpkDrawerContent.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;flex:1 1 100%;overflow-y:auto}.bpk-drawer__content--padded{padding:1rem}
+.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;flex:1 1 100%;overflow-y:auto}.bpk-drawer__content--padded{padding:1rem}@media(max-width: 32rem){.bpk-drawer__modal-mobile-view{transform:scale(0.9);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:0}.bpk-drawer__modal-mobile-view--entering,.bpk-drawer__modal-mobile-view--entered{transform:scale(1);opacity:1}.bpk-drawer__modal-mobile-view--exited{transform:scale(0.9);opacity:0}.bpk-drawer__modal-mobile-view--exiting{transform:none}}

package/bpk-component-drawer/src/themeAttributes.d.ts

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

package/bpk-component-drawer/src/themeAttributes.js

@@ -14,5 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -17,8 +17,6 @@
  */
 
 import { useEffect, useState } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";

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

@@ -17,7 +17,6 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";

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

@@ -17,8 +17,6 @@
  */
 
 import { Component } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";

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

@@ -17,7 +17,6 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

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

@@ -35,6 +35,7 @@ const BpkIconMarkerBackground = props => {
         width: "32",
         height: "40",
         viewBox: "0 0 32 40",
+        "aria-hidden": "true",
         className: classNames,
         ...rest,
         children: /*#__PURE__*/_jsx("path", {
@@ -51,6 +52,7 @@ const BpkIconMarkerBackground = props => {
       width: "26",
       height: "32",
       viewBox: "0 0 26 32",
+      "aria-hidden": "true",
       className: classNames,
       ...rest,
       children: /*#__PURE__*/_jsx("path", {

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

@@ -1,4 +1,3 @@
-import React from "react";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,68 +15,12 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var XlSpinner = function XlSpinner(props) {
-  return /*#__PURE__*/_jsxs("svg", {
-    ...props,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M16 9.092c-.67 0-1.22-.549-1.22-1.22V2.997c0-.67.55-1.219 1.22-1.219.671 0 1.22.549 1.22 1.22v4.876c0 .67-.549 1.219-1.22 1.219",
-      clipRule: "evenodd",
-      opacity: ".65"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M19.454 10.012a1.22 1.22 0 0 1-.446-1.664l2.44-4.22a1.225 1.225 0 0 1 1.667-.445 1.22 1.22 0 0 1 .447 1.664l-2.44 4.22c-.336.58-1.086.78-1.668.445",
-      clipRule: "evenodd",
-      opacity: ".75"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M21.982 12.546a1.223 1.223 0 0 1 .447-1.665l4.222-2.438a1.223 1.223 0 0 1 1.666.446c.335.58.134 1.33-.447 1.665l-4.222 2.438a1.223 1.223 0 0 1-1.666-.446",
-      clipRule: "evenodd",
-      opacity: ".85"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M22.908 16c0-.671.548-1.22 1.219-1.22h4.876c.67 0 1.22.549 1.22 1.22 0 .67-.55 1.218-1.22 1.218h-4.876c-.67 0-1.22-.548-1.22-1.219",
-      clipRule: "evenodd",
-      opacity: ".9"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M21.982 19.454a1.22 1.22 0 0 1 1.664-.447l4.22 2.44c.58.336.781 1.086.446 1.667a1.22 1.22 0 0 1-1.664.447l-4.22-2.44a1.225 1.225 0 0 1-.446-1.667",
-      clipRule: "evenodd",
-      opacity: ".2"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M19.454 21.982a1.223 1.223 0 0 1 1.665.446l2.438 4.223c.335.58.135 1.33-.446 1.665-.58.335-1.33.134-1.665-.446l-2.438-4.223a1.223 1.223 0 0 1 .446-1.665",
-      clipRule: "evenodd",
-      opacity: ".25"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M16 22.907c.67 0 1.219.549 1.219 1.22v4.876c0 .67-.549 1.218-1.219 1.218s-1.22-.548-1.22-1.218v-4.877c0-.67.55-1.219 1.22-1.219",
-      clipRule: "evenodd",
-      opacity: ".3"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12.546 21.982c.58.335.781 1.083.446 1.664l-2.438 4.22c-.335.58-1.084.78-1.665.445a1.221 1.221 0 0 1-.446-1.664l2.438-4.22a1.223 1.223 0 0 1 1.665-.445",
-      clipRule: "evenodd",
-      opacity: ".35"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M10.018 19.453c.335.581.134 1.33-.447 1.666L5.35 23.556a1.224 1.224 0 0 1-1.666-.447 1.223 1.223 0 0 1 .447-1.665l4.222-2.438a1.223 1.223 0 0 1 1.666.446",
-      clipRule: "evenodd",
-      opacity: ".4"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9.092 16c0 .67-.549 1.218-1.219 1.218H2.997c-.67 0-1.22-.548-1.22-1.219 0-.67.55-1.219 1.22-1.219h4.876c.67 0 1.22.549 1.22 1.22",
-      clipRule: "evenodd",
-      opacity: ".45"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M10.013 12.55a1.22 1.22 0 0 1-1.664.446l-4.22-2.44a1.225 1.225 0 0 1-.446-1.667 1.22 1.22 0 0 1 1.664-.446l4.22 2.44c.58.336.781 1.086.446 1.667",
-      clipRule: "evenodd",
-      opacity: ".5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12.546 10.017c-.58.335-1.33.135-1.665-.446L8.443 5.348a1.223 1.223 0 0 1 .446-1.665 1.223 1.223 0 0 1 1.665.446l2.438 4.223c.335.58.135 1.33-.446 1.665",
-      clipRule: "evenodd",
-      opacity: ".55"
-    })]
-  });
-};
-XlSpinner.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32"
-};
+
 import { cssModules } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
+import XlSpinner from "./spinners/xl";
 import STYLES from "./BpkSpinner.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkExtraLargeSpinner = ({
   className = null,

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

@@ -1,4 +1,3 @@
-import React from "react";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,68 +15,12 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var LgSpinner = function LgSpinner(props) {
-  return /*#__PURE__*/_jsxs("svg", {
-    ...props,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M12 6.657a.946.946 0 0 1-.943-.943V1.943c0-.519.424-.943.943-.943.519 0 .943.424.943.943v3.771a.946.946 0 0 1-.943.943z",
-      clipRule: "evenodd",
-      opacity: ".65"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M14.671 7.373a.946.946 0 0 1-.345-1.288l1.886-3.266a.946.946 0 0 1 1.288-.345c.45.26.604.839.345 1.288L15.96 7.028a.946.946 0 0 1-1.288.345z",
-      clipRule: "evenodd",
-      opacity: ".75"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M16.627 9.329a.945.945 0 0 1 .345-1.288l3.266-1.886a.946.946 0 0 1 1.288.345.946.946 0 0 1-.345 1.288l-3.266 1.886a.946.946 0 0 1-1.288-.345z",
-      clipRule: "evenodd",
-      opacity: ".85"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M17.343 12c0-.519.424-.943.943-.943h3.771c.519 0 .943.424.943.943a.946.946 0 0 1-.943.943h-3.771a.946.946 0 0 1-.943-.943z",
-      clipRule: "evenodd",
-      opacity: ".9"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M16.627 14.671a.946.946 0 0 1 1.288-.345l3.266 1.886c.45.26.604.839.345 1.288a.946.946 0 0 1-1.288.345l-3.266-1.886a.946.946 0 0 1-.345-1.288z",
-      clipRule: "evenodd",
-      opacity: ".2"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M14.671 16.627a.946.946 0 0 1 1.288.345l1.886 3.266a.946.946 0 0 1-.345 1.288.945.945 0 0 1-1.288-.345l-1.886-3.266a.946.946 0 0 1 .345-1.288z",
-      clipRule: "evenodd",
-      opacity: ".25"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12 17.343c.519 0 .943.424.943.943v3.771A.946.946 0 0 1 12 23a.946.946 0 0 1-.943-.943v-3.771c0-.519.424-.943.943-.943z",
-      clipRule: "evenodd",
-      opacity: ".3"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9.329 16.627c.449.26.604.839.345 1.288l-1.886 3.266a.945.945 0 0 1-1.288.345.946.946 0 0 1-.345-1.288l1.886-3.266a.946.946 0 0 1 1.288-.345z",
-      clipRule: "evenodd",
-      opacity: ".35"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M7.373 14.671a.946.946 0 0 1-.345 1.288l-3.266 1.886a.946.946 0 0 1-1.288-.345.946.946 0 0 1 .345-1.288l3.266-1.886a.946.946 0 0 1 1.288.345z",
-      clipRule: "evenodd",
-      opacity: ".4"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M6.657 12a.946.946 0 0 1-.943.943H1.943A.946.946 0 0 1 1 12c0-.519.424-.943.943-.943h3.771c.519 0 .943.424.943.943z",
-      clipRule: "evenodd",
-      opacity: ".45"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M7.373 9.329a.946.946 0 0 1-1.288.345L2.819 7.788A.946.946 0 0 1 2.474 6.5a.946.946 0 0 1 1.288-.345L7.028 8.04a.946.946 0 0 1 .345 1.288z",
-      clipRule: "evenodd",
-      opacity: ".5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9.329 7.373a.946.946 0 0 1-1.288-.345L6.155 3.762A.946.946 0 0 1 6.5 2.474a.946.946 0 0 1 1.288.345l1.886 3.266a.946.946 0 0 1-.345 1.288z",
-      clipRule: "evenodd",
-      opacity: ".55"
-    })]
-  });
-};
-LgSpinner.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
+
 import { cssModules } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
+import LgSpinner from "./spinners/lg";
 import STYLES from "./BpkSpinner.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkLargeSpinner = ({
   alignToButton = false,

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

@@ -1,4 +1,3 @@
-import React from "react";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -16,55 +15,12 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var SmSpinner = function SmSpinner(props) {
-  return /*#__PURE__*/_jsxs("svg", {
-    ...props,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M3 7H1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2Z",
-      opacity: ".45"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M15 7h-2a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2Z"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M7 13v2a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0Z",
-      opacity: ".3"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M7 1v2a1 1 0 0 0 2 0V1a1 1 0 0 0-2 0Z",
-      opacity: ".65"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m9.634 12.83 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 0 0-1.732 1Z",
-      opacity: ".25"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m3.634 2.438 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 1 0-1.732 1Z",
-      opacity: ".55"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m11.83 11.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732Z",
-      opacity: ".2"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m1.438 5.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732Z",
-      opacity: ".5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m12.83 6.366 1.732-1a1 1 0 0 0-1-1.732l-1.732 1a1 1 0 0 0 1 1.732Z",
-      opacity: ".85"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m2.438 12.366 1.732-1a1 1 0 1 0-1-1.732l-1.732 1a1 1 0 1 0 1 1.732Z",
-      opacity: ".4"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m11.366 4.17 1-1.732a1 1 0 0 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1Z",
-      opacity: ".75"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m5.366 14.562 1-1.732a1 1 0 1 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1Z",
-      opacity: ".35"
-    })]
-  });
-};
-SmSpinner.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 16 16"
-};
+
 import { cssModules } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
+import SmSpinner from "./spinners/sm";
 import STYLES from "./BpkSpinner.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSpinner = ({
   alignToButton = false,

package/bpk-component-spinner/src/spinners/lg.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LgIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12 6.657a.946.946 0 0 1-.943-.943V1.943c0-.519.424-.943.943-.943s.943.424.943.943v3.771a.946.946 0 0 1-.943.943",
+    clipRule: "evenodd",
+    opacity: 0.65
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.671 7.373a.946.946 0 0 1-.345-1.288l1.886-3.266a.946.946 0 0 1 1.288-.345c.45.26.604.839.345 1.288L15.96 7.028a.946.946 0 0 1-1.288.345z",
+    clipRule: "evenodd",
+    opacity: 0.75
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M16.627 9.329a.945.945 0 0 1 .345-1.288l3.266-1.886a.946.946 0 0 1 1.288.345.946.946 0 0 1-.345 1.288l-3.266 1.886a.946.946 0 0 1-1.288-.345",
+    clipRule: "evenodd",
+    opacity: 0.85
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M17.343 12c0-.519.424-.943.943-.943h3.771c.519 0 .943.424.943.943a.946.946 0 0 1-.943.943h-3.771a.946.946 0 0 1-.943-.943",
+    clipRule: "evenodd",
+    opacity: 0.9
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M16.627 14.671a.946.946 0 0 1 1.288-.345l3.266 1.886c.45.26.604.839.345 1.288a.946.946 0 0 1-1.288.345l-3.266-1.886a.946.946 0 0 1-.345-1.288",
+    clipRule: "evenodd",
+    opacity: 0.2
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.671 16.627a.946.946 0 0 1 1.288.345l1.886 3.266a.946.946 0 0 1-.345 1.288.945.945 0 0 1-1.288-.345l-1.886-3.266a.946.946 0 0 1 .345-1.288",
+    clipRule: "evenodd",
+    opacity: 0.25
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 17.343c.519 0 .943.424.943.943v3.771A.946.946 0 0 1 12 23a.946.946 0 0 1-.943-.943v-3.771c0-.519.424-.943.943-.943",
+    clipRule: "evenodd",
+    opacity: 0.3
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9.329 16.627c.449.26.604.839.345 1.288l-1.886 3.266a.945.945 0 0 1-1.288.345.946.946 0 0 1-.345-1.288l1.886-3.266a.946.946 0 0 1 1.288-.345",
+    clipRule: "evenodd",
+    opacity: 0.35
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7.373 14.671a.946.946 0 0 1-.345 1.288l-3.266 1.886a.946.946 0 0 1-1.288-.345.946.946 0 0 1 .345-1.288l3.266-1.886a.946.946 0 0 1 1.288.345",
+    clipRule: "evenodd",
+    opacity: 0.4
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M6.657 12a.946.946 0 0 1-.943.943H1.943A.946.946 0 0 1 1 12c0-.519.424-.943.943-.943h3.771c.519 0 .943.424.943.943",
+    clipRule: "evenodd",
+    opacity: 0.45
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7.373 9.329a.946.946 0 0 1-1.288.345L2.819 7.788A.946.946 0 0 1 2.474 6.5a.946.946 0 0 1 1.288-.345L7.028 8.04a.946.946 0 0 1 .345 1.288z",
+    clipRule: "evenodd",
+    opacity: 0.5
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9.329 7.373a.946.946 0 0 1-1.288-.345L6.155 3.762A.946.946 0 0 1 6.5 2.474a.946.946 0 0 1 1.288.345l1.886 3.266a.946.946 0 0 1-.345 1.288",
+    clipRule: "evenodd",
+    opacity: 0.55
+  })]
+});
+export default LgIcon;

package/bpk-component-spinner/src/spinners/sm.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SmIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M3 7H1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2",
+    opacity: 0.45
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M15 7h-2a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7 13v2a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0",
+    opacity: 0.3
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7 1v2a1 1 0 0 0 2 0V1a1 1 0 0 0-2 0",
+    opacity: 0.65
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m9.634 12.83 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 0 0-1.732 1",
+    opacity: 0.25
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m3.634 2.438 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 1 0-1.732 1",
+    opacity: 0.55
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m11.83 11.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732",
+    opacity: 0.2
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m1.438 5.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732",
+    opacity: 0.5
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m12.83 6.366 1.732-1a1 1 0 0 0-1-1.732l-1.732 1a1 1 0 0 0 1 1.732",
+    opacity: 0.85
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m2.438 12.366 1.732-1a1 1 0 1 0-1-1.732l-1.732 1a1 1 0 1 0 1 1.732",
+    opacity: 0.4
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m11.366 4.17 1-1.732a1 1 0 0 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1",
+    opacity: 0.75
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m5.366 14.562 1-1.732a1 1 0 1 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1",
+    opacity: 0.35
+  })]
+});
+export default SmIcon;

package/bpk-component-spinner/src/spinners/xl.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const XlIcon = props => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32",
+  "aria-hidden": "true",
+  width: "2rem",
+  height: "2rem",
+  ...props,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M16 9.092c-.67 0-1.22-.549-1.22-1.22V2.997c0-.67.55-1.219 1.22-1.219.671 0 1.22.549 1.22 1.22v4.876c0 .67-.549 1.219-1.22 1.219",
+    clipRule: "evenodd",
+    opacity: 0.65
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19.454 10.012a1.22 1.22 0 0 1-.446-1.664l2.44-4.22a1.225 1.225 0 0 1 1.667-.445 1.22 1.22 0 0 1 .447 1.664l-2.44 4.22c-.336.58-1.086.78-1.668.445",
+    clipRule: "evenodd",
+    opacity: 0.75
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M21.982 12.546a1.223 1.223 0 0 1 .447-1.665l4.222-2.438a1.223 1.223 0 0 1 1.666.446c.335.58.134 1.33-.447 1.665l-4.222 2.438a1.223 1.223 0 0 1-1.666-.446",
+    clipRule: "evenodd",
+    opacity: 0.85
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M22.908 16c0-.671.548-1.22 1.219-1.22h4.876c.67 0 1.22.549 1.22 1.22s-.55 1.218-1.22 1.218h-4.876c-.67 0-1.22-.548-1.22-1.219",
+    clipRule: "evenodd",
+    opacity: 0.9
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M21.982 19.454a1.22 1.22 0 0 1 1.664-.447l4.22 2.44c.58.336.781 1.086.446 1.667a1.22 1.22 0 0 1-1.664.447l-4.22-2.44a1.225 1.225 0 0 1-.446-1.667",
+    clipRule: "evenodd",
+    opacity: 0.2
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19.454 21.982a1.223 1.223 0 0 1 1.665.446l2.438 4.223c.335.58.135 1.33-.446 1.665-.58.335-1.33.134-1.665-.446l-2.438-4.223a1.223 1.223 0 0 1 .446-1.665",
+    clipRule: "evenodd",
+    opacity: 0.25
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M16 22.907c.67 0 1.219.549 1.219 1.22v4.876c0 .67-.549 1.218-1.219 1.218s-1.22-.548-1.22-1.218v-4.877c0-.67.55-1.219 1.22-1.219",
+    clipRule: "evenodd",
+    opacity: 0.3
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12.546 21.982c.58.335.781 1.083.446 1.664l-2.438 4.22c-.335.58-1.084.78-1.665.445a1.22 1.22 0 0 1-.446-1.664l2.438-4.22a1.223 1.223 0 0 1 1.665-.445",
+    clipRule: "evenodd",
+    opacity: 0.35
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.018 19.453c.335.581.134 1.33-.447 1.666L5.35 23.556a1.224 1.224 0 0 1-1.666-.447 1.223 1.223 0 0 1 .447-1.665l4.222-2.438a1.223 1.223 0 0 1 1.666.446",
+    clipRule: "evenodd",
+    opacity: 0.4
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9.092 16c0 .67-.549 1.218-1.219 1.218H2.997c-.67 0-1.22-.548-1.22-1.219 0-.67.55-1.219 1.22-1.219h4.876c.67 0 1.22.549 1.22 1.22",
+    clipRule: "evenodd",
+    opacity: 0.45
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.013 12.55a1.22 1.22 0 0 1-1.664.446l-4.22-2.44a1.225 1.225 0 0 1-.446-1.667 1.22 1.22 0 0 1 1.664-.446l4.22 2.44c.58.336.781 1.086.446 1.667",
+    clipRule: "evenodd",
+    opacity: 0.5
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12.546 10.017c-.58.335-1.33.135-1.665-.446L8.443 5.348a1.223 1.223 0 0 1 .446-1.665 1.223 1.223 0 0 1 1.665.446l2.438 4.223c.335.58.135 1.33-.446 1.665",
+    clipRule: "evenodd",
+    opacity: 0.55
+  })]
+});
+export default XlIcon;

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

@@ -14,4 +14,6 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export default ['spinnerPrimaryColor'];
+ */
+
+export default ['spinnerPrimaryColor'];

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js

@@ -17,8 +17,6 @@
  */
 
 import { useEffect, useRef, useState } from "react";
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 import cssModules from "../cssModules";
 import STYLES from "./BpkDialogWrapper.module.css";

package/bpk-react-utils/src/TransitionInitialMount.js

@@ -18,7 +18,6 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 // Object.assign() is used unpolyfilled in react-transition-group.

package/package.json

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