@skyscanner/backpack-web 0.0.6 → 0.3.0

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "5.1.0",
+  "version": "5.1.6",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-select/src/BpkSelect.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSelect.module.scss';

package/bpk-component-skip-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "2.1.0",
+  "version": "2.1.6",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -13,8 +13,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },
   "publishConfig": {

package/bpk-component-skip-link/src/BpkSkipLink.js

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

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.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-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.0"
+    "bpk-component-rtl-toggle": "^3.1.6"
   }
 }

package/bpk-component-slider/src/BpkSlider.js

@@ -19,6 +19,7 @@
 import React from 'react';
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
+
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkSlider.module.scss';

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.0",
+  "version": "5.1.6",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-svgs": "^14.0.19",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-svgs": "^14.1.7",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
 import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
 import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
 import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.1",
+  "version": "3.1.7",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-table": "^3.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-table": "^3.1.6",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

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

package/bpk-component-star-rating/src/BpkStar.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import SmallIcon from '../../bpk-component-icon/sm/star';
 import LargeIcon from '../../bpk-component-icon/lg/star';
 import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline';

package/bpk-component-star-rating/src/BpkStarRating.js

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

package/bpk-component-star-rating/src/withInteractiveStarRatingState.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type ComponentType } from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 const withInteractiveStarRatingState = (

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.0",
+  "version": "2.1.7",
   "description": "Backpack switch 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": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-switch/src/BpkSwitch.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSwitch.module.scss';

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack table 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": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-table/src/BpkTable.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';

package/bpk-component-table/src/BpkTableCell.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';

package/bpk-component-text/README.md

@@ -69,7 +69,7 @@ export default () => (
 | Property  | PropType                                 | Required | Default Value |
 | --------- | ---------------------------------------- | -------- | ------------- |
 | children  | -                                        | true     | -             |
-| textStyle | oneOf(TEXT_STYLES.xs, TEXT_STYLES.sm, TEXT_STYLES.base, TEXT_STYLES.lg, TEXT_STYLES.xl, TEXT_STYLES.xxl, TEXT_STYLES.xxxl, TEXT_STYLES.xxxxl, TEXT_STYLES.xxxxxl, TEXT_STYLES.caption, TEXT_STYLES.footnote, TEXT_STYLES.label1, TEXT_STYLES.label2, TEXT_STYLES.bodyDefault, TEXT_STYLES.bodyLongform, TEXT_STYLES.subheading, TEXT_STYLES.heading1, TEXT_STYLES.heading2, TEXT_STYLES.heading3, TEXT_STYLES.heading4, TEXT_STYLES.heading5, TEXT_STYLES.hero1, TEXT_STYLES.hero2, TEXT_STYLES.hero3, TEXT_STYLES.hero4, TEXT_STYLES.hero5)    | false    | TEXT_STYLES.base  |
+| textStyle | oneOf(TEXT_STYLES.caption, TEXT_STYLES.footnote, TEXT_STYLES.label1, TEXT_STYLES.label2, TEXT_STYLES.label3, TEXT_STYLES.bodyDefault, TEXT_STYLES.bodyLongform, TEXT_STYLES.subheading, TEXT_STYLES.heading1, TEXT_STYLES.heading2, TEXT_STYLES.heading3, TEXT_STYLES.heading4, TEXT_STYLES.heading5, TEXT_STYLES.hero1, TEXT_STYLES.hero2, TEXT_STYLES.hero3, TEXT_STYLES.hero4, TEXT_STYLES.hero5, TEXT_STYLES.xs, TEXT_STYLES.sm, TEXT_STYLES.base, TEXT_STYLES.lg, TEXT_STYLES.xl, TEXT_STYLES.xxl, TEXT_STYLES.xxxl, TEXT_STYLES.xxxxl, TEXT_STYLES.xxxxxl)    | false    | TEXT_STYLES.base  |
 | tagName   | 'span', 'p', 'text', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' | false    | 'span'        |
 | className | string                                   | false    | null          |
 | bold (deprecated, use a different `textStyle` to achieve the desired weight)     | bool                                     | false    | null         |

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "6.1.1",
+  "version": "7.0.0",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-text/src/BpkText.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkText.module.scss';
@@ -40,6 +41,7 @@ export const TEXT_STYLES = {
   footnote: 'footnote',
   label1: 'label-1',
   label2: 'label-2',
+  label3: 'label-3',
   bodyDefault: 'body-default',
   bodyLongform: 'body-longform',
   subheading: 'subheading',

package/bpk-component-text/src/BpkText.module.scss

@@ -73,6 +73,10 @@
     @include bpk-label-2;
   }
 
+  &--label-3 {
+    @include bpk-label-3;
+  }
+
   &--body-default {
     @include bpk-body-default;
   }

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "4.2.0",
+  "version": "4.2.6",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-label": "^5.1.6",
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-textarea/src/BpkTextarea.js

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

package/bpk-component-theme-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-label": "^5.1.0",
-    "bpk-component-select": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-label": "^5.1.6",
+    "bpk-component-select": "^5.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "konami": "^1.6.2",
     "prop-types": "^15.7.2"
   },

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import Konami from 'konami';
+
 import BpkLabel from '../../bpk-component-label';
 import BpkSelect from '../../bpk-component-select';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -18,6 +18,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.1",
+  "version": "4.1.7",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7"
   }
 }

