@skyscanner/backpack-web 32.0.1 → 33.0.0-beta.1

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

@@ -17,10 +17,10 @@
  */import PropTypes from 'prop-types';
 import { Node, Element, useContext, cloneElement } from 'react';
 import AnimateHeight from "../../bpk-animate-height";
-import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
+import { withButtonAlignment } from "../../bpk-component-icon";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -18,9 +18,10 @@
 
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";

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

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { Component } from 'react';
+import debounce from 'lodash.debounce';
 import { scaleLinear, scaleBand } from 'd3-scale';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";

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

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

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

@@ -18,8 +18,8 @@
 import { useState } from "react";
 import { Portal, cssModules } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
-import STYLES from "./BpkBottomSheet.module.css";
 import BpkBottomSheetInner from "./BpkBottomSheetInner";
+import STYLES from "./BpkBottomSheet.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkBottomSheetInner = withScrim(BpkBottomSheetInner);

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

@@ -18,6 +18,7 @@
 
 import { useState, useEffect } from 'react';
 import MediaQuery from "react-responsive/dist/react-responsive";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { jsx as _jsx } from "react/jsx-runtime";

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

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

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

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

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

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

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

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

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

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

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

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

package/bpk-component-flare/src/corner-radius.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ styles, ...props }: {
+    [x: string]: any;
+    styles?: {} | undefined;
+}) => JSX.Element;
+export default _default;

package/bpk-component-flare/src/pointer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ styles, ...props }: {
+    [x: string]: any;
+    styles?: {} | undefined;
+}) => JSX.Element;
+export default _default;

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

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useEffect, useState } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";

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

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkIcon.module.css";
 import classNameModifierHOCFactory from "./classNameModifierHOCFactory";
+import 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

@@ -19,6 +19,7 @@
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";

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

@@ -17,15 +17,17 @@
  */
 
 import { Component } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkSpinner } from "../../bpk-component-spinner";
-import STYLES from "./BpkImage.module.css";
 import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
+import STYLES from "./BpkImage.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -18,9 +18,10 @@
 
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";

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

@@ -19,8 +19,8 @@
 import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import BpkClearButton from "./BpkClearButton";
-import STYLES from "./BpkInput.module.css";
 import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
+import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { Component } from 'react';
+import debounce from 'lodash.debounce';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkMobileScrollContainer.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

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

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

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

@@ -19,8 +19,8 @@
 // @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 "./BpkNavigationBarButtonLink.module.css";
 import { BAR_STYLES } from "./BpkNavigationBar";
