@skyscanner/backpack-web 0.0.1 → 0.0.4

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

@@ -19,9 +19,9 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import ClearIcon from 'bpk-component-icon/sm/close-circle';
-import { withButtonAlignment } from 'bpk-component-icon';
-import { cssModules } from 'bpk-react-utils';
+import ClearIcon from '../../bpk-component-icon/sm/close-circle';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkClearButton.module.scss';
 

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

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkClearButton from './BpkClearButton';
 import STYLES from './BpkInput.module.scss';

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

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, wrapDisplayName } from 'bpk-react-utils';
+import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './BpkInput.module.scss';
 

package/bpk-component-label/src/BpkLabel.js

@@ -19,7 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkLabel.module.scss';
 

package/bpk-component-link/src/BpkButtonLink.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import themeAttributes from './themeAttributes';
 import STYLES from './BpkLink.module.scss';

package/bpk-component-link/src/BpkLink.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import themeAttributes, {
   linkAlternateThemeAttributes,

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

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkList.module.scss';
 

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

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkList.module.scss';
 

package/bpk-component-loading-button/examples.js

@@ -24,9 +24,9 @@ import {
   withButtonAlignment,
   withLargeButtonAlignment,
   withRtlSupport,
-} from 'bpk-component-icon';
-import BaggageIconSm from 'bpk-component-icon/sm/baggage';
-import BaggageIconLg from 'bpk-component-icon/lg/baggage';
+} from '../../bpk-component-icon';
+import BaggageIconSm from '../../bpk-component-icon/sm/baggage';
+import BaggageIconLg from '../../bpk-component-icon/lg/baggage';
 
 import BpkLoadingButton, { ICON_POSITION } from './index';
 

package/bpk-component-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-component-spinner": "^5.1.0",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",

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

