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

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 STYLES from "./BpkCodeBlock.module.css";
+import * as 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 STYLES from "./BpkContentCard.module.css";
+import * as 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 STYLES from "./BpkContentCards.module.css";
+import * as 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 STYLES from "./BpkDataTable.module.css";
+import * as 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 STYLES from "./BpkDataTableHeader.module.css";
+import * as 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-datepicker/src/BpkDatepicker.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}

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

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDescriptionList.module.css";
+import * as 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 STYLES from "./BpkDescriptionList.module.css";
+import * as 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 STYLES from "./BpkDescriptionList.module.css";
+import * as 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 STYLES from "./BpkDialog.module.css";
+import * as 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 STYLES from "./BpkDialogInner.module.css";
+import * as 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 STYLES from "./BpkDrawerContent.module.css";
+import * as 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 STYLES from "./BpkFieldset.module.css";
+import * as 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 STYLES from "./bpk-content-bubble.module.css";
+import * as 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 STYLES from "./bpk-flare-bar.module.css";
+import * as 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 STYLES from "./BpkFloatingNotification.module.css";
+import * as 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 STYLES from "./BpkFormValidation.module.css";
+import * as 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 STYLES from "./BpkGraphicPromo.module.css";
+import * as 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 STYLES from "./BpkGridToggle.module.css";
+import * as 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 STYLES from "./BpkHorizontalNav.module.css";
+import * as STYLES from "./BpkHorizontalNav.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const HORIZONTAL_NAV_TYPES = {

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

@@ -18,7 +18,7 @@
 import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { HORIZONTAL_NAV_TYPES } from "./BpkHorizontalNav";
-import STYLES from "./BpkHorizontalNavItem.module.css";
+import * as STYLES from "./BpkHorizontalNavItem.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 // In order to be able to access refs on the HorizontalNavItems, they need to be a fully defined

package/bpk-component-icon/src/withDescription.js

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

package/bpk-component-icon/src/withRtlSupport.js

@@ -18,6 +18,6 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import classNameModifierHOCFactory from "./classNameModifierHOCFactory";
-import STYLES from "./BpkIcon.module.css";
+import * as STYLES from "./BpkIcon.module.css";
 const getClassName = cssModules(STYLES);
 export default classNameModifierHOCFactory('withRtlSupport', [getClassName('bpk-icon--rtl-support')]);

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -21,7 +21,7 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkBackgroundImage.module.css";
+import * as STYLES from "./BpkBackgroundImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class BpkBackgroundImage extends Component {

package/bpk-component-image/src/BpkImage.js

@@ -22,7 +22,7 @@ import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
 import { cssModules } from "../../bpk-react-utils";
 import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
-import STYLES from "./BpkImage.module.css";
+import * as STYLES from "./BpkImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class Image extends Component {

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js

@@ -21,7 +21,7 @@ import omit from 'lodash/omit';
 import { cssModules } from "../../bpk-react-utils";
 import "./intersection-observer";
 import DataSource from "./DataSource";
-import STYLES from "./withInfiniteScroll.module.css";
+import * as STYLES from "./withInfiniteScroll.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
 const propTypes = {

package/bpk-component-info-banner/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 STYLES from "./BpkAnimateAndFade.module.css";
+import * as 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-info-banner/src/BpkInfoBannerInner.js

@@ -36,7 +36,7 @@ import BpkLink from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES, STYLE_TYPES } from "./common-types";
-import STYLES from "./BpkInfoBanner.module.css";
+import * as STYLES from "./BpkInfoBanner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);

