@skyscanner/backpack-web 0.0.1 → 0.0.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breadcrumb",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack breadcrumb component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.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"

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-aria-live": "^2.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-aria-live": "^2.1.1",
+    "bpk-component-icon": "^9.2.1",
     "bpk-component-select": "^5.1.0",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-text": "^6.1.1",
     "bpk-storybook-utils": "^1.1.0"
   }
 }

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';
 
@@ -27,7 +27,7 @@ const shortContent = 'Book your next trip on skyscanner.net.';
 
 const longContent = (
   <Fragment>
-    <BpkText tagName="h3" textStyle={TEXT_STYLES.lg}>
+    <BpkText tagName="h3" textStyle={TEXT_STYLES.bodyLongform}>
       Let&#39;s explore
     </BpkText>
     <BpkText tagName="p">

package/bpk-component-card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-card",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "bpk-component-link": "^3.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-checkbox",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"

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, WEIGHT_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<
@@ -178,8 +178,7 @@ class StatefulRadioGroupChipsExample extends React.Component<
             id="favorite-color-label"
             aria-hidden
             tagName="h1"
-            textStyle={TEXT_STYLES.lg}
-            weight={WEIGHT_STYLES.bold}
+            textStyle={TEXT_STYLES.heading4}
           >
             Favourite colour
           </BpkText>
@@ -309,7 +308,7 @@ const WithIconsExample = () => (
 
 const AllTypesExample = () => (
   <div>
-    <BpkText textStyle={TEXT_STYLES.lg} tagName="h2">
+    <BpkText textStyle={TEXT_STYLES.bodyLongform} tagName="h2">
       Selectable chips
     </BpkText>
     {Object.keys(CHIP_TYPES).map((chipType) => (
@@ -318,7 +317,7 @@ const AllTypesExample = () => (
         <AllSelectableChips type={chipType} />
       </>
     ))}
-    <BpkText textStyle={TEXT_STYLES.lg} tagName="h2">
+    <BpkText textStyle={TEXT_STYLES.bodyLongform} tagName="h2">
       Dismissible chips
     </BpkText>
     {Object.keys(CHIP_TYPES).map((chipType) => (

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-aria-live": "^2.1.1",
+    "bpk-component-text": "^6.1.1"
   }
 }

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -25,7 +25,7 @@ of a close icon.
 */
 
 import React from 'react';
-import CloseCircleIconSm from 'bpk-component-icon/sm/close-circle';
+import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
 
 import BpkSelectableChip from './BpkSelectableChip';
 import {

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -20,8 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkSelectableChip.module.scss';
 import {
@@ -77,7 +77,7 @@ const BpkSelectableChip = (props: Props) => {
           {leadingAccessoryView}
         </span>
       )}
-      <BpkText textStyle={TEXT_STYLES.sm}>{children}</BpkText>
+      <BpkText textStyle={TEXT_STYLES.footnote}>{children}</BpkText>
       {trailingAccessoryView && (
         <span className={getClassName('bpk-chip__trailing-accessory-view')}>
           {trailingAccessoryView}

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-close-button",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack close button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -20,8 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type StatelessFunctionalComponent } from 'react';
-import CloseIcon from 'bpk-component-icon/sm/close';
-import { cssModules } from 'bpk-react-utils';
+import CloseIcon from '../../bpk-component-icon/sm/close';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkCloseButton.module.scss';
 

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

package/bpk-component-code/src/BpkCodeBlock.js

@@ -19,7 +19,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 STYLES from './BpkCodeBlock.module.scss';
 

package/bpk-component-content-container/examples.js

@@ -149,7 +149,7 @@ const DefaultExample = () => (
       <pre>
         <code>
           {`
-import BpkContentContainer from 'bpk-component-content-container';
+import BpkContentContainer from '../../bpk-component-content-container';
 export default () => (
 <BpkContentContainer>
   <p>Hello<p>
@@ -291,7 +291,7 @@ const Alternate = () => (
       <pre>
         <code>
           {`
-import BpkContentContainer from 'bpk-component-content-container';
+import BpkContentContainer from '../../bpk-component-content-container';
 export default () => (
 <BpkContentContainer>
   <p>Hello<p>

package/bpk-component-content-container/src/BpkContentContainer.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 './BpkContentContainer.module.scss';
 

package/bpk-component-datatable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datatable",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack datatable component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "lodash": "^4.17.20",

package/bpk-component-datatable/src/BpkDataTable.js

@@ -20,7 +20,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Table, AutoSizer } from 'react-virtualized';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import _omit from 'lodash/omit';
 
 import STYLES from './BpkDataTable.module.scss';

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -19,7 +19,7 @@
 
 import React, { type Element } from 'react';
 import { Column } from 'react-virtualized';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import bpkHeaderRenderer from './bpkHeaderRenderer';
 import STYLES from './BpkDataTableColumn.module.scss';

package/bpk-component-datatable/src/bpkHeaderRenderer.js

@@ -19,10 +19,10 @@
 
 import React from 'react';
 import { SortDirection } from 'react-virtualized';
-import { cssModules } from 'bpk-react-utils';
-import BpkSmallArrowDownIcon from 'bpk-component-icon/sm/arrow-down';
-import BpkSmallArrowUpIcon from 'bpk-component-icon/sm/arrow-up';
-import { withRtlSupport } from 'bpk-component-icon';
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
+import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
+import { withRtlSupport } from '../../bpk-component-icon';
 
 import { hasClassName } from './utils';
 import STYLES from './BpkDataTableColumn.module.scss';