@skyscanner/backpack-web 33.6.0 → 33.8.0

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-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/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-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/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
     })]

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

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir=rtl] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir=rtl] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}
+.bpk-navigation-bar{position:relative;display:grid;min-height:3.5rem;padding:1rem;grid-template-rows:auto;grid-template-columns:minmax(1.5rem, auto) minmax(1rem, 1fr) minmax(1.5rem, auto);justify-content:space-between;align-items:center;gap:1rem;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{grid-column:2;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title :first-child{display:inline}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__title-container{justify-self:center}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{grid-column:1;justify-self:start}.bpk-navigation-bar__trailing-item{grid-column:3;justify-self:end}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}

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

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

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

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

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

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

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

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

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

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