@skyscanner/backpack-web 34.2.0 → 34.4.0

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/BpkDialogInner.js

@@ -50,11 +50,9 @@ const BpkDialogInner = props => {
       "aria-modal": ariaModal,
       className: classNames,
       ref: dialogRef,
-      children: [flare && /*#__PURE__*/_jsx(BpkContentBubble
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: flareClassNames
+      children: [flare && /*#__PURE__*/_jsx("div", {
+        className: flareClassNames,
+        children: /*#__PURE__*/_jsx(BpkContentBubble, {})
       }), /*#__PURE__*/_jsx("div", {
         className: contentClassNames,
         children: children

package/bpk-component-dialog/src/BpkDialogInner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-dialog-inner{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;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#05203c}
+.bpk-dialog-inner{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;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{display:flex;height:15rem;border-radius:inherit;background-color:#05203c}

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-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-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',
@@ -104,6 +107,7 @@ const BpkPopover = ({
       context: context,
       modal: false,
       children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-popover--container'),
         ref: refs.setFloating,
         style: floatingStyles,
         ...getFloatingProps(),
@@ -134,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);
@@ -155,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-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}
+.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-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.2.0",
+  "version": "34.4.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-button/src/BpkButtonDestructive.js

@@ -1,48 +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 BpkButtonBase, { cssModules } from "./BpkButtonBase";
-import { defaultProps, propTypes } from "./common-types";
-import STYLES from "./BpkButtonDestructive.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkButtonDestructive = props => {
-  const {
-    className,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-button--destructive')];
-  if (className) {
-    classNames.push(className);
-  }
-  const classNamesFinal = classNames.join(' ');
-  return /*#__PURE__*/_jsx(BpkButtonBase
-  // TODO: className to be removed
-  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-  , {
-    className: classNamesFinal
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    ,
-    ...rest
-  });
-};
-BpkButtonDestructive.propTypes = {
-  ...propTypes
-};
-BpkButtonDestructive.defaultProps = {
-  ...defaultProps
-};
-export default BpkButtonDestructive;

package/bpk-component-button/src/BpkButtonDestructive.module.css

@@ -1,18 +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.
- */
-.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}