package/bpk-component-ticket/src/BpkTicket.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTicket.module.scss';

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "6.1.1",
+  "version": "6.1.7",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,15 +15,15 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/popper.js": "^1.12.9-beta.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.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-text": "^6.1.1"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -26,6 +26,7 @@ The actual component that developers create (i.e. the default export from this p
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTooltip.module.scss';

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -21,6 +21,7 @@
 import Popper from '@skyscanner/popper.js';
 import PropTypes from 'prop-types';
 import React, { Component, type Node, type Element } from 'react';
+
 import { Portal, cssModules } from '../../bpk-react-utils';
 
 import BpkTooltip, {

package/bpk-react-utils/index.js

@@ -18,8 +18,7 @@
 
 /* @flow strict */
 
-import wrapDisplayName from 'recompose/wrapDisplayName';
-
+import wrapDisplayName from './src/wrapDisplayName';
 import Portal from './src/Portal';
 import TransitionInitialMount from './src/TransitionInitialMount';
 import cssModules from './src/cssModules';

package/bpk-react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,8 +16,7 @@
   "dependencies": {
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
-    "react-transition-group": "^2.5.3",
-    "recompose": "^0.30.0"
+    "react-transition-group": "^2.5.3"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0",

package/bpk-react-utils/src/withDefaultProps.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type AbstractComponent } from 'react';
-import wrapDisplayName from 'recompose/wrapDisplayName';
+
+import wrapDisplayName from './wrapDisplayName';
 
 type Props = {
   children: ?Node,

package/{bpk-component-chip/examples.module.scss → bpk-react-utils/src/wrapDisplayName.js}

@@ -1,7 +1,7 @@
 /*
  * Backpack - Skyscanner's Design System
  *
- * Copyright 2016 Skyscanner Ltd
+ * Copyright 2022 Skyscanner Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,18 +16,16 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
-
-$custom-color: $bpk-color-sagano;
-
-.bpk-chip-examples {
-  &__wrapper {
-    display: flex;
-    flex-wrap: wrap;
+const wrapDisplayName = (Component, hoc) => {
+  if (!Component) {
+    return `${hoc}()`;
   }
 
-  &__chip {
-    margin-right: $bpk-spacing-xs;
-    margin-bottom: $bpk-spacing-sm;
+  if (typeof Component === 'string') {
+    return `${hoc}(${Component})`;
   }
-}
+
+  return `${hoc}(${Component.displayName || Component.name || 'Component'})`;
+};
+
+export default wrapDisplayName;

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "5.1.0",
+  "version": "5.1.5",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,8 +16,8 @@
   "dependencies": {
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0"
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-scrim-utils/src/BpkScrim.js

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