@skyscanner/backpack-web 34.0.0-premajor.1 → 34.0.0

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.
  */
-.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, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.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,.3)}
+.bpk-navigation-bar{position:relative;display:grid;min-height:3.5rem;padding:1rem;grid-template-rows:auto;grid-template-columns:minmax(1.5rem, auto) minmax(1rem, 1fr) minmax(1.5rem, auto);justify-content:space-between;align-items:center;gap:1rem;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{grid-column:2;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title :first-child{display:inline}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__title-container{justify-self:center}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{grid-column:1;justify-self:start}.bpk-navigation-bar__trailing-item{grid-column:3;justify-self:end}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, MouseEvent, ReactNode } from 'react';
+import { BpkButtonLink } from '../../bpk-component-link';
+import { type BarStyle } from './BpkNavigationBar';
+export interface Props extends ComponentProps<BpkButtonLink> {
+    children: ReactNode;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    className?: string;
+    barStyle?: BarStyle;
+    [rest: string]: any;
+}
+declare const BpkNavigationBarButtonLink: ({ barStyle, children, className, ...rest }: Props) => JSX.Element;
+export default BpkNavigationBarButtonLink;

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

@@ -18,22 +18,19 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
-import { cssModules } from "../../bpk-react-utils";
 import { BAR_STYLES } from "./BpkNavigationBar";
-import STYLES from "./BpkNavigationBarButtonLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({
   barStyle = BAR_STYLES.default,
   children,
   className,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkButtonLink
-// TODO: className to be removed
-// eslint-disable-next-line @skyscanner/rules/forbid-component-props
-, {
-  className: getClassName('bpk-navigation-bar-button-link', `bpk-navigation-bar-button-link--${barStyle}`, className),
-  ...rest,
-  children: children
+}) => /*#__PURE__*/_jsx("span", {
+  className: className,
+  children: /*#__PURE__*/_jsx(BpkButtonLink, {
+    alternate: barStyle === BAR_STYLES.onDark,
+    ...rest,
+    children: children
+  })
 });
 export default BpkNavigationBarButtonLink;

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
+import { type BarStyle } from './BpkNavigationBar';
+export type Props = {
+    icon: ComponentType<any>;
+    label: string;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    className?: string;
+    barStyle?: BarStyle;
+    children?: ReactNode;
+    [rest: string]: any;
+};
+declare const BpkNavigationBarIconButton: ({ barStyle, className, icon, ...rest }: Props) => JSX.Element;
+export default BpkNavigationBarIconButton;

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

@@ -17,23 +17,20 @@
  */
 
 // @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 BpkCloseButton from "../../bpk-component-close-button";
 import { BAR_STYLES } from "./BpkNavigationBar";