+import STYLES from "./BpkNavigationBarButtonLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({

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

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkIconButton from "../../bpk-component-close-button";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { BAR_STYLES } from "./BpkNavigationBar";
+import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({

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

@@ -19,8 +19,8 @@ import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { BpkButtonLink } from "../../bpk-component-link";
 import BpkCloseButton from "../../bpk-component-close-button";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkPopover.module.css";
 import { ARROW_ID } from "./constants";
+import STYLES from "./BpkPopover.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -14,14 +14,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { createPopper } from '@popperjs/core';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
 import { Component } from 'react';
+import { createPopper } from '@popperjs/core';
 import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import keyboardFocusScope from "./keyboardFocusScope";
-import STYLES from "./BpkPopover.module.css";
 import BpkPopover from "./BpkPopover";
+import STYLES from "./BpkPopover.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-component-price/src/BpkPrice.js

@@ -17,8 +17,8 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkPrice.module.css";
 import { SIZES, ALIGNS } from "./common-types";
+import STYLES from "./BpkPrice.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -18,8 +18,8 @@
 import clamp from 'lodash.clamp';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkRating.module.css";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
+import STYLES from "./BpkRating.module.css";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -22,9 +22,9 @@ import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
-import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
+import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 

package/bpk-component-slider/src/BpkSlider.js

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
+import PropTypes from 'prop-types';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Slider from 'react-slider';
-import PropTypes from 'prop-types';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -75,8 +75,8 @@ XlSpinner.defaultProps = {
   viewBox: "0 0 32 32"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -75,8 +75,8 @@ LgSpinner.defaultProps = {
   viewBox: "0 0 24 24"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-spinner/src/BpkSpinner.js

@@ -62,8 +62,8 @@ SmSpinner.defaultProps = {
   viewBox: "0 0 16 16"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -20,9 +20,9 @@ import { Component } from 'react';
 import BpkLabel from "../../bpk-component-label";
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkThemeToggle.module.css";
 import bpkCustomThemes from "./theming";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
+import STYLES from "./BpkThemeToggle.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const inputId = 'theme-select';

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -23,8 +23,8 @@ The actual component that developers create (i.e. the default export from this p
 */
 
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkTooltip.module.css";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
+import STYLES from "./BpkTooltip.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import { createPopper } from '@popperjs/core';
 import { cloneElement, Component } from 'react';
+import { createPopper } from '@popperjs/core';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import BpkTooltip from "./BpkTooltip";
-import STYLES from "./BpkTooltip.module.css";
 import { TOOLTIP_TYPES } from "./constants";
+import STYLES from "./BpkTooltip.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-react-utils/src/Portal.js

@@ -18,6 +18,7 @@
 
 import { Component } from 'react';
 import { createPortal } from 'react-dom';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-scrim-utils/src/withScrim.js

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { Component } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import focusScope from 'a11y-focus-scope';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import focusStore from 'a11y-focus-store';
-import { Component } from 'react';
 import { cssModules, isDeviceIpad, isDeviceIphone, wrapDisplayName } from "../../bpk-react-utils";
 import BpkScrim from "./BpkScrim";
 import { fixBody, lockScroll, restoreScroll, storeScroll, unfixBody, unlockScroll } from "./scroll-utils";

package/bpk-stylesheets/base.css

@@ -16,4 +16,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body &.scaffold-font-size{font-size:13px}body &.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}

package/bpk-stylesheets/index.js

@@ -27,7 +27,7 @@ import './index.scss';
 
   // touch support
   classNames.push(
-    'ontouchstart' in window ||
+    'ontouchstart' in window ||  
       (window.DocumentTouch && document instanceof DocumentTouch) // eslint-disable-line no-undef
       ? 'touch-support'
       : 'no-touch-support',
@@ -35,7 +35,7 @@ import './index.scss';
 
   // add more feature tests here...
 
-
+   
   document.documentElement.className += ` ${classNames
     .map((className) => `bpk-${className}`)
     .join(' ')}`;

package/bpk-stylesheets/index.scss

@@ -15,15 +15,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* stylelint-disable at-rule-disallowed-list */
-// stylelint-disable-next-line scss/at-import-partial-extension
+
+/* stylelint-disable at-rule-disallowed-list, scss/at-import-partial-extension */
+
+@use '../bpk-mixins/tokens';
+@use '../bpk-mixins/utils';
+
 @import './normalize';
-@import '../bpk-mixins/tokens.scss';
-@import '../bpk-mixins/utils.scss';
 
 // stylelint-disable-next-line selector-max-type
 html {
-  font-size: $bpk-font-size-root;
+  font-size: tokens.$bpk-font-size-root;
   box-sizing: border-box;
 }
 
@@ -38,45 +40,45 @@ html {
 
 /* stylelint-disable selector-class-pattern */
 body {
-  color: $bpk-font-color-base;
-  font-family: $bpk-font-family-base;
-  font-size: $bpk-font-size-base;
+  color: tokens.$bpk-font-color-base;
+  font-family: tokens.$bpk-font-family-base;
+  font-size: tokens.$bpk-font-size-base;
   line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
-}
 
-:global(body.scaffold-font-size) {
-  font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
-}
+  :global(&.scaffold-font-size) {
+    font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
+  }
 
-:global(body.enable-font-smoothing) {
-  -webkit-font-smoothing: antialiased;
+  :global(&.enable-font-smoothing) {
+    -webkit-font-smoothing: antialiased;
+  }
 }
 
 :focus-visible {
-  @include bpk-focus-indicator;
+  @include utils.bpk-focus-indicator;
 }
 
 :global(.hidden),
 :global(.hide) {
-  @include bpk-hidden;
+  @include utils.bpk-hidden;
 }
 
 :global(.visuallyhidden),
 :global(.visually-hidden) {
-  @include bpk-visually-hidden;
+  @include utils.bpk-visually-hidden;
 }
 
 :global(.visuallyhidden.focusable),
 :global(.visually-hidden.focusable) {
-  @include bpk-visually-hidden--focusable;
+  @include utils.bpk-visually-hidden--focusable;
 }
 
 :global(.invisible) {
-  @include bpk-invisible;
+  @include utils.bpk-invisible;
 }
 
 :global(.clearfix) {
-  @include bpk-clearfix;
+  @include utils.bpk-clearfix;
 }
 /* stylelint-enable selector-class-pattern */
 /* stylelint-enable at-rule-disallowed-list */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "32.0.1",
+  "version": "33.0.0-beta.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",