@skyscanner/backpack-web 0.0.1 → 0.0.2

package/bpk-component-flare/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import { cssModules } from 'bpk-react-utils';
 
 import { BpkFlareBar, BpkContentBubble } from './index';
@@ -33,7 +33,7 @@ const contentShort = (
   <div className={getClassName('bpk-flare-stories__content')}>
     <BpkText tagName="h1" textStyle="xxl">
       Love planet. Will travel.
-      <BpkText tagName="p" textStyle="base">
+      <BpkText tagName="p" textStyle={TEXT_STYLES.bodyDefault}>
         Go discover a new adventure.
       </BpkText>
     </BpkText>
@@ -43,7 +43,7 @@ const content = (
   <div className={getClassName('bpk-flare-stories__content')}>
     <BpkText tagName="h1" textStyle="xxl">
       Love planet. Will travel.
-      <BpkText tagName="p" textStyle="base">
+      <BpkText tagName="p" textStyle={TEXT_STYLES.bodyDefault}>
         Lorem ipsum dolor sit amet consectetur adipiscing elit, volutpat tellus
         massa taciti platea auctor, accumsan egestas cubilia ultricies lacus
         consequat. Vulputate quisque dignissim habitant urna accumsan tempor

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -18,7 +18,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-component-label": "^5.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-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -25,9 +25,9 @@
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
     "bpk-component-button": "^5.1.0",
-    "bpk-component-checkbox": "^4.1.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-input": "^6.1.0",
+    "bpk-component-checkbox": "^4.1.1",
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-input": "^6.1.1",
     "bpk-component-select": "^5.1.0",
     "bpk-component-textarea": "^4.2.0"
   }

package/bpk-component-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-text": "^6.1.1",
     "bpk-storybook-utils": "^1.1.0"
   }
 }

package/bpk-component-icon/examples.js

