@skyscanner/backpack-web 42.9.0 → 42.10.0-dev-v24445021679.1

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

@@ -0,0 +1,265 @@
+/*
+ * 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.
+ */
+
+// Import only the specific tokens needed for text styles, rather than the
+// entire foundations module. This avoids pulling unused tokens (colors,
+// shadows, borders, etc.) into the layout bundle.
+import { fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl, lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl, fontWeightBook, fontWeightBold, fontWeightBlack, fontWeightLight, letterSpacingTight, letterSpacingHero, fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { BpkBreakpointToChakraKey } from "./tokens";
+/**
+ * Maps Backpack text style tokens to concrete CSS properties.
+ *
+ * This map is intentionally kept outside the Chakra theme config so that
+ * layout-only consumers (who never use textStyle) do not pay for it.
+ * Components that use textStyle expand it inline via `expandTextStyleProps`.
+ */
+const TEXT_STYLE_MAP = {
+  xs: {
+    fontSize: fontSizeXs,
+    lineHeight: lineHeightXs,
+    fontWeight: fontWeightBook
+  },
+  sm: {
+    fontSize: fontSizeSm,
+    lineHeight: lineHeightSm,
+    fontWeight: fontWeightBook
+  },
+  base: {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBase,
+    fontWeight: fontWeightBook
+  },
+  lg: {
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLg,
+    fontWeight: fontWeightBook
+  },
+  xl: {
+    fontSize: fontSizeXl,
+    lineHeight: lineHeightXl,
+    fontWeight: fontWeightBook
+  },
+  xxl: {
+    fontSize: fontSizeXxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightBold
+  },
+  xxxl: {
+    fontSize: fontSizeXxxl,
+    lineHeight: lineHeightXxxl,
+    fontWeight: fontWeightBold
+  },
+  xxxxl: {
+    fontSize: fontSizeXxxxl,
+    lineHeight: lineHeightXxxxl,
+    fontWeight: fontWeightBold,
+    letterSpacing: letterSpacingTight
+  },
+  xxxxxl: {
+    fontSize: fontSizeXxxxxl,
+    lineHeight: lineHeightXxxxxl,
+    fontWeight: fontWeightBold,
+    letterSpacing: letterSpacingTight
+  },
+  caption: {
+    fontSize: fontSizeXs,
+    lineHeight: lineHeightXs,
+    fontWeight: fontWeightBook
+  },
+  footnote: {
+    fontSize: fontSizeSm,
+    lineHeight: lineHeightSm,
+    fontWeight: fontWeightBook
+  },
+  'label-1': {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBase,
+    fontWeight: fontWeightBold
+  },
+  'label-2': {
+    fontSize: fontSizeSm,
+    lineHeight: lineHeightSm,
+    fontWeight: fontWeightBold
+  },
+  'label-3': {
+    fontSize: fontSizeXs,
+    lineHeight: lineHeightXs,
+    fontWeight: fontWeightBold
+  },
+  'body-default': {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBase,
+    fontWeight: fontWeightBook
+  },
+  'body-longform': {
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLg,
+    fontWeight: fontWeightBook
+  },
+  subheading: {
+    fontSize: fontSizeXl,
+    lineHeight: lineHeightXl,
+    fontWeight: fontWeightBook
+  },
+  'heading-1': {
+    fontSize: fontSizeXxxl,
+    lineHeight: lineHeightXxxl,
+    fontWeight: fontWeightBold
+  },
+  'heading-2': {
+    fontSize: fontSizeXxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightBold
+  },
+  'heading-3': {
+    fontSize: fontSizeXl,
+    lineHeight: lineHeightXlTight,
+    fontWeight: fontWeightBold
+  },
+  'heading-4': {
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLgTight,
+    fontWeight: fontWeightBold
+  },
+  'heading-5': {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBaseTight,
+    fontWeight: fontWeightBold
+  },
+  'hero-1': {
+    fontSize: fontSize8Xl,
+    lineHeight: lineHeight8Xl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-2': {
+    fontSize: fontSize7Xl,
+    lineHeight: lineHeight7Xl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-3': {
+    fontSize: fontSize6Xl,
+    lineHeight: lineHeight6Xl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-4': {
+    fontSize: fontSizeXxxxxl,
+    lineHeight: lineHeightXxxxxl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-5': {
+    fontSize: fontSizeXxxxl,
+    lineHeight: lineHeightXxxl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-6': {
+    fontSize: fontSizeXxxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'editorial-1': {
+    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+    fontSize: fontSizeXxxxl,
+    lineHeight: lineHeightXxxxl,
+    fontWeight: fontWeightLight
+  },
+  'editorial-2': {
+    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+    fontSize: fontSizeXxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightLight
+  },
+  'editorial-3': {
+    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLg,
+    fontWeight: fontWeightBook
+  }
+};
+
+/**
+ * Expands a textStyle token (or responsive object of tokens) into concrete
+ * CSS property values that can be spread directly onto a Chakra component.
+ *
+ * Supports:
+ * - Static values:     `textStyle="heading-3"` → `{ fontSize, lineHeight, fontWeight }`
+ * - Responsive objects: `textStyle={{ mobile: 'heading-5', desktop: 'heading-3' }}`
+ *   → `{ fontSize: { md: '...', '2xl': '...' }, lineHeight: { ... }, ... }`
+ *
+ * @param {any} value - A textStyle token string, responsive object, or undefined/null.
+ * @returns {Record<string, any>} An object of CSS props to spread, or an empty object if no match.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function expandTextStyleProps(value) {
+  if (value == null) return {};
+
+  // Responsive object: { mobile: 'heading-5', desktop: 'heading-3' }
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    // Normalise Backpack breakpoint keys to Chakra keys inline (avoids
+    // circular dependency on tokenUtils).
+    const normalized = {};
+    Object.entries(value).forEach(([key, val]) => {
+      if (key === 'base') {
+        normalized.base = val;
+      } else {
+        const chakraKey = BpkBreakpointToChakraKey[key];
+        if (chakraKey) {
+          normalized[chakraKey] = val;
+        }
+      }
+    });
+
+    // Pivot from { bp -> token } to { cssProp -> { bp -> cssValue } }
+    const result = {};
+    Object.entries(normalized).forEach(([bp, token]) => {
+      const style = TEXT_STYLE_MAP[String(token)];
+      if (!style) {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.warn(`Unknown textStyle token "${String(token)}" at breakpoint "${bp}".`);
+        }
+        return;
+      }
+      Object.entries(style).forEach(([cssProp, cssValue]) => {
+        if (!result[cssProp]) {
+          result[cssProp] = {};
+        }
+        result[cssProp][bp] = cssValue;
+      });
+    });
+    return result;
+  }
+
+  // Static string value
+  const style = TEXT_STYLE_MAP[String(value)];
+  if (!style) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn(`Unknown textStyle token "${String(value)}".`);
+    }
+    return {};
+  }
+  return {
+    ...style
+  };
+}

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

@@ -18,9 +18,17 @@
 
 import { defineConfig } from '@chakra-ui/react';
 
-// 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';
+// Import only the tokens needed for border/radius/shadow utilities.
+// Typography tokens have been moved to resolveTextStyle.ts where textStyle is
+// resolved inline, avoiding the need to bundle the full text style map in the
+// Chakra theme config.
+import {
+// Border sizes
+borderSizeSm, borderSizeLg, borderSizeXl,
+// Border radii
+borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
+// Box shadows
+boxShadowSm, boxShadowLg, boxShadowXl } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
@@ -100,9 +108,9 @@ const spacingMap = {
  * 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 +119,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 +132,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
 };
 
 /**
@@ -209,242 +217,6 @@ export function getBorderRadiusValue(token) {
 export function getShadowValue(token) {
   return shadowMap[token];
 }
-
-/**
- * Maps Backpack text style tokens to Chakra UI textStyles.
- * CSS property values are sourced from @skyscanner/bpk-foundations-web/tokens/base.es6.
- * Each entry mirrors the corresponding SCSS mixin in bpk-mixins/_typography.scss.
- */
-const textStylesMap = {
-  xs: {
-    value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  sm: {
-    value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  base: {
-    value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  lg: {
-    value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  xl: {
-    value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXl,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  xxl: {
-    value: {
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  xxxl: {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  xxxxl: {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxl,
-      fontWeight: bpkTokens.fontWeightBold,
-      letterSpacing: bpkTokens.letterSpacingTight
-    }
-  },
-  xxxxxl: {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxxl,
-      fontWeight: bpkTokens.fontWeightBold,
-      letterSpacing: bpkTokens.letterSpacingTight
-    }
-  },
-  caption: {
-    value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  footnote: {
-    value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  'label-1': {
-    value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'label-2': {
-    value: {
-      fontSize: bpkTokens.fontSizeSm,
-      lineHeight: bpkTokens.lineHeightSm,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'label-3': {
-    value: {
-      fontSize: bpkTokens.fontSizeXs,
-      lineHeight: bpkTokens.lineHeightXs,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'body-default': {
-    value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBase,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  'body-longform': {
-    value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  subheading: {
-    value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXl,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  },
-  'heading-1': {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'heading-2': {
-    value: {
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'heading-3': {
-    value: {
-      fontSize: bpkTokens.fontSizeXl,
-      lineHeight: bpkTokens.lineHeightXlTight,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'heading-4': {
-    value: {
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLgTight,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'heading-5': {
-    value: {
-      fontSize: bpkTokens.fontSizeBase,
-      lineHeight: bpkTokens.lineHeightBaseTight,
-      fontWeight: bpkTokens.fontWeightBold
-    }
-  },
-  'hero-1': {
-    value: {
-      fontSize: bpkTokens.fontSize8Xl,
-      lineHeight: bpkTokens.lineHeight8Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
-    }
-  },
-  'hero-2': {
-    value: {
-      fontSize: bpkTokens.fontSize7Xl,
-      lineHeight: bpkTokens.lineHeight7Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
-    }
-  },
-  'hero-3': {
-    value: {
-      fontSize: bpkTokens.fontSize6Xl,
-      lineHeight: bpkTokens.lineHeight6Xl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
-    }
-  },
-  'hero-4': {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
-    }
-  },
-  'hero-5': {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
-    }
-  },
-  'hero-6': {
-    value: {
-      fontSize: bpkTokens.fontSizeXxxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightBlack,
-      letterSpacing: bpkTokens.letterSpacingHero
-    }
-  },
-  'editorial-1': {
-    value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeXxxxl,
-      lineHeight: bpkTokens.lineHeightXxxxl,
-      fontWeight: bpkTokens.fontWeightLight
-    }
-  },
-  'editorial-2': {
-    value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeXxl,
-      lineHeight: bpkTokens.lineHeightXxl,
-      fontWeight: bpkTokens.fontWeightLight
-    }
-  },
-  'editorial-3': {
-    value: {
-      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
-      fontSize: bpkTokens.fontSizeLg,
-      lineHeight: bpkTokens.lineHeightLg,
-      fontWeight: bpkTokens.fontWeightBook
-    }
-  }
-};
 export function createBpkConfig() {
   // Convert breakpoint map to Chakra UI format
   // Breakpoints in Chakra v3 are typically simple strings in the breakpoints object
@@ -452,6 +224,12 @@ export function createBpkConfig() {
   Object.entries(breakpointMap).forEach(([token, value]) => {
     chakraBreakpoints[token] = value;
   });
+
+  // textStyles have been removed from the Chakra config to reduce bundle size.
+  // Text style resolution is now handled inline by resolveTextStyle.ts via
+  // expandTextStyleProps(), which expands textStyle tokens into concrete CSS
+  // properties at prop-processing time. This means layout-only consumers that
+  // never use textStyle pay nothing for the typography map.
   return defineConfig({
     // Disable Chakra's preflight (CSS reset) so it does not override Backpack's
     // global font styles, in particular the `-webkit-font-smoothing: antialiased`
@@ -462,7 +240,6 @@ export function createBpkConfig() {
       tokens: {
         spacing: spacingMap
       },
-      textStyles: textStylesMap,
       breakpoints: chakraBreakpoints
     }
   });

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

@@ -17,6 +17,7 @@
  */
 
 import StackOptionKeys from "./BpkStack.constant";
+import { expandTextStyleProps } from "./resolveTextStyle";
 import { getSpacingValue } from "./theme";
 import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
 
@@ -34,8 +35,6 @@ import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isVali
 export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   BpkBox: {
     container: [
-    // Typography
-    'textStyle',
     // Display
     'display',
     // Flex container props
@@ -52,14 +51,14 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
+    container: ['flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    container: ['justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
@@ -67,11 +66,11 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
     'gridColumn', 'gridRow']
   },
   BpkGridItem: {
-    container: ['textStyle', 'position', 'overflow', 'overflowX', 'overflowY']
+    container: ['position', 'overflow', 'overflowX', 'overflowY']
   },
   // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: ['textStyle', ...StackOptionKeys,
+    container: [...StackOptionKeys,
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY']
   }
@@ -108,18 +107,37 @@ function filterToAllowlist(props, allowlist) {
  */
 export function processBpkComponentProps(props, options) {
   const processed = processBpkProps(props);
+
+  // --- textStyle inline resolution ---
+  // textStyle is no longer part of the Chakra theme config. Instead we resolve
+  // it here into concrete CSS properties (fontSize, lineHeight, fontWeight, etc.).
+  // The value may come from:
+  //   - responsiveProps (BpkFlex, BpkGrid explicitly pass it)
+  //   - processed props (BpkBox, BpkStack pass it via ...props)
+  const textStyleValue = options.responsiveProps?.textStyle ?? processed.textStyle;
+  delete processed.textStyle;
+  // Strip textStyle from responsiveProps without mutating the original object.
+  const {
+    textStyle: _ts,
+    ...cleanResponsiveProps
+  } = options.responsiveProps ?? {};
+  const expandedTextStyle = expandTextStyleProps(textStyleValue);
   const allowlist = BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT[options.component];
   // When responsiveProps is provided (e.g. BpkFlex maps direction→flexDirection),
   // merge it with any allowlisted props already in `processed` (e.g. position/overflow
   // that come in via ...props and are NOT included in responsiveProps).
   // responsiveProps takes precedence so that explicit prop-name mappings always win.
   const processedAllowlisted = filterToAllowlist(processed, allowlist);
-  const responsiveSource = options.responsiveProps ? {
+  const hasResponsiveProps = Object.keys(cleanResponsiveProps).length > 0;
+  const responsiveSource = hasResponsiveProps ? {
     ...processedAllowlisted,
-    ...filterToAllowlist(options.responsiveProps, allowlist)
+    ...filterToAllowlist(cleanResponsiveProps, allowlist)
   } : processedAllowlisted;
   if (Object.keys(responsiveSource).length === 0) {
-    return processed;
+    return {
+      ...processed,
+      ...expandedTextStyle
+    };
   }
 
   // Ensure allowlisted layout props do NOT fall through unprocessed (e.g. array responsive values).
@@ -140,7 +158,11 @@ export function processBpkComponentProps(props, options) {
       delete responsiveProcessed[key];
     }
   });
+
+  // Expanded textStyle props are applied last so they don't get overridden by
+  // the responsive pipeline, but explicit CSS props from the user take precedence.
   return {
+    ...expandedTextStyle,
     ...cleanedProcessed,
     ...responsiveProcessed
   };

package/bpk-component-select/index.d.ts

@@ -0,0 +1,5 @@
+import BpkSelect, { type Props } from './src/BpkSelect';
+import themeAttributes from './src/themeAttributes';
+export type BpkSelectProps = Props;
+export default BpkSelect;
+export { themeAttributes };