@skyscanner/backpack-web 21.0.1 → 22.0.0-beta.1

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

@@ -1,163 +1,109 @@
-/*
- * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node, Element } from 'react';
-
-import { BpkButtonLink } from '../../bpk-component-link';
-import BpkCloseButton from '../../bpk-component-close-button';
-import BpkNavigationBar from '../../bpk-component-navigation-bar';
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkModalInner.module.scss';
-import { titlePropType, onClosePropType } from './customPropTypes';
-
-const getClassName = cssModules(STYLES);
-
-export type Props = {
-  id: string,
-  children: Node,
-  wide: boolean,
-  isIphone: boolean,
-  showHeader: boolean,
-  fullScreenOnMobile: boolean,
-  fullScreen: boolean,
-  padded: boolean,
-  dialogRef: (ref: ?HTMLElement) => void,
-  onClose: (event: SyntheticEvent<>) => void,
-  className: ?string,
-  contentClassName: ?string,
-  title: ?string,
-  closeLabel: string,
-  closeText: ?string,
-  accessoryView: ?Element<any>,
-};
-
-const BpkModalInner = (props: Props) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkComponentLink = require("../../bpk-component-link");
+var _bpkComponentCloseButton = _interopRequireDefault(require("../../bpk-component-close-button"));
+var _bpkComponentNavigationBar = _interopRequireDefault(require("../../bpk-component-navigation-bar"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkModalInnerModule = _interopRequireDefault(require("./BpkModalInner.module.css"));
+var _customPropTypes = require("./customPropTypes");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalInnerModule.default);
+const BpkModalInner = props => {
   const classNames = [getClassName('bpk-modal')];
   const contentClassNames = [getClassName('bpk-modal__content')];
   const navigationStyles = [getClassName('bpk-modal__navigation')];
-
   if (props.wide) {
     classNames.push(getClassName('bpk-modal--wide'));
   }
   if (props.className) {
     classNames.push(props.className);
   }
-
   if (props.fullScreen || props.isIphone) {
     classNames.push(getClassName('bpk-modal--full-screen'));
   } else if (props.fullScreenOnMobile) {
     classNames.push(getClassName('bpk-modal--full-screen-mobile'));
   }
-
   if (props.padded) {
     contentClassNames.push(getClassName('bpk-modal__content--padded'));
   }
-
   if (props.contentClassName) {
     contentClassNames.push(props.contentClassName);
   }
-
   const headingId = `bpk-modal-heading-${props.id}`;
-
-  const accessoryViewFinal = props.accessoryView ? (
-    <span className={getClassName('bpk-modal__accessory-view')}>
-      {props.accessoryView}
-    </span>
-  ) : null;
-
-  return (
-    <TransitionInitialMount
-      appearClassName={getClassName('bpk-modal--appear')}
-      appearActiveClassName={getClassName('bpk-modal--appear-active')}
-      transitionTimeout={300}
-    >
-      <section
-        id={props.id}
-        tabIndex="-1"
-        role="dialog"
-        aria-labelledby={props.showHeader ? headingId : null}
-        className={classNames.join(' ')}
-        ref={props.dialogRef}
-      >
-        {props.showHeader && (
-          <header className={getClassName('bpk-modal__header')}>
-            <BpkNavigationBar
-              id={headingId}
-              className={navigationStyles.join(' ')}
-              title={
-                <h2
-                  id={headingId}
-                  className={getClassName('bpk-modal__heading')}
-                >
-                  {props.title}
-                </h2>
-              }
-              leadingButton={accessoryViewFinal}
-              trailingButton={
-                props.closeText ? (
-                  <BpkButtonLink
-                    className={getClassName('bpk-modal__close-button')}
-                    onClick={props.onClose}
-                  >
-                    {/* $FlowIgnore[incompatible-type] this is perfectly good because we're already doing a null check above. THANKS FLOW */}
-                    {props.closeText}
-                  </BpkButtonLink>
-                ) : (
-                  <BpkCloseButton
-                    className={getClassName('bpk-modal__close-button')}
-                    label={props.closeLabel}
-                    onClick={props.onClose}
-                  />
-                )
-              }
-            />
-          </header>
-        )}
-        <div className={contentClassNames.join(' ')}>{props.children}</div>
-      </section>
-    </TransitionInitialMount>
-  );
+  const accessoryViewFinal = props.accessoryView ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: getClassName('bpk-modal__accessory-view'),
+    children: props.accessoryView
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkReactUtils.TransitionInitialMount, {
+    appearClassName: getClassName('bpk-modal--appear'),
+    appearActiveClassName: getClassName('bpk-modal--appear-active'),
+    transitionTimeout: 300,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+      id: props.id,
+      tabIndex: "-1",
+      role: "dialog",
+      "aria-labelledby": props.showHeader ? headingId : null,
+      className: classNames.join(' '),
+      ref: props.dialogRef,
+      children: [props.showHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+        className: getClassName('bpk-modal__header'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentNavigationBar.default, {
+          id: headingId,
+          className: navigationStyles.join(' '),
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+            id: headingId,
+            className: getClassName('bpk-modal__heading'),
+            children: props.title
+          }),
+          leadingButton: accessoryViewFinal,
+          trailingButton: props.closeText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentLink.BpkButtonLink, {
+            className: getClassName('bpk-modal__close-button'),
+            onClick: props.onClose,
+            children: props.closeText
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
+            className: getClassName('bpk-modal__close-button'),
+            label: props.closeLabel,
+            onClick: props.onClose
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: contentClassNames.join(' '),
+        children: props.children
+      })]
+    })
+  });
 };
