@skyscanner/backpack-web 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,100 @@
+# Backpack Design System
+
+> Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.
+
+[![Build Status](https://github.com/Skyscanner/backpack/workflows/Backpack%20CI/badge.svg)](https://github.com/Skyscanner/backpack/actions)
+
+
+## Quick links
+
+- [Documentation](https://backpack.github.io/)
+- [Changelog](./CHANGELOG.md)
+
+## Usage
+
+### Installing packages
+
+```sh
+npm install [package-name] --save-dev
+```
+
+## Contributing
+
+To contribute please see [contributing.md](CONTRIBUTING.md).
+
+## List of packages
+
+| Component | Version |
+|--------|-------|
+| [`bpk-component-accordion`](/packages/bpk-component-accordion) | [![npm version](https://badge.fury.io/js/bpk-component-accordion.svg)](http://badge.fury.io/js/bpk-component-accordion) |
+| [`bpk-component-autosuggest`](/packages/bpk-component-autosuggest) | [![npm version](https://badge.fury.io/js/bpk-component-autosuggest.svg)](http://badge.fury.io/js/bpk-component-autosuggest) |
+| [`bpk-component-badge`](/packages/bpk-component-badge) | [![npm version](https://badge.fury.io/js/bpk-component-badge.svg)](http://badge.fury.io/js/bpk-component-badge) |
+| [`bpk-component-banner-alert`](/packages/bpk-component-banner-alert) | [![npm version](https://badge.fury.io/js/bpk-component-banner-alert.svg)](http://badge.fury.io/js/bpk-component-banner-alert) |
+| [`bpk-component-barchart`](/packages/bpk-component-barchart) | [![npm version](https://badge.fury.io/js/bpk-component-barchart.svg)](http://badge.fury.io/js/bpk-component-barchart) |
+| [`bpk-component-blockquote`](/packages/bpk-component-blockquote) | [![npm version](https://badge.fury.io/js/bpk-component-blockquote.svg)](http://badge.fury.io/js/bpk-component-blockquote) |
+| [`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb) | [![npm version](https://badge.fury.io/js/bpk-component-breadcrumb.svg)](http://badge.fury.io/js/bpk-component-breadcrumb) |
+| [`bpk-component-breakpoint`](/packages/bpk-component-breakpoint) | [![npm version](https://badge.fury.io/js/bpk-component-breakpoint.svg)](http://badge.fury.io/js/bpk-component-breakpoint) |
+| [`bpk-component-button`](/packages/bpk-component-button) | [![npm version](https://badge.fury.io/js/bpk-component-button.svg)](http://badge.fury.io/js/bpk-component-button) |
+| [`bpk-component-calendar`](/packages/bpk-component-calendar) | [![npm version](https://badge.fury.io/js/bpk-component-calendar.svg)](http://badge.fury.io/js/bpk-component-calendar) |
+| [`bpk-component-card`](/packages/bpk-component-card) | [![npm version](https://badge.fury.io/js/bpk-component-card.svg)](http://badge.fury.io/js/bpk-component-card) |
+| [`bpk-component-checkbox`](/packages/bpk-component-checkbox) | [![npm version](https://badge.fury.io/js/bpk-component-checkbox.svg)](http://badge.fury.io/js/bpk-component-checkbox) |
+| [`bpk-component-chip`](/packages/bpk-component-chip) | [![npm version](https://badge.fury.io/js/bpk-component-chip.svg)](http://badge.fury.io/js/bpk-component-chip) |
+| [`bpk-component-close-button`](/packages/bpk-component-close-button) | [![npm version](https://badge.fury.io/js/bpk-component-close-button.svg)](http://badge.fury.io/js/bpk-component-close-button) |
+| [`bpk-component-code`](/packages/bpk-component-code) | [![npm version](https://badge.fury.io/js/bpk-component-code.svg)](http://badge.fury.io/js/bpk-component-code) |
+| [`bpk-component-content-container`](/packages/bpk-component-content-container) | [![npm version](https://badge.fury.io/js/bpk-component-content-container.svg)](http://badge.fury.io/js/bpk-component-content-container) |
+| [`bpk-component-datatable`](/packages/bpk-component-datatable) | [![npm version](https://badge.fury.io/js/bpk-component-datatable.svg)](http://badge.fury.io/js/bpk-component-datatable) |
+| [`bpk-component-datepicker`](/packages/bpk-component-datepicker) | [![npm version](https://badge.fury.io/js/bpk-component-datepicker.svg)](http://badge.fury.io/js/bpk-component-datepicker) |
+| [`bpk-component-description-list`](/packages/bpk-component-description-list) | [![npm version](https://badge.fury.io/js/bpk-component-description-list.svg)](http://badge.fury.io/js/bpk-component-description-list) |
+| [`bpk-component-dialog`](/packages/bpk-component-dialog) | [![npm version](https://badge.fury.io/js/bpk-component-dialog.svg)](http://badge.fury.io/js/bpk-component-dialog) |
+| [`bpk-component-drawer`](/packages/bpk-component-drawer) | [![npm version](https://badge.fury.io/js/bpk-component-drawer.svg)](http://badge.fury.io/js/bpk-component-drawer) |
+| [`bpk-component-fieldset`](/packages/bpk-component-fieldset) | [![npm version](https://badge.fury.io/js/bpk-component-fieldset.svg)](http://badge.fury.io/js/bpk-component-fieldset) |
+| [`bpk-component-form-validation`](/packages/bpk-component-form-validation) | [![npm version](https://badge.fury.io/js/bpk-component-form-validation.svg)](http://badge.fury.io/js/bpk-component-form-validation) |
+| [`bpk-component-grid`](/packages/bpk-component-grid) | [![npm version](https://badge.fury.io/js/bpk-component-grid.svg)](http://badge.fury.io/js/bpk-component-grid) |
+| [`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle) | [![npm version](https://badge.fury.io/js/bpk-component-grid-toggle.svg)](http://badge.fury.io/js/bpk-component-grid-toggle) |
+| [`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav) | [![npm version](https://badge.fury.io/js/bpk-component-horizontal-nav.svg)](http://badge.fury.io/js/bpk-component-horizontal-nav) |
+| [`bpk-component-icon`](/packages/bpk-component-icon) | [![npm version](https://badge.fury.io/js/bpk-component-icon.svg)](http://badge.fury.io/js/bpk-component-icon) |
+| [`bpk-component-image`](/packages/bpk-component-image) | [![npm version](https://badge.fury.io/js/bpk-component-image.svg)](http://badge.fury.io/js/bpk-component-image) |
+| [`bpk-component-infinite-scroll`](/packages/bpk-component-infinite-scroll) | [![npm version](https://badge.fury.io/js/bpk-component-infinite-scroll.svg)](http://badge.fury.io/js/bpk-component-infinite-scroll) |
+| [`bpk-component-input`](/packages/bpk-component-input) | [![npm version](https://badge.fury.io/js/bpk-component-input.svg)](http://badge.fury.io/js/bpk-component-input) |
+| [`bpk-component-label`](/packages/bpk-component-label) | [![npm version](https://badge.fury.io/js/bpk-component-label.svg)](http://badge.fury.io/js/bpk-component-label) |
+| [`bpk-component-link`](/packages/bpk-component-link) | [![npm version](https://badge.fury.io/js/bpk-component-link.svg)](http://badge.fury.io/js/bpk-component-link) |
+| [`bpk-component-list`](/packages/bpk-component-list) | [![npm version](https://badge.fury.io/js/bpk-component-list.svg)](http://badge.fury.io/js/bpk-component-list) |
+| [`bpk-component-loading-button`](/packages/bpk-component-loading-button) | [![npm version](https://badge.fury.io/js/bpk-component-loading-button.svg)](http://badge.fury.io/js/bpk-component-loading-button) |
+| [`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container) | [![npm version](https://badge.fury.io/js/bpk-component-mobile-scroll-container.svg)](http://badge.fury.io/js/bpk-component-mobile-scroll-container) |
+| [`bpk-component-modal`](/packages/bpk-component-modal) | [![npm version](https://badge.fury.io/js/bpk-component-modal.svg)](http://badge.fury.io/js/bpk-component-modal) |
+| [`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar) | [![npm version](https://badge.fury.io/js/bpk-component-navigation-bar.svg)](http://badge.fury.io/js/bpk-component-navigation-bar) |
+| [`bpk-component-navigation-stack`](/packages/bpk-component-navigation-stack) | [![npm version](https://badge.fury.io/js/bpk-component-navigation-stack.svg)](http://badge.fury.io/js/bpk-component-navigation-stack) |
+| [`bpk-component-nudger`](/packages/bpk-component-nudger) | [![npm version](https://badge.fury.io/js/bpk-component-nudger.svg)](http://badge.fury.io/js/bpk-component-nudger) |
+| [`bpk-component-pagination`](/packages/bpk-component-pagination) | [![npm version](https://badge.fury.io/js/bpk-component-pagination.svg)](http://badge.fury.io/js/bpk-component-pagination) |
+| [`bpk-component-panel`](/packages/bpk-component-panel) | [![npm version](https://badge.fury.io/js/bpk-component-panel.svg)](http://badge.fury.io/js/bpk-component-panel) |
+| [`bpk-component-phone-input`](/packages/bpk-component-phone-input) | [![npm version](https://badge.fury.io/js/bpk-component-phone-input.svg)](http://badge.fury.io/js/bpk-component-phone-input) |
+| [`bpk-component-popover`](/packages/bpk-component-popover) | [![npm version](https://badge.fury.io/js/bpk-component-popover.svg)](http://badge.fury.io/js/bpk-component-popover) |
+| [`bpk-component-progress`](/packages/bpk-component-progress) | [![npm version](https://badge.fury.io/js/bpk-component-progress.svg)](http://badge.fury.io/js/bpk-component-progress) |
+| [`bpk-component-radio`](/packages/bpk-component-radio) | [![npm version](https://badge.fury.io/js/bpk-component-radio.svg)](http://badge.fury.io/js/bpk-component-radio) |
+| [`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle) | [![npm version](https://badge.fury.io/js/bpk-component-rtl-toggle.svg)](http://badge.fury.io/js/bpk-component-rtl-toggle) |
+| [`bpk-component-section-list`](/packages/bpk-component-section-list) | [![npm version](https://badge.fury.io/js/bpk-component-section-list.svg)](http://badge.fury.io/js/bpk-component-section-list) |
+| [`bpk-component-select`](/packages/bpk-component-select) | [![npm version](https://badge.fury.io/js/bpk-component-select.svg)](http://badge.fury.io/js/bpk-component-select) |
+| [`bpk-component-slider`](/packages/bpk-component-slider) | [![npm version](https://badge.fury.io/js/bpk-component-slider.svg)](http://badge.fury.io/js/bpk-component-slider) |
+| [`bpk-component-spinner`](/packages/bpk-component-spinner) | [![npm version](https://badge.fury.io/js/bpk-component-spinner.svg)](http://badge.fury.io/js/bpk-component-spinner) |
+| [`bpk-component-star-rating`](/packages/bpk-component-star-rating) | [![npm version](https://badge.fury.io/js/bpk-component-star-rating.svg)](http://badge.fury.io/js/bpk-component-star-rating) |
+| [`bpk-component-table`](/packages/bpk-component-table) | [![npm version](https://badge.fury.io/js/bpk-component-table.svg)](http://badge.fury.io/js/bpk-component-table) |
+| [`bpk-component-text`](/packages/bpk-component-text) | [![npm version](https://badge.fury.io/js/bpk-component-text.svg)](http://badge.fury.io/js/bpk-component-text) |
+| [`bpk-component-textarea`](/packages/bpk-component-textarea) | [![npm version](https://badge.fury.io/js/bpk-component-textarea.svg)](http://badge.fury.io/js/bpk-component-textarea) |
+| [`bpk-theming`](/packages/bpk-theming) | [![npm version](https://badge.fury.io/js/bpk-theming.svg)](http://badge.fury.io/js/bpk-theming) |
+| [`bpk-component-ticket`](/packages/bpk-component-ticket) | [![npm version](https://badge.fury.io/js/bpk-component-ticket.svg)](http://badge.fury.io/js/bpk-component-ticket) |
+| [`bpk-component-tooltip`](/packages/bpk-component-tooltip) | [![npm version](https://badge.fury.io/js/bpk-component-tooltip.svg)](http://badge.fury.io/js/bpk-component-tooltip) |
+| [`bpk-react-utils`](/packages/bpk-react-utils) | [![npm version](https://badge.fury.io/js/bpk-react-utils.svg)](http://badge.fury.io/js/bpk-react-utils) |
+
+## List of external packages
+
+These components are part of Backpack and are utilised by the components but live in the Foundations repository.
+
+| Component | Version |
+|--------|-------|
+| [`bpk-mixins`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-mixins) | [![npm version](https://badge.fury.io/js/bpk-mixins.svg)](http://badge.fury.io/js/bpk-mixins) |
+| [`bpk-stylesheets`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-stylesheets) | [![npm version](https://badge.fury.io/js/bpk-stylesheets.svg)](http://badge.fury.io/js/bpk-stylesheets) |
+| [`@skyscanner/bpk-svgs`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-svgs) | [![npm version](https://badge.fury.io/js/%40skyscanner%2Fbpk-svgs.svg)](https://badge.fury.io/js/%40skyscanner%2Fbpk-svgs) |
+| [`@skyscanner/bpk-foundations-web`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-foundations-web) | [![npm version](https://badge.fury.io/js/%40skyscanner%2Fbpk-foundations-web.svg)](https://badge.fury.io/js/%40skyscanner%2Fbpk-foundations-web) |
+
+## Contact
+- backpack@skyscanner.net

package/bpk-component-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-animate-height": "^4.1.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-text": "^6.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",
     "prop-types": "^15.7.2"
@@ -26,6 +26,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-checkbox": "^4.1.0"
+    "bpk-component-checkbox": "^4.1.1"
   }
 }

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -144,7 +144,7 @@ BpkAccordionItem.defaultProps = {
   icon: null,
   onClick: () => null,
   tagName: 'span',
-  textStyle: TEXT_STYLES.base,
+  textStyle: TEXT_STYLES.bodyDefault,
 };
 
 export default BpkAccordionItem;

package/bpk-component-aria-live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -18,9 +18,9 @@
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "bpk-component-chip": "^5.2.0",
+    "bpk-component-chip": "^5.2.1",
     "bpk-component-code": "^3.1.0",
-    "bpk-component-fieldset": "^4.1.0",
+    "bpk-component-fieldset": "^4.1.1",
     "bpk-component-select": "^5.1.0",
     "bpk-component-switch": "^2.1.0"
   },

package/bpk-component-autosuggest/package.json

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

package/bpk-component-badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-badge",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack badge component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-storybook-utils": "^1.1.0"
   }
 }

package/bpk-component-banner-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,15 +16,15 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
     "bpk-animate-height": "^4.1.0",
-    "bpk-component-close-button": "^3.1.0",
-    "bpk-component-icon": "^9.2.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",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.0",
+    "bpk-component-aria-live": "^2.1.1",
     "bpk-component-button": "^5.1.0",
     "bpk-storybook-utils": "^1.1.0"
   },

package/bpk-component-barchart/examples.js

@@ -21,7 +21,7 @@
 import React from 'react';
 import { number } from 'prop-types';
 import { cssModules, withDefaultProps } from 'bpk-react-utils';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { scaleLinear, scaleBand } from 'd3-scale';
@@ -40,7 +40,7 @@ import BpkBarchart, {
 const getClassName = cssModules(STYLES);
 
 const Heading = withDefaultProps(BpkText, {
-  textStyle: 'xl',
+  textStyle: TEXT_STYLES.subheading,
   tagName: 'h1',
   className: getClassName('bpk-heading'),
 });

package/bpk-component-barchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,6 +30,6 @@
     "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.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

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-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-card/examples.js

@@ -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-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-chip/examples.js

@@ -21,7 +21,7 @@
 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 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';
@@ -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/BpkSelectableChip.js

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "15.2.0",
+  "version": "15.2.1",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-component-breakpoint": "^3.1.0",
-    "bpk-component-calendar": "^11.1.0",
-    "bpk-component-input": "^6.1.0",
-    "bpk-component-modal": "^3.1.0",
-    "bpk-component-popover": "^4.1.0",
+    "bpk-component-calendar": "^11.1.1",
+    "bpk-component-input": "^6.1.1",
+    "bpk-component-modal": "^3.1.1",
+    "bpk-component-popover": "^4.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"

package/bpk-component-dialog/examples.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import BpkButton from 'bpk-component-button';
 import TickIcon from 'bpk-component-icon/lg/tick';
 import InfoIcon from 'bpk-component-icon/lg/information-circle';
@@ -34,7 +34,7 @@ import BpkDialog, { HEADER_ICON_TYPES } from './index';
 const getClassName = cssModules(STYLES);
 
 const Paragraph = withDefaultProps(BpkText, {
-  textStyle: 'base',
+  textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'p',
   className: getClassName('bpk-dialog-paragraph'),
 });

package/bpk-component-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-dialog",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack dialog component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.0",
-    "bpk-component-flare": "^2.1.0",
+    "bpk-component-close-button": "^3.1.1",
+    "bpk-component-flare": "^2.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "bpk-scrim-utils": "^5.1.0",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-text": "^6.1.1"
   }
 }

package/bpk-component-drawer/examples.js

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { cssModules, withDefaultProps } from 'bpk-react-utils';
 import BpkButton from 'bpk-component-button';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 
 import STYLES from './examples.module.scss';
 
@@ -31,7 +31,7 @@ import BpkDrawer from './index';
 const getClassName = cssModules(STYLES);
 
 const Paragraph = withDefaultProps(BpkText, {
-  textStyle: 'base',
+  textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'p',
   className: getClassName('bpk-drawer-paragraph'),
 });

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-close-button": "^3.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-close-button": "^3.1.1",
+    "bpk-component-icon": "^9.2.1",
     "bpk-component-link": "^3.1.0",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
@@ -29,6 +29,6 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.0",
+    "bpk-component-form-validation": "^4.2.1",
     "bpk-component-label": "^5.1.0",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
@@ -24,12 +24,12 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.0",
+    "bpk-component-autosuggest": "^6.1.1",
     "bpk-component-button": "^5.1.0",
-    "bpk-component-calendar": "^11.1.0",
-    "bpk-component-checkbox": "^4.1.0",
-    "bpk-component-datepicker": "^15.2.0",
-    "bpk-component-input": "^6.1.0",
+    "bpk-component-calendar": "^11.1.1",
+    "bpk-component-checkbox": "^4.1.1",
+    "bpk-component-datepicker": "^15.2.1",
+    "bpk-component-input": "^6.1.1",
     "bpk-component-select": "^5.1.0",
     "bpk-component-textarea": "^4.2.0"
   }