package/bpk-component-input/src/BpkClearButton.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+.bpk-clear-button{padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-clear-button:active{color:#161616}.bpk-clear-button__icon{fill:currentcolor}

package/bpk-component-input/src/BpkInput.js

@@ -21,7 +21,7 @@ import { withButtonAlignment } from "../../bpk-component-icon";
 import ClearIcon from "../../bpk-component-icon/sm/close-circle";
 import { cssModules } from "../../bpk-react-utils";
 import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
-import STYLES from "./BpkInput.module.css";
+import * as STYLES from "./BpkInput.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ClearButtonIcon = withButtonAlignment(ClearIcon);

package/bpk-component-inset-banner/src/BpkInsetBanner.js

@@ -20,7 +20,7 @@ import InfoIcon from "../../bpk-component-icon/sm/information-circle";
 import BpkPopover from "../../bpk-component-popover/src/BpkPopover";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkInsetBanner.module.css";
+import * as STYLES from "./BpkInsetBanner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const VARIANT = {

package/bpk-component-journey-arrow/src/BpkJourneyArrow.js

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

package/bpk-component-label/src/BpkLabel.js

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

package/bpk-component-link/src/BpkButtonLink.js

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

package/bpk-component-link/src/BpkLink.js

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

package/bpk-component-list/src/BpkList.js

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

package/bpk-component-list/src/BpkListItem.js

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

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -22,7 +22,7 @@ import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
 import ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
 import { BpkSpinner, BpkLargeSpinner } from "../../bpk-component-spinner";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkLoadingButton.module.css";
+import * as STYLES from "./BpkLoadingButton.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const ICON_POSITION = {

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

@@ -19,7 +19,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkBasicMapMarker from "./BpkBasicMapMarker";
 import BpkIconMarkerBackground from "./BpkIconMarkerBackground";
 import { LatLongPropType } from "./common-types";
-import STYLES from "./BpkIconMarker.module.css";
+import * as STYLES from "./BpkIconMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkIconMarker = props => {

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

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkIconMarkerBackground.module.css";
+import * as STYLES from "./BpkIconMarkerBackground.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkIconMarkerBackground = props => {

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

@@ -19,7 +19,7 @@ import { useCallback, useRef } from 'react';
 import { GoogleMap } from '@react-google-maps/api';
 import { cssModules } from "../../bpk-react-utils";
 import { LatLongPropType } from "./common-types";
-import STYLES from "./BpkMap.module.css";
+import * as STYLES from "./BpkMap.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkMap = props => {

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

@@ -19,7 +19,7 @@ import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
 import BpkBasicMapMarker from "./BpkBasicMapMarker";
 import { LatLongPropType } from "./common-types";
-import STYLES from "./BpkPriceMarker.module.css";
+import * as STYLES from "./BpkPriceMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const PRICE_MARKER_STATUSES = {

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

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

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */import { BpkLargeSpinner, SPINNER_TYPES } from "../../bpk-component-spinner";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./DefaultLoadingElement.module.css";
+import * as STYLES from "./DefaultLoadingElement.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const DefaultLoadingElement = () => /*#__PURE__*/_jsx("div", {

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -19,7 +19,7 @@
 import { Component } from 'react';
 import debounce from 'lodash/debounce';
 import { cssModules, isRTL } from "../../bpk-react-utils";
-import STYLES from "./BpkMobileScrollContainer.module.css";
+import * as STYLES from "./BpkMobileScrollContainer.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const computeScrollBarAwareHeight = (scrollerEl, innerEl) => {

package/bpk-component-modal/src/BpkModal.js

@@ -19,7 +19,7 @@
 import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkModalInner, { MODAL_STYLING } from "./BpkModalInner";
-import STYLES from "./BpkModal.module.css";
+import * as STYLES from "./BpkModal.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkModalInner = withScrim(BpkModalInner);

package/bpk-component-modal/src/BpkModalInner.js

@@ -22,7 +22,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import { BpkButtonLink } from "../../bpk-component-link";
 import BpkNavigationBar, { BAR_STYLES } from "../../bpk-component-navigation-bar";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkModalInner.module.css";
+import * as STYLES from "./BpkModalInner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const MODAL_STYLING = {

package/bpk-component-modal/src/BpkModalV2/BpkModal.js

@@ -23,7 +23,7 @@ import BpkCloseButton from "../../../bpk-component-close-button";
 import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
 import { cssModules, withDefaultProps } from "../../../bpk-react-utils";
 import { MODAL_STYLING } from "../BpkModalInner";
-import STYLES from "./BpKModal.module.css";
+import * as STYLES from "./BpKModal.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const Header = ({

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -18,7 +18,7 @@
 
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationBar.module.css";
+import * as STYLES from "./BpkNavigationBar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
 export const BAR_STYLES = {

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+.bpk-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff}

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js

@@ -19,7 +19,7 @@
 import { useState } from 'react';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationTabGroup.module.css";
+import * as STYLES from "./BpkNavigationTabGroup.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const NAVIGATION_TAB_GROUP_TYPES = {

package/bpk-component-nudger/src/BpkNudger.js

@@ -25,7 +25,7 @@ import PlusIcon from "../../bpk-component-icon/sm/plus";
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules, setNativeValue } from "../../bpk-react-utils";
-import STYLES from "./BpkNudger.module.css";
+import * as STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const compareValues = (a, b) => a - b;

package/bpk-component-overlay/src/BpkOverlay.js

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

package/bpk-component-page-indicator/src/BpkPageIndicator.js

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

package/bpk-component-pagination/src/BpkPagination.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkPaginationList from "./BpkPaginationList";
 import BpkPaginationNudger from "./BpkPaginationNudger";
-import STYLES from "./BpkPagination.module.css";
+import * as STYLES from "./BpkPagination.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {

package/bpk-component-pagination/src/BpkPaginationList.js

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