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

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

@@ -18,7 +18,7 @@
 
 import { createContext } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkAccordion.module.css";
+import * as 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 STYLES from "./BpkAccordionItem.module.css";
+import * as 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 STYLES from "./BpkAriaLive.module.css";
+import * as 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 STYLES from "./BpkAutosuggest.module.css";
+import * as 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 STYLES from "./BpkAutosuggest.module.css";
+import * as 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 STYLES from "./BpkBadge.module.css";
+import * as 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 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-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 STYLES from "./BpkBannerAlert.module.css";
+import * as 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 STYLES from "./BpkBarchart.module.css";
+import * as 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 STYLES from "./BpkBarchartBar.module.css";
+import * as 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 STYLES from "./BpkChartAxis.module.css";
+import * as 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 STYLES from "./BpkChartDataTable.module.css";
+import * as 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 STYLES from "./BpkChartGridLines.module.css";
+import * as 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 STYLES from "./BpkBlockquote.module.css";
+import * as 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 STYLES from "./BpkBoilerplate.module.css";
+import * as 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 STYLES from "./BpkBottomSheet.module.css";
+import * as 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-bottom-sheet/src/BpkBottomSheetInner.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-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc(100% - ((3rem)*2 + 0.125rem));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir=rtl] .bpk-bottom-sheet--close-button{right:auto;margin-right:.125rem;margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:.125rem;margin-left:.25rem;word-break:break-all}html[dir=rtl] .bpk-bottom-sheet--action-button{left:auto;margin-right:.25rem;margin-left:.125rem}

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 STYLES from "./BpkBreadcrumb.module.css";
+import * as 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 STYLES from "./BpkBreadcrumbItem.module.css";
+import * as 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-button/src/BpkButtonDestructive.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-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonFeatured.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-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonLink.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-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}

package/bpk-component-button/src/BpkButtonLinkOnDark.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-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}

package/bpk-component-button/src/BpkButtonPrimaryOnDark.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-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonPrimaryOnLight.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-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonSecondary.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-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonSecondaryOnDark.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-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}

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

@@ -18,7 +18,7 @@
 
 import { PureComponent } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkCalendarDate.module.css";
+import * as 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 STYLES from "./BpkCalendarGrid.module.css";
+import * as 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 STYLES from "./BpkCalendarGridHeader.module.css";
+import * as 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 STYLES from "./BpkCalendarGridTransition.module.css";
+import * as 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 STYLES from "./BpkCalendarNav.module.css";
+import * as 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 STYLES from "./BpkCalendarWeek.module.css";
+import * as 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 STYLES from "./BpkCalendar.module.css";
+import * as 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 STYLES from "./BpkCard.module.css";
+import * as 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 STYLES from "./BpkCardWrapper.module.css";
+import * as 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 STYLES from "./BpkDividedCard.module.css";
+import * as 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 STYLES from "./BpkSaveButton.module.css";
+import * as 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 STYLES from "./BpkCardList.module.css";
+import * as 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 STYLES from "./BpkCarousel.module.css";
+import * as 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 STYLES from "./BpkCarouselContainer.module.css";
+import * as 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 STYLES from "./BpkCarouselImage.module.css";
+import * as 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 STYLES from "./BpkCheckbox.module.css";
+import * as 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 STYLES from "./BpkSelectableChip.module.css";
+import * as 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 STYLES from "./BpkSelectableChip.module.css";
+import * as 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 STYLES from "./BpkChipGroup.module.css";
+import * as 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 STYLES from "./Nudger.module.css";
+import * as 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 STYLES from "./BpkCloseButton.module.css";
+import * as 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 STYLES from "./BpkCode.module.css";
+import * as STYLES from "./BpkCode.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCode = props => {