-import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({
   barStyle = BAR_STYLES.default,
   className,
   icon,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkIconButton, {
-  customIcon: icon
-  // TODO: className to be removed
-  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-  ,
-  className: getClassName('bpk-navigation-bar-icon-button', `bpk-navigation-bar-icon-button--${barStyle}`, className),
-  ...rest
+}) => /*#__PURE__*/_jsx("span", {
+  className: className,
+  children: /*#__PURE__*/_jsx(BpkCloseButton, {
+    customIcon: icon,
+    onDark: barStyle === BAR_STYLES.onDark,
+    ...rest
+  })
 });
 export default BpkNavigationBarIconButton;

package/bpk-component-navigation-bar/src/themeAttributes.d.ts

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

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

@@ -1,23 +1,5 @@
-/*
- * 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 BpkNudger from './src/BpkNudger';
 import BpkConfigurableNudger from './src/BpkConfigurableNudger';
+import BpkNudger from './src/BpkNudger';
 import themeAttributes from './src/themeAttributes';
 export default BpkNudger;
 export { themeAttributes, BpkConfigurableNudger };

package/bpk-component-nudger/src/BpkConfigurableNudger.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 CommonProps } from './common-types';
 type Props = CommonProps & {

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -18,9 +18,7 @@
 
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import MinusIcon from "../../bpk-component-icon/sm/minus";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import PlusIcon from "../../bpk-component-icon/sm/plus";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
@@ -48,8 +46,6 @@ const BpkConfigurableNudger = ({
   const classNames = getClassName('bpk-nudger', className);
   const maxButtonDisabled = compareValues(value, max) >= 0;
   const minButtonDisabled = compareValues(value, min) <= 0;
-  const minusIconClassNames = getClassName('bpk-nudger__icon', minButtonDisabled && 'bpk-nudger__icon--disabled');
-  const plusIconClassNames = getClassName('bpk-nudger__icon', maxButtonDisabled && 'bpk-nudger__icon--disabled');
   const inputStyles = getClassName('bpk-nudger__input', inputClassName && inputClassName, buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
@@ -59,17 +55,8 @@ const BpkConfigurableNudger = ({
       onClick: () => onChange(decrementValue(value)),
       disabled: minButtonDisabled,
       title: decreaseButtonLabel,
-      "aria-controls": id
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: getClassName('bpk-nudger__button'),
-      children: /*#__PURE__*/_jsx(AlignedMinusIcon
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: minusIconClassNames
-      })
+      "aria-controls": id,
+      children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
     }), /*#__PURE__*/_jsx("input", {
       type: "text",
       "aria-live": "polite",
@@ -85,17 +72,8 @@ const BpkConfigurableNudger = ({
       onClick: () => onChange(incrementValue(value)),
       disabled: maxButtonDisabled,
       title: increaseButtonLabel,
-      "aria-controls": id
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: getClassName('bpk-nudger__button'),
-      children: /*#__PURE__*/_jsx(AlignedPlusIcon
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: plusIconClassNames
-      })
+      "aria-controls": id,
+      children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
     })]
   });
 };

package/bpk-component-nudger/src/BpkNudger.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 CommonProps } from './common-types';
 declare const BpkNudger: ({ buttonType, className, icon, id, subtitle, title, ...rest }: CommonProps) => JSX.Element;

package/bpk-component-nudger/src/BpkNudger.js