@@ -26,7 +26,7 @@ import {
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkButton from 'bpk-component-button';
 import { BpkList, BpkListItem } from 'bpk-component-list';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 
 import { sm, lg } from './all';
 import SearchIcon from './lg/search';
@@ -86,28 +86,28 @@ const LargeIconsExample = () => (
 );
 
 const AlignToBaseTextExample = () => (
-  <BpkText textStyle="base">
+  <BpkText textStyle={TEXT_STYLES.bodyDefault}>
     Search &nbsp;
     <AlignedBaseArrow fill={colors.colorSkyGrayTint01} />
   </BpkText>
 );
 
 const AlignToLargeTextExample = () => (
-  <BpkText textStyle="lg">
+  <BpkText textStyle={TEXT_STYLES.bodyLongform}>
     Search &nbsp;
     <AlignedLargeLongArrowRightIcon fill={colors.colorSkyGrayTint01} />
   </BpkText>
 );
 
 const AlignSmallTextToIconExample = () => (
-  <BpkText textStyle="sm">
+  <BpkText textStyle={TEXT_STYLES.footnote}>
     <SearchIcon fill={colors.colorSkyGrayTint01} />
     <AlignedSpanSmall>&nbsp; Search</AlignedSpanSmall>
   </BpkText>
 );
 
 const AlignTextToIconExample = () => (
-  <BpkText textStyle="base">
+  <BpkText textStyle={TEXT_STYLES.bodyDefault}>
     <SearchIcon fill={colors.colorSkyGrayTint01} />
     <AlignedSpan>&nbsp; Search</AlignedSpan>
   </BpkText>

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -26,7 +26,7 @@
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
     "bpk-component-list": "^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-image/examples.js

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import BpkImage, {
@@ -154,7 +154,7 @@ const BackgroundImageExample = () => (
     src={image}
   >
     <div style={{ marginLeft: spacingSm, paddingTop: spacingSm }}>
-      <BpkText tagName="h2" textStyle="xl">
+      <BpkText tagName="h2" textStyle={TEXT_STYLES.subheading}>
         Lorem ipsum dolor sit amet
       </BpkText>
     </div>
@@ -174,7 +174,7 @@ const BackgroundImageLegacyPropsExample = () => (
     src={image}
   >
     <div style={{ marginLeft: spacingSm, paddingTop: spacingSm }}>
-      <BpkText tagName="h2" textStyle="xl">
+      <BpkText tagName="h2" textStyle={TEXT_STYLES.subheading}>
         Lorem ipsum dolor sit amet
       </BpkText>
     </div>
@@ -193,7 +193,7 @@ const BackgroundImageWithLazyLoadingAndAnimationExample = () => (
     src={image}
   >
     <div style={{ marginLeft: spacingSm, paddingTop: spacingSm }}>
-      <BpkText tagName="h2" textStyle="xl">
+      <BpkText tagName="h2" textStyle={TEXT_STYLES.subheading}>
         Lorem ipsum dolor sit amet
       </BpkText>
     </div>

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -26,6 +26,6 @@
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
     "bpk-component-mobile-scroll-container": "^3.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack input 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-banner-alert": "^6.1.0",
+    "bpk-component-banner-alert": "^6.1.1",
     "bpk-component-label": "^5.1.0",
     "bpk-storybook-utils": "^1.1.0"
   }

package/bpk-component-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-component-spinner": "^5.1.0",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,8 +24,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "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-storybook-utils": "^1.1.0",
     "prop-types": "^15.5.8"
   }

package/bpk-component-map/src/BpkPriceMarker.js

@@ -21,10 +21,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from 'bpk-react-utils';
-import BpkText, {
-  WEIGHT_STYLES,
-  TEXT_STYLES,
-} from 'bpk-component-text/src/BpkText';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text/src/BpkText';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import BpkBasicMapMarker from './BpkBasicMapMarker';
@@ -92,11 +89,10 @@ const BpkPriceMarker = (props: Props) => {
       >
         <BpkText
           className={classNames}
-          weight={WEIGHT_STYLES.bold}
           textStyle={
             status === PRICE_MARKER_STATUSES.focused
-              ? TEXT_STYLES.base
-              : TEXT_STYLES.sm
+              ? TEXT_STYLES.label1
+              : TEXT_STYLES.label2
           }
         >
           {label}

package/bpk-component-modal/examples.js

@@ -25,7 +25,7 @@ import BpkButton from 'bpk-component-button';
 import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
 import { withAlignment, withRtlSupport } from 'bpk-component-icon';
 import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import {
   lineHeightBase,
   iconSizeSm,
@@ -43,7 +43,7 @@ const ArrowIconWithRtl = withAlignment(
 const getClassName = cssModules(STYLES);
 
 const Paragraph = withDefaultProps(BpkText, {
-  textStyle: 'base',
+  textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'p',
   className: getClassName('bpk-modal-paragraph'),
 });

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "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-component-navigation-bar": "^3.1.0",
+    "bpk-component-navigation-bar": "^3.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "bpk-scrim-utils": "^5.1.0",
@@ -28,6 +28,6 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.0",
+    "bpk-component-close-button": "^3.1.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"
@@ -26,7 +26,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-navigation-bar/src/BpkNavigationBar.js

@@ -21,7 +21,7 @@
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from 'bpk-react-utils';
-import BpkText, { WEIGHT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 
 import STYLES from './BpkNavigationBar.module.scss';
 
@@ -73,7 +73,7 @@ const BpkNavigationBar = (props: Props) => {
       {typeof title === 'string' ? (
         <BpkText
           id={titleId}
-          weight={WEIGHT_STYLES.bold}
+          textStyle={TEXT_STYLES.label1}
           className={getClassNames('bpk-navigation-bar__title')}
         >
           {title}

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
   "repository": {
@@ -25,8 +25,8 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-navigation-bar": "^3.1.0",
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-navigation-bar": "^3.1.1",
     "bpk-component-rtl-toggle": "^3.1.0"
   }
 }

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "lodash.clamp": "^4.0.3",

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -21,8 +21,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-image": "^5.1.1",
+    "bpk-component-text": "^6.1.1"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,6 +23,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.0"
+    "bpk-component-icon": "^9.2.1"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-input": "^6.1.0",
+    "bpk-component-input": "^6.1.1",
     "bpk-component-label": "^5.1.0",
     "bpk-component-select": "^5.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"
@@ -27,7 +27,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.0",
-    "bpk-component-image": "^5.1.0"
+    "bpk-component-fieldset": "^4.1.1",
+    "bpk-component-image": "^5.1.1"
   }
 }

package/bpk-component-popover/examples.js

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import React, { Component, type Node } 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 BpkContentContainer from 'bpk-component-content-container';
 import BpkInput, { withOpenEvents } from 'bpk-component-input';
 
@@ -35,7 +35,7 @@ const getClassName = cssModules(STYLES);
 const EnhancedInput = withOpenEvents(BpkInput);
 
 const Paragraph = withDefaultProps(BpkText, {
-  textStyle: 'base',
+  textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'p',
   className: getClassName('bpk-popover-paragraph'),
 });

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,9 +17,9 @@
     "@skyscanner/popper.js": "^1.12.9-beta.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.0",
+    "bpk-component-close-button": "^3.1.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"
@@ -30,6 +30,6 @@
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
     "bpk-component-content-container": "^4.1.0",
-    "bpk-component-input": "^6.1.0"
+    "bpk-component-input": "^6.1.1"
   }
 }

package/bpk-component-popover/src/BpkPopover.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import BpkText, { WEIGHT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import { BpkButtonLink } from 'bpk-component-link';
 import BpkCloseButton from 'bpk-component-close-button';
 import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
@@ -111,7 +111,7 @@ const BpkPopover = (props: Props) => {
         />
         {labelAsTitle ? (
           <header className={getClassName('bpk-popover__header')}>
-            <BpkText tagName="h2" id={labelId} weight={WEIGHT_STYLES.bold}>
+            <BpkText tagName="h2" id={labelId} textStyle={TEXT_STYLES.label1}>
               {label}
             </BpkText>
             &nbsp;

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

package/bpk-component-rating/src/BpkRating.js

@@ -21,7 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
 import { cssModules } from 'bpk-react-utils';
-import BpkText, { WEIGHT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 
 import STYLES from './BpkRating.module.scss';
 import { RATING_SIZES, RATING_TYPES, RATING_SCALES } from './common-types';
@@ -90,11 +90,14 @@ const BpkRating = (props: Props) => {
   const textWrapperStyles = [getClassName('bpk-rating__text-wrapper')];
   const textStyles = [getClassName('bpk-rating__text')];
 
-  let textSize = 'base';
+  let titleTextSize = TEXT_STYLES.bodyDefault;
+  let valueTextSize = TEXT_STYLES.label1;
   if (size === RATING_SIZES.lg) {
-    textSize = 'lg';
+    titleTextSize = TEXT_STYLES.bodyLongform;
+    valueTextSize = TEXT_STYLES.heading4;
   } else if (size === RATING_SIZES.sm) {
-    textSize = 'sm';
+    titleTextSize = TEXT_STYLES.footnote;
+    valueTextSize = TEXT_STYLES.label2;
   }
 
   const minValue = getMinValue();
@@ -131,18 +134,17 @@ const BpkRating = (props: Props) => {
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
     <div className={classNames.join(' ')} aria-label={ariaLabel} {...rest}>
       <BpkText
-        textStyle={textSize}
+        textStyle={valueTextSize}
         tagName="span"
         className={scoreStyles.join(' ')}
         aria-hidden="true"
-        weight={WEIGHT_STYLES.bold}
       >
         {adjustedValue}
       </BpkText>
       <div className={textWrapperStyles.join(' ')}>
         <BpkText
           className={textStyles.join(' ')}
-          textStyle={textSize}
+          textStyle={titleTextSize}
           tagName="span"
           aria-hidden="true"
         >
@@ -152,7 +154,11 @@ const BpkRating = (props: Props) => {
         {subtitle && type !== RATING_TYPES.pill && (
           <BpkText
             className={textStyles.join(' ')}
-            textStyle={size === RATING_SIZES.lg ? 'sm' : 'xs'}
+            textStyle={
+              size === RATING_SIZES.lg
+                ? TEXT_STYLES.footnote
+                : TEXT_STYLES.caption
+            }
             tagName="span"
             aria-hidden="true"
           >

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-calendar": "^11.1.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-calendar": "^11.1.1",
+    "bpk-component-text": "^6.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "date-fns": "^2.21.1",