@skyscanner/backpack-web 0.0.4 → 0.1.0

package/bpk-animate-height/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-animate-height",
-  "version": "4.1.0",
+  "version": "4.1.4",
   "description": "Animate height using CSS transitions.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,7 +20,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-button": "^5.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-button": "^6.1.0"
   }
 }

package/bpk-component-accordion/README.md

@@ -97,7 +97,6 @@ const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
 | children  | node     | true     | -             |
 | id        | string   | true     | -             |
 | title     | string   | true     | -             |
-| weight (deprecated, use a different `textStyle` to achieve the desired weight)    | See prop details     | false    | null         |
 | expanded  | bool     | false    | false         |
 | icon      | node     | false    | null          |
 | onClick   | func     | false    | () => null    |
@@ -118,10 +117,6 @@ const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
 
 ## Prop Details
 
-#### weight
-
-This prop takes `WEIGHT_STYLES` that has been re-exported from `BpkText`. For valid options please refer to the [BpkText](https://backpack.github.io/components/text?platform=web#readme) docs.
-
 ## Theme Props
 
 * `accordionColor`,

package/bpk-component-accordion/index.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import BpkAccordion from './src/BpkAccordion';
-import BpkAccordionItem, { WEIGHT_STYLES } from './src/BpkAccordionItem';
+import BpkAccordionItem from './src/BpkAccordionItem';
 import withSingleItemAccordionState from './src/withSingleItemAccordionState';
 import withAccordionItemState from './src/withAccordionItemState';
 import themeAttributes from './src/themeAttributes';
@@ -30,5 +30,4 @@ export {
   withSingleItemAccordionState,
   withAccordionItemState,
   themeAttributes,
-  WEIGHT_STYLES,
 };

package/bpk-component-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "4.1.1",
+  "version": "5.0.3",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,18 +14,18 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-animate-height": "^4.1.4",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-text": "^6.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-checkbox": "^4.1.1"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-checkbox": "^4.1.5"
   }
 }

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,11 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-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 AnimateHeight from 'bpk-animate-height';
+import { withButtonAlignment } from 'bpk-component-icon';
+import ChevronDownIcon from 'bpk-component-icon/sm/chevron-down';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkAccordionItem.module.scss';
 
@@ -35,13 +32,10 @@ const getClassName = cssModules(STYLES);
 
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);
 
-export const WEIGHT_STYLES = weights;
-
 type Props = {
   children: Node,
   id: string,
   title: string,
-  weight: ?$Keys<typeof WEIGHT_STYLES>,
   expanded: boolean,
   icon: ?Element<any>,
   onClick: () => mixed,
@@ -60,7 +54,6 @@ const BpkAccordionItem = (props: Props) => {
     tagName,
     textStyle,
     title,
-    weight,
     ...rest
   } = props;
 
@@ -79,8 +72,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 (
@@ -99,7 +92,6 @@ const BpkAccordionItem = (props: Props) => {
               textStyle={textStyle}
               tagName={tagName}
               className={getClassName('bpk-accordion__title-text')}
-              weight={weight}
             >
               {clonedIcon}
               {title}
@@ -127,10 +119,6 @@ BpkAccordionItem.propTypes = {
   children: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  weight: deprecated(
-    PropTypes.string,
-    'Use a different "textStyle" to achieve the desired weight',
-  ),
   expanded: PropTypes.bool,
   icon: PropTypes.node,
   onClick: PropTypes.func,
@@ -139,7 +127,6 @@ BpkAccordionItem.propTypes = {
 };
 
 BpkAccordionItem.defaultProps = {
-  weight: null,
   expanded: false,
   icon: null,
   onClick: () => null,

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,
@@ -59,7 +59,7 @@ const withAccordionItemState = (ComposedComponent: ComponentType<any>) => {
         (prevState) => ({
           expanded: !prevState.expanded,
         }),
-        this.props.onClick || (() => { }),
+        this.props.onClick || (() => {}),
       );
     };
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "2.1.1",
+  "version": "2.1.7",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,16 +13,16 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "bpk-component-chip": "^5.2.1",
-    "bpk-component-code": "^3.1.0",
-    "bpk-component-fieldset": "^4.1.1",
-    "bpk-component-select": "^5.1.0",
-    "bpk-component-switch": "^2.1.0"
+    "bpk-component-chip": "^5.2.5",
+    "bpk-component-code": "^3.1.4",
+    "bpk-component-fieldset": "^4.1.7",
+    "bpk-component-select": "^5.1.4",
+    "bpk-component-switch": "^2.1.4"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "6.1.1",
+  "version": "6.1.5",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-input": "^6.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.1"
+    "bpk-component-icon": "^9.2.5"
   }
 }

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

@@ -19,9 +19,9 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkInput from '../../bpk-component-input';
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-badge",
-  "version": "4.1.1",
+  "version": "4.1.5",
   "description": "Backpack badge component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-storybook-utils": "^1.1.3"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "6.1.1",
+  "version": "6.1.5",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-animate-height": "^4.1.0",
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-animate-height": "^4.1.4",
+    "bpk-component-close-button": "^3.1.5",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.1",
-    "bpk-component-button": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-aria-live": "^2.1.7",
+    "bpk-component-button": "^6.1.0",
+    "bpk-storybook-utils": "^1.1.3"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -23,14 +23,14 @@
 
 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 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 { withButtonAlignment } from 'bpk-component-icon';
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "4.2.1",
+  "version": "4.2.5",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-mobile-scroll-container": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-mobile-scroll-container": "^3.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "lodash.debounce": "^4.0.8",
@@ -27,9 +27,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-breakpoint": "^3.1.0",
-    "bpk-component-content-container": "^4.1.0",
-    "bpk-component-rtl-toggle": "^3.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-breakpoint": "^3.1.4",
+    "bpk-component-content-container": "^4.1.4",
+    "bpk-component-rtl-toggle": "^3.1.4",
+    "bpk-component-text": "^6.1.5"
   }
 }

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

@@ -26,8 +26,8 @@ import {
   spacingXs,
   lineHeightSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from '../../bpk-react-utils';
-import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
+import { cssModules } from 'bpk-react-utils';
+import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
 
 import BpkBarchartDefs from './BpkBarchartDefs';
 import BpkBarchartBars from './BpkBarchartBars';

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-blockquote",
-  "version": "3.1.0",
+  "version": "3.1.4",
   "description": "Backpack blockquote component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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.1",
+  "version": "3.1.5",
   "description": "Backpack breadcrumb component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-link": "^3.1.4",
+    "bpk-component-text": "^6.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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