@@ -40,14 +40,12 @@ const BpkNudger = ({
   const classNames = getClassName(title && 'bpk-nudger__container');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [title &&
-    /*#__PURE__*/
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    _jsxs(BpkLabel, {
-      htmlFor: id,
+    children: [title && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-nudger__label'),
-      children: [icon, /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx(BpkLabel, {
+        htmlFor: id,
+        children: icon
+      }), /*#__PURE__*/_jsxs("span", {
         // For a11y on IOS, role='text' forces label to be read in full. More info: https://axesslab.com/text-splitting/
         // eslint-disable-next-line jsx-a11y/aria-role
         role: "text",
@@ -55,13 +53,11 @@ const BpkNudger = ({
         children: [/*#__PURE__*/_jsx(BpkText, {
           textStyle: TEXT_STYLES.heading5,
           children: title
-        }), subtitle &&
-        /*#__PURE__*/
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        _jsx(BpkText, {
+        }), subtitle && /*#__PURE__*/_jsx("span", {
           className: getClassName('bpk-nudger__label--subtitle'),
-          children: subtitle
+          children: /*#__PURE__*/_jsx(BpkText, {
+            children: subtitle
+          })
         })]
       })]
     }), /*#__PURE__*/_jsx(BpkConfigurableNudger, {

package/bpk-component-nudger/src/BpkNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}
+html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}

package/bpk-component-nudger/src/common-types.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 type { ReactNode } from "react";
 export declare const BUTTON_TYPES: {
     readonly secondary: "secondary";

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

@@ -0,0 +1,2 @@
+import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
+export default themeAttributes;

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

@@ -16,6 +16,5 @@
  * limitations under the License.
  */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { secondaryThemeAttributes as themeAttributes } from "../../bpk-component-button/themeAttributes";
 export default themeAttributes;

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

@@ -1,26 +1,4 @@
-/*
- * 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 BpkOverlay, {
-  OVERLAY_TYPES,
-  type Props as BpkOverlayProps,
-} from './src/BpkOverlay';
-
+import BpkOverlay, { OVERLAY_TYPES, type Props as BpkOverlayProps } from './src/BpkOverlay';
 export type { BpkOverlayProps };
 export default BpkOverlay;
 export { OVERLAY_TYPES };

package/bpk-component-overlay/src/BpkOverlay.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 type { ComponentProps, ReactNode } from 'react';
 export declare const OVERLAY_TYPES: {
     readonly solidLow: "solidLow";

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -18,26 +18,16 @@
 
 import PropTypes from 'prop-types';
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
-import { withRtlSupport } from "../../bpk-component-icon";
+import { withRtlSupport, withButtonAlignment } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPaginationNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const AlignedArrowLeftIcon = withRtlSupport(ArrowLeftIcon);
-const AlignedArrowRightIcon = withRtlSupport(ArrowRightIcon);
-const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon
-// TODO: className to be removed
-// eslint-disable-next-line @skyscanner/rules/forbid-component-props
-, {
-  className: getClassName('bpk-pagination-nudger__icon')
-}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon
-// TODO: className to be removed
-// eslint-disable-next-line @skyscanner/rules/forbid-component-props
-, {
-  className: getClassName('bpk-pagination-nudger__icon')
-});
+const AlignedArrowLeftIcon = withRtlSupport(withButtonAlignment(ArrowLeftIcon));
+const AlignedArrowRightIcon = withRtlSupport(withButtonAlignment(ArrowRightIcon));
+const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon, {}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon, {});
 const BpkPaginationNudger = props => {
   const {
     disabled,
@@ -45,18 +35,17 @@ const BpkPaginationNudger = props => {
     label,
     onNudge
   } = props;
-  return /*#__PURE__*/_jsxs(BpkButtonV2, {
-    type: BUTTON_TYPES.link,
-    onClick: onNudge,
-    disabled: disabled
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
+  return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-pagination-nudger'),
-    children: [nudgerIcon(forward), /*#__PURE__*/_jsx("span", {
-      className: getClassName('bpk-pagination-nudger__text--hidden'),
-      children: label
-    })]
+    children: /*#__PURE__*/_jsxs(BpkButtonV2, {
+      type: BUTTON_TYPES.link,
+      onClick: onNudge,
+      disabled: disabled,
+      children: [nudgerIcon(forward), /*#__PURE__*/_jsx("span", {
+        className: getClassName('bpk-pagination-nudger__text--hidden'),
+        children: label
+      })]
+    })
   });
 };
 BpkPaginationNudger.propTypes = {

package/bpk-component-pagination/src/BpkPaginationNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-nudger{display:flex;width:2.25rem;height:2.25rem;padding:.625rem}.bpk-pagination-nudger__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-pagination-nudger{display:flex;width:2.25rem;height:2.25rem;justify-content:center;align-content:center}.bpk-pagination-nudger__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -84,14 +84,13 @@ const BpkPhoneInput = props => {
     ...wrapperProps,
     className: getClassName('bpk-phone-input', wrapperProps.className),
     children: [/*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx(BpkLabel, {
-        htmlFor: dialingCodeProps.id,
-        disabled: disabled
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+      children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-phone-input__label'),
-        children: dialingCodeProps.label
+        children: /*#__PURE__*/_jsx(BpkLabel, {
+          htmlFor: dialingCodeProps.id,
+          disabled: disabled,
+          children: dialingCodeProps.label
+        })
       }), /*#__PURE__*/_jsx(BpkSelect, {
         ...commonProps,
         ...dialingCodeProps,
@@ -116,14 +115,13 @@ const BpkPhoneInput = props => {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-phone-input__phone-number'),
-      children: [/*#__PURE__*/_jsx(BpkLabel, {
-        htmlFor: id,
-        disabled: disabled
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+      children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-phone-input__label'),
-        children: label
+        children: /*#__PURE__*/_jsx(BpkLabel, {
+          htmlFor: id,
+          disabled: disabled,
+          children: label
+        })
       }), /*#__PURE__*/_jsx(BpkInput, {
         ...commonProps,
         ...rest,

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

@@ -0,0 +1,5 @@
+import BpkPopover, { type Props } from './src/BpkPopover';
+import themeAttributes from './src/themeAttributes';
+export type BpkPopoverProps = Props;
+export { themeAttributes, };
+export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.d.ts

@@ -0,0 +1,26 @@
+import type { SyntheticEvent, ReactNode, ReactElement } from 'react';
+import type { Placement } from '@floating-ui/react';
+declare const EVENT_SOURCES: {
+    CLOSE_BUTTON: string;
+    CLOSE_LINK: string;
+};
+export type Props = {
+    children: ReactNode;
+    closeButtonText: string;
+    id: string;
+    label: string;
+    onClose: (event: SyntheticEvent<HTMLButtonElement>, props: {
+        source: (typeof EVENT_SOURCES)[keyof typeof EVENT_SOURCES];
+    }) => void;
+    className?: string | null;
+    closeButtonIcon?: boolean;
+    closeButtonProps?: Object;
+    isOpen?: boolean;
+    labelAsTitle?: boolean;
+    padded?: boolean;
+    placement?: Placement;
+    showArrow?: Boolean;
+    target: ReactElement<any>;
+};
+declare const BpkPopover: ({ children, className, closeButtonIcon, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
+export default BpkPopover;

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

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 
-import { useState, cloneElement, useRef } from 'react';
-import { useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingArrow, arrow } from '@floating-ui/react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { useState, useRef, cloneElement, isValidElement } from 'react';
+import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, flip, shift } from '@floating-ui/react';
 import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -36,7 +34,10 @@ const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
   CLOSE_LINK: 'CLOSE_LINK'
 };
-const bindEventSource = (source, callback) => event => {
+
+// The stroke width is used to set the border width of the arrow.
+const strokeWidth = 0.0625;
+const bindEventSource = (source, callback, event) => {
   if (event.persist) {
     event.persist();
   }
@@ -71,9 +72,9 @@ const BpkPopover = ({
     open: isOpenState,
     onOpenChange: setIsOpenState,
     placement,
-    middleware: [showArrow && offset(14), flip({
-      fallbackAxisSideDirection: 'start'
-    }), arrow({
+    middleware: [showArrow && offset(17), flip({
+      crossAxis: true
+    }), shift(), showArrow && arrow({
       element: arrowRef
     })],
     whileElementsMounted: autoUpdate
@@ -86,9 +87,14 @@ const BpkPopover = ({
     getFloatingProps,
     getReferenceProps
   } = useInteractions([click, dismiss]);
-  const targetElement = /*#__PURE__*/cloneElement(target, {
+  const targetElement = /*#__PURE__*/isValidElement(target) ? ( /*#__PURE__*/cloneElement(target, {
     ...getReferenceProps(),
+    // @ts-ignore - we're adding a popover ref to the target element so we can position the popover relative to it
     ref: refs.setReference
+  })) : /*#__PURE__*/_jsx("div", {
+    ref: refs.setReference,
+    ...getReferenceProps(),
+    children: target
   });
   const classNames = getClassName('bpk-popover', className);
   const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
@@ -115,13 +121,11 @@ const BpkPopover = ({
             children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
               ref: arrowRef,
               context: context,
-              id: ARROW_ID
-              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-              ,
+              id: ARROW_ID,
               className: getClassName('bpk-popover__arrow'),
               role: "presentation",
               stroke: surfaceHighlightDay,
-              strokeWidth: 0.0625
+              strokeWidth: strokeWidth
             }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
               className: getClassName('bpk-popover__header'),
               children: [/*#__PURE__*/_jsx(BpkText, {
@@ -131,14 +135,14 @@ const BpkPopover = ({
                 children: label
               }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
                 label: closeButtonText,
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose);
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps
               }) : /*#__PURE__*/_jsx(BpkButtonLink, {
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps,
@@ -154,8 +158,8 @@ const BpkPopover = ({
             }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
               className: getClassName('bpk-popover__footer'),
               children: /*#__PURE__*/_jsx(BpkButtonLink, {
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps,

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}
+.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}

package/bpk-component-popover/src/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ARROW_ID = "js-bpk-popover-arrow";
+declare const _default: {
+    ARROW_ID: string;
+};
+export default _default;

package/bpk-component-popover/src/constants.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.
- */export const ARROW_ID = 'js-bpk-popover-arrow';
+ */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
 export default {
   ARROW_ID
 };

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

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