@skyscanner/backpack-web 36.11.1-alpha.0 → 36.12.0

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

@@ -18,7 +18,7 @@
 
 import { createContext } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkAccordion.module.css";
+import STYLES from "./BpkAccordion.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const BpkAccordionContext = /*#__PURE__*/createContext({

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

@@ -24,7 +24,7 @@ import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import { BpkAccordionContext } from "./BpkAccordion";
-import * as STYLES from "./BpkAccordionItem.module.css";
+import STYLES from "./BpkAccordionItem.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkAriaLive.module.css";
+import STYLES from "./BpkAriaLive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const POLITENESS_SETTINGS = {

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

@@ -17,7 +17,7 @@
  */import Autosuggest from 'react-autosuggest';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkAutosuggest.module.css";
+import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkAutosuggest.module.css";
+import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkAutosuggestSuggestion = props => {

package/bpk-component-badge/src/BpkBadge.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkBadge.module.css";
+import STYLES from "./BpkBadge.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const BADGE_TYPES = {
   warning: 'warning',

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

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

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

@@ -33,7 +33,7 @@ import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES } from "./common-types";
-import * as STYLES from "./BpkBannerAlert.module.css";
+import STYLES from "./BpkBannerAlert.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);

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

@@ -32,7 +32,7 @@ import { applyArrayRTLTransform, applyMarginRTLTransform } from "./RTLtransforms
 import dataProp from "./customPropTypes";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
 import { identity, remToPx } from "./utils";
-import * as STYLES from "./BpkBarchart.module.css";
+import STYLES from "./BpkBarchart.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const spacing = remToPx('.375rem');

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import { ORIENTATION_X, ORIENTATION_Y } from "./orientation";
 import { identity, center } from "./utils";
-import * as STYLES from "./BpkChartGridLines.module.css";
+import STYLES from "./BpkChartGridLines.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkChartGridLines = props => {

package/bpk-component-blockquote/src/BpkBlockquote.js

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

package/bpk-component-boilerplate/src/BpkBoilerplate.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkBoilerplate.module.css";
+import STYLES from "./BpkBoilerplate.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkBoilerplate = ({

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

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

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

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

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

@@ -20,7 +20,7 @@ import ArrowRight from "../../bpk-component-icon/sm/arrow-right";
 import BpkLink from "../../bpk-component-link";
 import BpkText from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkBreadcrumbItem.module.css";
+import STYLES from "./BpkBreadcrumbItem.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const RtlSupportedArrowRight = withRtlSupport(ArrowRight);

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

@@ -18,7 +18,7 @@
 
 import { PureComponent } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkCalendarDate.module.css";
+import STYLES from "./BpkCalendarDate.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const SELECTION_TYPES = {

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

@@ -22,7 +22,7 @@ import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth } from "./date-utils";
-import * as STYLES from "./BpkCalendarGrid.module.css";
+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

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

@@ -19,7 +19,7 @@
 import { PureComponent } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { orderDaysOfWeek } from "./date-utils";
-import * as STYLES from "./BpkCalendarGridHeader.module.css";
+import STYLES from "./BpkCalendarGridHeader.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 /*

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

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

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

@@ -24,7 +24,7 @@ import ArrowRightIcon from "../../bpk-component-icon/lg/arrow-right";
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
 import { addMonths, formatIsoMonth, getMonthRange, getMonthsInRange, isWithinRange, parseIsoDate, startOfMonth } from "./date-utils";
-import * as STYLES from "./BpkCalendarNav.module.css";
+import STYLES from "./BpkCalendarNav.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const changeMonth = ({

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

@@ -21,7 +21,7 @@ import { cssModules } from "../../bpk-react-utils";
 import { SELECTION_TYPES } from "./BpkCalendarDate";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
-import * as STYLES from "./BpkCalendarWeek.module.css";
+import STYLES from "./BpkCalendarWeek.module.css";
 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,7 +19,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { memoize } from "./utils";
-import * as STYLES from "./BpkCalendar.module.css";
+import STYLES from "./BpkCalendar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {

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

@@ -19,7 +19,7 @@
 import { useContext } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { CardContext } from "./CardContext";
-import * as STYLES from "./BpkCard.module.css";
+import STYLES from "./BpkCard.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCard = ({

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

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

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

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

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

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

package/bpk-component-card-list/src/BpkCardList.js

@@ -19,7 +19,7 @@
 import { BpkButtonV2 } from "../../bpk-component-button";
 import BpkSectionHeader from "../../bpk-component-section-header";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkCardList.module.css";
+import STYLES from "./BpkCardList.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCardList = props => {

package/bpk-component-carousel/src/BpkCarousel.js

@@ -23,7 +23,7 @@ import BpkPageIndicator, { VARIANT } from "../../bpk-component-page-indicator";
 import { cssModules } from "../../bpk-react-utils";
 import BpkCarouselContainer from "./BpkCarouselContainer";
 import { useScrollToInitialImage } from "./utils";
-import * as STYLES from "./BpkCarousel.module.css";
+import STYLES from "./BpkCarousel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCarousel = ({

