@skyscanner/backpack-web 34.3.0 → 34.5.0

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import useMediaQuery from "./useMediaQuery";
 const BREAKPOINTS = {
@@ -31,6 +31,14 @@ const BREAKPOINTS = {
   ABOVE_DESKTOP: breakpoints.breakpointQueryAboveDesktop,
   DESKTOP_ONLY: breakpoints.breakpointQueryDesktopOnly
 };
+const useLegacyWarning = (query, legacy, isClient) => useMemo(() => {
+  if (isClient) {
+    // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
+    if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
+      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
+    }
+  }
+}, [isClient, legacy, query]);
 const BpkBreakpoint = ({
   children,
   legacy = false,
@@ -42,16 +50,14 @@ const BpkBreakpoint = ({
    * Consumers of BpkBreakpoint have become reliant on this behaviour particularly when using BpkBreakpoint within a SSR'd application.
    * This shouldn't be removed without a breaking change & understanding how to migrate consumers away from this reliance.
    */
-  const [isClient, setIsClient] = useState(false);
+  const [, updateState] = useState({});
   useEffect(() => {
-    setIsClient(true);
+    updateState({}); // force re-render when on client
   }, []);
   const matches = useMediaQuery(query, matchSSR);
+  const isClient = typeof window !== 'undefined';
+  useLegacyWarning(query, legacy, isClient);
   if (isClient) {
-    // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
-    if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
-      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
-    }
     if (typeof children === 'function') {
       return children(matches);
     }

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -17,8 +17,7 @@
  */
 
 import { useState } from 'react';
-import { BpkButtonV2 } from "../../bpk-component-button";
-import { withLargeButtonAlignment } from "../../bpk-component-icon";
+import { colorBlack, colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
 import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
 import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
@@ -36,10 +35,10 @@ export const STYLE_TYPES = {
   onDark: 'onDark'
 };
 const getClassName = cssModules(STYLES);
-const AlignedHeartIcon = withLargeButtonAlignment(BpkHeartIcon);
-const AlignedHeartOutlineIcon = withLargeButtonAlignment(BpkHeartOutlineIcon);
-const AlignedHeartIconSm = withLargeButtonAlignment(BpkHeartIconSm);
-const AlignedHeartOutlineIconSm = withLargeButtonAlignment(BpkHeartOutlineIconSm);
+const AlignedHeartIcon = BpkHeartIcon;
+const AlignedHeartOutlineIcon = BpkHeartOutlineIcon;
+const AlignedHeartIconSm = BpkHeartIconSm;
+const AlignedHeartOutlineIconSm = BpkHeartOutlineIconSm;
 const BpkSaveButton = ({
   accessibilityLabel,
   checked,
@@ -47,33 +46,30 @@ const BpkSaveButton = ({
   size = SIZE_TYPES.default,
   style = STYLE_TYPES.default
 }) => {
-  const [toggle, setToggle] = useState(false);
+  const [shouldPlayAnim, setPlayAnim] = useState(false);
   const smallSize = size === SIZE_TYPES.small;
   const HeartIcon = smallSize ? AlignedHeartIconSm : AlignedHeartIcon;
   const HeartOutLineIcon = smallSize ? AlignedHeartOutlineIconSm : AlignedHeartOutlineIcon;
-  return /*#__PURE__*/_jsxs(BpkButtonV2, {
-    "aria-label": accessibilityLabel
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    "aria-label": accessibilityLabel,
     className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
     onClick: e => {
       onCheckedChange(e);
       if (!checked) {
-        setToggle(true);
+        setPlayAnim(true);
       }
     },
-    iconOnly: true,
-    children: [/*#__PURE__*/_jsx(HeartIcon
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartIcon', toggle && checked && 'bpk-save-button__heartIcon--toggle', `bpk-save-button__heartIcon--${checked ? 'show' : 'hide'}`, `bpk-save-button__heartIcon--${style}`)
-    }), /*#__PURE__*/_jsx(HeartOutLineIcon
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartOutlineIcon', `bpk-save-button__heartOutlineIcon--${checked ? 'hide' : 'show'}`, `bpk-save-button__heartOutlineIcon--${style}`)
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName(`bpk-save-button__heartIcon`, checked && shouldPlayAnim && `bpk-save-button__heartIcon--clicked`, `bpk-save-button__heartIcon--${style}`),
+      "data-show": checked,
+      children: /*#__PURE__*/_jsx(HeartIcon, {})
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName(`bpk-save-button__heartOutlineIcon`),
+      "data-show": !checked,
+      children: /*#__PURE__*/_jsx(HeartOutLineIcon, {
+        fill: style === STYLE_TYPES.onDark ? colorWhite : colorBlack
+      })
     })]
   });
 };

package/bpk-component-card-button/src/BpkSaveButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0)}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0)}.bpk-save-button:active{background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-no-touch-support .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,.8)}
+@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}

