@skyscanner/backpack-web 0.0.2 → 0.0.5

package/bpk-animate-height/examples.js

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import BpkButton from 'bpk-component-button';
+import BpkButton from '../bpk-component-button';
 import React, { Component, type Node } from 'react';
 
 import AnimateHeight from './index';

package/bpk-component-accordion/examples.js

@@ -19,10 +19,10 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkCheckbox from 'bpk-component-checkbox';
-import { withAlignment } from 'bpk-component-icon';
-import StopsIcon from 'bpk-component-icon/sm/stops';
-import TimeIcon from 'bpk-component-icon/sm/time';
+import BpkCheckbox from '../bpk-component-checkbox';
+import { withAlignment } from '../bpk-component-icon';
+import StopsIcon from '../bpk-component-icon/sm/stops';
+import TimeIcon from '../bpk-component-icon/sm/time';
 import {
   colorMonteverde,
   colorPanjin,

package/bpk-component-accordion/src/BpkAccordion.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 './BpkAccordion.module.scss';
 

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -20,14 +20,14 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import AnimateHeight from 'bpk-animate-height';
-import { withButtonAlignment } from 'bpk-component-icon';
-import ChevronDownIcon from 'bpk-component-icon/sm/chevron-down';
+import AnimateHeight from '../../bpk-animate-height';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down';
 import BpkText, {
   TEXT_STYLES,
   WEIGHT_STYLES as weights,
-} from 'bpk-component-text';
-import { cssModules, deprecated } from 'bpk-react-utils';
+} from '../../bpk-component-text';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkAccordionItem.module.scss';
 
