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

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -1,21 +1,3 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { ComponentType, ReactElement, UIEvent, ComponentProps } from 'react';
 export type WithOpenEventsProps = {
     /**
@@ -45,8 +27,8 @@ type EventHandlers = {
     'aria-readonly'?: boolean;
 };
 type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
-declare const withOpenEvents: <P extends object>(InputComponent: ComponentType<P>) => {
-    new (props: P & WithOpenEventsProps & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly">): {
+declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: ComponentType<P>) => {
+    new (props: P & WithOpenEventsProps & InputProps): {
         focusCanOpen: boolean;
         handleTouchEnd: (event: UIEvent) => void;
         handleFocus: () => void;

package/bpk-component-input/src/withOpenEvents.js

@@ -17,10 +17,8 @@
  */
 
 import { Component } from 'react';
-import { cssModules, wrapDisplayName } from "../../bpk-react-utils";
-import STYLES from "./BpkInput.module.css";
+import { wrapDisplayName } from "../../bpk-react-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const KEYCODES = {
   ENTER: 'Enter',
   SPACEBAR: 'Space'
@@ -41,7 +39,7 @@ const withEventHandler = (fn, eventHandler) => e => {
     eventHandler(e);
   }
 };
-const withOpenEvents = InputComponent => {
+const withOpenEvents = WithOpenEventsInputComponent => {
   class WithOpenEvents extends Component {
     static defaultProps = {
       // Custom props
@@ -101,10 +99,6 @@ const withOpenEvents = InputComponent => {
         onTouchEnd,
         ...rest
       } = this.props;
-      const classNames = [getClassName('bpk-input--with-open-events')];
-      if (className) {
-        classNames.push(className);
-      }
       const eventHandlers = {
         onClick: withEventHandler(onOpen, onClick),
         // @ts-expect-error for some reason the type KeyboardEvent was not being recognized as
@@ -122,17 +116,15 @@ const withOpenEvents = InputComponent => {
       // Needed on mobile as some Android devices do not trigger onClick or onTouch when TalkBack is active but do trigger onFocus
       eventHandlers.onFocus = withEventHandler(this.handleFocus, onFocus);
       eventHandlers.onBlur = withEventHandler(this.handleBlur, onBlur);
-      return /*#__PURE__*/_jsx(InputComponent
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
-        className: classNames.join(' '),
+      return /*#__PURE__*/_jsx(WithOpenEventsInputComponent, {
+        className: className,
         ...eventHandlers,
-        ...rest
+        ...rest,
+        "data-openable": true // This allows for conditional styling within BpkInput
       });
     }
   }
-  WithOpenEvents.displayName = wrapDisplayName(InputComponent, 'withOpenEvents');
+  WithOpenEvents.displayName = wrapDisplayName(WithOpenEventsInputComponent, 'withOpenEvents');
   return WithOpenEvents;
 };
 export default withOpenEvents;

package/bpk-component-list/src/BpkList.js

@@ -28,15 +28,12 @@ const BpkList = props => {
     ordered,
     title
   } = props;
-  const TagName = ordered ? 'ol' : 'ul';
+  const ListElements = ordered ? 'ol' : 'ul';
   const classNames = getClassName('bpk-list', className);
-  return /*#__PURE__*/_jsx(TagName, {
+  return /*#__PURE__*/_jsx(ListElements, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    title: title
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
+    title: title,
     className: classNames,
     children: children
   });

package/bpk-component-loading-button/src/BpkLoadingButton.d.ts

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import type { ReactElement, ReactNode } from 'react';
+export declare const ICON_POSITION: {
+    LEADING: string;
+    TRAILING: string;
+};
+type LoadingProps = {
+    featured?: boolean;
+    secondaryOnDark?: boolean;
+    primaryOnLight?: boolean;
+    primaryOnDark?: boolean;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    secondary?: boolean;
+    destructive?: boolean;
+    large?: boolean;
+    link?: boolean;
+    linkOnDark?: boolean;
+    loading: boolean;
+    iconOnly: boolean;
+    icon?: ReactElement<any>;
+    iconPosition: string;
+    iconDisabled?: ReactElement<any>;
+    iconLoading?: ReactElement<any>;
+};
+declare const BpkLoadingButton: {
+    (props: LoadingProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        secondary: PropTypes.Requireable<boolean>;
+        destructive: PropTypes.Requireable<boolean>;
+        link: PropTypes.Requireable<boolean>;
+        linkOnDark: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        iconOnly: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        iconPosition: PropTypes.Requireable<string>;
+        iconDisabled: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        iconLoading: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+    defaultProps: {
+        className: null;
+        disabled: boolean;
+        secondary: boolean;
+        destructive: boolean;
+        large: boolean;
+        link: boolean;
+        linkOnDark: boolean;
+        loading: boolean;
+        iconOnly: boolean;
+        icon: null;
+        iconPosition: string;
+        iconDisabled: null;
+        iconLoading: null;
+    };
+};
+export default BpkLoadingButton;

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -14,8 +14,10 @@
  * 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 BpkButton from "../../bpk-component-button";
+ */
+
+import PropTypes from 'prop-types';
+import { BUTTON_TYPES, BpkButtonV2, SIZE_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
 import ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
@@ -58,7 +60,6 @@ const getLoadingIcon = props => {
 const BpkLoadingButton = props => {
   const {
     children,
-    className,
     disabled,
     icon,
     iconDisabled,
@@ -66,8 +67,6 @@ const BpkLoadingButton = props => {
     iconOnly,
     iconPosition,
     large,
-    link,
-    linkOnDark,
     loading,
     ...rest
   } = props;
@@ -76,28 +75,49 @@ const BpkLoadingButton = props => {
   const buttonIcon = getPropsIcon(props) || getEnabledIcon(large);
   const [child0, child1, child2] = iconPosition === ICON_POSITION.LEADING ? [buttonIcon, spacer, children] : [children, spacer, buttonIcon];
   const loadingIcon = getLoadingIcon(props);
-  const classNames = getClassName(loading && 'bpk-loading-button', loading && (link || linkOnDark) && 'bpk-loading-button--link', className);
-  const iconClassNames = getClassName('bpk-loading-button__icon', large && 'bpk-loading-button__icon--large', iconOnly && (large ? 'bpk-loading-button__icon--large-icon-only' : 'bpk-loading-button__icon--icon-only'), (link || linkOnDark) && 'bpk-loading-button__icon--link');
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs(BpkButton, {
-      iconOnly: iconOnly,
-      disabled: showBtnDisabled,
-      large: large
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: classNames,
-      link: link,
-      linkOnDark: linkOnDark,
-      ...rest,
+  const iconClassNames = getClassName('bpk-loading-button__icon');
+  let type = BUTTON_TYPES.primary;
+  if (props.link) {
+    type = BUTTON_TYPES.link;
+  }
+  if (props.linkOnDark) {
+    type = BUTTON_TYPES.linkOnDark;
+  }
+  if (props.featured) {
+    type = BUTTON_TYPES.featured;
+  }
+  if (props.destructive) {
+    type = BUTTON_TYPES.destructive;
+  }
+  if (props.secondaryOnDark) {
+    type = BUTTON_TYPES.secondaryOnDark;
+  }
+  if (props.secondary) {
+    type = BUTTON_TYPES.secondary;
+  }
+  if (props.primaryOnLight) {
+    type = BUTTON_TYPES.primaryOnLight;
+  }
+  if (props.primaryOnDark) {
+    type = BUTTON_TYPES.primaryOnDark;
+  }
+  return /*#__PURE__*/_jsx(BpkButtonV2, {
+    iconOnly: iconOnly,
+    disabled: showBtnDisabled,
+    size: large ? SIZE_TYPES.large : SIZE_TYPES.small,
+    type: type,
+    ...rest,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-loading-button__container'),
       children: [loading && /*#__PURE__*/_jsx("span", {
         className: iconClassNames,
         children: loadingIcon
-      }), child0, child1, child2]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: getClassName(loading ? "bpk-loading-button--hidden" : "bpk-loading-button--visible"),
+        children: [child0, child1, child2]
+      })]
     })
-  );
+  });
 };
 BpkLoadingButton.propTypes = {
   children: PropTypes.node.isRequired,

package/bpk-component-loading-button/src/BpkLoadingButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-loading-button{position:relative;overflow:hidden}.bpk-loading-button--link{visibility:hidden}.bpk-loading-button__icon{position:absolute;display:inline-flex;visibility:visible;z-index:1;width:calc(100% - 2rem);height:calc(100% - 0.75rem);justify-content:center;align-items:center;background-color:inherit}.bpk-loading-button__icon--large{height:calc(100% - 1.5rem)}.bpk-loading-button__icon--icon-only{width:calc(100% - 1.25rem)}.bpk-loading-button__icon--large-icon-only{width:calc(100% - 1.5rem)}.bpk-loading-button__icon--link{width:100%;background:unset}
+.bpk-loading-button__container{display:inline-flex;justify-content:center;align-items:center}.bpk-loading-button__icon{position:absolute;display:inline-flex}.bpk-loading-button--hidden{visibility:hidden}.bpk-loading-button--visible{visibility:visible}

package/bpk-component-map/src/BpkBasicMapMarker.d.ts

@@ -1,28 +1,15 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import type { Node } from 'react';
+import PropTypes from 'prop-types';
+import type { ReactNode } from 'react';
 import { type LatLong } from './common-types';
-
-export type Props = {
-  children: Node;
-  position: LatLong;
+type Props = {
+    children: ReactNode;
+    position: LatLong;
+};
+declare const BpkBasicMapMarker: {
+    (props: Props): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        position: any;
+    };
 };
-
-declare const BpkBasicMapMarker: ({ children, position }: Props) => JSX.Element;
-
 export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkBasicMapMarker.js

@@ -14,8 +14,12 @@
  * 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 PropTypes from 'prop-types';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkOverlayView from "./BpkOverlayView";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { LatLongPropType } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getPixelPositionOffset = (width, height) => ({
@@ -28,16 +32,12 @@ const BpkBasicMapMarker = props => {
     position,
     ...rest
   } = props;
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkOverlayView, {
-      position: position,
-      getPixelPositionOffset: getPixelPositionOffset,
-      ...rest,
-      children: children
-    })
-  );
+  return /*#__PURE__*/_jsx(BpkOverlayView, {
+    position: position,
+    getPixelPositionOffset: getPixelPositionOffset,
+    ...rest,
+    children: children
+  });
 };
 BpkBasicMapMarker.propTypes = {
   children: PropTypes.node.isRequired,

package/bpk-component-map/src/BpkMap.js

@@ -84,7 +84,8 @@ const BpkMap = props => {
       rotateControl: false,
       clickableIcons: false,
       // https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle
-      styles: mapOptionStyles
+      styles: mapOptionStyles,
+      scaleControl: true
     },
     onDragEnd: () => {
       if (ref && ref.current && onRegionChange) {

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.d.ts

@@ -1,21 +1,3 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { MouseEvent, ReactNode } from 'react';
 export declare const MARKER_STATUSES: {
     readonly unselected: "unselected";

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

@@ -42,14 +42,6 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   const scrollValue = rtl ? -Math.floor(scrollLeft) : Math.ceil(scrollLeft);
   const showLeadingIndicator = scrollValue > 0;
   const showTrailingIndicator = scrollValue < scrollWidth - offsetWidth;
-  const showLeftIndicator = rtl ? showTrailingIndicator : showLeadingIndicator;
-  const showRightIndicator = rtl ? showLeadingIndicator : showTrailingIndicator;
-  if (showLeftIndicator) {
-    classNames.push(getClassName('bpk-mobile-scroll-container--left-indicator'));
-  }
-  if (showRightIndicator) {
-    classNames.push(getClassName('bpk-mobile-scroll-container--right-indicator'));
-  }
   if (showLeadingIndicator && leadingIndicatorClassName) {
     classNames.push(leadingIndicatorClassName);
   }
@@ -162,10 +154,7 @@ class BpkMobileScrollContainer extends Component {
           "aria-label": ariaLabel,
           ref: el => {
             this.innerEl = el;
-          }
-          // TODO: className to be removed
-          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-          ,
+          },
           className: getClassName('bpk-mobile-scroll-container__inner'),
           children: children
         })

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:" ";display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, white, rgba(255, 255, 255, 0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:" ";display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, white, rgba(255, 255, 255, 0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}
+.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}

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

@@ -1,26 +1,9 @@
-/*
- * 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 BpkModal from './src/BpkModal';
+import { MODAL_STYLING } from './src/BpkModalInner';
 import { BpkModalV2 } from './src/BpkModalV2/BpkModal';
+import { propTypes, defaultProps } from './src/legacy-prop-types';
 import themeAttributes from './src/themeAttributes';
-import BpkModal from './src/BpkModal';
 import type { Props } from './src/BpkModal';
-import { propTypes, defaultProps } from './src/legacy-prop-types';
 export type BpkModalProps = Props;
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2 };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, MODAL_STYLING };

package/bpk-component-modal/src/BpkModal.d.ts

@@ -1,21 +1,3 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { ReactNode } from 'react';
 import type { Props as ModalDialogProps, ModalStyle } from './BpkModalInner';
 export type Props = Partial<ModalDialogProps> & {
@@ -25,8 +7,8 @@ export type Props = Partial<ModalDialogProps> & {
     isOpen: boolean;
     closeOnScrimClick?: boolean;
     closeOnEscPressed?: boolean;
-    modalStyle?: ModalStyle;
     renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    modalStyle?: ModalStyle;
     onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';
     }) => void;
@@ -38,5 +20,5 @@ export type Props = Partial<ModalDialogProps> & {
      */
     getApplicationElement: () => HTMLElement | null;
 };
-declare const BpkModal: ({ accessoryView, className, closeLabel, closeOnEscPressed, closeOnScrimClick, closeText, contentClassName, dialogRef, fullScreen, fullScreenOnMobile, isIphone, isOpen, onClose, padded, renderTarget, showHeader, title, wide, ...rest }: Props) => JSX.Element;
+declare const BpkModal: ({ accessoryView, className, closeLabel, closeOnEscPressed, closeOnScrimClick, closeText, contentClassName, dialogRef, fullScreen, fullScreenOnMobile, isIphone, isOpen, modalStyle, onClose, padded, renderTarget, showHeader, title, wide, ...rest }: Props) => JSX.Element;
 export default BpkModal;

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

@@ -63,10 +63,7 @@ const BpkModal = ({
       closeOnScrimClick: closeOnScrimClick,
       containerClassName: containerClass.join(' '),
       isIphone: isIphone,
-      title: title
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
+      title: title,
       className: className,
       contentClassName: contentClassName,
       closeLabel: closeLabel,

package/bpk-component-modal/src/BpkModalInner.d.ts

@@ -1,23 +1,4 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import type { ReactNode } from 'react';
-import { ModalStyle } from './BpkModalInner';
 export type Props = {
     id: string;
     children: ReactNode;
@@ -40,5 +21,10 @@ export type Props = {
      */
     accessoryView?: ReactNode;
 };
-declare const BpkModalInner: ({ accessoryView, children, className, closeLabel, closeText, contentClassName, dialogRef, fullScreen, fullScreenOnMobile, id, isIphone, onClose, padded, showHeader, title, wide, }: Props) => JSX.Element;
+export declare const MODAL_STYLING: {
+    default: string;
+    surfaceContrast: string;
+};
+export type ModalStyle = (typeof MODAL_STYLING)[keyof typeof MODAL_STYLING];
+declare const BpkModalInner: ({ accessoryView, children, className, closeLabel, closeText, contentClassName, dialogRef, fullScreen, fullScreenOnMobile, id, isIphone, modalStyle, onClose, padded, showHeader, title, wide, }: Props) => JSX.Element;
 export default BpkModalInner;

package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts

@@ -1,38 +1,18 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/// <reference types="react" />
 import type { ReactNode } from 'react';
-import { ModalStyle } from '../BpkModalInner';
-
+import type { ModalStyle } from '../BpkModalInner';
 export type Props = {
-  id: string | undefined;
-  ariaLabelledby: string;
-  children: ReactNode;
-  closeLabel: string;
-  fullScreenOnDesktop?: boolean;
-  isOpen: boolean;
-  noFullScreenOnMobile?: boolean;
-  onClose: () => void | null;
-  padded?: boolean;
-  showHeader?: boolean;
-  title?: string | null;
-  wide?: boolean;
-  modalStyle?: ModalStyle;
+    id: string | undefined;
+    ariaLabelledby: string;
+    children: ReactNode;
+    closeLabel: string;
+    fullScreenOnDesktop?: boolean;
+    isOpen: boolean;
+    noFullScreenOnMobile?: boolean;
+    onClose: () => void | null;
+    padded?: boolean;
+    showHeader?: boolean;
+    title?: string | null;
+    wide?: boolean;
+    modalStyle?: ModalStyle;
 };
 export declare const BpkModalV2: (props: Props) => JSX.Element | null;

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

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

package/bpk-component-navigation-bar/index.d.ts

@@ -0,0 +1,7 @@
+import BpkNavigationBar, { type Props as BpkNavigationBarProps, BAR_STYLES } from './src/BpkNavigationBar';
+import BpkNavigationBarButtonLink, { type Props as BpkNavigationBarButtonLinkProps } from './src/BpkNavigationBarButtonLink';
+import BpkNavigationBarIconButton, { type Props as BpkNavigationBarIconButtonProps } from './src/BpkNavigationBarIconButton';
+import themeAttributes from './src/themeAttributes';
+export type { BpkNavigationBarProps, BpkNavigationBarIconButtonProps, BpkNavigationBarButtonLinkProps, };
+export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes, BAR_STYLES, };
+export default BpkNavigationBar;

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

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { Tag, TextStyle } from '../../bpk-component-text/src/BpkText';
+export declare const BAR_STYLES: {
+    default: string;
+    onDark: string;
+};
+export type BarStyle = (typeof BAR_STYLES)[keyof typeof BAR_STYLES];
+export type Props = {
+    id: string;
+    title: ReactNode;
+    titleTextStyle?: TextStyle;
+    titleTagName?: Tag;
+    className?: string;
+    leadingButton?: ReactElement | null;
+    trailingButton?: ReactElement | null;
+    sticky?: boolean;
+    barStyle?: BarStyle;
+    [rest: string]: any;
+};
+declare const BpkNavigationBar: (props: Props) => JSX.Element;
+export default BpkNavigationBar;

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

@@ -33,6 +33,8 @@ const BpkNavigationBar = props => {
     leadingButton,
     sticky = false,
     title,
+    titleTagName = "span",
+    titleTextStyle = TEXT_STYLES.heading5,
     trailingButton,
     ...rest
   } = props;
@@ -51,10 +53,14 @@ const BpkNavigationBar = props => {
       className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
       children: /*#__PURE__*/_jsx(BpkText, {
         id: titleId,
-        textStyle: TEXT_STYLES.heading5,
+        textStyle: titleTextStyle,
+        tagName: titleTagName,
         children: title
       })
-    }) : title, trailingButton && /*#__PURE__*/_jsx("div", {
+    }) : /*#__PURE__*/_jsx("div", {
+      className: getClassNames('bpk-navigation-bar__title-container'),
+      children: title
+    }), trailingButton && /*#__PURE__*/_jsx("div", {
       className: getClassNames('bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item-${barStyle}`),
       children: trailingButton
     })]