@skyscanner/backpack-web 42.5.2 → 42.6.0-dev-v24170567962.1

package/bpk-component-layout/src/theme.js

@@ -16,18 +16,35 @@
  * limitations under the License.
  */
 
-import { defineConfig } from '@chakra-ui/react';
+import { defineConfig } from '@chakra-ui/react/styled-system';
 
-// Import tokens from Backpack foundations
-// Note: Some tokens may not be in TypeScript definitions but exist at runtime
-import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+// Named imports from Backpack foundations — only the tokens actually used.
+// This enables tree-shaking of the full foundations module.
+import {
+// Border sizes
+borderSizeSm, borderSizeLg, borderSizeXl,
+// Border radii
+borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
+// Box shadows
+boxShadowSm, boxShadowLg, boxShadowXl,
+// Font sizes
+fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl,
+// Line heights
+lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl,
+// Font weights
+fontWeightBook, fontWeightBold, fontWeightBlack, fontWeightLight,
+// Letter spacing
+letterSpacingTight, letterSpacingHero,
+// Font family
+fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { spacingMap } from "./spacingMap";
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
 // are used primarily for max-width queries (e.g. `(max-width: 32rem)`).
 //
 // Backpack layout responsive values in this package are mobile-first and behave
-// like Chakra breakpoints (min-width thresholds). To align with Backpack’s
+// like Chakra breakpoints (min-width thresholds). To align with Backpack's
 // intended breakpoint ranges we define lower-bound (min-width) thresholds:
 //
 // - small-mobile: 320px+
@@ -36,73 +53,14 @@ import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // - tablet: 769px+
 // - desktop: 1025px+
 
-// Note: Spacing tokens are defined as SCSS functions in Backpack foundations,
-// not as direct values. We need to use the actual rem values from the SCSS functions.
-// Based on @skyscanner/bpk-foundations-web/tokens/base.default.scss:
-// - bpk-spacing-sm() returns .25rem
-// - bpk-spacing-md() returns .5rem
-// - bpk-spacing-lg() returns 1.5rem
-// - bpk-spacing-xl() returns 2rem (needs verification)
-// - bpk-spacing-xxl() returns 2.5rem
-// - bpk-spacing-base() returns 1rem (standard base spacing)
-// TODO: CLOV-1021 - will add spacing tokens to Backpack Foundations package and use them here after we ship the PoC
-const spacingXs = '.125rem'; // 2px
-const spacingSm = '.25rem';
-const spacingBase = '1rem'; // Standard base spacing
-const spacingMd = '.5rem';
-const spacingLg = '1.5rem';
-const spacingXl = '2rem';
-const spacingXxl = '2.5rem';
-
-/**
- * Backpack Theme Configuration for Chakra UI
- *
- * This theme maps Backpack design tokens from @skyscanner/bpk-foundations-web
- * to Chakra UI's theme structure.
- */
-
-/**
- * Maps Backpack spacing tokens to actual rem values.
- * These come directly from @skyscanner/bpk-foundations-web.
- */
-// Spacing tokens - directly imported from foundations
-const spacingMap = {
-  'bpk-spacing-none': {
-    value: '0'
-  },
-  // Temporary: Foundations does not yet export a 2px spacing token. This will be
-  // replaced with a foundations value once available.
-  'bpk-spacing-xs': {
-    value: spacingXs
-  },
-  'bpk-spacing-sm': {
-    value: spacingSm
-  },
-  'bpk-spacing-base': {
-    value: spacingBase
-  },
-  'bpk-spacing-md': {
-    value: spacingMd
-  },
-  'bpk-spacing-lg': {
-    value: spacingLg
-  },
-  'bpk-spacing-xl': {
-    value: spacingXl
-  },
-  'bpk-spacing-xxl': {
-    value: spacingXxl
-  }
-};
-
 /**
  * Maps Backpack border size tokens to actual border width values
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const borderSizeMap = {
-  'bpk-border-size-sm': bpkTokens.borderSizeSm,
-  'bpk-border-size-lg': bpkTokens.borderSizeLg,
-  'bpk-border-size-xl': bpkTokens.borderSizeXl
+  'bpk-border-size-sm': borderSizeSm,
+  'bpk-border-size-lg': borderSizeLg,
+  'bpk-border-size-xl': borderSizeXl
 };
 
 /**
@@ -111,12 +69,12 @@ const borderSizeMap = {
  */
 const borderRadiusMap = {
   'bpk-border-radius-none': '0',
-  'bpk-border-radius-xs': bpkTokens.borderRadiusXs,
-  'bpk-border-radius-sm': bpkTokens.borderRadiusSm,
-  'bpk-border-radius-md': bpkTokens.borderRadiusMd,
-  'bpk-border-radius-lg': bpkTokens.borderRadiusLg,
-  'bpk-border-radius-xl': bpkTokens.borderRadiusXl,
-  'bpk-border-radius-full': bpkTokens.borderRadiusFull
+  'bpk-border-radius-xs': borderRadiusXs,
+  'bpk-border-radius-sm': borderRadiusSm,
+  'bpk-border-radius-md': borderRadiusMd,
+  'bpk-border-radius-lg': borderRadiusLg,
+  'bpk-border-radius-xl': borderRadiusXl,
+  'bpk-border-radius-full': borderRadiusFull
 };
 
 /**
@@ -124,9 +82,9 @@ const borderRadiusMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const shadowMap = {
-  'bpk-shadow-sm': bpkTokens.boxShadowSm,
-  'bpk-shadow-lg': bpkTokens.boxShadowLg,
-  'bpk-shadow-xl': bpkTokens.boxShadowXl
+  'bpk-shadow-sm': boxShadowSm,
+  'bpk-shadow-lg': boxShadowLg,
+  'bpk-shadow-xl': boxShadowXl
 };
 
 /**
@@ -155,31 +113,6 @@ const breakpointMap = {
   '2xl': '64.0625rem' // 1025px
 };
 
-/**
- * Exports spacing map for use in tokenUtils
- * This allows tokenUtils to look up actual spacing values
- *
- * @returns {Record<string, string>} A map of spacing token names to values.
- */
-export function getSpacingMap() {
-  // Return simple string values for backward compatibility with utilities
-  const simpleMap = {};
-  Object.entries(spacingMap).forEach(([key, obj]) => {
-    simpleMap[key] = obj.value;
-  });
-  return simpleMap;
-}
-
-/**
- * Gets the actual spacing value for a Backpack spacing token
- *
- * @param {string} token - Backpack spacing token name.
- * @returns {string | undefined} The actual spacing value.
- */
-export function getSpacingValue(token) {
-  return spacingMap[token]?.value;
-}
-
 /**
  * Gets the actual border width value for a Backpack border size token
  *
@@ -218,230 +151,230 @@ export function getShadowValue(token) {
 const textStylesMap = {
   xs: {
     value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXs,
+      lineHeight: lineHeightXs,
+      fontWeight: fontWeightBook
     }
   },
   sm: {
     value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeSm,
+      lineHeight: lineHeightSm,
+      fontWeight: fontWeightBook
     }
   },
   base: {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBase,
+      fontWeight: fontWeightBook
     }
   },
   lg: {
     value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLg,
+      fontWeight: fontWeightBook
     }
   },
   xl: {
     value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXl,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXl,
+      lineHeight: lineHeightXl,
+      fontWeight: fontWeightBook
     }
   },
   xxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightBold
     }
   },
   xxxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxxl,
+      lineHeight: lineHeightXxxl,
+      fontWeight: fontWeightBold
     }
   },
   xxxxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxl,
-      fontWeight: bpkTokens.fontWeightBold,
-      letterSpacing: bpkTokens.letterSpacingTight
+      fontSize: fontSizeXxxxl,
+      lineHeight: lineHeightXxxxl,
+      fontWeight: fontWeightBold,
+      letterSpacing: letterSpacingTight
     }
   },
   xxxxxl: {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxxl,
-      fontWeight: bpkTokens.fontWeightBold,
-      letterSpacing: bpkTokens.letterSpacingTight
+      fontSize: fontSizeXxxxxl,
+      lineHeight: lineHeightXxxxxl,
+      fontWeight: fontWeightBold,
+      letterSpacing: letterSpacingTight
     }
   },
   caption: {
     value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXs,
+      lineHeight: lineHeightXs,
+      fontWeight: fontWeightBook
     }
   },
   footnote: {
     value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeSm,
+      lineHeight: lineHeightSm,
+      fontWeight: fontWeightBook
     }
   },
   'label-1': {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBase,
+      fontWeight: fontWeightBold
     }
   },
   'label-2': {
     value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeSm,
+      lineHeight: lineHeightSm,
+      fontWeight: fontWeightBold
     }
   },
   'label-3': {
     value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXs,
+      lineHeight: lineHeightXs,
+      fontWeight: fontWeightBold
     }
   },
   'body-default': {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBase,
+      fontWeight: fontWeightBook
     }
   },
   'body-longform': {
     value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLg,
+      fontWeight: fontWeightBook
     }
   },
   subheading: {
     value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXl,
-      fontWeight: bpkTokens.fontWeightBook
+      fontSize: fontSizeXl,
+      lineHeight: lineHeightXl,
+      fontWeight: fontWeightBook
     }
   },
   'heading-1': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxxl,
+      lineHeight: lineHeightXxxl,
+      fontWeight: fontWeightBold
     }
   },
   'heading-2': {
     value: {
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightBold
     }
   },
   'heading-3': {
     value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXlTight,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeXl,
+      lineHeight: lineHeightXlTight,
+      fontWeight: fontWeightBold
     }
   },
   'heading-4': {
     value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLgTight,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLgTight,
+      fontWeight: fontWeightBold
     }
   },
   'heading-5': {
     value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBaseTight,
-      fontWeight: bpkTokens.fontWeightBold
+      fontSize: fontSizeBase,
+      lineHeight: lineHeightBaseTight,
+      fontWeight: fontWeightBold
     }
   },
   'hero-1': {
     value: {
-      fontSize: bpkTokens.fontSize8Xl,
-      lineHeight: bpkTokens.lineHeight8Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSize8Xl,
+      lineHeight: lineHeight8Xl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-2': {
     value: {
-      fontSize: bpkTokens.fontSize7Xl,
-      lineHeight: bpkTokens.lineHeight7Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSize7Xl,
+      lineHeight: lineHeight7Xl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-3': {
     value: {
-      fontSize: bpkTokens.fontSize6Xl,
-      lineHeight: bpkTokens.lineHeight6Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSize6Xl,
+      lineHeight: lineHeight6Xl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-4': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSizeXxxxxl,
+      lineHeight: lineHeightXxxxxl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-5': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSizeXxxxl,
+      lineHeight: lineHeightXxxl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'hero-6': {
     value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
+      fontSize: fontSizeXxxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightBlack,
+      letterSpacing: letterSpacingHero
     }
   },
   'editorial-1': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxl,
-      fontWeight: bpkTokens.fontWeightLight
+      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+      fontSize: fontSizeXxxxl,
+      lineHeight: lineHeightXxxxl,
+      fontWeight: fontWeightLight
     }
   },
   'editorial-2': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightLight
+      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+      fontSize: fontSizeXxl,
+      lineHeight: lineHeightXxl,
+      fontWeight: fontWeightLight
     }
   },
   'editorial-3': {
     value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
+      fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+      fontSize: fontSizeLg,
+      lineHeight: lineHeightLg,
+      fontWeight: fontWeightBook
     }
   }
 };

package/bpk-component-layout/src/tokenUtils.js

@@ -17,7 +17,7 @@
  */
 
 import StackOptionKeys from "./BpkStack.constant";
-import { getSpacingValue } from "./theme";
+import { getSpacingValue } from "./spacingMap";
 import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
 
 /**

package/bpk-component-layout/src/types.d.ts

@@ -2,7 +2,10 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import type StackOptionKeys from './BpkStack.constant';
 import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
-import type { BoxProps, FlexProps, GridProps, GridItemProps, StackProps } from '@chakra-ui/react';
+import type { BoxProps } from '@chakra-ui/react/box';
+import type { FlexProps } from '@chakra-ui/react/flex';
+import type { GridProps, GridItemProps } from '@chakra-ui/react/grid';
+import type { StackProps } from '@chakra-ui/react/stack';
 /**
  * Layout-level event props that should not be exposed on layout components.
  * onClick is handled via BpkCommonLayoutProps; onFocus/onBlur are reintroduced

package/bpk-component-modal/src/BpkModalV3/BpkModalV3CloseTrigger/BpkModalV3CloseTrigger.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../../../bpk-component-close-button";

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
 import { useModalType } from "../BpkModalV3Context";
 import STYLES from "./BpkModalV3Content.module.css";

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Description/BpkModalV3Description.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { getDataComponentAttribute } from "../../../../bpk-react-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkModalV3Description = ({

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Portal/BpkModalV3Portal.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Portal } from '@ark-ui/react';
+import { Portal } from '@ark-ui/react/portal';
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkModalV3Portal = ({
   children

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.js

@@ -17,7 +17,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { durationBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { getDataComponentAttribute, useBodyLock } from "../../../../bpk-react-utils";
 import { ModalTypeProvider } from "../BpkModalV3Context";

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim/BpkModalV3Scrim.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
 import { useModalType } from "../BpkModalV3Context";
 import STYLES from "./BpkModalV3Scrim.module.css";

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Title/BpkModalV3Title.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
 import STYLES from "./BpkModalV3Title.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Trigger/BpkModalV3Trigger.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Dialog } from '@ark-ui/react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { getDataComponentAttribute } from "../../../../bpk-react-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkModalV3Trigger = ({

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.js

@@ -17,7 +17,8 @@
  */
 
 import { useRef } from 'react';
-import { SegmentGroup, useLocaleContext } from '@ark-ui/react';
+import { useLocaleContext } from '@ark-ui/react/locale';
+import { SegmentGroup } from '@ark-ui/react/segment-group';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { SEGMENT_TYPES_V2 } from "./common-types";
 import STYLES from "./BpkSegmentedControlV2.module.css";