@skyscanner/backpack-web 34.0.0-premajor.2 → 34.0.1

package/bpk-component-datepicker/src/BpkDatepicker.d.ts

@@ -1,21 +1,3 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import { Component } from 'react';
 import type { ReactElement } from 'react';
 import type { DaysOfWeek, ReactComponent, SelectionConfiguration } from '../../bpk-component-calendar';
@@ -233,12 +215,7 @@ declare class BpkDatepicker extends Component<Props, State> {
                 };
                 initiallyFocusedDate: null;
                 markToday: boolean;
-                markOutsideDays: boolean; /**
-                 * Gets the correct value for the input field
-                 * @param {Object} selectionConfiguration current selection configuration
-                 * @param {Function} formatDate function supplied to format date
-                 * @returns {String} date value
-                 */
+                markOutsideDays: boolean;
             };
             contextType?: import("react").Context<any> | undefined;
         };

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -21,12 +21,8 @@ import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
 import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPopover from "../../bpk-component-popover";
-import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDatepicker.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
 class BpkDatepicker extends Component {
@@ -192,7 +188,6 @@ class BpkDatepicker extends Component {
     delete rest.onOpenChange;
     delete rest.isOpen;
     const input = inputComponent || /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-datepicker__input'),
       ref: this.inputRef,
       children: /*#__PURE__*/_jsx(Input, {
         id: id,
@@ -210,7 +205,6 @@ class BpkDatepicker extends Component {
     });
     const calendarProps = {
       id: `${id}-calendar`,
-      className: getClassName('bpk-datepicker__calendar'),
       changeMonthLabel,
       dateModifiers,
       daysOfWeek,
@@ -247,12 +241,10 @@ class BpkDatepicker extends Component {
       }) : /*#__PURE__*/_jsx(BpkPopover, {
         id: `${id}-popover`,
         target: input,
-        renderTarget: renderTarget,
         onClose: this.props.onClose || this.onClose,
         isOpen: this.state.isOpen,
         label: title,
         closeButtonText: closeButtonText,
-        tabIndex: 0,
         ...rest,
         children: /*#__PURE__*/_jsx(Calendar, {
           ...calendarProps,

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

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

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

@@ -18,6 +18,5 @@
 
 import { themeAttributes as calendarAttributes } from "../../bpk-component-calendar";
 import { themeAttributes as modalAttributes } from "../../bpk-component-modal";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { themeAttributes as popoverAttributes } from "../../bpk-component-popover";
 export default [...calendarAttributes, ...popoverAttributes, ...modalAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);

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

@@ -1,25 +1,6 @@
-/*
- * 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 BpkDialog from './src/BpkDialog';
-import type { Props } from './src/common-types';
 import { HEADER_ICON_TYPES } from './src/common-types';
-
+import type { Props } from './src/common-types';
 export type BpkDialogProps = Props;
 export default BpkDialog;
 export { HEADER_ICON_TYPES };

package/bpk-component-dialog/src/BpkDialog.d.ts

@@ -1,21 +1,3 @@
-/*
- * 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.
- */
-
 /// <reference types="react" />
 import type { Props } from './common-types';
 declare const BpkDialog: ({ children, closeLabel, dismissible, headerIcon, headerIconType, isOpen, onClose, renderTarget, ...rest }: Props) => JSX.Element;

package/bpk-component-dialog/src/BpkDialogInner.d.ts

@@ -1,245 +1,59 @@
-/*
- * 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.
- */
-
 /// <reference types="react" />
 import { type DialogInnerProps as Props } from './common-types';
 declare const _default: {
-    new (props: ({
-        [rest: string]: any;
-        getApplicationElement: () => HTMLElement | null;
-        onClose?: (() => void | null) | undefined;
-        isIphone?: boolean | undefined;
-        isIpad?: boolean | undefined;
-        containerClassName?: string | undefined;
-        closeOnScrimClick?: boolean | undefined;
-    } & Omit<Props, "dialogRef">) | Readonly<{
-        [rest: string]: any;
-        getApplicationElement: () => HTMLElement | null;
-        onClose?: (() => void | null) | undefined;
-        isIphone?: boolean | undefined;
-        isIpad?: boolean | undefined;
-        containerClassName?: string | undefined;
-        closeOnScrimClick?: boolean | undefined;
-    } & Omit<Props, "dialogRef">>): {
+    new (props: (import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">) | Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>): {
         dialogElement?: HTMLElement | null | undefined;
         componentDidMount(): void;
         componentWillUnmount(): void;
         dialogRef: (ref: HTMLElement | null | undefined) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">> & Readonly<{
+        readonly props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">> & Readonly<{
             children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: {
-        [rest: string]: any;
-        getApplicationElement: () => HTMLElement | null;
-        onClose?: (() => void | null) | undefined;
-        isIphone?: boolean | undefined;
-        isIpad?: boolean | undefined;
-        containerClassName?: string | undefined;
-        closeOnScrimClick?: boolean | undefined;
-    } & Omit<Props, "dialogRef">, context: any): {
+    new (props: import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">, context: any): {
         dialogElement?: HTMLElement | null | undefined;
         componentDidMount(): void;
         componentWillUnmount(): void;
         dialogRef: (ref: HTMLElement | null | undefined) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">> & Readonly<{
+        readonly props: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">> & Readonly<{
             children?: import("react").ReactNode;
         }>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
-            [rest: string]: any;
-            getApplicationElement: () => HTMLElement | null;
-            onClose?: (() => void | null) | undefined;
-            isIphone?: boolean | undefined;
-            isIpad?: boolean | undefined;
-            containerClassName?: string | undefined;
-            closeOnScrimClick?: boolean | undefined;
-        } & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: {

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -26,6 +26,7 @@ const getClassName = cssModules(STYLES);
 const BpkDialogInner = props => {
   const {
     ariaLabel,
+    ariaModal = true,
     children,
     className = null,
     contentClassName,
@@ -46,6 +47,7 @@ const BpkDialogInner = props => {
       tabIndex: -1,
       role: "dialog",
       "aria-label": ariaLabel,
+      "aria-modal": ariaModal,
       className: classNames,
       ref: dialogRef,
       children: [flare && /*#__PURE__*/_jsx(BpkContentBubble

package/bpk-component-dialog/src/common-types.d.ts

@@ -1,21 +1,3 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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 declare const HEADER_ICON_TYPES: {
     readonly primary: "primary";
@@ -24,6 +6,7 @@ export declare const HEADER_ICON_TYPES: {
 };
 export type DialogInnerProps = {
     ariaLabel: string;
+    ariaModal: boolean;
     id: string;
     children: ReactNode;
     dialogRef: (ref: HTMLElement | null | undefined) => void;

package/bpk-component-flare/src/BpkContentBubble.js

@@ -19,8 +19,9 @@
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkFlareBar from "./BpkFlareBar";
+import CornerRadius from "./__generated__/js/corner-radius";
 import STYLES from "./bpk-content-bubble.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentBubble = props => {
   const {
@@ -46,6 +47,12 @@ const BpkContentBubble = props => {
   if (className) {
     wrapperClassNames.push(className);
   }
+  const leftCornerRadiusClassNames = [getClassName('bpk-content-bubble__rounded-corner')];
+  const rightCornerRadiusClassNames = [getClassName('bpk-content-bubble__rounded-corner'), getClassName('bpk-content-bubble__rounded-corner--trailing')];
+  if (flareProps?.svgClassName) {
+    leftCornerRadiusClassNames.push(flareProps.svgClassName);
+    rightCornerRadiusClassNames.push(flareProps.svgClassName);
+  }
   if (contentClassName) {
     contentClassNames.push(contentClassName);
   }
@@ -54,16 +61,21 @@ const BpkContentBubble = props => {
     ...rest,
     children: /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-content-bubble__container'),
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsxs("div", {
         className: contentClassNames.join(' '),
-        children: content && content
-      }), showPointer && /*#__PURE__*/_jsx(BpkFlareBar, {
-        rounded: rounded
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+        children: [content, rounded && showPointer && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(CornerRadius, {
+            className: leftCornerRadiusClassNames.join(' ')
+          }), /*#__PURE__*/_jsx(CornerRadius, {
+            className: rightCornerRadiusClassNames.join(' ')
+          })]
+        })]
+      }), showPointer && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-content-bubble__pointer'),
-        ...flareProps
+        children: /*#__PURE__*/_jsx(BpkFlareBar, {
+          rounded: rounded,
+          ...flareProps
+        })
       })]
     })
   });

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,10 +18,9 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import CornerRadius from "./__generated__/js/corner-radius";
 import Pointer from "./__generated__/js/pointer";
 import STYLES from "./bpk-flare-bar.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 BpkFlareBar = props => {
   const {
@@ -35,32 +34,15 @@ const BpkFlareBar = props => {
     classNames.push(className);
   }
   const curveClassNames = [getClassName('bpk-flare-bar__curve')];
-  const leftCornerRadiusClassNames = [getClassName('bpk-flare-bar__rounded-corner')];
-  const rightCornerRadiusClassNames = [getClassName('bpk-flare-bar__rounded-corner'), getClassName('bpk-flare-bar__rounded-corner--trailing')];
   if (svgClassName) {
     curveClassNames.push(svgClassName);
-    leftCornerRadiusClassNames.push(svgClassName);
-    rightCornerRadiusClassNames.push(svgClassName);
   }
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: classNames.join(' '),
     ...rest,
-    children: [/*#__PURE__*/_jsx(Pointer
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
+    children: /*#__PURE__*/_jsx(Pointer, {
       className: curveClassNames.join(' ')
-    }), rounded && /*#__PURE__*/_jsx(CornerRadius
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: leftCornerRadiusClassNames.join(' ')
-    }), rounded && /*#__PURE__*/_jsx(CornerRadius
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: rightCornerRadiusClassNames.join(' ')
-    })]
+    })
   });
 };
 BpkFlareBar.propTypes = {

package/bpk-component-flare/src/bpk-content-bubble.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-content-bubble__pointer{width:100%;align-items:flex-end;align-self:flex-end}.bpk-content-bubble__wrapper{width:100%;height:auto;margin:0 auto;background-repeat:no-repeat;background-position:50% 60%;background-size:cover}.bpk-content-bubble__wrapper--rounded{border-radius:1.3125rem}.bpk-content-bubble__wrapper--rounded--with-pointer{border-radius:1.3125rem 1.3125rem 0 0}.bpk-content-bubble__container{display:flex;height:100%;flex-direction:column}.bpk-content-bubble__content-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto}
+.bpk-content-bubble__pointer{width:100%;align-items:flex-end;align-self:flex-end}.bpk-content-bubble__wrapper{width:100%;height:auto;margin:0 auto;background-repeat:no-repeat;background-position:50% 60%;background-size:cover}.bpk-content-bubble__wrapper--rounded{border-radius:1.3125rem}.bpk-content-bubble__wrapper--rounded--with-pointer{border-radius:1.3125rem 1.3125rem 0 0}.bpk-content-bubble__container{position:relative;display:flex;height:100%;flex-direction:column}.bpk-content-bubble__content-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 1 auto}.bpk-content-bubble__rounded-corner{position:absolute;bottom:calc(1.5rem - 2px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}@media(max-width: 32rem){.bpk-content-bubble__rounded-corner{bottom:calc(1rem - 1px)}}.bpk-content-bubble__rounded-corner--trailing{right:0;left:auto;transform:rotate(270deg)}

package/bpk-component-flare/src/bpk-flare-bar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-flare-bar__container{position:relative;display:flex;min-width:10rem;height:1.5rem;overflow:hidden}@media(max-width: 32rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:1.5rem;margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir=rtl] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media(max-width: 32rem){.bpk-flare-bar__curve{height:1rem}}.bpk-flare-bar__rounded-corner{position:absolute;bottom:calc(1.5rem - 1px);left:0;width:1.3125rem;height:1.3125rem;fill:#fff}.bpk-flare-bar__rounded-corner--trailing{right:0;left:auto;transform:rotate(-90deg)}
+.bpk-flare-bar__container{position:relative;display:flex;height:1.5rem;overflow:hidden}@media(max-width: 32rem){.bpk-flare-bar__container{height:1rem}}.bpk-flare-bar__curve{position:absolute;bottom:-1px;width:700rem;height:calc(1.5rem - 1px);margin-left:50%;transform:translateX(-50%);fill:#fff}html[dir=rtl] .bpk-flare-bar__curve{margin-right:50%;transform:translateX(50%)}@media(max-width: 32rem){.bpk-flare-bar__curve{height:1rem}}

package/bpk-component-floating-notification/index.d.ts

@@ -0,0 +1,3 @@
+import BpkFloatingNotification, { type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
+export type { BpkFloatingNotificationProps };
+export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts

@@ -1,45 +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 type { ReactNode, ReactElement, MouseEvent } from 'react';
-
+import type { MouseEvent, FunctionComponent } from 'react';
 export type Props = {
-  animateOnEnter?: boolean;
-  animateOnExit?: boolean;
-  className?: string;
-  ctaText?: string;
-  hideAfter?: number;
-  icon?: () => ReactElement;
-  onClick?: (e: MouseEvent) => void;
-  onExit?: () => void;
-  text: string;
-  [rest: string]: any;
+    animateOnEnter?: boolean;
+    animateOnExit?: boolean;
+    className?: string;
+    ctaText?: string;
+    /**
+     * This prop controls the amount of time that the notification stays visible before the exit animation begins.
+     * The default value is 4 seconds (4000 milliseconds).
+     */
+    hideAfter?: number;
+    icon?: FunctionComponent;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Execute a function after the component has finished the exit animation.
+     */
+    onExit?: () => void;
+    text: string;
+    [rest: string]: any;
 };
-declare const BpkFloatingNotification: ({
-  animateOnEnter,
-  animateOnExit,
-  className,
-  ctaText,
-  hideAfter,
-  icon,
-  onClick,
-  onExit,
-  text,
-  ...rest
-}: Props) => JSX.Element;
+declare const BpkFloatingNotification: (props: Props) => JSX.Element;
 export default BpkFloatingNotification;