@skyscanner/backpack-web 31.4.1-dev.0 → 31.5.0

package/README.md

@@ -31,6 +31,7 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-banner-alert`](/packages/bpk-component-banner-alert)
 [`bpk-component-barchart`](/packages/bpk-component-barchart)
 [`bpk-component-blockquote`](/packages/bpk-component-blockquote)
+[`bpk-component-bottom-sheet`](/packages/bpk-component-bottom-sheet)
 [`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb)
 [`bpk-component-breakpoint`](/packages/bpk-component-breakpoint)
 [`bpk-component-button`](/packages/bpk-component-button)

package/bpk-component-bottom-sheet/index.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 BpkBottomSheet from './src/BpkBottomSheet';
+import type { Props } from './src/BpkBottomSheet';
+export type BpkBottomSheetProps = Props;
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkBottomSheet from "./src/BpkBottomSheet";
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts

@@ -0,0 +1,40 @@
+/*
+ * 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';
+import type { Props as BottomSheetProps } from './BpkBottomSheet';
+export type Props = Partial<BottomSheetProps> & {
+  children: ReactNode;
+  closeLabel?: string;
+  closeOnEscPressed?: boolean;
+  closeOnScrimClick?: boolean;
+  id: string;
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  /**
+   * Because this component uses a modal on mobile viewports, you need to let it know what
+   * the root element of your application is by returning its DOM node via this prop
+   * This is to "hide" your application from screen readers whilst the modal is open.
+   * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+  */
+  getApplicationElement: () => HTMLElement | null;
+  renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+};
+declare const BpkBottomSheet: ({ closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onClose, title, renderTarget, ...rest }: Props) => JSX.Element;
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -0,0 +1,68 @@
+/*
+ * 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 { useState } from "react";
+import { Portal, cssModules } from "../../bpk-react-utils";
+import { withScrim } from "../../bpk-scrim-utils";
+import STYLES from "./BpkBottomSheet.module.css";
+import BpkBottomSheetInner from "./BpkBottomSheetInner";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const ScrimBpkBottomSheetInner = withScrim(BpkBottomSheetInner);
+const BpkBottomSheet = ({
+  actionText = '',
+  closeLabel = '',
+  closeOnEscPressed = false,
+  closeOnScrimClick = false,
+  id,
+  isOpen,
+  onAction = () => null,
+  onClose,
+  renderTarget,
+  title = '',
+  wide = false,
+  ...rest
+}) => {
+  const [exiting, setExitting] = useState(false);
+  const handleClose = () => {
+    setExitting(true);
+    setTimeout(() => {
+      onClose();
+      setExitting(false);
+    }, 240);
+  };
+  return /*#__PURE__*/_jsx(Portal, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    closeOnEscPressed: closeOnEscPressed,
+    renderTarget: renderTarget,
+    children: /*#__PURE__*/_jsx(ScrimBpkBottomSheetInner, {
+      id: id,
+      onClose: handleClose,
+      closeOnScrimClick: closeOnScrimClick,
+      containerClassName: getClassName('bpk-bottom-sheet--container'),
+      title: title,
+      closeLabel: closeLabel,
+      actionText: actionText,
+      onAction: onAction,
+      wide: wide,
+      exiting: exiting,
+      ...rest
+    })
+  });
+};
+export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-bottom-sheet--container{display:flex;padding:1.5rem}@media (max-width: 32rem){.bpk-bottom-sheet--container{padding:0;overflow:hidden}}

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts

