@skyscanner/backpack-web 31.4.1-dev.0 → 31.6.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-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -20,7 +20,7 @@ import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSuggestion = props => {
+const BpkAutosuggestSuggestion = props => {
   const classNames = [getClassName('bpk-autosuggest__suggestion')];
   const {
     className,
@@ -67,7 +67,7 @@ const BpkSuggestion = props => {
     })
   );
 };
-BpkSuggestion.propTypes = {
+BpkAutosuggestSuggestion.propTypes = {
   value: PropTypes.node.isRequired,
   subHeading: PropTypes.node,
   tertiaryLabel: PropTypes.string,
@@ -75,11 +75,11 @@ BpkSuggestion.propTypes = {
   indent: PropTypes.bool,
   className: PropTypes.string
 };
-BpkSuggestion.defaultProps = {
+BpkAutosuggestSuggestion.defaultProps = {
   subHeading: null,
   tertiaryLabel: null,
   icon: null,
   indent: false,
   className: null
 };
-export default BpkSuggestion;
+export default BpkAutosuggestSuggestion;

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,95 @@
+/*
+ * 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";
+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-component-modal/src/BpkModalInner.js

@@ -20,7 +20,6 @@
 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 { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkModalInner.module.css";

package/bpk-component-navigation-bar/index.js

@@ -14,9 +14,11 @@
  * 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 BpkNavigationBar from "./src/BpkNavigationBar";
+ */
+
+import BpkNavigationBar, { BAR_STYLES } from "./src/BpkNavigationBar";
 import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
 import BpkNavigationBarButtonLink from "./src/BpkNavigationBarButtonLink";
 import themeAttributes from "./src/themeAttributes";
-export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes };
+export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes, BAR_STYLES };
 export default BpkNavigationBar;

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -14,7 +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 { cloneElement } from 'react';
+ */
+
+import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
@@ -22,8 +24,12 @@ import STYLES from "./BpkNavigationBar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
-const cloneWithClass = (elem, newStyle) => {
-  const className = getClassNames(elem.props.className, newStyle);
+export const BAR_STYLES = {
+  'default': 'default',
+  onDark: 'on-dark'
+};
+const cloneWithClasses = (elem, ...newStyles) => {
+  const className = getClassNames(elem.props.className, ...newStyles);
   return /*#__PURE__*/cloneElement(elem, {
     ...elem.props,
     className
@@ -31,10 +37,11 @@ const cloneWithClass = (elem, newStyle) => {
 };
 const BpkNavigationBar = props => {
   const {
+    barStyle = BAR_STYLES.default,
     className,
     id,
     leadingButton,
-    sticky,
+    sticky = false,
     title,
     trailingButton,
     ...rest
@@ -43,21 +50,17 @@ const BpkNavigationBar = props => {
   // If the title is a component that sets its own id we want the aria-labelledby on the nav to match this so it can find the element
   // Otherwise if its just a string we set the id on the title component.
   const titleId = typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("nav", {
-      "aria-labelledby": titleId,
-      className: getClassNames('bpk-navigation-bar', sticky && 'bpk-navigation-bar__sticky', className),
-      ...rest,
-      children: [leadingButton && cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item'), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
-        id: titleId,
-        textStyle: TEXT_STYLES.heading5,
-        className: getClassNames('bpk-navigation-bar__title'),
-        children: title
-      }) : title, trailingButton && cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')]
-    })
-  );
+  return /*#__PURE__*/_jsxs("nav", {
+    "aria-labelledby": titleId,
+    className: getClassNames('bpk-navigation-bar', `bpk-navigation-bar--${barStyle}`, sticky && 'bpk-navigation-bar__sticky', className),
+    ...rest,
+    children: [leadingButton && cloneWithClasses(leadingButton, 'bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
+      id: titleId,
+      textStyle: TEXT_STYLES.heading5,
+      className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
+      children: title
+    }) : title, trailingButton && cloneWithClasses(trailingButton, 'bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item--${barStyle}`)]
+  });
 };
 BpkNavigationBar.propTypes = {
   id: PropTypes.string.isRequired,
@@ -65,12 +68,7 @@ BpkNavigationBar.propTypes = {
   className: PropTypes.string,
   leadingButton: PropTypes.element,
   trailingButton: PropTypes.element,
-  sticky: PropTypes.bool
-};
-BpkNavigationBar.defaultProps = {
-  className: null,
-  leadingButton: null,
-  trailingButton: null,
-  sticky: false
+  sticky: PropTypes.bool,
+  barStyle: PropTypes.oneOf(Object.values(BAR_STYLES))
 };
 export default BpkNavigationBar;

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, #fff)}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, #161616)}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, #fff)}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, #161616)}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -14,32 +14,31 @@
  * 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';
+ */
 
-// TODO: close button is not really only a close button, we should rename and update the import here
+import PropTypes from 'prop-types';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationBarButtonLink.module.css";
+import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({
+  barStyle = BAR_STYLES.default,
   children,
   className,
   ...rest
-}) =>
-/*#__PURE__*/
-// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-_jsx(BpkButtonLink, {
-  className: getClassName('bpk-navigation-bar-button-link', className),
+}) => /*#__PURE__*/_jsx(BpkButtonLink, {
+  className: getClassName('bpk-navigation-bar-button-link', `bpk-navigation-bar-button-link--${barStyle}`, className),
   ...rest,
   children: children
 });
 BpkNavigationBarButtonLink.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-BpkNavigationBarButtonLink.defaultProps = {
-  className: null
+  className: PropTypes.string,
+  barStyle: PropTypes.oneOf(Object.values(BAR_STYLES))
 };
 export default BpkNavigationBarButtonLink;

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, #161616)}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, #161616)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, #161616)}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, #161616)}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff}

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -14,33 +14,32 @@
  * 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';
+ */
 
-// TODO: close button is not really only a close button, we should rename and update the import here
+import PropTypes from 'prop-types';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkIconButton from "../../bpk-component-close-button";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationBarIconButton.module.css";
+import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({
+  barStyle = BAR_STYLES.default,
   className,
   icon,
   ...rest
-}) =>
-/*#__PURE__*/
-// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-_jsx(BpkIconButton, {
+}) => /*#__PURE__*/_jsx(BpkIconButton, {
   customIcon: icon,
-  className: getClassName('bpk-navigation-bar-icon-button', className),
+  className: getClassName('bpk-navigation-bar-icon-button', `bpk-navigation-bar-icon-button--${barStyle}`, className),
   ...rest
 });
 BpkNavigationBarIconButton.propTypes = {
   icon: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-BpkNavigationBarIconButton.defaultProps = {
-  className: null
+  className: PropTypes.string,
+  barStyle: PropTypes.oneOf(Object.values(BAR_STYLES))
 };
 export default BpkNavigationBarIconButton;

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-icon-button{color:#161616;color:var(--bpk-navigation-bar-icon-button-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}.bpk-navigation-bar-icon-button:active{color:#161616;color:var(--bpk-navigation-bar-icon-button-active-color, #161616)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-icon-button{color:#161616;color:var(--bpk-navigation-bar-icon-button-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}.bpk-navigation-bar-icon-button:active{color:#161616;color:var(--bpk-navigation-bar-icon-button-active-color, #161616)}.bpk-navigation-bar-icon-button--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-icon-button--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-icon-button--on-dark:active{color:#fff}

package/bpk-component-navigation-bar/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 ['navigationBarBackgroundColor', 'navigationBarTitleColor', 'navigationBarButtonLinkColor', 'navigationBarButtonLinkActiveColor', 'navigationBarButtonLinkHoverColor', 'navigationBarButtonLinkVisitedColor', 'navigationBarIconButtonColor', 'navigationBarIconButtonActiveColor', 'navigationBarIconButtonHoverColor'];
+ */
+
+export default ['navigationBarBackgroundColor', 'navigationBarTitleColor', 'navigationBarButtonLinkColor', 'navigationBarButtonLinkActiveColor', 'navigationBarButtonLinkHoverColor', 'navigationBarButtonLinkVisitedColor', 'navigationBarIconButtonColor', 'navigationBarIconButtonActiveColor', 'navigationBarIconButtonHoverColor'];

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.6.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;