package/bpk-component-close-button/src/BpkCloseButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);font-size:1.5rem;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-close-button__default{color:#161616;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button__default:active{color:#161616}.bpk-close-button__onDark{color:#fff;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-close-button__onDark:active{color:#fff}.bpk-close-button-icon{fill:currentcolor}
+.bpk-close-button{width:1.5rem;height:1.5rem;padding:0;border:0;background-color:rgba(0,0,0,0);font-size:1.5rem;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-close-button__default{color:#161616;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button__default:active{color:#161616}.bpk-close-button__onDark{color:#fff;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-close-button__onDark:active{color:#fff}.bpk-close-button-icon{fill:currentcolor}

package/bpk-component-description-list/index.d.ts

@@ -0,0 +1,4 @@
+import BpkDescriptionDetails from './src/BpkDescriptionDetails';
+import BpkDescriptionList from './src/BpkDescriptionList';
+import BpkDescriptionTerm from './src/BpkDescriptionTerm';
+export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails };

package/bpk-component-description-list/src/BpkDescriptionDetails.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode | string;
+    className?: string;
+    [rest: string]: any;
+};
+declare const _default: ({ children, className, ...rest }: Props) => JSX.Element;
+export default _default;

package/bpk-component-description-list/src/BpkDescriptionDetails.js

@@ -16,5 +16,17 @@
  * limitations under the License.
  */
 
-import buildComponent from "./ComponentFactory";
-export default buildComponent('dd', 'bpk-description-list__details');
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkDescriptionList.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export default (({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/_jsx("dd", {
+  className: [getClassName('bpk-description-list__details'), className].filter(x => x) // inline drops the className if undefined
+  .join(' '),
+  ...rest,
+  children: children
+}));

package/bpk-component-description-list/src/BpkDescriptionList.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode | string;
+    className?: string;
+    [rest: string]: any;
+};
+declare const _default: ({ children, className, ...rest }: Props) => JSX.Element;
+export default _default;

package/bpk-component-description-list/src/BpkDescriptionList.js

@@ -16,5 +16,17 @@
  * limitations under the License.
  */
 
-import buildComponent from "./ComponentFactory";
-export default buildComponent('dl', 'bpk-description-list');
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkDescriptionList.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export default (({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/_jsx("dl", {
+  className: [getClassName('bpk-description-list'), className].filter(x => x) // inline drops the className if undefined
+  .join(' '),
+  ...rest,
+  children: children
+}));

package/bpk-component-description-list/src/BpkDescriptionTerm.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode | string;
+    className?: string;
+    [rest: string]: any;
+};
+declare const _default: ({ children, className, ...rest }: Props) => JSX.Element;
+export default _default;

package/bpk-component-description-list/src/BpkDescriptionTerm.js

@@ -16,5 +16,17 @@
  * limitations under the License.
  */
 
-import buildComponent from "./ComponentFactory";
-export default buildComponent('dt', 'bpk-description-list__term');
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkDescriptionList.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export default (({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/_jsx("dt", {
+  className: [getClassName('bpk-description-list__term'), className].filter(x => x) // inline drops the className if undefined
+  .join(' '),
+  ...rest,
+  children: children
+}));

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

@@ -6,7 +6,6 @@ export declare const HEADER_ICON_TYPES: {
 };
 export type DialogInnerProps = {
     ariaLabel: string;
-    ariaModal: boolean;
     id: string;
     children: ReactNode;
     dialogRef: (ref: HTMLElement | null | undefined) => void;
@@ -17,6 +16,7 @@ export type DialogInnerProps = {
      * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
      */
     getApplicationElement: () => HTMLElement | null;
+    ariaModal?: boolean;
     className?: string;
     contentClassName?: string;
     flare?: boolean;

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

@@ -70,20 +70,23 @@ const BpkFloatingNotification = props => {
         children: /*#__PURE__*/_jsx(Icon, {
           "aria-hidden": true
         })
-      }), /*#__PURE__*/_jsx(BpkText, {
-        tagName: "p",
-        textStyle: TEXT_STYLES.bodyDefault,
-        children: /*#__PURE__*/_jsx("span", {
-          className: getClassName('bpk-floating-notification__text'),
+      }), /*#__PURE__*/_jsx("span", {
+        className: getClassName('bpk-floating-notification__text'),
+        children: /*#__PURE__*/_jsx(BpkText, {
+          tagName: "p",
+          textStyle: TEXT_STYLES.bodyDefault,
           children: text
         })
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
         "aria-hidden": true,
         children: text
-      }), ctaText && /*#__PURE__*/_jsx(BpkButtonV2, {
-        type: BUTTON_TYPES.linkOnDark,
-        onClick: onClick,
-        children: ctaText
+      }), ctaText && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-floating-notification__cta'),
+        children: /*#__PURE__*/_jsx(BpkButtonV2, {
+          type: BUTTON_TYPES.linkOnDark,
+          onClick: onClick,
+          children: ctaText
+        })
       })]
     })
   });

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}
+.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -39,7 +39,9 @@ class BpkHorizontalNav extends Component {
     this.selectedItemRef = null;
   }
   componentDidMount() {
-    this.scrollSelectedIntoView(false);
+    requestAnimationFrame(() => {
+      this.scrollSelectedIntoView(false);
+    });
   }
   componentDidUpdate() {
     this.scrollSelectedIntoView(true);

package/bpk-component-icon/src/classNameModifierHOCFactory.js

@@ -29,9 +29,6 @@ export default ((displayName, classNamesToAdd = []) => ComposedComponent => {
       classNames.push(className);
     }
     classNames = classNamesToAdd.length ? classNames.concat(classNamesToAdd) : classNames;
-
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     return /*#__PURE__*/_jsx(ComposedComponent, {
       className: classNames.join(' '),
       ...rest

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -80,8 +80,10 @@ class BpkMobileScrollContainer extends Component {
     };
   }
   componentDidMount() {
-    this.setScrollBarAwareHeight();
-    this.setScrollIndicatorClassName();
+    requestAnimationFrame(() => {
+      this.setScrollBarAwareHeight();
+      this.setScrollIndicatorClassName();
+    });
     window.addEventListener('resize', this.onWindowResize);
   }
   componentWillUnmount() {

package/bpk-component-modal/src/BpkModalInner.js

@@ -89,10 +89,7 @@ const BpkModalInner = ({
         className: getClassName('bpk-modal__header'),
         children: /*#__PURE__*/_jsx(BpkNavigationBar, {
           barStyle: modalStyle === MODAL_STYLING.surfaceContrast ? BAR_STYLES.onDark : BAR_STYLES.default,
-          id: headingId
-          // TODO: className to be removed
-          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-          ,
+          id: headingId,
           className: navigationStyles.join(' '),
           title: /*#__PURE__*/_jsx("h2", {
             id: headingId,
@@ -100,20 +97,14 @@ const BpkModalInner = ({
             children: title
           }),
           leadingButton: accessoryViewFinal,
-          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink
-          // TODO: className to be removed
-          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-          , {
-            className: [getClassName('bpk-modal__close-button'), getClassName(`bpk-modal__close-button-style--${modalStyle}`)].join(' '),
+          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
             onClick: onClose,
+            onDark: modalStyle === MODAL_STYLING.surfaceContrast,
             children: closeText
-          }) : /*#__PURE__*/_jsx(BpkCloseButton
-          // TODO: className to be removed
-          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-          , {
-            className: [getClassName('bpk-modal__close-button'), getClassName(`bpk-modal__close-button-style--${modalStyle}`)].join(' '),
+          }) : /*#__PURE__*/_jsx(BpkCloseButton, {
             label: closeLabel,
-            onClick: onClose
+            onClick: onClose,
+            onDark: modalStyle === MODAL_STYLING.surfaceContrast
           })
         })
       }), /*#__PURE__*/_jsx("div", {

package/bpk-component-modal/src/BpkModalInner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-modal{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:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media(min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__modal-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-modal__navigation{display:flex;justify-content:space-between}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto;margin-left:1rem;margin-right:0}html[dir=rtl] .bpk-modal__close-button{margin-left:0;margin-right:1rem}html[dir=rtl] .bpk-modal__close-button{left:auto}.bpk-modal__close-button-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-no-touch-support .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir=rtl] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}
+.bpk-modal{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:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media(min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__modal-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-modal__navigation{display:flex;justify-content:space-between}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto}html[dir=rtl] .bpk-modal__close-button{left:auto}.bpk-modal__close-button-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-no-touch-support .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir=rtl] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}

package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open=true]),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open=true]){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media(min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__close-button-style--surface-contrast{color:#fff}.bpk-no-touch-support .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__button-container-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}.bpk-modal__container--surface-contrast{background-color:#05203c;color:#fff}
+@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open=true]),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open=true]){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media(min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__button-container-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}.bpk-modal__container--surface-contrast{background-color:#05203c;color:#fff}

package/bpk-component-modal/src/BpkModalV2/BpkModal.js

@@ -42,23 +42,17 @@ const Header = ({
         children: /*#__PURE__*/_jsx(Heading, {
           children: title
         })
-      }), /*#__PURE__*/_jsx(BpkCloseButton
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
+      }), /*#__PURE__*/_jsx(BpkCloseButton, {
         label: closeLabel,
-        onClick: onClose
+        onClick: onClose,
+        onDark: modalStyle === MODAL_STYLING.surfaceContrast
       })]
     });
   }
   return /*#__PURE__*/_jsx("div", {
     className: [getClassName('bpk-modal__button-container'), getClassName(`bpk-modal__button-container-style--${modalStyle}`)].join(' '),
-    children: /*#__PURE__*/_jsx(BpkCloseButton
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
+    children: /*#__PURE__*/_jsx(BpkCloseButton, {
+      onDark: modalStyle === MODAL_STYLING.surfaceContrast,
       label: closeLabel,
       onClick: onClose
     })

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

@@ -64,7 +64,6 @@ const BpkConfigurableNudger = ({
       value: formatValue(value),
       id: id,
       className: inputStyles,
-      tabIndex: -1,
       ...rest
     }), /*#__PURE__*/_jsx(BpkButtonV2, {
       type: BUTTON_TYPES[buttonType],

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

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPaginationPage.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -30,15 +29,13 @@ const BpkPaginationPage = props => {
     page,
     pageLabel
   } = props;
-  if (isSelected) {
-    classNames.push(getClassName('bpk-pagination-page--selected'));
+  if (!isSelected) {
+    // reverse class type so we can always load `buttons.bpk-button` as a base style for overridding.
+    classNames.push(getClassName('bpk-pagination-page--not-selected'));
   }
-  return /*#__PURE__*/_jsx(BpkButtonV2, {
-    type: !isSelected ? BUTTON_TYPES.primaryOnDark : BUTTON_TYPES.primary,
-    onClick: onSelect
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
+  return /*#__PURE__*/_jsx("button", {
+    onClick: onSelect,
+    type: "button",
     className: classNames.join(' '),
     "aria-label": pageLabel(page, isSelected),
     "aria-current": isSelected,

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

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-pagination-page{min-width:2.25rem;height:2.25rem;padding:0 1rem;border-radius:.5rem;color:#161616;box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page:active{background-color:rgba(0,0,0,0);box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--selected{color:#fff;box-shadow:none}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){color:#161616}.bpk-pagination-page--selected:active{color:#161616}
+.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}

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

@@ -4,9 +4,16 @@ declare const EVENT_SOURCES: {
     CLOSE_BUTTON: string;
     CLOSE_LINK: string;
 };
-export type Props = {
-    children: ReactNode;
+type CloseButtonProps = ({
+    /**
+     * @deprecated close button text is deprecated. Instead, please use `closeButtonIcon`, or you may opt not to render a close button at all.
+     */
     closeButtonText: string;
+} | {
+    closeButtonText?: never;
+});
+export type Props = CloseButtonProps & {
+    children: ReactNode;
     id: string;
     label: string;
     onClose: (event: SyntheticEvent<HTMLButtonElement>, props: {
@@ -21,6 +28,9 @@ export type Props = {
     placement?: Placement;
     showArrow?: Boolean;
     target: ReactElement<any>;
+    closeButtonLabel?: string;
+    actionText?: string;
+    onAction?: () => void;
 };
-declare const BpkPopover: ({ children, className, closeButtonIcon, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
+declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
 export default BpkPopover;

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

@@ -46,15 +46,18 @@ const bindEventSource = (source, callback, event) => {
   });
 };
 const BpkPopover = ({
+  actionText,
   children,
   className = null,
   closeButtonIcon = true,
+  closeButtonLabel,
   closeButtonProps = {},
   closeButtonText,
   id,
   isOpen = false,
   label,
   labelAsTitle = false,
+  onAction,
   onClose,
   padded = true,
   placement = 'bottom',
@@ -135,13 +138,13 @@ const BpkPopover = ({
                 textStyle: TEXT_STYLES.label1,
                 children: label
               }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
-                label: closeButtonText,
+                label: closeButtonText || closeButtonLabel,
                 onClick: event => {
                   bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps
-              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
+              }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
                 onClick: event => {
                   bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                   setIsOpenState(false);
@@ -156,7 +159,13 @@ const BpkPopover = ({
             }), /*#__PURE__*/_jsx("div", {
               className: bodyClassNames,
               children: children
-            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
+            }), actionText && onAction && /*#__PURE__*/_jsx("div", {
+              className: getClassName('bpk-popover__action'),
+              children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: onAction,
+                children: actionText
+              })
+            }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
               className: getClassName('bpk-popover__footer'),
               children: /*#__PURE__*/_jsx(BpkButtonLink, {
                 onClick: event => {

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-container{z-index:900}.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}
+.bpk-popover--container{z-index:900}.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__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.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}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}

package/bpk-component-text/src/BpkText.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}
+.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}

package/bpk-scrim-utils/src/withScrim.js

@@ -44,32 +44,33 @@ const withScrim = WrappedComponent => {
         isIphone
       } = this.props;
       const applicationElement = getApplicationElement();
+      requestAnimationFrame(() => {
+        /**
+         * iPhones & iPads need to have a fixed body
+         * and scrolling stored to prevent some iOS specific issues occuring
+         *
+         * Issue description:
+         * iOS safari does not prevent scrolling on the underlying content.
+         * Without the below fixes this results in users being able to scroll below any modal or dialog that uses withScrim.
+         *
+         * The fixes can be summaried here: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
+         *
+         * The most dangerous of the fixes below is the fixBody, this function applies changes to the <body> style.
+         * This has the potential to override any custom styles already applied. The assumption here is that no one internally is making these changes to body.
+         *
+         * There is a corresponding set of functions in the componentWillUnmount block that deals with undoing these changes.
+         */
+        if (isIphone || isIpad) {
+          storeScroll();
+          fixBody();
+        }
+        /**
+         * lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
+         * The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
+         */
 
-      /**
-       * iPhones & iPads need to have a fixed body
-       * and scrolling stored to prevent some iOS specific issues occuring
-       *
-       * Issue description:
-       * iOS safari does not prevent scrolling on the underlying content.
-       * Without the below fixes this results in users being able to scroll below any modal or dialog that uses withScrim.
-       *
-       * The fixes can be summaried here: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
-       *
-       * The most dangerous of the fixes below is the fixBody, this function applies changes to the <body> style.
-       * This has the potential to override any custom styles already applied. The assumption here is that no one internally is making these changes to body.
-       *
-       * There is a corresponding set of functions in the componentWillUnmount block that deals with undoing these changes.
-       */
-      if (isIphone || isIpad) {
-        storeScroll();
-        fixBody();
-      }
-      /**
-       * lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
-       * The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
-       */
-
-      lockScroll();
+        lockScroll();
+      });
       if (applicationElement) {
         applicationElement.setAttribute('aria-hidden', 'true');
       }

package/bpk-stylesheets/larken.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@font-face{font-family:Larken;font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-8371ea16.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-39e53c9a.woff") format("woff")}@font-face{font-family:Larken;font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-3d9dfe29.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-626ee28c.woff") format("woff")}
+@font-face{font-family:Larken;font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-8371ea16.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-39e53c9a.woff") format("woff")}@font-face{font-family:Larken;font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-3d9dfe29.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-626ee28c.woff") format("woff")}@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansArabic-Light-e77dc47a.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansArabic-Light-ea83f673.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansArabic-Light-b2ff05f9.ttf") format("ttf")}@font-face{font-family:"Noto Sans Hebrew";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansHebrew-Light-7e3d70ae.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansHebrew-Light-87087c3d.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansHebrew-Light-7b34032c.ttf") format("ttf")}@font-face{font-family:"Noto Serif";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerif-Light-46d7aaea.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerif-Light-412a21b9.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerif-Light-9dbdd5d2.ttf") format("ttf")}@font-face{font-family:"Noto Serif Devanagari";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifDevanagari-Light-6f8c3ec2.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifDevanagari-Light-9e5b16f1.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifDevanagari-Light-d396b2f0.ttf") format("ttf")}@font-face{font-family:"Noto Serif Thai";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifThai-Light-c19b05eb.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifThai-Light-c8dd8e9a.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifThai-Light-7503fb65.ttf") format("ttf")}@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansSC-Light-650e8f78.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansSC-Light-562944a8.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansSC-Light-a73eb63e.ttf") format("ttf")}@font-face{font-family:"Noto Sans TC";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansTC-Light-44be0b13.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansTC-Light-a8473157.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansTC-Light-d77339b0.ttf") format("ttf")}@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansJP-Light-1fed199d.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansJP-Light-828afdbb.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansJP-Light-477cc6a5.ttf") format("ttf")}@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansKR-Light-8bef1aea.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansKR-Light-c07b4050.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansKR-Light-137d0733.ttf") format("ttf")}

package/bpk-stylesheets/larken.scss

@@ -35,3 +35,93 @@ $base-url: 'https://js.skyscnr.com/sttc/bpk-fonts';
     url('#{$base-url}/Larken-Regular-3d9dfe29.woff2') format('woff2'),
     url('#{$base-url}/Larken-Regular-626ee28c.woff') format('woff');
 }
+
+@font-face {
+  font-family: 'Noto Sans Arabic';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSansArabic-Light-e77dc47a.woff2') format('woff2'),
+    url('#{$base-url}/NotoSansArabic-Light-ea83f673.woff') format('woff'),
+    url('#{$base-url}/NotoSansArabic-Light-b2ff05f9.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Sans Hebrew';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSansHebrew-Light-7e3d70ae.woff2') format('woff2'),
+    url('#{$base-url}/NotoSansHebrew-Light-87087c3d.woff') format('woff'),
+    url('#{$base-url}/NotoSansHebrew-Light-7b34032c.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSerif-Light-46d7aaea.woff2') format('woff2'),
+    url('#{$base-url}/NotoSerif-Light-412a21b9.woff') format('woff'),
+    url('#{$base-url}/NotoSerif-Light-9dbdd5d2.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Serif Devanagari';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSerifDevanagari-Light-6f8c3ec2.woff2') format('woff2'),
+    url('#{$base-url}/NotoSerifDevanagari-Light-9e5b16f1.woff') format('woff'),
+    url('#{$base-url}/NotoSerifDevanagari-Light-d396b2f0.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Serif Thai';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSerifThai-Light-c19b05eb.woff2') format('woff2'),
+    url('#{$base-url}/NotoSerifThai-Light-c8dd8e9a.woff') format('woff'),
+    url('#{$base-url}/NotoSerifThai-Light-7503fb65.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSansSC-Light-650e8f78.woff2') format('woff2'),
+    url('#{$base-url}/NotoSansSC-Light-562944a8.woff') format('woff'),
+    url('#{$base-url}/NotoSansSC-Light-a73eb63e.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Sans TC';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSansTC-Light-44be0b13.woff2') format('woff2'),
+    url('#{$base-url}/NotoSansTC-Light-a8473157.woff') format('woff'),
+    url('#{$base-url}/NotoSansTC-Light-d77339b0.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSansJP-Light-1fed199d.woff2') format('woff2'),
+    url('#{$base-url}/NotoSansJP-Light-828afdbb.woff') format('woff'),
+    url('#{$base-url}/NotoSansJP-Light-477cc6a5.ttf') format('ttf');
+}
+
+@font-face {
+  font-family: 'Noto Sans KR';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('#{$base-url}/NotoSansKR-Light-8bef1aea.woff2') format('woff2'),
+    url('#{$base-url}/NotoSansKR-Light-c07b4050.woff') format('woff'),
+    url('#{$base-url}/NotoSansKR-Light-137d0733.ttf') format('ttf');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.3.0",
+  "version": "34.5.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-slider": "^1.1.2",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.13.0",
+    "@skyscanner/bpk-foundations-web": "^17.14.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",

package/bpk-component-description-list/src/ComponentFactory.js

@@ -1,54 +0,0 @@
-/*
- * 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 PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDescriptionList.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const buildComponent = (TagName, baseClassName) => {
-  const Component = ({
-    children,
-    className,
-    ...rest
-  }) => {
-    const classNames = [getClassName(baseClassName)];
-    if (className) {
-      classNames.push(className);
-    }
-    return (
-      /*#__PURE__*/
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      _jsx(TagName, {
-        className: classNames.join(' '),
-        ...rest,
-        children: children
-      })
-    );
-  };
-  Component.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string
-  };
-  Component.defaultProps = {
-    className: null
-  };
-  return Component;
-};
-export default buildComponent;