@skyscanner/backpack-web 0.0.3 → 0.0.6

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 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';
+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,

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,7 +187,8 @@ 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

@@ -21,7 +21,7 @@
 import React from 'react';
 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,12 +19,12 @@
 /* @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 { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+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

@@ -18,12 +18,12 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { action } from 'bpk-storybook-utils';
+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

@@ -24,13 +24,13 @@
 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 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,7 +26,7 @@ import {
   spacingXs,
   lineHeightSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 
 import BpkBarchartDefs from './BpkBarchartDefs';

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';

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

@@ -22,7 +22,7 @@ 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 { cssModules } from '../../bpk-react-utils';
 import { withRtlSupport } from '../../bpk-component-icon';
 import ArrowRight from '../../bpk-component-icon/sm/arrow-right';
 

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-button/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
 import {
   withButtonAlignment,

package/bpk-component-calendar/coloured-calendar-example.js

@@ -20,7 +20,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import {
   BpkCalendarGrid,

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,
@@ -29,7 +29,7 @@ import {
   colorSkyGrayTint04,
   colorMonteverde,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import { withButtonAlignment, withRtlSupport } from '../bpk-component-icon';
 import SmallLongArrowRightIcon from '../bpk-component-icon/sm/long-arrow-right';

package/bpk-component-calendar/examples.js

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+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,

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

@@ -21,7 +21,7 @@ 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 { cssModules } from '../../bpk-react-utils';
 import BpkAriaLive from '../../bpk-component-aria-live';
 
 import {
@@ -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,

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';
 

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

package/bpk-component-checkbox/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 import {
   spacingXs,
   spacingSm,

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

package/bpk-component-chip/examples.js

@@ -20,14 +20,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import BeachIconSm from '../../bpk-component-icon/sm/beach';
-import CarWashIconSm from '../../bpk-component-icon/sm/car-wash';
-import PlusIconSm from '../../bpk-component-icon/sm/plus';
-import TickIconSm from '../../bpk-component-icon/sm/tick';
-import FaceHappyIconSm from '../../bpk-component-icon/sm/face--happy';
-import { AriaLiveDemo } from '../../bpk-component-aria-live/examples';
+import { cssModules } from '../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../bpk-component-text';
+import BeachIconSm from '../bpk-component-icon/sm/beach';
+import CarWashIconSm from '../bpk-component-icon/sm/car-wash';
+import PlusIconSm from '../bpk-component-icon/sm/plus';
+import TickIconSm from '../bpk-component-icon/sm/tick';
+import FaceHappyIconSm from '../bpk-component-icon/sm/face--happy';
+import { AriaLiveDemo } from '../bpk-component-aria-live/examples';
 
 import STYLES from './examples.module.scss';
 import { COMMON_PROP_TYPES, COMMON_DEFAULT_PROPS } from './src/commonTypes';
@@ -47,7 +47,7 @@ type StatefulSelectableChipProps = $Diff<
     accessibilityLabel: string,
     onClick: (event: SyntheticEvent<>) => mixed,
   },
-  >;
+>;
 /* eslint-enable */
 
 class StatefulSelectableChip extends React.Component<