Change imports for breakpoints into bpk-component-breakpoint (#2935)

.storybook/preview.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import TOKENS from '@skyscanner/bpk-foundations-web/tokens/base.common';
+import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { addDecorator } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 
@@ -34,7 +34,7 @@ const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
 
 addDecorator(withA11y);
 addDecorator((story) => (
-  <div style={{ padding: TOKENS.spacingBase }}>
+  <div style={{ padding: spacingBase }}>
     <EnhancedThemeProvider themeAttributes={themeableAttributes}>
       {story()}
     </EnhancedThemeProvider>

packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx

@@ -19,19 +19,19 @@
 import type { ReactNode } from 'react';
 import MediaQuery from 'react-responsive';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import TOKENS from '@skyscanner/bpk-foundations-web/tokens/base.common';
+import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const BREAKPOINTS = {
-  SMALL_MOBILE: TOKENS.breakpointQuerySmallMobile,
-  MOBILE: TOKENS.breakpointQueryMobile,
-  SMALL_TABLET: TOKENS.breakpointQuerySmallTablet,
-  SMALL_TABLET_ONLY: TOKENS.breakpointQuerySmallTabletOnly,
-  TABLET: TOKENS.breakpointQueryTablet,
-  TABLET_ONLY: TOKENS.breakpointQueryTabletOnly,
-  ABOVE_MOBILE: TOKENS.breakpointQueryAboveMobile,
-  ABOVE_TABLET: TOKENS.breakpointQueryAboveTablet,
-  ABOVE_DESKTOP: TOKENS.breakpointQueryAboveDesktop,
-  DESKTOP_ONLY: TOKENS.breakpointQueryDesktopOnly,
+  SMALL_MOBILE: breakpoints.breakpointQuerySmallMobile,
+  MOBILE: breakpoints.breakpointQueryMobile,
+  SMALL_TABLET: breakpoints.breakpointQuerySmallTablet,
+  SMALL_TABLET_ONLY: breakpoints.breakpointQuerySmallTabletOnly,
+  TABLET: breakpoints.breakpointQueryTablet,
+  TABLET_ONLY: breakpoints.breakpointQueryTabletOnly,
+  ABOVE_MOBILE: breakpoints.breakpointQueryAboveMobile,
+  ABOVE_TABLET: breakpoints.breakpointQueryAboveTablet,
+  ABOVE_DESKTOP: breakpoints.breakpointQueryAboveDesktop,
+  DESKTOP_ONLY: breakpoints.breakpointQueryDesktopOnly,
 } as const;
 
 type Props = {