package/bpk-component-carousel/src/BpkCarouselContainer.js

@@ -20,7 +20,7 @@ import { memo, useState } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import BpkCarouselImage from "./BpkCarouselImage";
 import { useIntersectionObserver } from "./utils";
-import * as STYLES from "./BpkCarouselContainer.module.css";
+import STYLES from "./BpkCarouselContainer.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkScrollContainer = /*#__PURE__*/memo(({

package/bpk-component-carousel/src/BpkCarouselImage.js

@@ -18,7 +18,7 @@
 
 import { forwardRef } from "react";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkCarouselImage.module.css";
+import STYLES from "./BpkCarouselImage.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCarouselImage = /*#__PURE__*/forwardRef(({

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

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

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

@@ -26,7 +26,7 @@ import CloseCircleIconSm from "../../bpk-component-icon/sm/close-circle";
 import { cssModules } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
-import * as STYLES from "./BpkSelectableChip.module.css";
+import STYLES from "./BpkSelectableChip.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDismissibleChip = ({

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

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

package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.js

@@ -24,7 +24,7 @@ import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-containe
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
 import Nudger, { POSITION } from "./Nudger";
-import * as STYLES from "./BpkChipGroup.module.css";
+import STYLES from "./BpkChipGroup.module.css";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const CHIP_GROUP_TYPES = {

package/bpk-component-chip-group/src/Nudger.js

@@ -23,7 +23,7 @@ import { withButtonAlignment } from "../../bpk-component-icon/index";
 import ArrowLeft from "../../bpk-component-icon/sm/long-arrow-left";
 import ArrowRight from "../../bpk-component-icon/sm/long-arrow-right";
 import { cssModules, isRTL } from "../../bpk-react-utils/index";
-import * as STYLES from "./Nudger.module.css";
+import STYLES from "./Nudger.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const CHIP_STYLE_TO_BUTTON_STYLE = {

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

@@ -18,7 +18,7 @@
 
 import CloseIcon from "../../bpk-component-icon/sm/close";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkCloseButton.module.css";
+import STYLES from "./BpkCloseButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCloseButton = ({

package/bpk-component-code/src/BpkCode.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkCode.module.css";
+import STYLES from "./BpkCode.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCode = props => {

package/bpk-component-code/src/BpkCodeBlock.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkCodeBlock.module.css";
+import STYLES from "./BpkCodeBlock.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCodeBlock = props => {

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

@@ -20,7 +20,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 * as STYLES from "./BpkContentCard.module.css";
+import STYLES from "./BpkContentCard.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentCard = ({

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

@@ -19,7 +19,7 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkContentCard from "./BpkContentCard";
-import * as STYLES from "./BpkContentCards.module.css";
+import STYLES from "./BpkContentCards.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentCards = ({

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

@@ -24,7 +24,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkDataTableHeader from "./BpkDataTableHeader";
 import { SORT_DIRECTION_TYPES } from "./common-types";
 import { createColumnsSchema } from "./utils";
-import * as STYLES from "./BpkDataTable.module.css";
+import STYLES from "./BpkDataTable.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const KEYCODES = {

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

@@ -21,7 +21,7 @@ import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
 import { cssModules } from "../../bpk-react-utils";
 import { SORT_DIRECTION_TYPES } from "./common-types";
-import * as STYLES from "./BpkDataTableHeader.module.css";
+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);

package/bpk-component-description-list/src/BpkDescriptionDetails.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkDescriptionList.module.css";
+import STYLES from "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export default ({

package/bpk-component-description-list/src/BpkDescriptionList.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkDescriptionList.module.css";
+import STYLES from "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export default ({

package/bpk-component-description-list/src/BpkDescriptionTerm.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkDescriptionList.module.css";
+import STYLES from "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export default ({

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

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

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

@@ -20,7 +20,7 @@
 import { BpkContentBubble } from "../../bpk-component-flare";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
-import * as STYLES from "./BpkDialogInner.module.css";
+import STYLES from "./BpkDialogInner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialogInner = props => {

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

@@ -24,7 +24,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkDrawerContent.module.css";
+import STYLES from "./BpkDrawerContent.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDrawerContent = ({

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

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

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

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

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

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import Pointer from "./__generated__/js/pointer";
-import * as STYLES from "./bpk-flare-bar.module.css";
+import STYLES from "./bpk-flare-bar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFlareBar = props => {

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

@@ -22,7 +22,7 @@ import BpkAriaLive from "../../bpk-component-aria-live";
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkFloatingNotification.module.css";
+import STYLES from "./BpkFloatingNotification.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFloatingNotification = props => {

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

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

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

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

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkGridToggle.module.css";
+import STYLES from "./BpkGridToggle.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -18,7 +18,7 @@
 import { Component, Children, cloneElement } from 'react';
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import { cssModules } from "../../bpk-react-utils";
-import * as STYLES from "./BpkHorizontalNav.module.css";
+import STYLES from "./BpkHorizontalNav.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const HORIZONTAL_NAV_TYPES = {