@@ -0,0 +1,28 @@
+/*
+ * 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';
+export type Props = {
+  children: ReactNode;
+  closeLabel?: string;
+  id: string;
+  onClose: () => void;
+  title?: string;
+};
+declare const BpkBottomSheetInner: ({ children, closeLabel, id, onClose, title, }: Props) => JSX.Element;
+export default BpkBottomSheetInner;

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.js

@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import CSSTransition from 'react-transition-group/CSSTransition';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkNavigationBar from "../../bpk-component-navigation-bar";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkBottomSheetInner.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkBottomSheetInner = ({
+  actionText = '',
+  children,
+  closeLabel = '',
+  exiting,
+  id,
+  onAction = () => null,
+  onClose,
+  title = '',
+  wide = false
+}) => {
+  const classNames = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
+  const headingId = `bpk-bottom-sheet-heading-${id}`;
+  return /*#__PURE__*/_jsx(CSSTransition, {
+    classNames: {
+      appear: getClassName('bpk-bottom-sheet--appear'),
+      appearActive: getClassName('bpk-bottom-sheet--appear-active'),
+      exit: getClassName('bpk-bottom-sheet--exit')
+    },
+    in: !exiting,
+    appear: !exiting,
+    out: exiting,
+    exit: exiting,
+    timeout: {
+      appear: 240,
+      exit: 240
+    },
+    children: /*#__PURE__*/_jsxs("section", {
+      id: id,
+      tabIndex: -1,
+      role: "dialog",
+      "aria-labelledby": headingId,
+      className: classNames,
+      children: [/*#__PURE__*/_jsx("header", {
+        className: getClassName('bpk-bottom-sheet--header'),
+        children: /*#__PURE__*/_jsx(BpkNavigationBar, {
+          id: headingId,
+          className: getClassName('bpk-bottom-sheet--navigation'),
+          title: /*#__PURE__*/_jsx("h2", {
+            id: headingId,
+            className: getClassName('bpk-bottom-sheet--heading'),
+            children: title
+          }),
+          leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
+            className: getClassName('bpk-bottom-sheet--close-button'),
+            label: closeLabel,
+            onClick: onClose
+          }),
+          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
+            className: getClassName('bpk-bottom-sheet--action-button'),
+            onClick: onAction,
+            children: actionText
+          }) : /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-bottom-sheet--action-button')
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-bottom-sheet--content'),
+        children: children
+      })]
+    })
+  });
+};
+export default BpkBottomSheetInner;

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.5rem}@media (max-width: 32rem){.bpk-bottom-sheet{height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media (min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:0.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media (min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media (min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:0.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media (min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc( 100% - ((3rem) * 2 + 0.25rem / 2));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir='rtl'] .bpk-bottom-sheet--close-button{right:auto;margin-right:calc(-0.25rem / 2);margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:calc(0.25rem / 2);margin-left:calc(0.25rem);word-break:break-all}html[dir='rtl'] .bpk-bottom-sheet--action-button{left:auto;margin-right:calc(0.25rem);margin-left:calc(0.25rem / 2)}

package/bpk-component-link/src/BpkLink.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@layer component{@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-link{padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3)}.bpk-no-touch-support .bpk-link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-link--active{color:#0062e3}.bpk-link--active:visited{color:#0062e3}.bpk-link--active:active{color:#0062e3}.bpk-link--alternate{color:#fff;color:var(--bpk-link-alternate-color, #fff)}.bpk-no-touch-support .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, #fff)}:global(.bpk-no-touch-support) .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, #fff)}.bpk-link--alternate:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, #fff)}.bpk-link--alternate:active{color:#fff;color:var(--bpk-link-alternate-active-color, #fff)}}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-link{padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, #0062e3)}.bpk-no-touch-support .bpk-link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}:global(.bpk-no-touch-support) .bpk-link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, #0062e3)}.bpk-link:visited{color:#0062e3;color:var(--bpk-link-visited-color, #0062e3)}.bpk-link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, #0062e3)}.bpk-link--active{color:#0062e3}.bpk-link--active:visited{color:#0062e3}.bpk-link--active:active{color:#0062e3}.bpk-link--alternate{color:#fff;color:var(--bpk-link-alternate-color, #fff)}.bpk-no-touch-support .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, #fff)}:global(.bpk-no-touch-support) .bpk-link--alternate:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, #fff)}.bpk-link--alternate:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, #fff)}.bpk-link--alternate:active{color:#fff;color:var(--bpk-link-alternate-active-color, #fff)}

package/bpk-stylesheets/base.css

@@ -16,5 +16,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- */@layer base{/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both}}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:'';display:table}.clearfix::after{clear:both}
 

package/bpk-stylesheets/index.scss

@@ -16,67 +16,65 @@
  * limitations under the License.
  */
 
-@layer base {
-  @import '~normalize.css';
-  @import '../bpk-mixins/index.scss';
+@import '~normalize.css';
+@import '../bpk-mixins/index.scss';
 
-  // stylelint-disable-next-line selector-max-type
-  html {
-    font-size: $bpk-font-size-root;
-    box-sizing: border-box;
-  }
+// stylelint-disable-next-line selector-max-type
+html {
+  font-size: $bpk-font-size-root;
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: inherit;
+* {
+  box-sizing: inherit;
 
-    &::before,
-    &::after {
-      box-sizing: inherit;
-    }
+  &::before,
+  &::after {
+    box-sizing: inherit;
   }
+}
 
-  /* stylelint-disable selector-class-pattern */
-  body {
-    color: $bpk-font-color-base;
-    font-family: $bpk-font-family-base;
-    font-size: $bpk-font-size-base;
-    line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
-
-    :global(&.scaffold-font-size) {
-      font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
-    }
+/* stylelint-disable selector-class-pattern */
+body {
+  color: $bpk-font-color-base;
+  font-family: $bpk-font-family-base;
+  font-size: $bpk-font-size-base;
+  line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
 
-    :global(&.enable-font-smoothing) {
-      -webkit-font-smoothing: antialiased;
-    }
+  :global(&.scaffold-font-size) {
+    font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
   }
 
-  :focus-visible {
-    @include bpk-focus-indicator;
+  :global(&.enable-font-smoothing) {
+    -webkit-font-smoothing: antialiased;
   }
+}
 
-  :global(.hidden),
-  :global(.hide) {
-    @include bpk-hidden;
-  }
+:focus-visible {
+  @include bpk-focus-indicator;
+}
 
-  :global(.visuallyhidden),
-  :global(.visually-hidden) {
-    @include bpk-visually-hidden;
-  }
+:global(.hidden),
+:global(.hide) {
+  @include bpk-hidden;
+}
 
-  :global(.visuallyhidden.focusable),
-  :global(.visually-hidden.focusable) {
-    @include bpk-visually-hidden--focusable;
-  }
+:global(.visuallyhidden),
+:global(.visually-hidden) {
+  @include bpk-visually-hidden;
+}
 
-  :global(.invisible) {
-    @include bpk-invisible;
-  }
+:global(.visuallyhidden.focusable),
+:global(.visually-hidden.focusable) {
+  @include bpk-visually-hidden--focusable;
+}
 
-  :global(.clearfix) {
-    @include bpk-clearfix;
-  }
+:global(.invisible) {
+  @include bpk-invisible;
+}
+
+:global(.clearfix) {
+  @include bpk-clearfix;
 }
 
 /* stylelint-enable */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "31.4.1-dev.0",
+  "version": "31.5.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-component-flare/src/corner-radius.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;

package/bpk-component-flare/src/pointer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;