npm - @skyscanner/backpack-web - Versions diffs - 18.2.1 → 20.0.0 - Mend

@skyscanner/backpack-web 18.2.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

package/README.md CHANGED Viewed

@@ -48,7 +48,6 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-fieldset`](/packages/bpk-component-fieldset)
 [`bpk-component-form-validation`](/packages/bpk-component-form-validation)
 [`bpk-component-graphic-promotion`](/packages/bpk-component-graphic-promotion)
-[`bpk-component-grid`](/packages/bpk-component-grid)
 [`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle)
 [`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav)
 [`bpk-component-icon`](/packages/bpk-component-icon)

package/bpk-animate-height/README.md CHANGED Viewed

@@ -15,7 +15,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ```js
 import AnimateHeight from '@skyscanner/backpack-web/bpk-animate-height';
-import React, { Component } from 'react';
+import { Component } from 'react';
 class AnimateHeightContainer extends Component {
   constructor() {

package/bpk-animate-height/src/AnimateHeight.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 // IE11 doesn't support `Number.isNaN` so we must use the global.
 // When IE11 support drops we can migrate.

package/bpk-component-accordion/README.md CHANGED Viewed

@@ -13,7 +13,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 The `withSingleItemAccordionState` higher-order component is used to limit one section to be expanded at any time.
 ```js
-import React from 'react';
 import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from '@skyscanner/backpack-web/bpk-component-accordion';
 const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);
@@ -38,7 +37,6 @@ export default () => (
 The `withAccordionItemState` higher-order component is used to allow multiple items to be expanded simultaneously.
 ```js
-import React from 'react';
 import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from '@skyscanner/backpack-web/bpk-component-accordion';
 const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);
@@ -63,7 +61,6 @@ export default () => (
 `BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://skyscanner.design/latest/components/alignment/web.html)
 ```js
-import React from 'react';
 import { BpkAccordion, BpkAccordionItem } from '@skyscanner/backpack-web/bpk-component-accordion';
 import { withAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
 import StopsIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/stops';

package/bpk-component-accordion/src/BpkAccordion.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

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

@@ -19,7 +19,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
+import { cloneElement } from 'react';
 import AnimateHeight from '../../bpk-animate-height';
 import { withButtonAlignment } from '../../bpk-component-icon';
@@ -72,7 +73,7 @@ const BpkAccordionItem = (props: Props) => {
   const contentId = `${id}_content`;
   const clonedIcon = icon
-    ? React.cloneElement(icon, {
+    ? cloneElement(icon, {
         className: getClassName('bpk-accordion__leading-icon'),
       })
     : null;

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

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

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

@@ -19,14 +19,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, {
-  Component,
-  Children,
-  cloneElement,
-  type Node,
-  type Element,
-  type ComponentType,
-} from 'react';
+import { Component, Children, cloneElement } from 'react';
+import type { Node, Element, ComponentType } from 'react';
 import { wrapDisplayName } from '../../bpk-react-utils';

package/bpk-component-aria-live/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```tsx
-import React from 'react';
 import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from '@skyscanner/backpack-web/bpk-component-aria-live';
 export default () => (

package/bpk-component-aria-live/src/BpkAriaLive.js CHANGED Viewed

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 import type { ReactElement } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-autosuggest/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';

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

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import Autosuggest from 'react-autosuggest';
 import BpkInput from '../../bpk-component-input';

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-badge/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkBadge, { BADGE_TYPES } from '@skyscanner/backpack-web/bpk-component-badge';
 export default () => (

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

@@ -19,7 +19,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-banner-alert/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### Default
 ```js
-import React from 'react';
 import BpkBannerAlert, { ALERT_TYPES } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 export default () => (
@@ -25,7 +24,7 @@ export default () => (
 ### Dismissable
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { ALERT_TYPES, BpkBannerAlertDismissable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 class DismissableBpkBannerAlert extends Component {
@@ -65,7 +64,7 @@ export default () => (
 ### withBannerAlertState(BpkBannerAlert)
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
 const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);

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

@@ -18,7 +18,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node, Component } from 'react';
+import { Component } from 'react';
+import type { Node } from 'react';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';

package/bpk-component-banner-alert/src/BpkBannerAlert.js CHANGED Viewed

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 /* @flow strict */
-import React from 'react';
 import {
-  type CommonProps,
+  CommonProps,
   COMMON_PROP_TYPES,
   COMMON_DEFAULT_PROPS,
 } from './common-types';

package/bpk-component-banner-alert/src/BpkBannerAlert.module.scss CHANGED Viewed

@@ -58,10 +58,6 @@ $bpk-spacing-v2: true;
     @include bpk-border-sm($bpk-banner-alert-neutral-color, '');
   }
-  &--event {
-    @include bpk-border-sm($bpk-banner-alert-event-color, '');
-  }
   &__header {
     display: flex;
     padding: bpk-spacing-md();
@@ -129,10 +125,6 @@ $bpk-spacing-v2: true;
     fill: $bpk-text-secondary-day;
   }
-  &__event-icon {
-    fill: $bpk-banner-alert-event-color;
-  }
   &__toggle-button {
     padding: 0;
     border: 0;

package/bpk-component-banner-alert/src/BpkBannerAlertDismissable.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import {
   type CommonProps,

package/bpk-component-banner-alert/src/BpkBannerAlertExpandable.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import {
   type CommonProps,

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

@@ -22,7 +22,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { type Node, type StatelessFunctionalComponent } from 'react';
+import type { Node, StatelessFunctionalComponent } from 'react';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { withButtonAlignment } from '../../bpk-component-icon';
@@ -65,7 +65,6 @@ const getIconForType = (
     [ALERT_TYPES.WARN]: getClassName('bpk-banner-alert__warn-icon'),
     [ALERT_TYPES.ERROR]: getClassName('bpk-banner-alert__error-icon'),
     [ALERT_TYPES.NEUTRAL]: getClassName('bpk-banner-alert__neutral-icon'),
-    [ALERT_TYPES.EVENT]: getClassName('bpk-banner-alert__event-icon'),
   };
   const className = classMap[type];
   const componentMap: { [AlertTypeValue]: Node } = {
@@ -74,7 +73,6 @@ const getIconForType = (
     [ALERT_TYPES.WARN]: InfoCircleIcon,
     [ALERT_TYPES.ERROR]: InfoCircleIcon,
     [ALERT_TYPES.NEUTRAL]: InfoCircleIcon,
-    [ALERT_TYPES.EVENT]: InfoCircleIcon,
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);

package/bpk-component-banner-alert/src/common-types.js CHANGED Viewed

@@ -25,7 +25,6 @@ export const ALERT_TYPES = {
   WARN: 'warn',
   ERROR: 'error',
   NEUTRAL: 'neutral',
-  EVENT: 'event', // DEPRECATED
 };
 export type AlertTypeValue = $Values<typeof ALERT_TYPES>;
@@ -45,14 +44,7 @@ export type OnDismissHandler = ?() => void;
 export type OnHideHandler = ?() => void;
 export const COMMON_PROP_TYPES = {
-  type: PropTypes.oneOf([
-    ALERT_TYPES.PRIMARY,
-    ALERT_TYPES.SUCCESS,
-    ALERT_TYPES.WARN,
-    ALERT_TYPES.ERROR,
-    ALERT_TYPES.NEUTRAL,
-    ALERT_TYPES.EVENT,
-  ]).isRequired,
+  type: PropTypes.oneOf(Object.values(ALERT_TYPES)).isRequired,
   message: PropTypes.node.isRequired,
   animateOnEnter: PropTypes.bool,
   animateOnLeave: PropTypes.bool,

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

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
-import React, { type Node, type ComponentType, Component } from 'react';
+import { Component } from 'react';
+import type { Node, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { wrapDisplayName } from '../../bpk-react-utils';

package/bpk-component-barchart/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkBarchart from '@skyscanner/backpack-web/bpk-component-barchart';
 const priceData = [

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

@@ -20,7 +20,7 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { scaleLinear, scaleBand } from 'd3-scale';
 import {
   spacingXs,

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

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-barchart/src/BpkBarchartBars.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import PropTypes from 'prop-types';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-barchart/src/BpkBarchartDefs.js CHANGED Viewed

@@ -18,8 +18,6 @@
 /* @flow strict */
-import React from 'react';
 const GRADIENT_ATTRIBUTES = {
   x1: 0,
   y1: 0,

package/bpk-component-barchart/src/BpkChartAxis.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import {
   spacingXs,

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

@@ -19,7 +19,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

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

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-barchart/src/BpkChartMargin.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 type Props = {

package/bpk-component-blockquote/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkBlockquote from '@skyscanner/backpack-web/bpk-component-blockquote';
 export default () => (

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

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-breadcrumb/README.md CHANGED Viewed

@@ -8,7 +8,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkBreadcrumb, { BpkBreadcrumbItem } from '@skyscanner/backpack-web/bpk-component-breadcrumb';

package/bpk-component-breadcrumb/src/BpkBreadcrumb.js CHANGED Viewed

@@ -19,7 +19,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import { Component, Fragment } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';
@@ -60,7 +61,7 @@ const buildMetaData = (schemaMetaData: SchemaMetaDataItem[]): string => {
   });
 };
-class BpkBreadcrumb extends React.Component<Props> {
+class BpkBreadcrumb extends Component<Props> {
   metaData: ?string;
   static defaultProps = {
@@ -77,7 +78,7 @@ class BpkBreadcrumb extends React.Component<Props> {
     const { children, label, schemaMetaData, ...rest } = this.props;
     return (
-      <React.Fragment>
+      <Fragment>
         {this.metaData && (
           <script
             type="application/ld+json"
@@ -89,7 +90,7 @@ class BpkBreadcrumb extends React.Component<Props> {
         <nav aria-label={label} {...rest}>
           <ol className={getClassName('bpk-breadcrumb')}>{children}</ol>
         </nav>
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

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

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import BpkLink from '../../bpk-component-link';
 import BpkText from '../../bpk-component-text';

package/bpk-component-breakpoint/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
 export default () => (

package/bpk-component-breakpoint/src/BpkBreakpoint.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import MediaQuery from 'react-responsive';
 import TOKENS from '@skyscanner/bpk-foundations-web/tokens/breakpoints.common';

package/bpk-component-button/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
@@ -24,7 +23,6 @@ export default () => (
     <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
     <BpkButton link>Link</BpkButton>
     <BpkButton linkOnDark>LinkOnDark</BpkButton>
-    <BpkButton outline>Outline (Deprecated, use PrimaryOnDark or PrimaryOnLight instead)</BpkButton>
     <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
     <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
     <BpkButton iconOnly>
@@ -44,7 +42,6 @@ export default () => (
 | featured        | bool                 | false    | false         |
 | link            | bool                 | false    | false         |
 | linkOnDark      | bool                 | false    | false         |
-| outline         | bool (deprecated)    | false    | false         |
 | secondary       | bool                 | false    | false         |
 | secondaryOnDark | bool                 | false    | false         |
 | primaryOnDark   | bool                 | false    | false         |

package/bpk-component-button/index.js CHANGED Viewed

@@ -28,7 +28,6 @@ import BpkButtonDestructive from './src/BpkButtonDestructive';
 import BpkButtonLink from './src/BpkButtonLink';
 import BpkButtonLinkOnDark from './src/BpkButtonLinkOnDark';
 import BpkButtonFeatured from './src/BpkButtonFeatured';
-import BpkButtonOutline from './src/BpkButtonOutline';
 export {
   buttonThemeAttributes,
@@ -53,5 +52,4 @@ export {
   BpkButtonLink,
   BpkButtonLinkOnDark,
   BpkButtonFeatured,
-  BpkButtonOutline,
 };

package/bpk-component-button/src/BpkButton.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-cycle
@@ -32,7 +31,6 @@ import {
   BpkButtonLink,
   BpkButtonLinkOnDark,
   BpkButtonFeatured,
-  BpkButtonOutline,
 } from '../index';
 import {
@@ -49,7 +47,6 @@ type Props = {
   secondaryOnDark: boolean,
   destructive: boolean,
   featured: boolean,
-  outline: boolean,
   link: boolean,
   linkOnDark: boolean,
 };
@@ -60,7 +57,6 @@ const BpkButton = (props: Props) => {
     featured,
     link,
     linkOnDark,
-    outline,
     primaryOnDark,
     primaryOnLight,
     secondary,
@@ -88,9 +84,6 @@ const BpkButton = (props: Props) => {
   if (featured) {
     return <BpkButtonFeatured {...rest} />;
   }
-  if (outline) {
-    return <BpkButtonOutline {...rest} />;
-  }
   if (link) {
     return <BpkButtonLink {...rest} />;
   }
@@ -108,7 +101,6 @@ BpkButton.propTypes = {
   secondaryOnDark: PropTypes.bool,
   destructive: PropTypes.bool,
   featured: PropTypes.bool,
-  outline: PropTypes.bool,
   link: PropTypes.bool,
   linkOnDark: PropTypes.bool,
 };
@@ -121,7 +113,6 @@ BpkButton.defaultProps = {
   secondaryOnDark: false,
   destructive: false,
   featured: false,
-  outline: false,
   link: false,
   linkOnDark: false,
 };

package/bpk-component-button/src/BpkButtonBase.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, propTypes, defaultProps } from './common-types';
+import { Props, propTypes, defaultProps } from './common-types';
 import COMMON_STYLES from './BpkButtonBase.module.scss';
 // This was originally depended upon from the bpk-react-utils package, however

package/bpk-component-button/src/BpkButtonDestructive.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonDestructive.module.scss';

package/bpk-component-button/src/BpkButtonFeatured.js CHANGED Viewed

@@ -18,9 +18,7 @@
 /* @flow strict */
-import React from 'react';
-import { type Props, defaultProps, propTypes } from './common-types';
+import { Props, defaultProps, propTypes } from './common-types';
 import BpkButtonBase, { cssModules } from './BpkButtonBase';
 import STYLES from './BpkButtonFeatured.module.scss';