-
-export const propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isIphone: PropTypes.bool.isRequired,
-  dialogRef: PropTypes.func.isRequired,
-  title: titlePropType,
-  onClose: onClosePropType,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  wide: PropTypes.bool,
-  showHeader: PropTypes.bool,
-  fullScreenOnMobile: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-  padded: PropTypes.bool,
-  accesoryView: PropTypes.func,
+const propTypes = {
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node.isRequired,
+  isIphone: _propTypes.default.bool.isRequired,
+  dialogRef: _propTypes.default.func.isRequired,
+  title: _customPropTypes.titlePropType,
+  onClose: _customPropTypes.onClosePropType,
+  className: _propTypes.default.string,
+  contentClassName: _propTypes.default.string,
+  closeLabel: _propTypes.default.string,
+  closeText: _propTypes.default.string,
+  wide: _propTypes.default.bool,
+  showHeader: _propTypes.default.bool,
+  fullScreenOnMobile: _propTypes.default.bool,
+  fullScreen: _propTypes.default.bool,
+  padded: _propTypes.default.bool,
+  accesoryView: _propTypes.default.func
 };
-
-export const defaultProps = {
+exports.propTypes = propTypes;
+const defaultProps = {
   title: null,
   onClose: () => null,
   className: null,
@@ -169,10 +115,10 @@ export const defaultProps = {
   fullScreenOnMobile: true,
   fullScreen: false,
   padded: true,
-  accessoryView: null,
+  accessoryView: null
 };
-
-BpkModalInner.propTypes = { ...propTypes };
-BpkModalInner.defaultProps = { ...defaultProps };
-
-export default BpkModalInner;
+exports.defaultProps = defaultProps;
+BpkModalInner.propTypes = _objectSpread({}, propTypes);
+BpkModalInner.defaultProps = _objectSpread({}, defaultProps);
+var _default = BpkModalInner;
+exports.default = _default;

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.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal{z-index:1100;width:100%;max-width:32.25rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}@media (max-width: 32.25rem){.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.3125rem){.bpk-modal--wide{max-width:50.25rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__header{box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-modal__navigation{display:flex;justify-content:space-between;background-color:#fff}.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__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}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.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:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.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__header{box-shadow:0 -1px 0 0 #c2c9cd inset}.bpk-modal__navigation{display:flex;justify-content:space-between;background-color:#fff}.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__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/customPropTypes.js

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titlePropType = exports.onClosePropType = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,41 +20,19 @@
  * 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.
- */
-
-/* @flow strict */
-
-export const titlePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+ */const titlePropType = (props, propName, componentName) => {
   const titleValue = props[propName];
-
   if (props.showHeader && (!titleValue || typeof titleValue !== 'string')) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`,
-    );
+    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`);
   }
-
   return null;
 };
-
-export const onClosePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+exports.titlePropType = titlePropType;
+const onClosePropType = (props, propName, componentName) => {
   const onCloseValue = props[propName];
-
-  if (
-    props.showHeader &&
-    (!onCloseValue || typeof onCloseValue !== 'function')
-  ) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`,
-    );
+  if (props.showHeader && (!onCloseValue || typeof onCloseValue !== 'function')) {
+    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`);
   }
-
   return null;
 };
+exports.onClosePropType = onClosePropType;

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

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bpkComponentLink = require("../../bpk-component-link");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,9 +22,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
-
-export default [...linkAttributes];
+var _default = [..._bpkComponentLink.themeAttributes];
+exports.default = _default;

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

@@ -1,3 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BpkNavigationBarButtonLink", {
+  enumerable: true,
+  get: function () {
+    return _BpkNavigationBarButtonLink.default;
+  }
+});
+Object.defineProperty(exports, "BpkNavigationBarIconButton", {
+  enumerable: true,
+  get: function () {
+    return _BpkNavigationBarIconButton.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+var _BpkNavigationBar = _interopRequireDefault(require("./src/BpkNavigationBar"));
+var _BpkNavigationBarIconButton = _interopRequireDefault(require("./src/BpkNavigationBarIconButton"));
+var _BpkNavigationBarButtonLink = _interopRequireDefault(require("./src/BpkNavigationBarButtonLink"));
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,28 +44,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import BpkNavigationBar, {
-  type Props as BpkNavigationBarProps,
-} from './src/BpkNavigationBar';
-import BpkNavigationBarIconButton, {
-  type Props as BpkNavigationBarIconButtonProps,
-} from './src/BpkNavigationBarIconButton';
-import BpkNavigationBarButtonLink, {
-  type Props as BpkNavigationBarButtonLinkProps,
-} from './src/BpkNavigationBarButtonLink';
-import themeAttributes from './src/themeAttributes';
-
-export type {
-  BpkNavigationBarProps,
-  BpkNavigationBarIconButtonProps,
-  BpkNavigationBarButtonLinkProps,
-};
-export {
-  BpkNavigationBarIconButton,
-  BpkNavigationBarButtonLink,
-  themeAttributes,
-};
-export default BpkNavigationBar;
+var _default = _BpkNavigationBar.default;
+exports.default = _default;

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

@@ -1,107 +1,75 @@
-/*
- * 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.
- */
+"use strict";
 
-/* @flow strict */
-
-import type { Node, Element } from 'react';
-import { cloneElement } from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkNavigationBar.module.scss';
-
-const getClassNames = cssModules(STYLES);
-
-export type Props = {
-  id: string,
-  title: Node,
-  className: ?string,
-  leadingButton: ?Element<any>,
-  trailingButton: ?Element<any>,
-  sticky: ?boolean,
-};
-
-const cloneWithClass = (elem: Element<any>, newStyle: string) => {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-text"));
+var _BpkNavigationBarModule = _interopRequireDefault(require("./BpkNavigationBar.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "id", "leadingButton", "sticky", "title", "trailingButton"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const getClassNames = (0, _bpkReactUtils.cssModules)(_BpkNavigationBarModule.default);
+const cloneWithClass = (elem, newStyle) => {
   const className = getClassNames(elem.props.className, newStyle);
-  return cloneElement(elem, { ...elem.props, className });
+  return /*#__PURE__*/(0, _react.cloneElement)(elem, _objectSpread(_objectSpread({}, elem.props), {}, {
+    className
+  }));
 };
-
-const BpkNavigationBar = (props: Props) => {
+const BpkNavigationBar = props => {
   const {
-    className,
-    id,
-    leadingButton,
-    sticky,
-    title,
-    trailingButton,
-    ...rest
-  } = props;
+      className,
+      id,
+      leadingButton,
+      sticky,
+      title,
+      trailingButton
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
 
   // If the title is a component that sets its own id we want the aria-labelledby on the nav to match this so it can find the element
   // Otherwise if its just a string we set the id on the title component.
-  const titleId =
-    typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
-
+  const titleId = typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <nav
-      aria-labelledby={titleId}
-      className={getClassNames(
-        'bpk-navigation-bar',
-        sticky && 'bpk-navigation-bar__sticky',
-        className,
-      )}
-      {...rest}
-    >
-      {leadingButton &&
-        cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item')}
-      {typeof title === 'string' ? (
-        <BpkText
-          id={titleId}
-          textStyle={TEXT_STYLES.heading5}
-          className={getClassNames('bpk-navigation-bar__title')}
-        >
-          {title}
-        </BpkText>
-      ) : (
-        title
-      )}
-      {trailingButton &&
-        cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')}
-    </nav>
+    (0, _jsxRuntime.jsxs)("nav", _objectSpread(_objectSpread({
+      "aria-labelledby": titleId,
+      className: getClassNames('bpk-navigation-bar', sticky && 'bpk-navigation-bar__sticky', className)
+    }, rest), {}, {
+      children: [leadingButton && cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item'), typeof title === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+        id: titleId,
+        textStyle: _bpkComponentText.TEXT_STYLES.heading5,
+        className: getClassNames('bpk-navigation-bar__title'),
+        children: title
+      }) : title, trailingButton && cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')]
+    }))
   );
 };
-
 BpkNavigationBar.propTypes = {
-  title: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  leadingButton: PropTypes.element,
-  trailingButton: PropTypes.element,
-  sticky: PropTypes.bool,
+  title: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string,
+  leadingButton: _propTypes.default.element,
+  trailingButton: _propTypes.default.element,
+  sticky: _propTypes.default.bool
 };
-
 BpkNavigationBar.defaultProps = {
   className: null,
   leadingButton: null,
   trailingButton: null,
-  sticky: false,
+  sticky: false
 };
-
-export default BpkNavigationBar;
+var _default = BpkNavigationBar;
+exports.default = _default;

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

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