@skyscanner/backpack-web 0.1.0 → 0.2.0

package/bpk-component-button/README.md

@@ -23,7 +23,9 @@ export default () => (
     <BpkButton>Primary</BpkButton>
     <BpkButton large>Large primary</BpkButton>
     <BpkButton secondary>Secondary</BpkButton>
+    <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>
@@ -37,25 +39,27 @@ export default () => (
 
 ## Props
 
-| Property       | PropType             | Required | Default Value |
-| -------------  | -------------------- | -------- | ------------- |
-| children       | -                    | true     | -             |
-| destructive    | bool                 | false    | false         |
-| featured       | bool                 | false    | false         |
-| link           | bool                 | false    | false         |
-| outline        | bool (deprecated)    | false    | false         |
-| secondary      | bool                 | false    | false         |
-| primaryOnDark  | bool                 | false    | false         |
-| primaryOnLight | bool                 | false    | false         |
-| blank          | bool                 | false    | false         |
-| className      | string               | false    | null          |
-| disabled       | bool                 | false    | false         |
-| href           | string               | false    | null          |
-| iconOnly       | bool                 | false    | false         |
-| large          | bool                 | false    | false         |
-| onClick        | func                 | false    | null          |
-| rel            | string               | false    | null          |
-| submit         | bool                 | false    | false         |
+| Property        | PropType             | Required | Default Value |
+| --------------- | -------------------- | -------- | ------------- |
+| children        | -                    | true     | -             |
+| destructive     | bool                 | false    | false         |
+| 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         |
+| primaryOnLight  | bool                 | false    | false         |
+| blank           | bool                 | false    | false         |
+| className       | string               | false    | null          |
+| disabled        | bool                 | false    | false         |
+| href            | string               | false    | null          |
+| iconOnly        | bool                 | false    | false         |
+| large           | bool                 | false    | false         |
+| onClick         | func                 | false    | null          |
+| rel             | string               | false    | null          |
+| submit          | bool                 | false    | false         |
 
 ## Theme Props
 
@@ -100,6 +104,15 @@ export default () => (
 * `buttonSecondaryHoverBackgroundColor`
 * `buttonSecondaryActiveBackgroundColor`
 
+### Secondary on dark:
+
+* `buttonSecondaryOnDarkTextColor`
+* `buttonSecondaryOnDarkHoverTextColor`
+* `buttonSecondaryOnDarkActiveTextColor`
+* `buttonSecondaryOnDarkBackgroundColor`
+* `buttonSecondaryOnDarkHoverBackgroundColor`
+* `buttonSecondaryOnDarkActiveBackgroundColor`
+
 ### Featured:
 
 * `buttonFeaturedTextColor`

package/bpk-component-button/index.js

@@ -23,15 +23,20 @@ import BpkButtonPrimary from './src/BpkButtonPrimary';
 import BpkButtonPrimaryOnDark from './src/BpkButtonPrimaryOnDark';
 import BpkButtonPrimaryOnLight from './src/BpkButtonPrimaryOnLight';
 import BpkButtonSecondary from './src/BpkButtonSecondary';
+import BpkButtonSecondaryOnDark from './src/BpkButtonSecondaryOnDark';
 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,
   primaryThemeAttributes,
+  primaryOnDarkThemeAttributes,
+  primaryOnLightThemeAttributes,
   secondaryThemeAttributes,
+  secondaryOnDarkThemeAttributes,
   featuredThemeAttributes,
   destructiveThemeAttributes,
 } from './themeAttributes';
@@ -43,8 +48,10 @@ export {
   BpkButtonPrimaryOnDark,
   BpkButtonPrimaryOnLight,
   BpkButtonSecondary,
+  BpkButtonSecondaryOnDark,
   BpkButtonDestructive,
   BpkButtonLink,
+  BpkButtonLinkOnDark,
   BpkButtonFeatured,
   BpkButtonOutline,
 };

package/bpk-component-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-button",
-  "version": "6.1.0",
+  "version": "6.2.1",
   "description": "Backpack button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^29.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.3"
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -27,8 +27,10 @@ import {
   BpkButtonPrimaryOnDark,
   BpkButtonPrimaryOnLight,
   BpkButtonSecondary,
+  BpkButtonSecondaryOnDark,
   BpkButtonDestructive,
   BpkButtonLink,
+  BpkButtonLinkOnDark,
   BpkButtonFeatured,
   BpkButtonOutline,
 } from '../index';
@@ -44,10 +46,12 @@ type Props = {
   primaryOnDark: boolean,
   primaryOnLight: boolean,
   secondary: boolean,
+  secondaryOnDark: boolean,
   destructive: boolean,
   featured: boolean,
   outline: boolean,
   link: boolean,
+  linkOnDark: boolean,
 };
 
 const BpkButton = (props: Props) => {
@@ -55,10 +59,12 @@ const BpkButton = (props: Props) => {
     destructive,
     featured,
     link,
+    linkOnDark,
     outline,
     primaryOnDark,
     primaryOnLight,
     secondary,
+    secondaryOnDark,
     ...rest
   } = props;
 
@@ -73,6 +79,9 @@ const BpkButton = (props: Props) => {
   if (secondary) {
     return <BpkButtonSecondary {...rest} />;
   }
+  if (secondaryOnDark) {
+    return <BpkButtonSecondaryOnDark {...rest} />;
+  }
   if (destructive) {
     return <BpkButtonDestructive {...rest} />;
   }
@@ -85,6 +94,9 @@ const BpkButton = (props: Props) => {
   if (link) {
     return <BpkButtonLink {...rest} />;
   }
+  if (linkOnDark) {
+    return <BpkButtonLinkOnDark {...rest} />;
+  }
   return <BpkButtonPrimary {...rest} />;
 };
 
@@ -93,10 +105,12 @@ BpkButton.propTypes = {
   primaryOnDark: PropTypes.bool,
   primaryOnLight: PropTypes.bool,
   secondary: PropTypes.bool,
+  secondaryOnDark: PropTypes.bool,
   destructive: PropTypes.bool,
   featured: PropTypes.bool,
   outline: PropTypes.bool,
   link: PropTypes.bool,
+  linkOnDark: PropTypes.bool,
 };
 
 BpkButton.defaultProps = {
@@ -104,10 +118,12 @@ BpkButton.defaultProps = {
   primaryOnDark: false,
   primaryOnLight: false,
   secondary: false,
+  secondaryOnDark: false,
   destructive: false,
   featured: false,
   outline: false,
   link: false,
+  linkOnDark: false,
 };
 
 export default BpkButton;

package/bpk-component-button/src/BpkButtonLinkOnDark.js

@@ -0,0 +1,59 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import React from 'react';
+
+import {
+  type Props as CommonProps,
+  defaultProps,
+  propTypes,
+} from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonLinkOnDark.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  ...CommonProps,
+};
+const BpkButtonLinkOnDark = (props: Props) => {
+  const { className, large, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--link-on-dark')];
+
+  if (large) {
+    classNames.push(getClassName('bpk-button--link-on-dark-large'));
+  }
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} large={large} {...rest} />
+  );
+};
+
+BpkButtonLinkOnDark.propTypes = { ...propTypes };
+BpkButtonLinkOnDark.defaultProps = { ...defaultProps };
+
+export default BpkButtonLinkOnDark;

package/bpk-component-button/src/BpkButtonLinkOnDark.module.scss

@@ -0,0 +1,23 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index';
+
+.bpk-button--link-on-dark {
+  @include bpk-button--link-on-dark;
+}

package/bpk-component-button/src/BpkButtonSecondaryOnDark.js

@@ -0,0 +1,48 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import React from 'react';
+
+import { type Props, defaultProps, propTypes } from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonSecondaryOnDark.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkButtonSecondaryOnDark = (props: Props) => {
+  const { className, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--secondary-on-dark')];
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} {...rest} />
+  );
+};
+
+BpkButtonSecondaryOnDark.propTypes = { ...propTypes };
+BpkButtonSecondaryOnDark.defaultProps = { ...defaultProps };
+
+export default BpkButtonSecondaryOnDark;

package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss

@@ -0,0 +1,23 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index';
+
+.bpk-button--secondary-on-dark {
+  @include bpk-button--secondary-on-dark;
+}

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

@@ -59,6 +59,15 @@ export const secondaryThemeAttributes = [
   'buttonSecondaryActiveBackgroundColor',
 ];
 
+export const secondaryOnDarkThemeAttributes = [
+  'buttonSecondaryOnDarkTextColor',
+  'buttonSecondaryOnDarkHoverTextColor',
+  'buttonSecondaryOnDarkActiveTextColor',
+  'buttonSecondaryOnDarkBackgroundColor',
+  'buttonSecondaryOnDarkHoverBackgroundColor',
+  'buttonSecondaryOnDarkActiveBackgroundColor',
+];
+
 export const featuredThemeAttributes = [
   'buttonFeaturedTextColor',
   'buttonFeaturedHoverTextColor',

package/bpk-component-button/themeAttributes.js

@@ -21,7 +21,10 @@
 export {
   buttonThemeAttributes,
   primaryThemeAttributes,
+  primaryOnDarkThemeAttributes,
+  primaryOnLightThemeAttributes,
   secondaryThemeAttributes,
+  secondaryOnDarkThemeAttributes,
   featuredThemeAttributes,
   destructiveThemeAttributes,
 } from './src/themeAttributes';

package/bpk-component-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "11.1.7",
+  "version": "11.1.11",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-component-aria-live": "^2.1.7",
-    "bpk-component-icon": "^9.2.5",
-    "bpk-component-select": "^5.1.4",
-    "bpk-mixins": "^28.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-aria-live": "^2.1.11",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-select": "^5.1.6",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "date-fns": "^2.21.1",
     "prop-types": "^15.7.2"
@@ -27,8 +27,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-text": "^6.1.5",
-    "bpk-storybook-utils": "^1.1.3"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-text": "^7.0.0",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

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

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

@@ -18,11 +18,12 @@
 
 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,

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

@@ -18,7 +18,8 @@
 
 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,8 @@
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-card",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-link": "^3.1.4",
-    "bpk-component-text": "^6.1.5"
+    "bpk-component-link": "^3.1.6",
+    "bpk-component-text": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-card/src/BpkCard.js

@@ -20,7 +20,8 @@
 
 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.5",
+  "version": "4.1.8",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.5",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-storybook-utils": "^1.1.3"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-checkbox/src/BpkCheckbox.js

@@ -20,7 +20,8 @@
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "5.2.5",
+  "version": "5.2.9",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.5",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.7",
-    "bpk-component-text": "^6.1.5"
+    "bpk-component-aria-live": "^2.1.11",
+    "bpk-component-text": "^7.0.0"
   }
 }

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

@@ -25,7 +25,8 @@ 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,9 @@
 
 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 {