@skyscanner/backpack-web 33.3.0 → 33.4.0

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

@@ -17,14 +17,13 @@
  */import PropTypes from 'prop-types';
 import { Node, Element, useContext, cloneElement } 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 } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
+import { withButtonAlignment } from "../../bpk-component-icon";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);
 const BpkAccordionItem = props => {

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

@@ -17,8 +17,7 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkAutosuggestSuggestion = props => {
   const classNames = [getClassName('bpk-autosuggest__suggestion')];

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -18,15 +18,15 @@
 
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 import STYLES from "./BpkAnimateAndFade.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ANIMATION_DURATION = parseInt(durationSm, 10);
 class AnimateAndFade extends Component {

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -37,8 +37,7 @@ import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES } from "./common-types";
 import STYLES from "./BpkBannerAlert.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);
 export const CONFIGURATION = {

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

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { Component } from 'react';
+import debounce from 'lodash.debounce';
 import { scaleLinear, scaleBand } from 'd3-scale';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
@@ -33,8 +33,7 @@ import { identity, remToPx } from "./utils";
 import { applyArrayRTLTransform, applyMarginRTLTransform } from "./RTLtransforms";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
 import STYLES from "./BpkBarchart.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const spacing = remToPx('.375rem');
 const lineHeight = remToPx(lineHeightSm);

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

@@ -19,8 +19,7 @@ import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6'
 import { cssModules } from "../../bpk-react-utils";
 import { remToPx } from "./utils";
 import STYLES from "./BpkBarchartBar.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const KEYCODES = {
   ENTER: 13,

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

@@ -14,8 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { scaleBand, scaleLinear } from 'd3-scale';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { scaleBand, scaleLinear } from 'd3-scale';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkBarchartBar from "./BpkBarchartBar";
 import { remToPx } from "./utils";

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *

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

@@ -21,8 +21,7 @@ import { rtlConditionalValue } from "./RTLtransforms";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
 import { identity, center, remToPx } from "./utils";
 import STYLES from "./BpkChartAxis.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const spacing = remToPx('.375rem');
 const lineHeight = remToPx(lineHeightSm);

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

@@ -18,8 +18,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import dataProp from "./customPropTypes";
 import STYLES from "./BpkChartDataTable.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkChartDataTable = props => {
   const {

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -26,9 +26,7 @@ import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import STYLES from "./BpkBottomSheet.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkBottomSheet = ({
   actionText = '',

package/bpk-component-breadcrumb/src/BpkBreadcrumb.js

@@ -18,8 +18,7 @@
 import { Component, Fragment } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkBreadcrumb.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 /*
   The google structured data reference for the stringified output of

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -21,8 +21,7 @@ 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.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const RtlSupportedArrowRight = withRtlSupport(ArrowRight);
 const BpkBreadcrumbItem = props => {

package/bpk-component-breakpoint/index.d.ts

@@ -17,5 +17,6 @@
  */
 
 import BpkBreakpoint, { BREAKPOINTS } from './src/BpkBreakpoint';
-export { BREAKPOINTS };
+import useMediaQuery from './src/useMediaQuery';
+export { BREAKPOINTS, useMediaQuery };
 export default BpkBreakpoint;

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import useMediaQuery from "./useMediaQuery";
@@ -38,27 +37,14 @@ const BpkBreakpoint = ({
   matchSSR = false,
   query
 }) => {
-  const [isClient, setIsClient] = useState(false);
-  const matches = useMediaQuery(query);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  if (isClient) {
-    if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
-      console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
-    }
-    if (typeof children === 'function') {
-      return children(matches);
-    }
-    return matches ? children : null;
+  const matches = useMediaQuery(query, matchSSR);
+  if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
+    console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
   }
-
-  // Below code is executed when running in SSR mode
-
   if (typeof children === 'function') {
-    return children(matchSSR);
+    return children(matches);
   }
-  return matchSSR ? children : null;
+  return matches ? children : null;
 };
 export { BREAKPOINTS };
 export default BpkBreakpoint;

package/bpk-component-breakpoint/src/useMediaQuery.js

@@ -16,20 +16,18 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
-const useMediaQuery = query => {
-  const [matches, setMatches] = useState(window.matchMedia ? window.matchMedia(query).matches : false);
+import { useEffect, useState } from 'react';
+const useMediaQuery = (query, matchSSR = false) => {
+  const isClient = typeof window !== 'undefined' && !!window.matchMedia;
+  const [matches, setMatches] = useState(isClient ? window.matchMedia(query).matches : matchSSR);
   useEffect(() => {
-    if (window.matchMedia) {
-      const media = window.matchMedia(query);
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+    const listener = () => {
       setMatches(media.matches);
-      const listener = () => {
-        setMatches(media.matches);
-      };
-      media.addEventListener('change', listener);
-      return () => media.removeEventListener('change', listener);
-    }
-    return undefined;
+    };
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
   }, [query]);
   return matches;
 };

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -21,8 +21,9 @@ import { cssModules, isDeviceIos } from "../../bpk-react-utils";
 import Week from "./Week";
 import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import STYLES from "./BpkCalendarGrid.module.css";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
+import STYLES from "./BpkCalendarGrid.module.css";
+
 // This should be imported after `./BpkCalendarGrid.module.css`.
 // Because of how css specificity works the class `bpk-calendar-grid-transition__grid` needs to be defined
 // after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.css) so it can override width and display of the calendar

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

@@ -16,12 +16,11 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { Component, createElement as _createElement } from 'react';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import { getCalendarGridWidth, getTransformStyles, isTransitionEndSupported } from "./utils";
 import { addMonths, isSameMonth, formatIsoMonth, differenceInCalendarMonths, dateToBoundaries, startOfDay, setMonthYear, isWithinRange, getMonthRange } from "./date-utils";
 import STYLES from "./BpkCalendarGridTransition.module.css";
-import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const transitionValues = {

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -26,8 +26,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkAriaLive from "../../bpk-component-aria-live";
 import { addMonths, formatIsoMonth, getMonthRange, getMonthsInRange, isWithinRange, parseIsoDate, startOfMonth } from "./date-utils";
 import STYLES from "./BpkCalendarNav.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const changeMonth = ({
   callback,

package/bpk-component-calendar/src/Week.js

@@ -20,11 +20,11 @@ import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
+import { SELECTION_TYPES } from "./BpkCalendarDate";
 // TODO: Move this to `Week.scss`
 // This should be using its own css file as `BpkCalendarGrid` is also importing `BpkCalendarGrid.module.css`
 // and the order of css imports can break the component.
 import STYLES from "./BpkCalendarGrid.module.css";
-import { SELECTION_TYPES } from "./BpkCalendarDate";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const shallowEqualProps = (props1, props2, propList) => {

package/bpk-component-calendar/src/composeCalendar.js

@@ -19,8 +19,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import STYLES from "./BpkCalendar.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
   const BpkCalendar = ({

package/bpk-component-card/src/BpkCardWrapper.js

@@ -18,8 +18,7 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCardWrapper.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCardWrapper = ({
   backgroundColor,

package/bpk-component-card/src/BpkDividedCard.js

@@ -19,8 +19,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import BpkCard from "./BpkCard";
 import STYLES from "./BpkDividedCard.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const ORIENTATION = {
   horizontal: 'horizontal',

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -29,8 +29,7 @@ import BpkHeartOutlineIconSm from "../../bpk-component-icon/sm/heart--outline";
 import { withLargeButtonAlignment } from "../../bpk-component-icon";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSaveButton.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SIZE_TYPES = {
   default: 'default',
   small: 'small'

package/bpk-component-checkbox/src/BpkCheckbox.js

@@ -17,8 +17,7 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCheckbox.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCheckbox = props => {
   const {

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -18,10 +18,9 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkSelectableChip.module.css";
 import { CHIP_TYPES } from "./commonTypes";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkSelectableChip.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSelectableChip = ({
   accessibilityLabel,

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -43,8 +43,9 @@ const BpkCloseButton = props => {
       "aria-label": label,
       className: classNames.join(' '),
       ...rest,
-      children: /*#__PURE__*/_jsx(Icon, {
-        className: getClassName('bpk-close-button__icon')
+      children: /*#__PURE__*/_jsx("span", {
+        className: getClassName('bpk-close-button__icon'),
+        children: /*#__PURE__*/_jsx(Icon, {})
       })
     })
   );

package/bpk-component-close-button/src/BpkCloseButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button:active{color:#161616}.bpk-close-button__icon{vertical-align:-0.125rem;fill:currentcolor}
+.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button:active{color:#161616}.bpk-close-button__icon{vertical-align:-0.21875rem;fill:currentcolor}

package/bpk-component-content-cards/src/BpkContentCard.js

@@ -21,8 +21,7 @@ import BpkText from "../../bpk-component-text";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkContentCard.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentCard = ({
   card,

package/bpk-component-content-cards/src/BpkContentCards.js

@@ -17,14 +17,10 @@
  */
 /* eslint react/no-array-index-key: 0 */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from "../../bpk-component-text";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from "../../bpk-react-utils";
 import BpkContentCard from "./BpkContentCard";
 import STYLES from "./BpkContentCards.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentCards = ({
   cards,
@@ -34,8 +30,7 @@ const BpkContentCards = ({
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(BpkText, {
-      tagName: "h2",
+    children: [/*#__PURE__*/_jsx("h2", {
       className: getClassName('bpk-content-cards--header-text'),
       children: heading
     }), /*#__PURE__*/_jsx("div", {

package/bpk-component-content-cards/src/BpkContentCards.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-content-cards--header-text{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media(max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}
+.bpk-content-cards--header-text{margin-top:0;margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media(max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}

package/bpk-component-datatable/src/BpkDataTable.js

@@ -17,15 +17,15 @@
  */
 
 import { useMemo, useState } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDataTable.module.css";
 import { SORT_DIRECTION_TYPES } from "./common-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
 import { createColumnsSchema } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkDataTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const KEYCODES = {
   ENTER: 13,

package/bpk-component-datatable/src/BpkDataTableHeader.js

@@ -22,10 +22,9 @@ import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
 import { withRtlSupport } from "../../bpk-component-icon";
-import STYLES from "./BpkDataTableHeader.module.css";
 import { SORT_DIRECTION_TYPES } from "./common-types";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkDataTableHeader.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
 const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
 const getClassName = cssModules(STYLES);

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -25,9 +25,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
 import STYLES from "./BpkDatepicker.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));

package/bpk-component-dialog/src/BpkDialog.js

@@ -22,8 +22,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import BpkDialogInner from "./BpkDialogInner";
 import { HEADER_ICON_TYPES } from "./common-types";
 import STYLES from "./BpkDialog.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialog = ({
   children,

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -21,8 +21,7 @@ import { withScrim } from "../../bpk-scrim-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkContentBubble } from "../../bpk-component-flare";
 import STYLES from "./BpkDialogInner.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialogInner = props => {
   const {

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -21,8 +21,7 @@ import { cssModules } from "../../bpk-react-utils";
 import { BpkButtonLink } from "../../bpk-component-link";
 import BpkCloseButton from "../../bpk-component-close-button";
 import STYLES from "./BpkDrawerContent.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDrawerContent = props => {
   const {

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -20,8 +20,7 @@ import BpkLabel from "../../bpk-component-label";
 import BpkFormValidation from "../../bpk-component-form-validation";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFieldset = props => {
   const {

package/bpk-component-flare/src/BpkContentBubble.js

@@ -20,8 +20,7 @@ import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkFlareBar from "./BpkFlareBar";
 import STYLES from "./bpk-content-bubble.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentBubble = props => {
   const {

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,11 +18,10 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./bpk-flare-bar.module.css";
 import Pointer from "./__generated__/js/pointer";
 import CornerRadius from "./__generated__/js/corner-radius";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./bpk-flare-bar.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFlareBar = props => {
   const {

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useEffect, useState } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
@@ -22,8 +23,7 @@ import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -23,8 +23,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkSmallExclamationIcon from "../../bpk-component-icon/sm/exclamation-circle";
 import { withAlignment } from "../../bpk-component-icon";
 import STYLES from "./BpkFormValidation.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedExclamationIcon = withAlignment(BpkSmallExclamationIcon, lineHeightSm, iconSizeSm);
 const BpkFormValidation = props => {

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -20,9 +20,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkText from "../../bpk-component-text";
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import STYLES from "./BpkGraphicPromo.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ACCESSIBILITY_KEYS = {
   Enter: 13 /* Enter */,

package/bpk-component-icon/lg/aircraft.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (({
   styles = {},
   ...props