@skyscanner/backpack-web 0.1.0 → 0.2.0

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "3.1.5",
+  "version": "3.1.8",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.5",
-    "bpk-component-icon": "^9.2.5",
-    "bpk-component-link": "^3.1.4",
-    "bpk-component-navigation-bar": "^3.1.5",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-link": "^3.1.6",
+    "bpk-component-navigation-bar": "^3.1.8",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
-    "bpk-scrim-utils": "^5.1.3",
+    "bpk-scrim-utils": "^5.1.5",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-text": "^6.1.5"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-modal/src/BpkModal.js

@@ -20,8 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { withScrim } from 'bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from 'bpk-react-utils';
+
+import { withScrim } from '../../bpk-scrim-utils';
+import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {

package/bpk-component-modal/src/BpkModalInner.js

@@ -18,12 +18,13 @@
 
 /* @flow strict */
 
-import { BpkButtonLink } from 'bpk-component-link';
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkCloseButton from 'bpk-component-close-button';
-import BpkNavigationBar from 'bpk-component-navigation-bar';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+
+import { BpkButtonLink } from '../../bpk-component-link';
+import BpkCloseButton from '../../bpk-component-close-button';
+import BpkNavigationBar from '../../bpk-component-navigation-bar';
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkModalInner.module.scss';
 import { titlePropType, onClosePropType } from './customPropTypes';

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from 'bpk-component-link';
+import { themeAttributes as linkAttributes } from '../../bpk-component-link';
 
 export default [...linkAttributes];

package/bpk-component-navigation-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.5",
+  "version": "3.1.8",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.5",
-    "bpk-component-link": "^3.1.4",
-    "bpk-component-text": "^6.1.5",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-link": "^3.1.6",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -25,8 +25,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-component-icon": "^9.2.5",
-    "bpk-storybook-utils": "^1.1.3"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -20,8 +20,9 @@
 
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
-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 './BpkNavigationBar.module.scss';
 
@@ -73,7 +74,7 @@ const BpkNavigationBar = (props: Props) => {
       {typeof title === 'string' ? (
         <BpkText
           id={titleId}
-          textStyle={TEXT_STYLES.label1}
+          textStyle={TEXT_STYLES.heading5}
           className={getClassNames('bpk-navigation-bar__title')}
         >
           {title}

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss

@@ -47,6 +47,8 @@ $bpk-spacing-v2: true;
   &__leading-item,
   &__trailing-item {
     position: absolute;
+
+    @include bpk-label-2;
   }
 
   &__leading-item {

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -20,9 +20,10 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
+
 // TODO: close button is not really only a close button, we should rename and update the import here
-import { BpkButtonLink } from 'bpk-component-link';
-import { cssModules } from 'bpk-react-utils';
+import { BpkButtonLink } from '../../bpk-component-link';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkNavigationBarButtonLink.module.scss';
 

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -20,9 +20,10 @@
 
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
+
 // TODO: close button is not really only a close button, we should rename and update the import here
-import BpkIconButton from 'bpk-component-close-button';
-import { cssModules } from 'bpk-react-utils';
+import BpkIconButton from '../../bpk-component-close-button';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkNavigationBarIconButton.module.scss';
 

package/bpk-component-navigation-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.5",
+  "version": "3.1.8",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-mixins": "^28.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
@@ -24,9 +24,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-icon": "^9.2.5",
-    "bpk-component-navigation-bar": "^3.1.5",
-    "bpk-component-rtl-toggle": "^3.1.4"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-navigation-bar": "^3.1.8",
+    "bpk-component-rtl-toggle": "^3.1.6"
   }
 }

package/bpk-component-navigation-stack/src/BpkNavigationStack.js

@@ -18,13 +18,14 @@
 
 /* @flow strict */
 
-import { cssModules, isRTL } from 'bpk-react-utils';
 import React, { Children, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, Transition } from 'react-transition-group';
 import debounce from 'lodash/debounce';
 
+import { cssModules, isRTL } from '../../bpk-react-utils';
+
 import STYLES from './BpkNavigationStack.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-nudger/README.md

@@ -125,7 +125,7 @@ class App extends Component {
 | onChange            | func                          | true     | -             |
 | value               | number                        | true     | -             |
 | className           | string                        | false    | null          |
-| buttonType          | oneOf('secondary', 'outline') | false    | secondary     |
+| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |
 
 ### BpkConfigurableNudger
 
@@ -144,7 +144,7 @@ class App extends Component {
 | formatValue         | func                          | true     | -             |
 | className           | string                        | false    | null          |
 | inputClassName      | string                        | false    | null          |
-| buttonType          | oneOf('secondary', 'outline') | false    | secondary     |
+| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |
 
 ### `compareValues`
 

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-icon": "^9.2.5",
-    "bpk-mixins": "^28.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
@@ -26,7 +26,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.4",
-    "bpk-storybook-utils": "^1.1.3"
+    "bpk-component-label": "^5.1.6",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -21,12 +21,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import BpkButtonSecondary from 'bpk-component-button/BpkButtonSecondary';
-import BpkButtonOutline from 'bpk-component-button/BpkButtonOutline';
-import { withButtonAlignment } from 'bpk-component-icon';
-import MinusIcon from 'bpk-component-icon/sm/minus';
-import PlusIcon from 'bpk-component-icon/sm/plus';
-import { cssModules } from 'bpk-react-utils';
+
+import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
+import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import MinusIcon from '../../bpk-component-icon/sm/minus';
+import PlusIcon from '../../bpk-component-icon/sm/plus';
+import { cssModules } from '../../bpk-react-utils';
 
 import {
   type CommonProps,
@@ -67,36 +68,31 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
     value,
     ...rest
   } = props;
-  const classNames = [getClassName('bpk-nudger')];
-  if (className) {
-    classNames.push(className);
-  }
+
+  const classNames = getClassName('bpk-nudger', className);
 
   const maxButtonDisabled = compareValues(value, max) >= 0;
   const minButtonDisabled = compareValues(value, min) <= 0;
 
-  const minusIconClassNames = [getClassName('bpk-nudger__icon')];
-  if (minButtonDisabled) {
-    minusIconClassNames.push(getClassName('bpk-nudger__icon--disabled'));
-  }
-  const plusIconClassNames = [getClassName('bpk-nudger__icon')];
-  if (maxButtonDisabled) {
-    plusIconClassNames.push(getClassName('bpk-nudger__icon--disabled'));
-  }
-
-  const inputStyles = [getClassName('bpk-nudger__input')];
-  if (inputClassName) {
-    inputStyles.push(inputClassName);
-  }
-  if (buttonType === 'outline') {
-    inputStyles.push(getClassName('bpk-nudger__input--outline'));
-  }
+  const minusIconClassNames = getClassName(
+    'bpk-nudger__icon',
+    minButtonDisabled && 'bpk-nudger__icon--disabled',
+  );
+  const plusIconClassNames = getClassName(
+    'bpk-nudger__icon',
+    maxButtonDisabled && 'bpk-nudger__icon--disabled',
+  );
+  const inputStyles = getClassName(
+    'bpk-nudger__input',
+    inputClassName && inputClassName,
+    buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark',
+  );
 
   const ButtonComponent =
-    buttonType === 'secondary' ? BpkButtonSecondary : BpkButtonOutline;
+    buttonType === 'secondary' ? BpkButtonSecondary : BpkButtonSecondaryOnDark;
 
   return (
-    <div className={classNames.join(' ')}>
+    <div className={classNames}>
       <ButtonComponent
         iconOnly
         onClick={() => onChange(decrementValue(value))}
@@ -105,7 +101,7 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
         aria-controls={id}
         className={getClassName('bpk-nudger__button')}
       >
-        <AlignedMinusIcon className={minusIconClassNames.join(' ')} />
+        <AlignedMinusIcon className={minusIconClassNames} />
       </ButtonComponent>
       {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
       <input
@@ -114,7 +110,7 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
         readOnly
         value={formatValue(value)}
         id={id}
-        className={inputStyles.join(' ')}
+        className={inputStyles}
         {...rest}
       />
       <ButtonComponent
@@ -125,7 +121,7 @@ const BpkConfigurableNudger = <T>(props: Props<T>) => {
         aria-controls={id}
         className={getClassName('bpk-nudger__button')}
       >
-        <AlignedPlusIcon className={plusIconClassNames.join(' ')} />
+        <AlignedPlusIcon className={plusIconClassNames} />
       </ButtonComponent>
     </div>
   );

package/bpk-component-nudger/src/BpkNudger.js

@@ -20,7 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkConfigurableNudger from './BpkConfigurableNudger';
 import {

package/bpk-component-nudger/src/BpkNudger.module.scss

@@ -35,7 +35,7 @@ $bpk-spacing-v2: true;
     @include bpk-text;
     @include bpk-subheading;
 
-    &--outline {
+    &--secondary-on-dark {
       background-color: transparent;
       color: $bpk-color-white;
     }

package/bpk-component-nudger/src/common-types.js

@@ -36,7 +36,7 @@ export const COMMON_PROP_TYPES = {
   increaseButtonLabel: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   className: PropTypes.string,
-  buttonType: PropTypes.oneOf(['secondary', 'outline']),
+  buttonType: PropTypes.oneOf(['secondary', 'secondaryOnDark']),
 };
 
 export const COMMON_DEFAULT_PROPS = {

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { secondaryThemeAttributes as themeAttributes } from 'bpk-component-button/themeAttributes';
+import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
 
 export default themeAttributes;

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },
@@ -21,8 +21,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.5",
-    "bpk-component-text": "^6.1.5"
+    "bpk-component-image": "^5.1.7",
+    "bpk-component-text": "^7.0.0"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-overlay/src/BpkOverlay.js

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

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-button": "^6.2.1",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -23,6 +23,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.5"
+    "bpk-component-icon": "^9.2.7"
   }
 }

package/bpk-component-pagination/src/BpkPagination.js

@@ -18,7 +18,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationList from './BpkPaginationList';
 import BpkPaginationNudger from './BpkPaginationNudger';

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationPage from './BpkPaginationPage';
 import BpkPaginationBreak from './BpkPaginationBreak';

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -18,10 +18,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
-import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
+
+import { cssModules } from '../../bpk-react-utils';
+import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
+import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
 
 import STYLES from './BpkPaginationNudger.module.scss';
 

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import BpkButton from 'bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import BpkButton from '../../bpk-component-button';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPaginationPage.module.scss';
 

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -25,6 +25,8 @@ $bpk-spacing-v2: true;
   height: $bpk-button-height;
   padding: 0;
   border-radius: 50%;
+
+  @include bpk-label-1;
 }
 
 .bpk-pagination-page--selected {

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

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { secondaryThemeAttributes } from 'bpk-component-button';
+import { secondaryThemeAttributes } from '../../bpk-component-button';
 
 export default [
   ...secondaryThemeAttributes,

package/bpk-component-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "Backpack panel component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

package/bpk-component-panel/src/BpkPanel.js

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

package/bpk-component-phone-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.7",
+  "version": "7.1.11",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-component-input": "^6.1.5",
-    "bpk-component-label": "^5.1.4",
-    "bpk-component-select": "^5.1.4",
-    "bpk-component-text": "^6.1.5",
-    "bpk-mixins": "^28.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-input": "^6.1.9",
+    "bpk-component-label": "^5.1.6",
+    "bpk-component-select": "^5.1.6",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -27,7 +27,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.7",
-    "bpk-component-image": "^5.1.5"
+    "bpk-component-fieldset": "^4.1.11",
+    "bpk-component-image": "^5.1.7"
   }
 }

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -20,10 +20,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
-import BpkLabel from 'bpk-component-label';
-import BpkSelect from 'bpk-component-select';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
+import BpkLabel from '../../bpk-component-label';
+import BpkSelect from '../../bpk-component-select';
 
 import STYLES from './BpkPhoneInput.module.scss';