@@ -79,8 +79,8 @@ const BpkAccordionItem = (props: Props) => {
   const contentId = `${id}_content`;
   const clonedIcon = icon
     ? React.cloneElement(icon, {
-        className: getClassName('bpk-accordion__leading-icon'),
-      })
+      className: getClassName('bpk-accordion__leading-icon'),
+    })
     : null;
 
   return (

package/bpk-component-accordion/src/withAccordionItemState.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 type Props = {
   initiallyExpanded: boolean,
@@ -59,7 +59,7 @@ const withAccordionItemState = (ComposedComponent: ComponentType<any>) => {
         (prevState) => ({
           expanded: !prevState.expanded,
         }),
-        this.props.onClick || (() => {}),
+        this.props.onClick || (() => { }),
       );
     };
 

package/bpk-component-accordion/src/withSingleItemAccordionState.js

@@ -27,7 +27,7 @@ import React, {
   type Element,
   type ComponentType,
 } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 const getInitiallyExpanded = (children) => {
   const accordionItems = Children.toArray(children);

package/bpk-component-aria-live/examples.js

@@ -18,12 +18,12 @@
 /* @flow strict */
 
 import React, { type Node } from 'react';
-import BpkChip from 'bpk-component-chip';
-import BpkFieldset from 'bpk-component-fieldset';
-import BpkSelect from 'bpk-component-select';
-import BpkSwitch from 'bpk-component-switch';
-import { cssModules } from 'bpk-react-utils';
-import { BpkCode } from 'bpk-component-code';
+import BpkChip from '../bpk-component-chip';
+import BpkFieldset from '../bpk-component-fieldset';
+import BpkSelect from '../bpk-component-select';
+import BpkSwitch from '../bpk-component-switch';
+import { cssModules } from '../bpk-react-utils';
+import { BpkCode } from '../bpk-component-code';
 
 import STYLES from './examples.module.scss';
 
@@ -187,8 +187,7 @@ class ChipsExample extends React.Component<
       const nextState = prevState;
       nextState.categories[category] = !prevState.categories[category];
       nextState.updates.push(
-        `${category} became ${
-          nextState.categories[category] ? 'enabled' : 'disabled'
+        `${category} became ${nextState.categories[category] ? 'enabled' : 'disabled'
         }.`,
       );
       return nextState;

package/bpk-component-aria-live/src/BpkAriaLive.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 './BpkAriaLive.module.scss';
 

package/bpk-component-autosuggest/examples.js

@@ -19,8 +19,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { withRtlSupport } from 'bpk-component-icon';
-import FlightIcon from 'bpk-component-icon/lg/flight';
+import { withRtlSupport } from '../bpk-component-icon';
+import FlightIcon from '../bpk-component-icon/lg/flight';
 
 import BpkAutosuggest, { BpkAutosuggestSuggestion } from './index';
 
@@ -108,8 +108,8 @@ const getSuggestions = (value, hanzi) => {
   return inputLength === 0
     ? []
     : data.filter(
-        (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
-      );
+      (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
+    );
 };
 
 const getSuggestionValue = (suggestion) =>

package/bpk-component-autosuggest/src/BpkAutosuggest.js

@@ -19,9 +19,9 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkInput from 'bpk-component-input';
+import BpkInput from '../../bpk-component-input';
 import Autosuggest from 'react-autosuggest';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkAutosuggest.module.scss';
 

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.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 './BpkAutosuggest.module.scss';
 

package/bpk-component-badge/BadgeLayout.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 './BpkBadgeLayout.module.scss';
 

package/bpk-component-badge/examples.js

@@ -19,11 +19,11 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkSmallBeerIcon from 'bpk-component-icon/sm/beer';
-import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
-import BpkSmallWeatherIcon from 'bpk-component-icon/sm/weather';
-import BpkSmallTickIcon from 'bpk-component-icon/sm/tick-circle';
-import BpkSmallCloseIcon from 'bpk-component-icon/sm/close-circle';
+import BpkSmallBeerIcon from '../bpk-component-icon/sm/beer';
+import BpkSmallFlightIcon from '../bpk-component-icon/sm/flight';
+import BpkSmallWeatherIcon from '../bpk-component-icon/sm/weather';
+import BpkSmallTickIcon from '../bpk-component-icon/sm/tick-circle';
+import BpkSmallCloseIcon from '../bpk-component-icon/sm/close-circle';
 import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
 
 import BadgeLayout from './BadgeLayout';

package/bpk-component-badge/src/BpkBadge.js

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

package/bpk-component-banner-alert/examples.js

@@ -20,10 +20,10 @@
 import React, { Component } from 'react';
 import { action } from 'bpk-storybook-utils';
 import { fontWeightBold } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import CurrencyIcon from 'bpk-component-icon/sm/currency';
-import { AriaLiveDemo } from 'bpk-component-aria-live/examples';
-import { BpkButtonPrimary } from 'bpk-component-button';
-import { cssModules } from 'bpk-react-utils';
+import CurrencyIcon from '../bpk-component-icon/sm/currency';
+import { AriaLiveDemo } from '../bpk-component-aria-live/examples';
+import { BpkButtonPrimary } from '../bpk-component-button';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -19,8 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, Component } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkAnimateHeight from 'bpk-animate-height';
+import { cssModules } from '../../bpk-react-utils';
+import BpkAnimateHeight from '../../bpk-animate-height';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -23,14 +23,14 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type StatelessFunctionalComponent } from 'react';
-import { withButtonAlignment } from 'bpk-component-icon';
-import BpkAnimateHeight from 'bpk-animate-height';
-import BpkCloseButton from 'bpk-component-close-button';
-import TickCircleIcon from 'bpk-component-icon/sm/tick-circle';
-import ChevronDownIcon from 'bpk-component-icon/lg/chevron-down';
-import InfoCircleIcon from 'bpk-component-icon/sm/information-circle';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import BpkAnimateHeight from '../../bpk-animate-height';
+import BpkCloseButton from '../../bpk-component-close-button';
+import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle';
+import ChevronDownIcon from '../../bpk-component-icon/lg/chevron-down';
+import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import AnimateAndFade from './AnimateAndFade';
 import {

package/bpk-component-banner-alert/src/withBannerAlertState.js

@@ -19,7 +19,7 @@
 
 import React, { type Node, type ComponentType, Component } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 import {
   type OnDismissHandler,

package/bpk-component-barchart/examples.js

@@ -20,9 +20,9 @@
 
 import React from 'react';
 import { number } from 'prop-types';
-import { cssModules, withDefaultProps } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
-import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
+import { cssModules, withDefaultProps } from '../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../bpk-component-text';
+import { updateOnDirectionChange } from '../bpk-component-rtl-toggle';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { scaleLinear, scaleBand } from 'd3-scale';
 

package/bpk-component-barchart/hocs.js

@@ -20,7 +20,7 @@
 
 import isEqual from 'lodash/isEqual';
 import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../bpk-react-utils';
 
 // eslint-disable-next-line import/prefer-default-export
 export const withSelectedState = (ComposedComponent: ComponentType<any>) => {

package/bpk-component-barchart/src/BpkBarchart.js

@@ -26,8 +26,8 @@ import {
   spacingXs,
   lineHeightSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from 'bpk-react-utils';
-import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+import { cssModules } from '../../bpk-react-utils';
+import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 
 import BpkBarchartDefs from './BpkBarchartDefs';
 import BpkBarchartBars from './BpkBarchartBars';

package/bpk-component-barchart/src/BpkBarchartBar.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import { remToPx } from './utils';

package/bpk-component-barchart/src/BpkChartAxis.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 {
   spacingXs,
   lineHeightSm,

package/bpk-component-barchart/src/BpkChartDataTable.js

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

package/bpk-component-barchart/src/BpkChartGridLines.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
 import { identity, center } from './utils';
@@ -66,15 +66,15 @@ const BpkChartGridLines = (props: Props) => {
     const value = position(tick);
     return orientation === ORIENTATION_X
       ? {
-          x1: value,
-          x2: value,
-          y2: height - margin.top - margin.bottom,
-        }
+        x1: value,
+        x2: value,
+        y2: height - margin.top - margin.bottom,
+      }
       : {
-          x2: width - margin.left - margin.right,
-          y1: value,
-          y2: value,
-        };
+        x2: width - margin.left - margin.right,
+        y1: value,
+        y2: value,
+      };
   };
 
   const toLine = (tick, i) => (

package/bpk-component-barchart/src/RTLtransforms.js

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import { isRTL } from 'bpk-react-utils';
+import { isRTL } from '../../bpk-react-utils';
 
 const rtlConditionalValue = (ltrValue: number, rtlValue: number) =>
   isRTL() ? rtlValue : ltrValue;

package/bpk-component-blockquote/src/BpkBlockquote.js

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

package/bpk-component-breadcrumb/src/BpkBreadcrumb.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 './BpkBreadcrumb.module.scss';
 

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -20,11 +20,11 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import BpkLink from 'bpk-component-link';
-import BpkText from 'bpk-component-text';
-import { cssModules } from 'bpk-react-utils';
-import { withRtlSupport } from 'bpk-component-icon';
-import ArrowRight from 'bpk-component-icon/sm/arrow-right';
+import BpkLink from '../../bpk-component-link';
+import BpkText from '../../bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+import { withRtlSupport } from '../../bpk-component-icon';
+import ArrowRight from '../../bpk-component-icon/sm/arrow-right';
 
 import STYLES from './BpkBreadcrumbItem.module.scss';
 

package/bpk-component-breakpoint/examples.js

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

package/bpk-component-calendar/examples-components.js

@@ -20,7 +20,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import BpkButton from 'bpk-component-button';
+import BpkButton from '../bpk-component-button';
 import addMonths from 'date-fns/addMonths';
 import {
   colorWhite,

package/bpk-component-calendar/examples.js

@@ -18,7 +18,7 @@
 import React from 'react';
 import { action } from 'bpk-storybook-utils';
 import addMonths from 'date-fns/addMonths';
-import BpkText from 'bpk-component-text';
+import BpkText from '../bpk-component-text';
 import startOfDay from 'date-fns/startOfDay';
 import parseDate from 'date-fns/parse';
 

package/bpk-component-calendar/src/BpkCalendarContainer.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { deprecated, isRTL } from 'bpk-react-utils';
+import { deprecated, isRTL } from '../../bpk-react-utils';
 
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import BpkCalendarNav from './BpkCalendarNav';

package/bpk-component-calendar/src/BpkCalendarDate.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import CustomPropTypes from './custom-proptypes';
 import STYLES from './BpkCalendarDate.module.scss';

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cssModules, deprecated, isDeviceIos } from 'bpk-react-utils';
+import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';
 
 import BpkCalendarGridHeader from './BpkCalendarGridHeader';
 import Week from './Week';

package/bpk-component-calendar/src/BpkCalendarGridHeader.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import CustomPropTypes from './custom-proptypes';
 import { orderDaysOfWeek } from './date-utils';

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cssModules, isRTL } from 'bpk-react-utils';
+import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import {
   getCalendarGridWidth,
@@ -172,11 +172,11 @@ class BpkCalendarGridTransition extends Component {
                   index === 1
                     ? focusedDate
                     : getFocusedDateForMonth(
-                        m,
-                        focusedDate,
-                        rest.minDate,
-                        rest.maxDate,
-                      )
+                      m,
+                      focusedDate,
+                      rest.minDate,
+                      rest.maxDate,
+                    )
                 }
                 aria-hidden={index !== 1}
                 className={getClassName('bpk-calendar-grid-transition__grid')}
@@ -208,12 +208,12 @@ BpkCalendarGridTransition.defaultProps = {
 };
 
 const addCalendarGridTransition = (TransitionComponent) => (props) =>
-  (
-    <BpkCalendarGridTransition
-      TransitionComponent={TransitionComponent}
-      {...props}
-    />
-  );
+(
+  <BpkCalendarGridTransition
+    TransitionComponent={TransitionComponent}
+    {...props}
+  />
+);
 
 export default BpkCalendarGridTransition;
 export { addCalendarGridTransition };

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -18,11 +18,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
-import BpkSelect from 'bpk-component-select';
-import { cssModules } from 'bpk-react-utils';
-import BpkAriaLive from 'bpk-component-aria-live';
+import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
+import BpkSelect from '../../bpk-component-select';
+import { cssModules } from '../../bpk-react-utils';
+import BpkAriaLive from '../../bpk-component-aria-live';
 
 import {
   addMonths,
@@ -39,14 +39,14 @@ const getClassName = cssModules(STYLES);
 
 const changeMonth =
   ({ callback, max, min, month, source }) =>
-  (event) => {
-    // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
-    // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
-    if (isWithinRange(month, { start: min, end: max })) {
-      event.persist();
-      callback(event, { month, source });
-    }
-  };
+    (event) => {
+      // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
+      // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
+      if (isWithinRange(month, { start: min, end: max })) {
+        event.persist();
+        callback(event, { month, source });
+      }
+    };
 
 const BpkCalendarNav = (props) => {
   const {

package/bpk-component-calendar/src/Week.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import {
   isSameDay,
@@ -249,7 +249,7 @@ class Week extends Component {
     // render, component should update.
     if (
       this.props.selectionConfiguration.type ===
-        CALENDAR_SELECTION_TYPE.single &&
+      CALENDAR_SELECTION_TYPE.single &&
       this.props.selectionConfiguration.date
     ) {
       return singleDateHandler(this.props, nextProps);

package/bpk-component-calendar/src/composeCalendar.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import STYLES from './BpkCalendar.module.scss';

package/bpk-component-card/examples.js

@@ -18,8 +18,8 @@
 /* @flow strict */
 
 import React, { Fragment } from 'react';
-import BpkLink from 'bpk-component-link';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkLink from '../bpk-component-link';
+import BpkText, { TEXT_STYLES } from '../bpk-component-text';
 
 import BpkCard from './index';