@@ -20,15 +20,15 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkButton from 'bpk-component-button';
-import { BpkSpinner, BpkLargeSpinner } from 'bpk-component-spinner';
+import BpkButton from '../../bpk-component-button';
+import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';
 import {
   withButtonAlignment,
   withLargeButtonAlignment,
   withRtlSupport,
-} from 'bpk-component-icon';
-import ArrowIconSm from 'bpk-component-icon/sm/long-arrow-right';
-import ArrowIconLg from 'bpk-component-icon/lg/long-arrow-right';
+} from '../../bpk-component-icon';
+import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
+import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right';
 
 export const ICON_POSITION = {
   LEADING: 'leading',

package/bpk-component-map/examples.js

@@ -20,12 +20,12 @@
 import React, { Component, type Node } from 'react';
 import PropTypes from 'prop-types';
 import { action } from 'bpk-storybook-utils';
-import BpkText from 'bpk-component-text';
-import { withRtlSupport } from 'bpk-component-icon';
-import LandmarkIconSm from 'bpk-component-icon/sm/landmark';
-import FoodIconSm from 'bpk-component-icon/sm/food';
-import ParkingIconSm from 'bpk-component-icon/sm/parking';
-import HotelIconSm from 'bpk-component-icon/sm/hotels';
+import BpkText from '../../bpk-component-text';
+import { withRtlSupport } from '../../bpk-component-icon';
+import LandmarkIconSm from '../../bpk-component-icon/sm/landmark';
+import FoodIconSm from '../../bpk-component-icon/sm/food';
+import ParkingIconSm from '../../bpk-component-icon/sm/parking';
+import HotelIconSm from '../../bpk-component-icon/sm/hotels';
 
 import BpkMap, {
   BpkOverlayView,

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,8 +24,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-text": "^6.1.1",
     "bpk-storybook-utils": "^1.1.0",
     "prop-types": "^15.5.8"
   }

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

@@ -20,7 +20,7 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkIconMarkerBackground from './BpkIconMarkerBackground';
 import { LatLongPropType, type LatLong } from './common-types';

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

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkIconMarkerBackground.module.scss';
 

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

@@ -20,11 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, {
-  WEIGHT_STYLES,
-  TEXT_STYLES,
-} from 'bpk-component-text/src/BpkText';
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import BpkBasicMapMarker from './BpkBasicMapMarker';
@@ -92,11 +89,10 @@ const BpkPriceMarker = (props: Props) => {
       >
         <BpkText
           className={classNames}
-          weight={WEIGHT_STYLES.bold}
           textStyle={
             status === PRICE_MARKER_STATUSES.focused
-              ? TEXT_STYLES.base
-              : TEXT_STYLES.sm
+              ? TEXT_STYLES.label1
+              : TEXT_STYLES.label2
           }
         >
           {label}

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

@@ -18,8 +18,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { BpkLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
-import { cssModules } from 'bpk-react-utils';
+import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './DefaultLoadingElement.module.scss';
 

package/bpk-component-mobile-scroll-container/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 

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

@@ -21,7 +21,7 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import React, { Component, type Node } from 'react';
-import { cssModules, isRTL } from 'bpk-react-utils';
+import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkMobileScrollContainer.module.scss';
 

package/bpk-component-modal/examples.js

@@ -20,12 +20,12 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, Component, type Element } from 'react';
-import { cssModules, withDefaultProps } from 'bpk-react-utils';
-import BpkButton from 'bpk-component-button';
-import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
-import { withAlignment, withRtlSupport } from 'bpk-component-icon';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import BpkText from 'bpk-component-text';
+import { cssModules, withDefaultProps } from '../bpk-react-utils';
+import BpkButton from '../../bpk-component-button';
+import { BpkNavigationBarButtonLink } from '../../bpk-component-navigation-bar';
+import { withAlignment, withRtlSupport } from '../../bpk-component-icon';
+import ArrowIcon from '../../bpk-component-icon/sm/long-arrow-left';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {
   lineHeightBase,
   iconSizeSm,
@@ -43,7 +43,7 @@ const ArrowIconWithRtl = withAlignment(
 const getClassName = cssModules(STYLES);
 
 const Paragraph = withDefaultProps(BpkText, {
-  textStyle: 'base',
+  textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'p',
   className: getClassName('bpk-modal-paragraph'),
 });
@@ -272,7 +272,7 @@ const WithAccessoryViewExample = () => (
     accessoryView={
       <BpkNavigationBarButtonLink
         label="Close"
-        onClick={() => {}}
+        onClick={() => { }}
         className={getClassName('bpk-modal__leading-button')}
       >
         <div>

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-close-button": "^3.1.1",
+    "bpk-component-icon": "^9.2.1",
     "bpk-component-link": "^3.1.0",
-    "bpk-component-navigation-bar": "^3.1.0",
+    "bpk-component-navigation-bar": "^3.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "bpk-scrim-utils": "^5.1.0",
@@ -28,6 +28,6 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

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

@@ -20,8 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { withScrim } from 'bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from 'bpk-react-utils';
+import { withScrim } from '../../bpk-react-utils';
+import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {
@@ -45,12 +45,12 @@ export type Props = {
   // diff will suffice for now.
   ...$Exact<$Diff<ModalDialogProps, ScrimProps>>,
   isOpen: boolean,
-  isIphone: boolean,
-  closeOnScrimClick: boolean,
-  closeOnEscPressed: boolean,
-  renderTarget: ?() => ?HTMLElement,
-  target: ?((() => ?HTMLElement) | Element<any>),
-  onClose: (event: SyntheticEvent<>) => void | null,
+    isIphone: boolean,
+      closeOnScrimClick: boolean,
+        closeOnEscPressed: boolean,
+          renderTarget: ?() => ? HTMLElement,
+            target: ?((() => ? HTMLElement) | Element < any >),
+              onClose: (event: SyntheticEvent<>) => void | null,
 };
 
 const BpkModal = (props: Props) => {

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

@@ -18,12 +18,12 @@
 
 /* @flow strict */
 
-import { BpkButtonLink } from 'bpk-component-link';
+import { BpkButtonLink } from '../../bpk-component-link';
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkCloseButton from 'bpk-component-close-button';
-import BpkNavigationBar from 'bpk-component-navigation-bar';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+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';

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from 'bpk-component-link';
+import { themeAttributes as linkAttributes } from '../../bpk-component-link';
 
 export default [...linkAttributes];

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

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './AirlineLogo.module.scss';
 

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

@@ -20,10 +20,10 @@
 
 import React from 'react';
 import { action } from 'bpk-storybook-utils';
-import { withRtlSupport } from 'bpk-component-icon';
-import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import CloseIcon from 'bpk-component-icon/sm/close';
-import { cssModules } from 'bpk-react-utils';
+import { withRtlSupport } from '../../bpk-component-icon';
+import ArrowIcon from '../../bpk-component-icon/sm/long-arrow-left';
+import CloseIcon from '../../bpk-component-icon/sm/close';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 import AirlineLogo from './AirlineLogo';

package/bpk-component-navigation-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.0",
+    "bpk-component-close-button": "^3.1.1",
     "bpk-component-link": "^3.1.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-text": "^6.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-storybook-utils": "^1.1.0"
   }
 }

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

@@ -20,8 +20,8 @@
 
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { WEIGHT_STYLES } from 'bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkNavigationBar.module.scss';
 
@@ -73,7 +73,7 @@ const BpkNavigationBar = (props: Props) => {
       {typeof title === 'string' ? (
         <BpkText
           id={titleId}
-          weight={WEIGHT_STYLES.bold}
+          textStyle={TEXT_STYLES.label1}
           className={getClassNames('bpk-navigation-bar__title')}
         >
           {title}

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

@@ -21,8 +21,8 @@
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here
-import { BpkButtonLink } from 'bpk-component-link';
-import { cssModules } from 'bpk-react-utils';
+import { BpkButtonLink } from '../../bpk-component-link';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkNavigationBarButtonLink.module.scss';
 

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

@@ -21,8 +21,8 @@
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here
-import BpkIconButton from 'bpk-component-close-button';
-import { cssModules } from 'bpk-react-utils';
+import BpkIconButton from '../../bpk-component-close-button';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkNavigationBarIconButton.module.scss';
 

package/bpk-component-navigation-stack/examples.js

@@ -19,8 +19,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
+import { cssModules } from '../bpk-react-utils';
+import { updateOnDirectionChange } from '../../bpk-component-rtl-toggle';
 
 import STYLES from './examples.module.scss';
 import {

package/bpk-component-navigation-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
   "repository": {
@@ -25,8 +25,8 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-navigation-bar": "^3.1.0",
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-navigation-bar": "^3.1.1",
     "bpk-component-rtl-toggle": "^3.1.0"
   }
 }

package/bpk-component-navigation-stack/src/BpkNavigationStack.js

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import { cssModules, isRTL } from 'bpk-react-utils';
+import { cssModules, isRTL } from '../../bpk-react-utils';
 import React, { Children, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
@@ -87,12 +87,11 @@ class BpkNavigationStack extends React.Component<Props, State> {
           className={getClassName(
             'bpk-navigation-stack__view-track',
             transition &&
-              `bpk-navigation-stack__view-track--view-${transition}`,
+            `bpk-navigation-stack__view-track--view-${transition}`,
           )}
           style={{
-            transform: `translateX(${
-              lastIndex === 0 ? '0%' : `${isRTL() ? '' : '-'}${lastIndex}00%`
-            })`,
+            transform: `translateX(${lastIndex === 0 ? '0%' : `${isRTL() ? '' : '-'}${lastIndex}00%`
+              })`,
           }}
         >
           {Children.map(views, (view, idx) => (

package/bpk-component-navigation-stack/stories-components.js

@@ -20,17 +20,17 @@
 
 import BpkNavigationBar, {
   BpkNavigationBarIconButton,
-} from 'bpk-component-navigation-bar';
-import BpkButton from 'bpk-component-button';
-import { cssModules } from 'bpk-react-utils';
-import { withRtlSupport } from 'bpk-component-icon';
+} from '../../bpk-component-navigation-bar';
+import BpkButton from '../../bpk-component-button';
+import { cssModules } from '../bpk-react-utils';
+import { withRtlSupport } from '../../bpk-component-icon';
 import React, {
   type Element,
   type ComponentType,
   type ElementConfig,
 } from 'react';
-import BpkLeftArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import BpkRightArrowIcon from 'bpk-component-icon/sm/long-arrow-right';
+import BpkLeftArrowIcon from '../../bpk-component-icon/sm/long-arrow-left';
+import BpkRightArrowIcon from '../../bpk-component-icon/sm/long-arrow-right';
 
 import STYLES from './examples.module.scss';
 
@@ -53,15 +53,15 @@ export const View = ({
 }: {
   children: ({
     index: number,
-    pushView: ?(Element<any>) => mixed,
-    popView: ?() => mixed,
-  }) => ?Element<any>,
-  index: number,
-  pushView: ?(Element<any>) => mixed,
-  popView: ?() => mixed,
-  className: ?string,
-  noNavBar: boolean,
-  centered: boolean,
+    pushView: ? (Element < any >) => mixed,
+    popView: ? () => mixed,
+  }) => ?Element < any >,
+    index: number,
+      pushView: ?(Element < any >) => mixed,
+        popView: ?() => mixed,
+          className: ?string,
+            noNavBar: boolean,
+              centered: boolean,
 }) => (
   // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
   <section
@@ -93,8 +93,8 @@ export const SimpleNav = ({
   pushView,
 }: {
   index: number,
-  pushView: ?(Element<any>) => mixed,
-  popView: ?() => mixed,
+  pushView: ?(Element < any >) => mixed,
+    popView: ?() => mixed,
 }) => (
   <div>
     <BpkButton
@@ -124,9 +124,9 @@ export const NavigationBar = ({
   pushView,
 }: {
   index: number,
-  pushView: ?(Element<any>) => mixed,
-  popView: ?() => mixed,
-  nextView: ?() => ?Element<any>,
+  pushView: ?(Element < any >) => mixed,
+    popView: ?() => mixed,
+      nextView: ?() => ? Element < any >,
 }) => (
   <BpkNavigationBar
     id={`my-navigation-bar-${index}`}

package/bpk-component-nudger/examples.js

@@ -20,8 +20,8 @@
 
 import React, { Component } from 'react';
 import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
-import BpkLabel from 'bpk-component-label';
-import { cssModules } from 'bpk-react-utils';
+import BpkLabel from '../../bpk-component-label';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './BpkNudgerStory.module.scss';